Create columns on-the-fly

[Peter]

Dear All,

I have to implement a tree grid, where the columns are changing dynamically. Please have a look on the attachd pic. The user select a date range, and when clicks on the top-left Filter button, the tree grid should show a column for each month what is between the two date, plus a summary column. Clearly the DataSource reflects the change: it contains all the columns as fields.

The grid itself is not editable, the columns are not moveable, however the rows are structured into a tree, so the user can drill down to details. 

Can this behaviour made with your treegrid, please?

Thanks:

Peter

Attachment: Untitled_c9f1b2b1.zip

[Pon Selva Jeganathan]

Hi Peter,   

  

Thanks for using syncfusion products. 

  

Query:  Create columns on-the-fly 

 

Based on your query, we understood that you want to add or remove a column dynamically based on date. Here we created a sample to dynamically add or remove a column by clicking the button. Please refer to the code snippet below. Please refer to the below code snippet,

 

  

  

<SfButton @ref="Btn" @onclick="Add" >Add</SfButton> 

<SfButton @ref="Btn1" @onclick="Remve" >Remove</SfButton> 

  

<SfTreeGrid ChildMapping="Children" @ref="treegrid" TreeColumnIndex="1" DataSource="@TreeData" TValue="BusinessObject" Columns="@Cols1"> 

    

</SfTreeGrid> 

  

  

@code{ 

    SfTreeGrid<BusinessObject> treegrid; 

    public List<TreeGridColumn> Cols = new List<TreeGridColumn>(); 

    public List<TreeGridColumn> Cols1 = new List<TreeGridColumn>(); 

     

     

    private void Add(Microsoft.AspNetCore.Components.Web.MouseEventArgs args) 

    { 

        Cols.Add(new TreeGridColumn() { Field = "TaskId", HeaderText = "Task ID", Width = "80" }); 

        Cols.Add(new TreeGridColumn() { Field = "TaskName", HeaderText = "Task Name", Width = "160" }); 

        Cols.Add(new TreeGridColumn() { Field = "Duration", HeaderText = "Duration", Width = "80" }); 

        Cols.Add(new TreeGridColumn() { Field = "Progress", HeaderText = "Progress", Width = "160" }); 

        Cols1 = Cols.ToList(); 

    } 

    private void Remve(Microsoft.AspNetCore.Components.Web.MouseEventArgs args) 

    { 

  

        

        Cols.RemoveAt(3); 

        Cols1 = new List<TreeGridColumn>(Cols); 

        

    } 

 

Please refer to the below sample:

https://www.syncfusion.com/downloads/support/forum/163388/ze/BlazorServerApp-724542669

 

Please refer to the below help documentation:

https://blazor.syncfusion.com/documentation/treegrid/columns/

 

 Kindly get back to us for further assistance.

 

Regards,  

Pon selva