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

Exponential Javascript execution when loading grid with NumericColumns in Edit Mode

1 Answer 113 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Constantin
Top achievements
Rank 1
Constantin asked on 22 Oct 2012, 07:05 AM
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; }
}


1 Answer, 1 is accepted

Sort by
0
Vasil
Telerik team
answered on 25 Oct 2012, 08:16 AM
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
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
Tags
Grid
Asked by
Constantin
Top achievements
Rank 1
Answers by
Vasil
Telerik team
Share this question
or