How to remove mutiple selected rows

1 Answer 3133 Views
Grid
Weiwei
Top achievements
Rank 1
Weiwei asked on 16 May 2018, 03:11 PM

I use below code to remove the selected rows in grid. But every time when I click a button to call this method, it only remove one row, not all selected rows. Am I missing something?

 function RemoveRecords() {
            var gridAdditive = $("#gridEdit").data("kendoGrid");
            gridAdditive.select().each(function () {
                gridAdditive.dataSource.remove(gridAdditive.dataItem($(this).closest("tr")));
            });

        };

1 Answer, 1 is accepted

Sort by
0
Georgi
Telerik team
answered on 17 May 2018, 06:42 AM
Hi Weiwei,

Thanks for the provided code.

The issue is caused since the first time the remove method is called the change event of the dataSource is triggered and the grid is rebound to the updated data in the dataSource. Due to the rebound new tr elements are generated and therefore the rows in the RemoveRecords function are no longer from the grid. In other words after the first deletion, the dataItem method will not return the actual record.

A possible solution is to use the selectedKeyNames method as it returns the ids of the selected items instead of the actual tr element.

e.g.

function deleteRows(){
  var gridAdditive = $("#grid").data("kendoGrid");
  gridAdditive.selectedKeyNames().forEach(function (x) {
  var item = gridAdditive.dataSource.get(x);
    gridAdditive.dataSource.remove(item);
  });
}

Below you will find a sample which demonstrates the above approach:


Please note that it is necessary to specify which field of the model is its id in dataSource.schema.model.


Regards,
Georgi
Progress Telerik
Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Weiwei
Top achievements
Rank 1
commented on 24 May 2018, 02:38 PM

Hi Georgi,

Thanks for your response. After change the code, I get an error message that "Uncaught TypeError: Cannot read property 'selectedKeyNames' of null". It seems that the selectedKeyNames are null. Following is the schema.model, I have set id.

                               schema: {
                       model: {
                           id: "Id",
                           fields: {
                               SupplierName: { type: "string" },
                               ContactInfor: { type: "string" },
                               Address: { type: "string" },
                               Certificate: { type: "string" },
                               License: { type: "string" }
                           }
                       }
                   },
                       },

 

And following is my data source for Grid.

             function AddDataSource() {
           var gridAdditive = $("#gridEdit").data("kendoGrid");
           datasourceForEdit = gridAdditive.dataSource;
           datasourceForEdit.insert({
               Id:1,
               SupplierName: "AA",
               ContactInfor: "AAA",
               Address: "AAAA",
               Certificate: "AAAAA",
               License: "AAAAAA"
           });
           datasourceForEdit.insert({
               Id: 2,
               SupplierName: "BB",
               ContactInfor: "BBB",
               Address: "BBBB",
               Certificate: "BBBBB",
               License: "BBBBBB"
           });
           datasourceForEdit.insert({
               Id: 3,
               SupplierName: "c",
               ContactInfor: "cc",
               Address: "ccc",
               Certificate: "cccc",
               License: "ccccc"
           });
           //datasourceOfAdditive = JSON.stringify($("#gridAdditive").data().kendoGrid.dataSource.view());
       };

 

 

This time, after I click the delete button, nothing occurs. No records in removed from grid even I have selected them. Am I still missing something?

 

Thanks.

Georgi
Telerik team
commented on 28 May 2018, 05:55 AM

Hi Weiwei,

The error states that the instance of the grid is null.

Could you please make sure that before the selectedKeyNames method is called the reference to the grid widget is not null?/

Furthermore, you can use the following sample as a reference to implement the functionality:



Regards,
Georgi
Progress Telerik
Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Bill
Top achievements
Rank 1
commented on 29 Aug 2019, 03:50 PM

This solved my issue of only deleting the first row.  However, the second time a user tries to select and delete a group of rows, it does nothing.  Your dojo example behaves the same way.  Is there a way around this?  I have tried to reload the page with jquery, but that does not even work.  Only hitting the refresh button from the browser seems to reset so the user can delete again.
Georgi
Telerik team
commented on 02 Sep 2019, 08:26 AM

Hello Bill,

Thanks for pointing that out. It is also necessary to remove the selected items from the _selectedIds object.

e.g.

function deleteRows(){
  var gridAdditive = $("#grid").data("kendoGrid");
  gridAdditive.selectedKeyNames().forEach(function (x) {
    var item = gridAdditive.dataSource.get(+x);
    delete gridAdditive._selectedIds[+x]
    gridAdditive.dataSource.remove(item);
  });
}

Below you will find a modified version of the sample:



Regards,
Georgi
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
Weiwei
Top achievements
Rank 1
Answers by
Georgi
Telerik team
Share this question
or