This is a migrated thread and some comments may be shown as answers.

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

1 Answer 148 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Samyukta
Top achievements
Rank 1
Samyukta asked on 13 Aug 2018, 01:47 PM

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

 

 

1 Answer, 1 is accepted

Sort by
0
Tsvetina
Telerik team
answered on 15 Aug 2018, 08:40 AM
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
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Tags
Grid
Asked by
Samyukta
Top achievements
Rank 1
Answers by
Tsvetina
Telerik team
Share this question
or