Insert new row at a specific position

[Dan]

I have a grid where the rows are selectable and I need a way to add a new row above the selected row.

Is there an example on how to achieve this?

[Neli]

Hello Dan,

 

To achieve such behavior I would suggest you add a custom button in the Grid`s toolbar using a template.

 toolbar: [
        {
          template: '<button class="k-button k-button-md k-button-rectangle k-rounded-md k-button-primary tton-solid-primary" onclick="return toolbar_click()">custom Add Command</button>'
        },
        "create"
      ],

Find the index of the currently selected Grid row. Then, you could use the dataSource insert method.

 function toolbar_click(e) {
      var index = $('tr.k-selected').index(); 
      var grid = $("#grid").data("kendoGrid");
      var dataSource = grid.dataSource;
      var newItem = dataSource.insert(index, {});
      var newRow = grid.items().filter("[data-uid='" + newItem.uid + "']");
      grid.editRow(newRow);
    }

 

In the Dojo linked here the approach from above is demonstrated. 

Regards,
Neli
Progress Telerik

[Dan]

Hi Neli,

Thank you for the response. After digging deeper I also found that solution.

It would be good if his was converted in a "how to" article so that it can be easier to find. 

[Neli]

Hi Dan, 

There is such Knowledge Base article and below you will find a link to it.

- https://docs.telerik.com/kendo-ui/knowledge-base/grid-add-row-above-selected

The reason I did not sent the article, but only the snippets is that currently there is an issue in the KB. the following line should be updated to use the class according to the new rendering introduced in 2022 R1

 function toolbar_click(e) {
      var index = $('tr.k-state-selected').index(); //index of the selected row
      var grid = $("#grid").data("kendoGrid");
      var dataSource = grid.dataSource;
      var newItem = dataSource.insert(index, {});
      var newRow = grid.items().filter("[data-uid='" + newItem.uid + "']");
      grid.editRow(newRow);
    }

 The article will be updated and the used class will be 'k-selected'.

Regards,

Neli

[Dan]

Hi Neli,

Sorry about that. I was looking for inserting at a specific position and not add (because I thought that adding will provide me with the default functionality of the add button).

Thank you for the link to the knowledge base article.

[Neli]

Hi Dan,

I am glad to hear that the provided article and the suggestion were helpful. 
In case you have additional questions please let us know.

Regards,
Neli