Insert Array into Grid

4 posts, 1 answers
  1. Chris
    Chris avatar
    16 posts
    Member since:
    Dec 2015

    Posted 08 Feb 2016 Link to this post

    I have a page where the user is able to select objects from Grid A to either 1) insert them into Grid B or 2) insert them into Grid C. One way to expedite use of the page is we want to allow users to have a button that does "Add all Visible in Grid A to Grid B". I have some javascript that does here

     

    $("#addAllSelectedToGridB").click(function () {
        var gridA = $("#gridA").data("kendoGrid");
        var gridB = $("#gridB").data("kendoGrid");
        var gridBDatasource = gridB.dataSource;
        var alreadyInGridB = gridBDatasource.view();
     
        var itemsToBeAdded = new Array();
     
        gridA.select().each(function () {
            var dataItem = gridA.dataItem($(this));
     
            var result = $.grep(alreadyInGridB, function (e) { return e.ID == dataItem.ID; });
            if (result.length == 0) {
                itemsToBeAdded.push(dataItem);
            }
        });
     
        for (i = 0; i < itemsToBeAdded.length; i++) {
            gridBDatasource.insert(itemsToBeAdded[i].toJSON());
        }
    });

    This was working fine when we were displaying 25 items per page in Grid A. The customer has requested that we up that total to 300 and now an operation that took less than a second now takes 10-12 seconds.

    I tried looking through the grid documentation but I couldn't find an alternative method for inserting items into a gird. I'm just curious if there is a method explicitly for adding a collection of items that may possibly be more efficient?

    Thanks

  2.
  3. Chris
    Chris avatar
    16 posts
    Member since:
    Dec 2015

    Posted 08 Feb 2016 in reply to Chris Link to this post

    I forgot to mention that I have narrowed down the time cost to "gridBDatasource.insert", the rest of the code takes maybe a millisecond on average.
  5. Answer
    Radoslav
    Admin
    Radoslav avatar
    1566 posts

    Posted 10 Feb 2016 Link to this post

    Hello Chris,

    I assume that the performance hit is caused by the fact that when the insert function of the datasource is called the grid is refreshed and re-rendered. In your case with 300 rows the browser renders 300 times 300 rows, then 299 row, etc. and this takes a few seconds. To optimize this I suggest you to use following approach:
    Handle the databinding event and prevent it 299 times and let it to be executed only for the last (300) insertion. On the following link I attached a small example which demonstrates this approach:
    http://dojo.telerik.com/EZoma/3

    Please give it try and let me know if it helps you.

    Regards,
    Radoslav
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  7. Chris
    Chris avatar
    16 posts
    Member since:
    Dec 2015

    Posted 10 Feb 2016 in reply to Radoslav Link to this post

    That did the trick, thanks for your help.

    If anyone else runs into this issue:

    For me Grid B is constructed using the MVC HtmlHelper extension, so i just had to add

    .Events(e => e.DataBinding("gridBDataBinding"))

    and then the javascript was

    var gridBDatabindingEnabled = true;
    function gridBDataBinding(e)
    {
        if(!gridBDatabindingEnabled)
        {
            e.preventDefault();
        }
    }
     
    $("#addAllSelectedToGridB").click(function () {
        var gridA = $("#gridA").data("kendoGrid");
        var gridB = $("#gridB").data("kendoGrid");
        var gridBDatasource = gridB.dataSource;
        var alreadyInGridB = gridBDatasource.view();
      
        var itemsToBeAdded = new Array();
      
        gridA.select().each(function () {
            var dataItem = gridA.dataItem($(this));
      
            var result = $.grep(alreadyInGridB, function (e) { return e.ID == dataItem.ID; });
            if (result.length == 0) {
                itemsToBeAdded.push(dataItem);
            }
        });
      
        gridBDatabindingEnabled = false;
        for (i = 0; i < itemsToBeAdded.length; i++) {
            if(i === (itemsToBeAdded.length - 1))
            {
                gridBDatabindingEnabled = true;
            }
            gridBDatasource.insert(itemsToBeAdded[i].toJSON());
        }
    });

  8.
Back to Top