Javascript crash when selecting all rows in grid

[Zach]

I have a RadGrid:

<telerik:RadGrid ID="radgridMachines" runat="server"
    AllowSorting="True"
    AllowMultiRowSelection="true"
    AutoGenerateColumns="False"
    OnNeedDataSource="radgridMachines_NeedDataSource"
    OnItemDataBound="radgridMachines_ItemDataBound"
    EnableViewState="false">
    <ClientSettings EnablePostBackOnRowClick="false">
        <Selecting AllowRowSelect="true" UseClientSelectColumnOnly="true" />
        <Scrolling AllowScroll="true" UseStaticHeaders="true" />
        <Resizing AllowColumnResize="true" ResizeGridOnColumnResize="true" AllowResizeToFit="true" />
        <ClientEvents OnGridCreated="SelectAndResizeAllRows" OnRowSelected="TogglePrintControls" OnRowDeselected="TogglePrintControls" />
    </ClientSettings>
    <GroupingSettings CaseSensitive="false" />
    <SortingSettings />
    <MasterTableView DataKeyNames="CustomerID, CustomerName, PlantNumber, Route, MachineNumber, PlantName, MachineName, CustomerEquipmentID, TestPackage, PointID, Lubricant"
        ClientDataKeyNames=""
        AllowMultiColumnSorting="true">
        <Columns>
            <%--Fit to Contents--%>
            <telerik:GridBoundColumn UniqueName="CustomerNumber" DataField="CustomerID" DataType="System.Int32" HeaderText="Cust #" HeaderStyle-Width="60px"></telerik:GridBoundColumn>
            <telerik:GridBoundColumn UniqueName="PlantNumber" DataField="PlantNumber" DataType="System.Int32" HeaderText="Plant #" HeaderStyle-Width="60px"></telerik:GridBoundColumn>
            <telerik:GridBoundColumn UniqueName="MachineNumber" DataField="MachineNumber" DataType="System.Int32" HeaderText="Mach #"HeaderStyle-Width="60px"></telerik:GridBoundColumn>
            <telerik:GridClientSelectColumn UniqueName="SelectColumn" ItemStyle-HorizontalAlign="Center" HeaderStyle-HorizontalAlign="Center"HeaderStyle-Width="60px" />
            <%--Fit to Contents--%>

            <telerik:GridBoundColumn UniqueName="RouteNumber" DataField="Route" HeaderText="Route" ItemStyle-HorizontalAlign="Center"HeaderStyle-HorizontalAlign="Center"></telerik:GridBoundColumn>
            <telerik:GridBoundColumn UniqueName="PlantName" DataField="PlantName" HeaderText="Plant Name" ItemStyle-HorizontalAlign="Center"HeaderStyle-HorizontalAlign="Center"></telerik:GridBoundColumn>
            <telerik:GridBoundColumn UniqueName="MachineName" DataField="MachineName" HeaderText="Machine Name" ItemStyle-HorizontalAlign="Center" HeaderStyle-HorizontalAlign="Center"></telerik:GridBoundColumn>
            <telerik:GridBoundColumn UniqueName="CustomerEquipmentID" DataField="CustomerEquipmentID" HeaderText="Machine ID" ItemStyle-HorizontalAlign="Center" HeaderStyle-HorizontalAlign="Center"></telerik:GridBoundColumn>
            <telerik:GridBoundColumn UniqueName="TestPackage" DataField="TestPackage" HeaderText="Test Package" ItemStyle-HorizontalAlign="Center" HeaderStyle-HorizontalAlign="Center"></telerik:GridBoundColumn>

            <telerik:GridBoundColumn DataField="PointID" Visible="false"></telerik:GridBoundColumn>
        </Columns>
    </MasterTableView>
</telerik:RadGrid>

When I load 2600 rows, the browser gives me the following error:

"A script on this page may be busy, or it may have stopped responding. You can stop the script now, open the script in the debugger, or let the script continue.  Script: http://localhost:50820/ScriptR…8-VKUfdnFfZq18eaxA2&t=7c776dc1:652"

The OnGridCreated event looks like this:

function SelectAndResizeAllRows(sender, eventArgs) {
    var rows = $find('<%= radgridMachines.ClientID%>').get_masterTableView().get_dataItems();

    for (var i = 0; i < rows.length; i++) {
        rows[i].set_selected(true);
    }

    var grid = $find("<%= radgridMachines.ClientID %>");
    var columns = grid.get_masterTableView().get_columns();
    for (var i = 0; i < 4; i++) { //columns.length
        columns[i].resizeToFit(false, true);
    }
}

If I remove the first for loop, the grid loads properly.  But I need to support selecting all rows.  Is there another way to accomplish this?  Why can't the grid handle this?

Thanks

[Pavlina]

Hi,

I noticed that you have opened support ticket with the same question which is already replied by my colleague Konstantin. In order to avoid duplicate posts I will ask you to continue your communication there.

Regards,
Pavlina
Telerik

[Zach]

I received a reply from Telerik support.  Here's what they said:

 Hello Zach,

Thank you for contacting us.

The initial selecting of all items is expected to be a slow operation, especially when you have such huge amount of DOM elements generated on the page. Additionally, when you call the get_dataItems method of the MasterTableView, the client objects of the GridDataItems will be generated for the first time, which for 2600 items is also a slow operation.

Please note that for such amount of records it is recommended to enable the paging functionality of the grid and allow it to render the items for the current page only. This will not only increase the performance, but it will also provide a better experience to the end user.

Notwithstanding, if you for some reason need to keep the grid without paging, but still select all items initially, you can achieve this from the code-behind and the OnPreRender event of the grid:

protected void RadGrid1_PreRender(object sender, EventArgs e)
{
    if (!Page.IsPostBack)
    {
        foreach (GridDataItem item in RadGrid1.Items)
        {
            item.Selected = true;
        }
    }
}

Then, within the client-side OnGridCreated event you can have only the following:

function SelectAndResizeAllRows(sender, eventArgs) {
    sender.get_masterTableView().get_dataItems();
    var grid = sender;
    var columns = grid.get_masterTableView().get_columns();
    for (var i = 0; i < 4; i++) { //columns.length
        columns[i].resizeToFit(false, true);
    }
}

If any other questions arise on this matter, please feel free to contact us again.


Regards,
Konstantin Dikov 
Telerik