How to remove mutiple selected rows

4 posts, 0 answers
  1. Weiwei
    Weiwei avatar
    8 posts
    Member since:
    May 2018

    Posted 16 May Link to this post

    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")));
                });

            };

  2. Georgi
    Admin
    Georgi avatar
    368 posts

    Posted 17 May Link to this post

    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.
  3. Weiwei
    Weiwei avatar
    8 posts
    Member since:
    May 2018

    Posted 24 May in reply to Georgi Link to this post

    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.

  4. Georgi
    Admin
    Georgi avatar
    368 posts

    Posted 28 May Link to this post

    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.
Back to Top