Issue with custom adding a new row on a groupable kendo grid after grouping

[Samyukta]

Hi Team,

I have a custom add new row button on each row, which adds a new row adjacent to the current row which works fine with the below js code:

        var grid = $("#grid").data("kendoGrid");
        customRowDataItem = this.dataItem($(e.currentTarget).closest("tr"));
        currentCommissionMemoId = customRowDataItem.uidCommissionMeemoBusiness;

        var idx = grid.dataSource.indexOf(customRowDataItem);
        console.log(idx);

        var newItem = grid.dataSource.insert(idx, {});
        var newRow = grid.items().filter("[data-uid='" + newItem.uid + "']");
        grid.editRow(newRow);

 

The issue is, I am trying to do the same after grouping the grid data using the drag and drop grouping option. The add new row acts weird after grouping,

1. New row is not added adjacent to the current row

2. When trying to add a new row in a different page (grid is pageable), does not add a new row at all. 

My primary intention is to add a new row inside the group after grouping the kendo grid data, is this possible?

 

Thank you in advance,

Sam

 

 

[Tsvetina]

Hi Samyukta,

In order to add an item in a certain group, it needs to have the respective group value applied to it. For example, if you group a Grid by a Category field and want a newly inserted item to show in a "Category A" group, then you need to set the item Category value to "Cateogory A". 
Here is how I would modify your logic to achieve this with dynamically added groups:

function insertItem(e){
  var grid = $("#grid").data("kendoGrid");
  var selectedModel = grid.dataItem(grid.select());
  var group = grid.dataSource.group();
  var idx = grid.dataSource.indexOf(selectedModel);
  console.log(idx);

  var newItem = {};

  if(group){
    if(Array.isArray(group)){
      for(var i = 0; i < group.length; i++){
        newItem[group[i].field] = selectedModel[group[i].field];
      }
    }
    else {
      newItem[group.field] = selectedModel[group.field];
    }
  }
  var model = grid.dataSource.insert(idx, newItem);
  var newRow = grid.items().filter("[data-uid='" + model.uid + "']");
  grid.editRow(newRow);
}

I prepared a client-side example using this code to demonstrate the result, it should be similar for the MVC Grid:
https://dojo.telerik.com/IWuHAwAw

With regard to adding a row to a different page, this could be happening if you haven't enabled client data operations. The MVC Grid does paging on the server by default, so the items on subsequent pages do not exist on the client. You can set ServerOperations(false) in the DataSource and then all data will be returned to the client and paged/sorted/filtered/grouped there.

Regards,
Tsvetina
Progress Telerik