Radgrid Creating lots of javascript

[Aetna]

Hi Guys,

We have a grid with 2 nested child grids. Originally we had used load on demand but the users wanted an auto-expand feature. So we have added an autoexpand function to loop through and expand where possible. The result is really slow and IE is throwing a "Stop running this script" warning.

I looked at the rendered code and noticed that there is a hell of a lot of javascript being created

Sys.Application.add_init(function() {
    $create(Telerik.Web.UI.RadGrid, {"ClientID":"ctl00_CPH1_m_radgrdLevelHICL_ctl00_ctl63_m_radgrdLevel1","ClientSettings":{"AllowAutoScrollOnDragDrop":true,"ShouldCreateRows":true,"DataBinding":{},"Selecting":{"CellSelectionMode":0},"Scrolling":{},"Resizing":{},"ClientMessages":{},"KeyboardNavigationSettings":{"AllowActiveRowCycle":false,"EnableKeyboardShortcuts":true,"FocusKey":89,"InitInsertKey":73,"RebindKey":82,"ExitEditInsertModeKey":27,"UpdateInsertItemKey":13,"DeleteActiveRow":127,"ExpandDetailTableKey":39,"CollapseDetailTableKey":37},"Animation":{}},"Skin":"Default","UniqueID":"ctl00$CPH1$m_radgrdLevelHICL$ctl00$ctl63$m_radgrdLevel1","_activeRowIndex":"","_controlToFocus":"","_currentPageIndex":0,"_editIndexes":"[]","_embeddedSkin":true,"_gridTableViewsData":"[{\"ClientID\":\"ctl00_CPH1_m_radgrdLevelHICL_ctl00_ctl63_m_radgrdLevel1_ctl00\",\"UniqueID\":\"ctl00$CPH1$m_radgrdLevelHICL$ctl00$ctl63$m_radgrdLevel1$ctl00\",\"PageSize\":10,\"PageCount\":1,\"EditMode\":\"EditForms\",\"AllowPaging\":false,\"CurrentPageIndex\":0,\"VirtualItemCount\":0,\"AllowMultiColumnSorting\":false,\"AllowNaturalSort\":true,\"AllowFilteringByColumn\":false,\"PageButtonCount\":10,\"HasDetailTables\":false,\"HierarchyLoadMode\":\"Client\",\"PagerAlwaysVisible\":false,\"IsItemInserted\":false,\"clientDataKeyNames\":[],\"_dataBindTemplates\":false,\"_selectedItemStyle\":\"\",\"_selectedItemStyleClass\":\"rgSelectedRow\",\"_columnsData\":[{\"UniqueName\":\"ExpandColumn\",\"Resizable\":false,\"Reorderable\":false,\"Selectable\":false,\"Groupable\":false,\"ColumnType\":\"GridExpandColumn\",\"DataTypeName\":\"System.String\",\"ExpandImageUrl\":\"\",\"CollapseImageUrl\":\"\",\"Display\":true},{\"UniqueName\":\"CheckboxColumn\",\"Resizable\":true,\"Reorderable\":true,\"Selectable\":true,\"Groupable\":true,\"ColumnType\":\"GridTemplateColumn\",\"DataTypeName\":\"System.String\",\"DataField\":\"\",\"Display\":true},{\"UniqueName\":\"LinkButtonColumn\",\"Resizable\":true,\"Reorderable\":true,\"Selectable\":false,\"Groupable\":false,\"ColumnType\":\"GridButtonColumn\",\"DataTypeName\":\"System.String\",\"ButtonType\":\"LinkButton\",\"CommandName\":\"Redirect\",\"CommandArgument\":\"\",\"Text\":\"\",\"DataTextField\":\"CodeNumber\",\"DataTextFormatString\":\"\",\"ImageUrl\":\"\",\"Display\":true},{\"UniqueName\":\"CodeNumber\",\"Resizable\":true,\"Reorderable\":true,\"Selectable\":true,\"Groupable\":true,\"ColumnType\":\"GridBoundColumn\",\"DataTypeName\":\"System.String\",\"DataField\":\"CodeNumber\",\"Display\":true},{\"UniqueName\":\"CodeName\",\"Resizable\":true,\"Reorderable\":true,\"Selectable\":true,\"Groupable\":true,\"ColumnType\":\"GridBoundColumn\",\"DataTypeName\":\"System.String\",\"DataField\":\"CodeDescription\",\"Display\":true},{\"UniqueName\":\"Type\",\"Resizable\":true,\"Reorderable\":true,\"Selectable\":true,\"Groupable\":true,\"ColumnType\":\"GridBoundColumn\",\"DataTypeName\":\"System.String\",\"DataField\":\"Type\",\"Display\":true},{\"UniqueName\":\"IngestDate\",\"Resizable\":true,\"Reorderable\":true,\"Selectable\":true,\"Groupable\":true,\"ColumnType\":\"GridBoundColumn\",\"DataTypeName\":\"System.String\",\"DataField\":\"IngestDate\",\"Display\":true},{\"UniqueName\":\"AddElementColumn\",\"Resizable\":true,\"Reorderable\":true,\"Selectable\":true,\"Groupable\":true,\"ColumnType\":\"GridTemplateColumn\",\"DataTypeName\":\"System.String\",\"DataField\":\"\",\"Display\":true},{\"UniqueName\":\"DeleteColumn\",\"Resizable\":true,\"Reorderable\":true,\"Selectable\":true,\"Groupable\":true,\"ColumnType\":\"GridTemplateColumn\",\"DataTypeName\":\"System.String\",\"DataField\":\"\",\"Display\":true}]}]","_hierarchySettings":{"ExpandTooltip":"Expand","CollapseTooltip":"Collapse","SelfExpandTooltip":"Self reference expand","SelfCollapseTooltip":"Self reference collapse","ViewState":{}},"_masterClientID":"ctl00_CPH1_m_radgrdLevelHICL_ctl00_ctl63_m_radgrdLevel1_ctl00","_shouldFocusOnPage":false,"allowMultiRowSelection":false,"clientStateFieldID":"ctl00_CPH1_m_radgrdLevelHICL_ctl00_ctl63_m_radgrdLevel1_ClientState"}, null, null, $get("ctl00_CPH1_m_radgrdLevelHICL_ctl00_ctl63_m_radgrdLevel1"));
});

That code is generated for every child and grandchild grid, can someone explain to me whats happening here and if there is anything I can do to prevent it?

Regards
Ross

[Marin]

Hello,

 This is the $create method of the ajax framework. It is a vital part of every ajax control because it makes the connection between the server and client-side objects of the control and serializes their properties so that the settings applied on the server are also available on the client and vice versa. The more ajax controls you have on a page the more $create methods are generated so that the relevant client objects of the controls can be properly created. Also the more settings these controls have the longer will be the code in the $create method (because more properties will have to be serialized on the client).
If you try to render a page that has too many ajax controls (e.g. more than 100) it is possible that the excessive amount of client-side objects created may not be handled very well by older browsers (which eventually causes the mentioned error).
That's why it is recommended to keep the amount of ajax controls on the page as low as possible. For example using hierarchy with DetailTables instead of nested grids and preserving the load on demand feature which great alleviates performance, you can also remove any unnecessary client-side settings which are additionally serialized with the $create method.

Regards,
Marin
the Telerik team