This is a migrated thread and some comments may be shown as answers.

Javascript crash when selecting all rows in grid

2 Answers 58 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Zach
Top achievements
Rank 1
Zach asked on 09 Sep 2015, 01:43 PM

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

2 Answers, 1 is accepted

Sort by
0
Pavlina
Telerik team
answered on 10 Sep 2015, 04:13 PM
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
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
0
Zach
Top achievements
Rank 1
answered on 10 Sep 2015, 05:30 PM

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

Tags
Grid
Asked by
Zach
Top achievements
Rank 1
Answers by
Pavlina
Telerik team
Zach
Top achievements
Rank 1
Share this question
or