Is is possible to profile the internals of the grid databinding event?

[John]

I have a grid which I generate serverside, and bind clientside. I perform paging serverside. The grid has 14 columns, all of type string. I use the following snippet to bind data to the grid.

this.refreshGrid = function refreshGrid(result) {
    var gridView = $find(this.get_grid()).get_masterTableView();
    gridView.set_dataSource(result.Items);
    gridView.set_virtualItemCount(result.ItemCount);
    gridView.dataBind();
    gridView.updated();
};

where result.Items is in the format of:

var Items = [{ "Heading1": "Row1-1", "Heading2": "Row1-2", "Heading3": "Row1-3"},
            { "Heading1": "Row2-1", "Heading2": "Row2-2", "Heading3": "Row2-3"}];

With 14 headings, and however many rows (between 10 to 50 for a single page).

The problem I'm having is with the speed of binding. When binding 10 items, it takes a fraction of a second. Binding 20 items takes 2 seconds. Binding 50 items shoots up to 13 seconds, and well out of usability. I don't have any custom events tied to the databinding event, this is all internal processings, and I have absolutly no idea whats causing it.

Are there any tools I can use to profile the internals, to see exactly what is causing the binding to take so long?

[Genti]

Hi John,

Can you try to replace the:

    gridView.dataBind();

    gridView.updated();

with :

gridView.databind();

   
And see if you have the same performance issue.


Give it a try and let me know.

Best wishes,
Genti
the Telerik team

[John]

Removing the gridView.updated(); line didn't change the performance.

The performance issue only seems to occur the first time the grid is bound with 50 items. Either initially loading the page with paging set to 50 items per page, or switching from 10 items per page(IPP) causes the databind even to takes ~13 seconds. When paging through the grid after this, the databind event takes a fraction of a second. Even when moving down to 10 IPP, and then back up to 50, it only takes a fraction of a second.

Does this perhaps sound like an issue with the way the grid is being initialised? Code below.

private void BuildGrid(){
    myGrid = new RadGrid();
    myGrid.Width = Unit.Percentage(100);
    myGrid.ID = "ClientBoundGrid";
    myGrid.PageSize = numItems > 0 ? numItems : defaultPageSize;
    myGrid.PagerStyle.Mode = GridPagerMode.NextPrev;
    myGrid.PagerStyle.AlwaysVisible = numItems > 0 ? false : true;

    myGrid.MasterTableView.PagerStyle.AlwaysVisible = numItems > 0 ? false : true;
    myGrid.MasterTableView.AllowPaging = numItems > 0 ? false : true;
    myGrid.MasterTableView.PageSize = numItems > 0 ? numItems : defaultPageSize;
    myGrid.MasterTableView.AllowMultiColumnSorting = true;
    myGrid.AllowSorting = true;

    myGrid.ClientSettings.Selecting.AllowRowSelect = true;
    myGrid.AllowMultiRowSelection = true;

    myGrid.AutoGenerateColumns = false;
    AddColumns(ref myGrid);

    // client events
    myGrid.ClientSettings.ClientEvents.OnRowDataBound = "gridView.onRowDataBound";
    myGrid.ClientSettings.ClientEvents.OnCommand = "gridView.onCommand";

    //Add to page
    ContentDiv.Controls.Add(myGrid);
    mainDiv.Controls.Add(ContentDiv);
    RadAjaxPanel1.Controls.Add(mainDiv);

    myGrid.EnableEmbeddedSkins = false;
    myGrid.DataSource = new object[0];
    myGrid.Rebind();
}

private void AddColumns(ref RadGrid myGrid){

    GridBoundColumn boundColumn;
    boundColumn = new GridBoundColumn();
    boundColumn.DataField = "title";
    boundColumn.HeaderText = "Document title";
    boundColumn.DataType = typeof(System.String);
    myGrid.Columns.Add(boundColumn);
    //...For 16 more columns.
}

[Genti]

Hi John,

I am attaching a sample project that illustrates what you are trying to achieve.
I am defining the grid in a similar fashion of yours with some changes on the definition of the grid.
It loads pretty fast even on initial load.

Greetings,
Genti
the Telerik team