Telerik Grid Version: Telerik Grid ASP. NET AJAX Q1 2010 SP1
Requirements:
We need to build a self-referencing RadGrid with custom columns (ca 200 - 500 columns), inline editing and yahoo scrolling (ca 500 - 5000 rows).
- Why Custom columns
The grid datasource should have 24 x 5 = 120 columns at least but the grid itself should show at least 24 columns (2 years = 2 x 12 months).
However, each row should show the content of 5 fields (that's why we need overall 24 x 5 = 120 columns).
- Why inline Edit
The user should be able to edit only 1 of the 5 fields per row. We tried double edit click, but for performance reason, it didnt work well.
- Why yahoo scrolling
To improve performance and for better usability, the user shouldnt wait before all the rows are rendered before editing them.
- Why self-referencing
The grid shows tasks with level and outline numbers. The user want to see a hierarchy, so he can collapse/expand task from any level.
See the picture "preview" in attachment to see how the grid currently looks
Problem:
We could successfully implement the grid with custom column, inline editing and yahoo scrolling. Everything so far is working fine.
Our only problem now is to make the grid self-referencing.
When trying this, we have an Error "System.OutOfMemoryException".
When debugging, we found that, this error occurs just after RadGrid1_NeedDataSource in RadGrid1_ColumnCreated
We suspect that the problem has to do with the huge amount of columns (around 100) and the fact that we enable self-referencing.
Any Idea or suggestions?
Code:
The grid is created programmatically because the columns are created dynamically.
aspx : The grid will be later added in PlaceHolder1
<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" OnAjaxRequest="RadAjaxManager1_AjaxRequest"> <AjaxSettings> <telerik:AjaxSetting AjaxControlID="RadGrid1"> <UpdatedControls> <telerik:AjaxUpdatedControl ControlID="RadGrid1" LoadingPanelID="RadAjaxLoadingPanel1"/> <telerik:AjaxUpdatedControl ControlID="Label1" /> </UpdatedControls> </telerik:AjaxSetting> <telerik:AjaxSetting AjaxControlID="RadAjaxManager1"> <UpdatedControls> <telerik:AjaxUpdatedControl ControlID="RadGrid1" LoadingPanelID="RadAjaxLoadingPanel1" /> </UpdatedControls> </telerik:AjaxSetting> </AjaxSettings> <ClientEvents /> </telerik:RadAjaxManager> <telerik:RadAjaxLoadingPanel runat="server" ID="RadAjaxLoadingPanel1" Height="75px" Width="75px" Transparency="25"/> <telerik:RadAjaxPanel runat="server" ID="RadAjaxPanel1" LoadingPanelID="RadAjaxLoadingPanel1"> <asp:PlaceHolder runat="server" ID="PlaceHolder1" > </asp:PlaceHolder> <br /> <asp:Label ID="L_Text_LastChange" runat="server" Text="Last change on: " CssClass="labelText"></asp:Label> </telerik:RadAjaxPanel>page_init
protected void Page_Init(object sender, EventArgs e) { RadGrid1.ID = "RadGrid1"; RadGrid1.AllowMultiRowEdit = true; RadGrid1.AllowMultiRowSelection = true; RadGrid1.GroupingEnabled = true; RadGrid1.Skin = "Windows7"; RadGrid1.Width = Unit.Percentage(97); //the initial amount of rows to show RadGrid1.PageSize = 20;//20 RadGrid1.AllowPaging = true; RadGrid1.AllowSorting = true; RadGrid1.PagerStyle.Mode = GridPagerMode.NextPrevAndNumeric; RadGrid1.AutoGenerateColumns = false; RadGrid1.GridLines = GridLines.None; RadGrid1.ShowFooter = false; //PagerStyle RadGrid1.PagerStyle.Visible = false; //MasterTableView RadGrid1.MasterTableView.TableLayout = GridTableLayout.Fixed; RadGrid1.MasterTableView.AutoGenerateColumns = true; RadGrid1.MasterTableView.EditMode = GridEditMode.InPlace; //ClientSettings RadGrid1.ClientSettings.Scrolling.ScrollHeight = Unit.Pixel(350);//350 //Yahoo Scrolling RadGrid1.ClientSettings.Scrolling.AllowScroll = true; RadGrid1.ClientSettings.Scrolling.UseStaticHeaders = true; RadGrid1.ClientSettings.Scrolling.SaveScrollPosition = true; RadGrid1.ClientSettings.ClientEvents.OnScroll = "HandleScrolling"; //Because of ClientSelectColumn RadGrid1.ClientSettings.Selecting.AllowRowSelect = true; //Custom row selection RadGrid1.ClientSettings.ClientEvents.OnRowSelected = "SelectRows"; RadGrid1.ClientSettings.ClientEvents.OnRowDeselected = "DeSelectRows"; //Add editColumn RadGrid1.MasterTableView.DataKeyNames = new string[] { "ID", STR_TaskOutlineNumber, ColName_TaskName, STR_TaskLevel, "SAPInternalIDTask", "SAPSystem", STR_HasChanged, STR_ColumnChanged }; RadGrid1.MasterTableView.ClientDataKeyNames = RadGrid1.MasterTableView.DataKeyNames; //Add custom column addCustomColumns(RadGrid1, gridSource); //Set Grid Events RadGrid1.PreRender += new EventHandler(RadGrid1_PreRender); RadGrid1.ColumnCreated += new GridColumnCreatedEventHandler(RadGrid1_ColumnCreated); RadGrid1.UpdateCommand += new GridCommandEventHandler(RadGrid1_UpdateCommand); RadGrid1.NeedDataSource += new GridNeedDataSourceEventHandler(RadGrid1_NeedDataSource); //Add the grid to the placeholder this.PlaceHolder1.Controls.Add(RadGrid1); //TODO: Not working, throw error "System.OutOfMemoryException", need help here!!! //Build self-referencing //RadGrid1.MasterTableView.HierarchyLoadMode = GridChildLoadMode.Client; //RadGrid1.MasterTableView.HierarchyDefaultExpanded = true; //RadGrid1.MasterTableView.SelfHierarchySettings.ParentKeyName = "ParentNr"; //RadGrid1.MasterTableView.SelfHierarchySettings.KeyName = "Nr"; //RadGrid1.ClientSettings.AllowExpandCollapse = true; }page_load
protected void Page_Load(object sender, EventArgs e) { if (!Page.IsPostBack) { //Init values when the page is being loaded or accessed for the first time initValues(); initLabels(); // this would bind the grid calling NeedDataSource RadGrid1.Rebind(); } }RadGrid1_NeedDataSource
protected void RadGrid1_NeedDataSource(object sender, GridNeedDataSourceEventArgs e) { RadGrid1.DataSource = gridSource; }RadGrid1_ColumnCreated
protected void RadGrid1_ColumnCreated(object sender, Telerik.Web.UI.GridColumnCreatedEventArgs e) { GridBoundColumn boundColumn = e.Column as GridBoundColumn; //Hide all columns, they will be made visible again later if (boundColumn != null) boundColumn.Visible = false; }3 Answers, 1 is accepted
Could you please try setting the HierarchyLoadMode to ServerOnDemand and let me know if the issue till persists. When HierarchyLoadMode property is set to Client the RadGrid renders all its items to the client. Note that this will produce large amount of html and javascript and can result in significant delays in the grid loading time. With HierarchyLoadMode.ServerBind , all child GridTableViews will be bound immediately when DataBind occurs for a parent GridTableView or RadGrid. Only the detail table-views of the expanded items are rendered. If the HierarchyLoadMode is set to ServerOnDemand the child datatable are populated after the expand button is clicked. Initially the RadGrid loads only one level of its hierarchy and all items have not child DetailTables with child items.
Additionally when you use the Advanced Data-binding and NeedDataSource event handler you do not need to call the Rebind method into the Page_Load. Rebinding the RadGrid into Page_load event is used in Simple Data-binding approach. Calling Rebind() will force the RadGrid to fire its NeedDataSource event and this will cause firing this event twice. To increase the performance you could remove the call to Rebind() method in Page_Load.
I hope this helps.
Greetings,
Radoslav
the Telerik team
Rank 1
Hello Radoslav ,
first thank you again for your last answer. It has been now two months that i am fully and hardly working on this grid and its features. Now the last feature to implement is the self hierarchy.
Last time i forgot one question: can both Yahoo Scrolling and hierarchyloadmode work fine together?
Ok, I removed the Rebind() call from the Page_Load to increase the performance as you suggested. Good hint. No problem at this point.
Then i changed the hierarchyloadmode to ServerOnDemand as you said. Now i have no error when loading the page.
Additionnally, i followed the instructions from your help doc (http://www.telerik.com/help/aspnet-ajax/grdselfreferencinghierarchy.html)
and defined a root level filter for the grid hierarchy.
The consequence is, i can see all the items that are parents and that's what i want, BUT as soon as i click on the collapse/expand button, i get a javascript error:
'undefined' is NULL or not an object
Any Idea?!?
Another problem is, after that, all my layout logic (show/hide Edit button) located in the RadGrid1_PreRender method is lost.
I wonder why, because, when debbuging, it looks like there is postback, the grid structure is created again, RadGrid1_NeedDataSource is called again, then RadGrid1_ColumnCreated, followed by RadGrid1_ItemCreated, then finally comes RadGrid1_PreRender. BUT, then comes this js error "'undefined' is NULL or not an object", after what is the layout logic lost.
What am i missing?
Oh and last problem, sometimes, when loading the page, i got another javascript error:
'this.get_inputDomElement()' is NULL or not an object
Any idea, here also?
Actually i set the filterexpression just once, when creating the grid structure. But i have some doubt. Is the grid smart enough to know what to do when i clicked on the collapse/expand Button?
I'm asking this because the structure will be created again, so how will the grid know, it should show childs?
See the pictures below to have a better understanding of the whole problem.
Page_Init
protected void Page_Init(object sender, EventArgs e) { RadAjaxManager1.AjaxSettingCreating += new RadAjaxControl.AjaxSettingCreatingDelegate(RadAjaxManager1_AjaxSettingCreating); //get and set request parameters ManageRequestParameters(); DefineGridStructure(); }DefineGridStructure
public void DefineGridStructure() { //Set general settings: RadGrid, MasterTableView, Columns, Clientsettings, etc... WebFrontendHelper.DefineGridStructure(RadGrid1, gridSource); //Build self-referencing //1â—¦add the fields from the grid source which define the parent/child relations (ParentNr and Nr in this case) //to the DataKeyNames array of the MasterTableView (done, see above) RadGrid1.MasterTableView.HierarchyLoadMode = GridChildLoadMode.ServerOnDemand; RadGrid1.MasterTableView.HierarchyDefaultExpanded = false; // true; //2â—¦configure these fields through the SelfHierarchySettings property of the MasterTableView RadGrid1.MasterTableView.SelfHierarchySettings.ParentKeyName = "ParentNr"; RadGrid1.MasterTableView.SelfHierarchySettings.KeyName = "Nr"; RadGrid1.ClientSettings.AllowExpandCollapse = true; //3â—¦define the root level filter for the grid hierarchy depending on your source table conventions RadGrid1.EnableLinqExpressions = false;
//set the filterexpression
RadGrid1.MasterTableView.FilterExpression = "ParentNr IS NULL"; //Set Grid Events RadGrid1.PreRender += new EventHandler(RadGrid1_PreRender); RadGrid1.ColumnCreated += new GridColumnCreatedEventHandler(RadGrid1_ColumnCreated); RadGrid1.UpdateCommand += new GridCommandEventHandler(RadGrid1_UpdateCommand); RadGrid1.NeedDataSource += new GridNeedDataSourceEventHandler(RadGrid1_NeedDataSource); //Add the grid to the placeholder this.PlaceHolder1.Controls.Add(RadGrid1); }
RadGrid1_PreRender
protected void RadGrid1_PreRender(object sender, EventArgs e) { //Check that the RadGrid1.DataSource is not empty before entering RadGrid1_PreRender //Orelse, the whole logic here will have no effect on the grid if (RadGrid1.DataSource == null) RadGrid1.Rebind(); foreach (GridDataItem dataItem in RadGrid1.Items) { //set new color to indicate that the cell has changed WebFrontendHelper.highlightNewUpdatedValues(dataItem, this.Label1); //hide or show Edit button: View or Edit mode //and set padding level to simulate hierarchy space between tasks from different level string SAPSystem = this.HF_SAPSystem.Value; WebFrontendHelper.hideShowEditButton_SetPaddingLevel(dataItem, this.isInEditMode, SAPSystem); } //Helper function: only relevant columns are not editable WebFrontendHelper.SetNotEditableColumns(RadGrid1, SqlDS_ViewList, Session); //Hide columns WebFrontendHelper.HideColumns(RadGrid1, SqlDS_ViewList, Session); }
Thank you again for your time and your support.
Greetings
Fresh
Unfortunately the self referencing RadGrid does not support the yahoo scrolling. Yahoo scrolling could be used only into the RadGrid bound to a flat data. In order to have paging you need to use the default pager of the RadGrid.
Also I tried to reproduce the described errors but to no avail. They are very strange and we have not encountered them so far and we are not sure what could be the reason. It will be helpful if you could send us a simple example. You could open a formal support ticket from your Telerik account and attach a ZIP file there. Thus we will be able to we debug the project and provide you with more to-the-point answer.
Additionally I am sending you a simple example which demonstrates the self referencing hierarchy created programmatically with MastertableView.HierarchyLoadMode property set to "ServerOnDemand".
Kind regards,
Radoslav
the Telerik team