Kendo Grid - Add New Item after sorting issues

Question

I am using Kendo UI v2014.1.528

Binding data in Kendo Grid like below

 $("#list485").kendoGrid({
                dataSource: dataSource,
                sortable: true,
                columns: [
                    //Column List
                ]
               );

It gives me a grid with "Sort" and "Add New Record" feature.

If i click on "Add New Record" button, it adds an empty record in the first row of the grid. This is fine.

But if i sort the grid on any column and then click on "Add New Record" button, the empty row for new record gets added somewhere in between the existing rows.

Can someone help me understand and fix this issue?

Answer 1

You can clear the sorting or filtering from the Kendo grid while clicking on the custom Add button. I have added the Razor code

1. Code to add a custom Add button to catch the Javascript

   .ToolBar(toolbar =>{                        toolbar.Custom().Name("cmdAddRecord")
                   .Text("Add New Record")
                   .HtmlAttributes(new { @id = "cmdAddRecord"   }); })
   

2. Javascript to clear the sorting and filtering.

   $("#cmdAddRecord").click(function (e) {
   
       var grid= $("#Grid").data("kendoGrid");
       var sorting = grid.dataSource.sort();
       var filtering = grid.dataSource.filter();
       if (filtering) {
           grid.dataSource.filter(null);
       }
       if (sorting) {
           grid.dataSource.sort(null);
       }
       grid.addRow();
       e.preventDefault();
   
   });