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

Self-referencing RadGrid with custom column, inline Edit and yahoo scrolling

3 Answers 343 Views
This is a migrated thread and some comments may be shown as answers.
Top achievements
Rank 1
Fresh asked on 17 Sep 2010, 04:24 PM

Telerik Grid Version: Telerik Grid ASP. NET AJAX Q1 2010 SP1

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

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?

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" 
                    <telerik:AjaxSetting AjaxControlID="RadGrid1">
                            <telerik:AjaxUpdatedControl ControlID="RadGrid1" LoadingPanelID="RadAjaxLoadingPanel1"/>
                            <telerik:AjaxUpdatedControl ControlID="Label1" />
                    <telerik:AjaxSetting AjaxControlID="RadAjaxManager1">
                        <telerik:AjaxUpdatedControl ControlID="RadGrid1" LoadingPanelID="RadAjaxLoadingPanel1" />
                <ClientEvents />
            <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" >
            <br />
            <asp:Label ID="L_Text_LastChange" runat="server" Text="Last change on: " CssClass="labelText"></asp:Label>                    

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;
        RadGrid1.PagerStyle.Visible = false;
        RadGrid1.MasterTableView.TableLayout = GridTableLayout.Fixed;
        RadGrid1.MasterTableView.AutoGenerateColumns = true;
        RadGrid1.MasterTableView.EditMode = GridEditMode.InPlace;
        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
            //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;

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 
                // this would bind the grid calling NeedDataSource 


protected void RadGrid1_NeedDataSource(object sender, GridNeedDataSourceEventArgs e)
            RadGrid1.DataSource = gridSource;


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

Sort by
Telerik team
answered on 23 Sep 2010, 09:26 AM
Hello Fresh,

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.

the Telerik team
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 Public Issue Tracking system and vote to affect the priority of the items
Top achievements
Rank 1
answered on 27 Sep 2010, 11:48 AM

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 (
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.




protected void Page_Init(object sender, EventArgs e)
            RadAjaxManager1.AjaxSettingCreating += new RadAjaxControl.AjaxSettingCreatingDelegate(RadAjaxManager1_AjaxSettingCreating);
            //get and set request parameters



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





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.


Telerik team
answered on 30 Sep 2010, 08:56 AM
Hello 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,
the Telerik team
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 Public Issue Tracking system and vote to affect the priority of the items
Asked by
Top achievements
Rank 1
Answers by
Telerik team
Top achievements
Rank 1
Share this question