Delete rows from Kendo Grid with Pagination

2 posts, 0 answers
  1. Mohammad
    Mohammad avatar
    1 posts
    Member since:
    Aug 2016

    Posted 08 Aug Link to this post

     have a kendo grid(with pagination Enabled) with some entries. Say, I have 5 pages and I have selected(clicked on checkbox) one row from each page and then clicked on top level action DELETE. I am not able to figure out how to delete the entries from the grid and the data source?
    I tried below code, which deletes the entries from the page which is visible in the grid (on screen)

    var grid = $("#grid").data("kendoGrid");
    var userSelectionInfo = usersService.getUserSelectionInfo();
     
    for(var userName in userSelectionInfo) {
        if(userSelectionInfo[userName]) {
                var selector = '#' + userName+ '_actions';                
                grid.removeRow($(selector).closest('tr'));
         }
    }

    I tried one more approach:
    I created an array of objects which will remain after deletion operation from the original array of objects and then added into the grid data source.

    var newData = [];
    var userSelectionInfo = usersService.getUserSelectionInfo();
    for(var i = 0; i < users.length; i++) {
            if(users[i].userName&& !userSelectionInfo[users[i].userName]) {            
                  newData.push(users[i]);
            }
    }    
    loadUsersIntoGrid(newData);
    Is there any better approach or kendo API which I am missing? Thanks in advance.

  2. Stefan
    Admin
    Stefan avatar
    276 posts

    Posted 11 Aug Link to this post

    Hello Mohammad,

    The checked rows from different pages in the Grid can be deleted using the remove method of the Kendo UI DataSource, or its pushDestroy method. The difference between pushDestroy and remove is that items removed via remove are synced with the remote service:

    http://docs.telerik.com/kendo-ui/api/javascript/data/datasource#methods-remove

    http://docs.telerik.com/kendo-ui/api/javascript/data/datasource#methods-pushDestroy

    I can suggest preserving the selection between pages in an array. A similar approach for saving the items in an array can be found at:

    http://docs.telerik.com/kendo-ui/controls/data-management/grid/how-to/Selection/grid-selection-checkbox

    Also, please make sure that the CRUD (Create, Read, Update, Destroy) data operations of the DataSource are set up. The article explains what request parameter the DataSource transport sends to the server and what is the expected server response:

    http://docs.telerik.com/kendo-ui/framework/datasource/crud

    I hope this is helpful.

    Regards,
    Stefan
    Telerik by Progress
     
    Get started with Kendo UI in days. Online training courses help you quickly implement components into your apps.
     
  3. Kendo UI is VS 2017 Ready
Back to Top