We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Adding extra columns

Thread ID:





141861 Jan 8,2019 03:36 PM UTC Jan 10,2019 09:32 AM UTC ASP.NET Web Forms 3
Tags: TreeGrid
David Price
Asked On January 8, 2019 03:36 PM UTC


I have a treegrid with set columns


The code behind then just build an object 


and then


My issue is that depending on the filter I need to dynamically add in extra columns. Since I have defined the column already how can I dynamically add new columns to the treegrid. I can change the code behind accordingly ?

Jayakumar Duraisamy [Syncfusion]
Replied On January 9, 2019 10:40 AM UTC

Hi David, 
We can dynamically add columns in TreeGrid either by using “setModel” or “ShowColumnChooser” & “ShowColumnOptions” property to the required position. We have prepared a sample to add column on click action using setModel support and enable column menu to add/Rename/Delete columns. 
Please find the code example below: 
  <ej:TreeGrid ID="TreeGridcontainer" runat="server"            
  <script type="text/javascript"> 
            function clickme(args) { 
                var treeObj = $("#TreeGridcontainer").data("ejTreeGrid"), 
                    columns = $.extend([], treeObj.model.columns); 
                    { field: "column2", headerText: "New column 1", editType: "numericedit", width: "60" } 
                treeObj.setModel({ "columns": columns }); 
Please find the sample links, 
If you want to maintain dynamic added/deleted column then we need to maintain a table for column collection and it can be bind to TreeGrid from server side as below.  
protected void Page_Load(object sender, EventArgs e) 
            this.TreeGridcontainer.DataSource = GetDataSource(); 
            this.TreeGridcontainer.Columns = GetColumns(); 
Please let us know your exact requirement, we will provide further assistance. 
Jayakumar D 

David Price
Replied On January 9, 2019 12:09 PM UTC

So I guess it will be easier to bind the columns (   this.TreeGridcontainer.Columns = GetColumns();  ) in the code behind. How is this done

since im using AllowFreezing, ShowInColumnChooser ,HeaderText and IsTemplateColumn with TemplateID ?

<ej:TreeGridColumn Field="ID" HeaderText="ID" AllowEditing="false" AllowFiltering="false"  AllowFreezing="false" Width="0" ShowInColumnChooser="false" />
<ej:TreeGridColumn Field="DataID" HeaderText="DataID" AllowFiltering="False" Width="0" AllowEditing="False" ShowInColumnChooser="false" />
<ej:TreeGridColumn Field="Vendor" HeaderText="Vendor" ShowInColumnChooser="true" AllowFreezing="true" ></ej:TreeGridColumn>
<ej:TreeGridColumn Field="Model" Width="220" HeaderText="Model" ShowInColumnChooser="true" AllowFreezing="true" ></ej:TreeGridColumn>
<ej:TreeGridColumn Field="Software" HeaderText="Software" ShowInColumnChooser="true" AllowFreezing="true"></ej:TreeGridColumn>
<ej:TreeGridColumn Field="DataElement" Width="50" HeaderText="&#10004;" IsTemplateColumn="true" TemplateID="colorBox" ></ej:TreeGridColumn>

Jayakumar Duraisamy [Syncfusion]
Replied On January 10, 2019 09:32 AM UTC

Hi David, 
We have prepared a sample based on your requirement.  As said earlier, we can add columns dynamically by either “setModel” or “column menu” support.  To maintain dynamically added columns, we are using separate SQL table to save columns. By using Page Methods, we are passing a new column to the server-side for database update. 
Please find the code example to populate columns on server side 
using Syncfusion.JavaScript.Models; 
protected void Page_Load(object sender, EventArgs e) 
            this.TreeGridcontainer.DataSource = GetDataSource(); 
            this.TreeGridcontainer.Model.Columns = GetColumns(); 
        private List<TreeGridColumn> GetColumns() 
            List<TreeGridColumn> list = new List<TreeGridColumn>();            
            SqlConnection con = new SqlConnection(WebConfigurationManager.ConnectionStrings["SelfReferenceConnectionString"].ConnectionString);//connectionString 
            using (con) 
                using (var command = con.CreateCommand()) 
                    command.CommandText = "SELECT *FROM columnTree"; 
                    using (var reader = command.ExecuteReader()) 
                        var indexOfCol1 = reader.GetOrdinal("Field"); 
                        var indexOfCol2 = reader.GetOrdinal("HeaderText"); 
                        var indexOfCol3 = reader.GetOrdinal("Width"); 
                        var indexOfCol4 = reader.GetOrdinal("AllowEditing"); 
                        var indexOfCol5 = reader.GetOrdinal("AllowFiltering"); 
                        var indexOfCol6 = reader.GetOrdinal("AllowFreezing"); 
                        var indexOfCol7 = reader.GetOrdinal("TemplateID"); 
                        var indexOfCol8 = reader.GetOrdinal("IsTemplateColumn"); 
                        while (reader.Read()) 
                            TreeGridColumn obj = new TreeGridColumn(); 
                            obj.Field = reader.GetValue(indexOfCol1).ToString(); 
                            obj.HeaderText = reader.GetValue(indexOfCol2).ToString(); 
                            if (reader.GetValue(indexOfCol3).ToString() != "") 
                                obj.Width = Convert.ToInt16(reader.GetValue(indexOfCol3)); 
                            if (reader.GetValue(indexOfCol4).ToString() != "") 
                                obj.AllowEditing = Convert.ToBoolean(reader.GetValue(indexOfCol4)); 
                            if (reader.GetValue(indexOfCol5).ToString() != "") 
                                obj.AllowFiltering = Convert.ToBoolean(reader.GetValue(indexOfCol5)); 
                            if (reader.GetValue(indexOfCol6).ToString() != "") 
                                obj.AllowFreezing = Convert.ToBoolean(reader.GetValue(indexOfCol6)); 
                            obj.TemplateID = reader.GetValue(indexOfCol7).ToString(); 
                            if (reader.GetValue(indexOfCol8).ToString() != "") 
                                obj.IsTemplateColumn = Convert.ToBoolean(reader.GetValue(indexOfCol8)); 
            return list;             
Please find the code snippets to add a new column to SQL table.  
public void Add(TreeColumn Task) 
            string cmdString = "INSERT INTO columnTree ([Field],[HeaderText],[AllowEditing],[AllowFiltering],[AllowFreezing],[IsTemplateColumn],[ShowInColumnChooser],[TemplateID],[Width])" + "VALUES(@Field,@HeaderText,@AllowEditing,@AllowFiltering,@AllowFreezing,@IsTemplateColumn,@ShowInColumnChooser,@TemplateID,@Width)"; 
            SqlConnection con = new SqlConnection(WebConfigurationManager.ConnectionStrings["SelfReferenceConnectionString"].ConnectionString);//connectionString 
            using (SqlCommand sqlCommand = new SqlCommand(cmdString, con)) 
                sqlCommand.Parameters.AddWithValue("@Field", Task.Field).Value = Task.Field == null ? "" : Task.Field; 
                sqlCommand.Parameters.AddWithValue("@HeaderText", Task.HeaderText).Value = Task.HeaderText == null ? "" : Task.HeaderText; 
                sqlCommand.Parameters.AddWithValue("@AllowEditing", Task.AllowEditing).Value = Task.AllowEditing == null ? false : Task.AllowEditing; 
                sqlCommand.Parameters.AddWithValue("@AllowFiltering", Task.AllowFiltering).Value = Task.AllowFiltering == null ? false : Task.AllowFiltering; 
                sqlCommand.Parameters.AddWithValue("@AllowFreezing", Task.AllowFreezing).Value = Task.AllowFreezing == null ? false : Task.AllowFreezing; 
                sqlCommand.Parameters.AddWithValue("@IsTemplateColumn", Task.IsTemplateColumn).Value = Task.IsTemplateColumn == null ? false : Task.IsTemplateColumn; 
                sqlCommand.Parameters.AddWithValue("@ShowInColumnChooser", Task.ShowInColumnChooser).Value = Task.ShowInColumnChooser == null ? false : Task.ShowInColumnChooser; 
                sqlCommand.Parameters.AddWithValue("@TemplateID", Task.TemplateID).Value = Task.TemplateID == null ? "" : Task.TemplateID; 
                sqlCommand.Parameters.AddWithValue("@Width", Task.Width).Value = Task.Width == null ? 40 : Task.Width; ; 
                int test = sqlCommand.ExecuteNonQuery(); 
        public static void AddIt(TreeColumn record) 
            TreeGridSample sample = new TreeGridSample(); 
function clickme(args) { 
                var treeObj = $("#TreeGridcontainer").data("ejTreeGrid"), 
                    columns = $.extend([], treeObj.model.columns), 
                    updatedData = { 
                        field: "column2", headerText: "New column 1", editType: "numericedit", width: "60" 
                treeObj.setModel({ "columns": columns }); 
            function ActionComplete(args) { 
                //   args.insertIndex 
                if (args.requestType == "insertColumn") 
When we add a new column by column menu, “actionComplete” client-side event will be trigger with “args.insertIndex details. By using insertIndex, we can maintain the position in the table. 
We have also prepared the sample based on this. Please find the sample from below location 
Jayakumar D 


This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon