Javascript crash when selecting all rows in grid

3 posts, 0 answers
  1. Zach
    Zach avatar
    14 posts
    Member since:
    Jul 2014

    Posted 09 Sep 2015 Link to this post

    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. Pavlina
    Admin
    Pavlina avatar
    6187 posts

    Posted 10 Sep 2015 Link to this post

    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
  3. Zach
    Zach avatar
    14 posts
    Member since:
    Jul 2014

    Posted 10 Sep 2015 Link to this post

    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

Back to Top