Exponential Javascript execution when loading grid with NumericColumns in Edit Mode

[Constantin]

Hi, 

we have a Grid with a couple of GridNumericColumns.
We want to load all rows in this Grid in edit mode when the page loads.

With about 50 items in the grid, the page loads relatively fast without about 1 seconds of Javascript execution measured in the Internet Explorer Developer Toolbar.

With 150 items there is noticeable lag in the browser after the items are displayed. Dev Toolbar profiler registers about 6 seconds of Javascript execution.

Wotj 250 items loaded the browser hangs on load, we get a long loading Javascript warning from Internet Explorer, and the profiler shows about 20 seconds of Javascript execution.

When removing the GridNumericColumns and replacing them with regular GridBoundColumns the rendering is blazing fast again (Profiler registers < 50ms of Javascript exeuction).

Here is sample code for you to reproduce the issue:

<telerik:RadScriptManager runat="server" ID="sm1">
       </telerik:RadScriptManager>

       <telerik:RadTextBox ID="itemcount" Label="ItemCount" runat="server"></telerik:RadTextBox>
       <asp:Button runat="server" OnClick="OnClick" Text="Reload"/>

       <telerik:RadGrid ID="grid" runat="server" Width="990px" EnableLinqExpressions="False"
           CellSpacing="0" DataSourceID="ObjectDataSource2" GridLines="None" OnPreRender="grid_OnPreRender" AllowMultiRowEdit="True">
           <FilterMenu EnableImageSprites="False">
           </FilterMenu>
           <MasterTableView AutoGenerateColumns="False" DataSourceID="ObjectDataSource2" AllowSorting="True" EditMode="InPlace">
               <CommandItemSettings ExportToPdfText="Export to PDF"></CommandItemSettings>
               <RowIndicatorColumn Visible="True" FilterControlAltText="Filter RowIndicator column">
               </RowIndicatorColumn>
               <ExpandCollapseColumn Visible="True" FilterControlAltText="Filter ExpandColumn column">
               </ExpandCollapseColumn>
               <Columns>
                   <telerik:GridNumericColumn DataField="Value1" FilterControlAltText="Filter Value1 column"
                       HeaderText="Value1" SortExpression="Value1" UniqueName="Value1" runat="server">
                   </telerik:GridNumericColumn>
                   <telerik:GridNumericColumn DataField="Value2" FilterControlAltText="Filter Value2 column"
                       HeaderText="Value2" SortExpression="Value2" UniqueName="Value2" runat="server">
                   </telerik:GridNumericColumn>
                   <telerik:GridNumericColumn DataField="Value3" FilterControlAltText="Filter Value2 column"
                       HeaderText="Value3" SortExpression="Value3" UniqueName="Value3" runat="server">
                   </telerik:GridNumericColumn>
                   <telerik:GridNumericColumn DataField="Value4" FilterControlAltText="Filter Value2 column"
                       HeaderText="Value4" SortExpression="Value4" UniqueName="Value4" runat="server">
                   </telerik:GridNumericColumn>
               </Columns>
               <EditFormSettings>
                   <EditColumn FilterControlAltText="Filter EditCommandColumn column">
                   </EditColumn>
               </EditFormSettings>
           </MasterTableView>
       </telerik:RadGrid>
       <asp:ObjectDataSource ID="ObjectDataSource2" runat="server" SelectMethod="GetObjects"
           TypeName="SimpleObjectProvider">
           <SelectParameters>
               <asp:ControlParameter runat="server" ControlID="itemcount" Type="Int32" Name="itemcount"/>
           </SelectParameters>
       </asp:ObjectDataSource>

 

protected void grid_OnPreRender(object sender, EventArgs e)
    {
        foreach (GridItem item in grid.Items)
        {
            item.Edit = true;
        }

        grid.Rebind();
    }

    protected void OnClick(object sender, EventArgs e)
    {
        grid.Rebind();
    }

public class SimpleObjectProvider
{
    public int itemcount = 100;

    /// <summary>
    /// Initializes a new instance of the <see cref="SimpleObjectProvider"/> class.
    /// </summary>
    public SimpleObjectProvider()
    {
    }

    /// <summary>
    /// Simple Select Method
    /// </summary>
    /// <returns>List of Objects</returns>
    public List<SimpleObject> GetObjects(int itemcount)
    {
        var simpleObjects = new List<SimpleObject>();

        for (int i = 1; i <= itemcount; i++)
        {
            simpleObjects.Add(new SimpleObject(i, i * i, 1m / i, 1.4m * i));
        }

        return simpleObjects;
    }
}

/// <summary>
/// A simple object
/// </summary>
public class SimpleObject
{

    public SimpleObject(decimal value1, decimal value2, decimal value3, decimal value4)
    {
        Value1 = value1;
        Value2 = value2;
        Value3 = value3;
        Value4 = value4;
    }

    public decimal Value4 { get; set; }

    public decimal Value3 { get; set; }

    public decimal Value1 { get; set; }

    public decimal Value2 { get; set; }
}

[Vasil]

Hi Constantin,

If you have a lot of numeric text boxes it is better to use asp:TextBox in combination with RadInputManager.  Use DataBound or Template column and add the settings dynamically on ItemCreated of the grid. See the following resources for more information:
http://www.telerik.com/help/aspnet-ajax/input-inputmanager-performance.html
http://www.telerik.com/help/aspnet-ajax/input-inputmanager-dynamic-inputsettings.html
http://www.telerik.com/help/aspnet-ajax/grid-accessing-cells-and-rows.html

All the best,
Vasil
the Telerik team