Adding extra columns

[David Price]

Hello,

I have a treegrid with set columns

e.g.

The code behind then just build an object 

...

and then

BusinessObjectCollection.Add(Record1);

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]

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"            

             ShowColumnChooser="true" 

             ShowColumnOptions="true">           

             //.. 

  </ej:TreeGrid> 

  <script type="text/javascript"> 

            function clickme(args) { 

                var treeObj = $("#TreeGridcontainer").data("ejTreeGrid"), 

                    columns = $.extend([], treeObj.model.columns); 

                columns.push( 

                    { field: "column2", headerText: "New column 1", editType: "numericedit", width: "60" } 

                    //..      

                    ); 

                treeObj.setModel({ "columns": columns }); 

            }           

    </script> 

 

Please find the sample links, 

Column-menu: https://asp.syncfusion.com/demos/web/treegrid/treegridcolumnchooser.aspx  

Set-model: http://www.syncfusion.com/downloads/support/directtrac/general/ze/TreeGridSample1778405753 

 

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(); 

            this.TreeGridcontainer.DataBind();            

        } 

 

Please let us know your exact requirement, we will provide further assistance. 

 

Regards, 

Jayakumar D 

[David Price]

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 ?

 <Columns>

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

 </Columns>

[Jayakumar Duraisamy]

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(); 

            this.TreeGridcontainer.DataBind();            

        } 

        private List<TreeGridColumn> GetColumns() 

        { 

            List<TreeGridColumn> list = new List<TreeGridColumn>();            

            SqlConnection con = new SqlConnection(WebConfigurationManager.ConnectionStrings["SelfReferenceConnectionString"].ConnectionString);//connectionString 

            con.Open(); 

 

            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)); 

                            list.Add(obj); 

                        } 

                        reader.Close(); 

                    } 

                } 

                con.Close(); 

 

            } 

            return list;             

        } 

 

Please find the code snippets to add a new column to SQL table.  

[aspx.cs] 

 

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 

            con.Open(); 

            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(); 

            } 

            con.Close(); 

        } 

        [WebMethod] 

        public static void AddIt(TreeColumn record) 

        { 

            TreeGridSample sample = new TreeGridSample(); 

            sample.Add(record); 

        } 

 

[aspx] 

function clickme(args) { 

                var treeObj = $("#TreeGridcontainer").data("ejTreeGrid"), 

                    columns = $.extend([], treeObj.model.columns), 

                    updatedData = { 

                        field: "column2", headerText: "New column 1", editType: "numericedit", width: "60" 

                    }; 

                columns.push(updatedData); 

                treeObj.setModel({ "columns": columns }); 

                PageMethods.AddIt(updatedData); 

            } 

            function ActionComplete(args) { 

                //   args.insertIndex 

                if (args.requestType == "insertColumn") 

                    PageMethods.AddIt(args.columnObject); 

            } 

 

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 

Sample: http://www.syncfusion.com/downloads/support/directtrac/general/ze/TreeGridSample-columnUpdate-352209058 

 

Regards, 

Jayakumar D