To add New column in grid Dynamically

[WantToKnow]

Hi Team,

We are exploring to use Kendo UI for one of our project.There are few below requirements which I couldn't find in Demo or not very clear.

1) Add Column on button click.

There will be a add column button in UI which should allow to add new column in the grid.

Case 1
                                Add New Col[Button] Copy from Existing[Button]

                             Col 1 [Checkbox]
Group A
      Value 1
      Value 2

Group B
      Value 3
      Value 4

When click on add Button it should add new column as shown below:

                              Add New Col[Button]     Copy from Existing[Button]

                             Col 1 [Checkbox]      Col 2[Checkbox] 
Group A 
      Value 1              1                               
      Value 2              2

Group B 
      Value 3              3
      Value 4              4

 

2) Copy Column on button click using existing Column.

User has filled the value for col 1 and added new col 2 and Col 3 copied from existing Col1. as shown below:

                                           Add New Col[Button]          Copy from Existing[Button] 

                         Col 1 [Checkbox]  Col 2 [Checkbox]  Col 3 [Checkbox]
Group A
      Value1                      1                       5                                   1
      Value2                     2                       6                                   2

Group B
      Value3                      3                      7                                    3
      Value4                     4                      8                                    4

3) Add section/group capability.

Case 3 Add Group or delete group:

Value 5 and Value 6 added in the Group B.

                                         Add New Col[Button]          Copy from Existing[Button] 

                      Col 1 [Checkbox]         Col 2 [Checkbox]
Group A
      Value 1              1                                5
      Value 2              2                                6

Group B
      Value 3              3                               10
      Value 4              4                                11
      Value 5
      Value 6

 

I have searched for point 1 and 2 and couldnt find any proper solution. Please confirm if above points has been supported by Kendo grid. If not is there any way to achive above by any tweak or customization?

Thanks in advance.

Mahendra

 

 

 

 

[Viktor Tachev]

Hello Mahendra,

Adding columns to an existing Grid widget is not a built-in feature. Since the Grid can render complex DOM structure just appending a column to it will not be a simple task. 

However, if you would like to create the Grid structure dynamically you can pass function for the columns setting in the Grid. That function would return the columns configuration based on specific custom requirements. Check out the article below that describes how you can create a Grid dynamically. 

• http://docs.telerik.com/kendo-ui/controls/data-management/grid/how-to/various/create-with-dynamic-columns-and-data-types

Regards,
Viktor Tachev
Progress Telerik

[Ravi]

Hi,

I have been modifying the example for dynamic columns.

It loads fine on the initial load but if my new data has a new set of columns, my column headings are not being updated.

How can I fix this?

[Viktor Tachev]

Hi Ravi,

Please send us a runnable sample or a dojo demo where the behavior is replicated so we can examine it locally. If you would like to send us a project you can open a support ticket and attach the files there.


Regards,
Viktor Tachev
Progress Telerik

[Ravi]

http://dojo.telerik.com/OWaGA/3

Is this the right approach to deal with changing column data between data sets?

[Konstantin Dikov]

Hi Ravi,

The columns collection could be changed only by re-initializing the Grid widget through the "setOptions" method or by destroying and initializing it from scratch. I would personally recommend the setOptions method:

• https://docs.telerik.com/kendo-ui/api/javascript/ui/grid#methods-setOptions

var oldOptions = grid.getOptions();
oldOptions.columns = getMyNewColumns();
grid.setOptions(oldOptions);

Best Regards,
Konstantin Dikov
Progress Telerik

[Ravi]

Thanks, using setOptions and setDataSource is working.