Kendo Grid removeRow not deleting rows of other pages

[Naga]

Hi 

I have a grid with check box, on checking the checkbox and clicking a button on the screen, i want to remove the selected row.

i am using the below code, everything works fine if i have only one page but if i have multiple pages in grid, the other pages selected rows are not deleted.

This code is written in the click event of button.

        var grid = $("#grdSelect").data("kendoGrid");

        grid.tbody.find("input:checked").closest("tr").each(function (index) {
            grid.removeRow($(this).closest('tr'));
        });
        grid.refresh();

Please help.

[Naga]

Also my grid has huge dataset, with an average record count of 1000- 10000 records. I am looking for a performance efficient way to clear records on selection.

[Boyan Dimitrov]

Hello Naga,

 

The removeRow method actually removes the specified table row from the grid. The grid table is rendered only for the view of the Kendo UI DataSource (only for current page). Table rows are not rendered for all pages, but only for the current one. Could you please share your configuration code for the Kendo UI Grid and its DataSource in order to determine whether server operations are enabled? 

 

Regards,
Boyan Dimitrov
Telerik

 

 

[Naga]

var MyGrid= $("#grdScanAssets").kendoGrid({
        dataSource: {
            type: "json",
            transport: {
                read:
                    {
                        url: 
                        cache: false
                    }
            },
            schema: {
                model: {
                    fields: {
                        id: { type: "string" },
                        vALUE: { type: "string" },

OTHER MODEL ITEMS...
                    }
                }
            },

            serverPaging: false,
            serverFiltering: false,
            serverSorting: false
        },

        resizable: true,
        reorderable: true,
        columns: [
        { field: "ID", title: "Asset ID", width: "100px" },
        { field: "vALUE", title: "aSSET vALUE", width: "100px" },


Other Columns...

        ],
                columnResize: function (e) {
                    onResize_tab(e, 'grdScanAssets');
                },
                columnReorder: function (e) {
                    onReorder_tab(e, 'grdScanAssets');
                },
                dataBound: function (e) {
                    onScanDataBound(e);
                }
    }).data("kendoGrid");



Below code is used to clear rows based on selection

var grid = $("#grdScanAssets").data("kendoGrid");
grid.tbody.find("input:checked").closest("tr").each(function (index) {
grid.removeRow($(this));
});


I also need to clear the entire grid when nothing is selected , please help with this too

[Petyo]

Hi,

going to a different page re-renders the grid contents, so the checkboxes there don't exist for the jquery selector to pick. You should consider a different approach for the task at question. 

as per your second question - clearing the entire grid most likely means that you want to delete all records. This sounds like a task that should be pefromed at the server. I would not recommend that you try to do that through the grid, or, for that matter through the datasource itself. Rather, you can create a separate end point for your service and call it for that particular case. 

Regards,
Petyo
Telerik

 

 

[Naga]

Hi Petyo, 

Can you provide an example or suggest different approach ? 

My requirement is - when user selects a grid row using checkbox and clicks on clear button at the end of page, the selected items should be removed from the grid. My grid is huge, i am expecting a performance efficient way.

[Boyan Dimitrov]

Hello Naga,

 

The tricky part in this case is that the serverPaging is enabled. This means that only the current portion of items (data items for the current page) are available on the client-side. If there are items on different pages that should be deleted this operation have to be performed on the server. 

 

A possible solution could be to store some information (id for example) of the checked items. When user wants to delete those items to make a request to the server sending the stored information and perform the delete operation on the server. 

 

Regards,
Boyan Dimitrov
Telerik