Selecting rows on several pages

2 posts, 0 answers
  1. Gregory
    Gregory avatar
    3 posts
    Member since:
    Oct 2013

    Posted 11 Dec 2013 Link to this post


    In one of my projects I have to display a Popup window with a grid (it is binded to a remote data source), allow the user to select
    multiple rows from any of the grid's pages and copy them to another grid datasource when the user hit a button.

    I have almost succeed in the way:
    •  I'm able to display both grid
    • I have added a checkbox to each row to allow users to select rows
    • store the Ids of my selected rows in a json string 
    • restore selection when user move from one page to another
    • Get the list of selected Ids
    The problem I have now is that I'm able to copy to the target datasource only the data items of the current page.
    Herebelow is the javascript function I use to copy data item:

    function moveTo(from, to) {
        for (var i in checkedIds) {
            var isFound = to.dataSource.get(checkedIds[i]);
            if (checkedIds[i] != "") {
                if (isFound == undefined) {
                    // Set 'From' Datasource to the correct page
                    var ItemIdx = i % from.dataSource.pageSize();
                    var PageNb = ((i - (ItemIdx)) / from.dataSource.pageSize()) + 1;
                    //alert("Item: " + ItemIdx + " Page: " + PageNb);
                    var view = from.dataSource.view();
                    var item = view[ItemIdx];

    When copying item from a not displayed page, the item from the current page, with the same index is copied instead
    Note that the ItemIdx and PageNb are correct, this was double checked.

    what am I doing wrong ?

  2. Dimo
    Dimo avatar
    8475 posts

    Posted 12 Dec 2013 Link to this post

    Hi Gregory,

    If I understand you correctly, you are trying to page the "from" dataSource to the correct page, where the desired data item is, then take the item and add it to the "to" dataSource. However, you are missing the fact that the page change executes an asynchronous remote request. In other words, the last three lines of code are executed too early.

    Probably a more effective approach would be to obtain all desired data items with a single request via filtering.

    You will have to take into consideration the time needed to fetch all items, so the copying should occur in the "to" datasource's change event.

    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Back to Top