Insert Array into Grid

[Chris]

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

[Chris]

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.

[Radoslav]

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

 

 

[Chris]

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());
    }
});