Kendo Grid removeRow not deleting rows of other pages

7 posts, 0 answers
  1. Naga
    Naga avatar
    25 posts
    Member since:
    Jul 2015

    Posted 27 Feb 2016 Link to this post

    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.

  2. Naga
    Naga avatar
    25 posts
    Member since:
    Jul 2015

    Posted 27 Feb 2016 in reply to Naga Link to this post

    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.
  3. Boyan Dimitrov
    Admin
    Boyan Dimitrov avatar
    2062 posts

    Posted 01 Mar 2016 Link to this post

    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
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  4. Naga
    Naga avatar
    25 posts
    Member since:
    Jul 2015

    Posted 02 Mar 2016 in reply to Boyan Dimitrov Link to this post

    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
  5. Petyo
    Admin
    Petyo avatar
    2444 posts

    Posted 04 Mar 2016 Link to this post

    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
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  6. Naga
    Naga avatar
    25 posts
    Member since:
    Jul 2015

    Posted 09 Mar 2016 in reply to Petyo Link to this post

    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.

  7. Boyan Dimitrov
    Admin
    Boyan Dimitrov avatar
    2062 posts

    Posted 11 Mar 2016 Link to this post

    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
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
Back to Top