How to add columns with stacked headers dynamically?

This Knowledge base explains the way of how to add columns with stacked headers dynamically?

We have achieved it by adding dynamic columns to grid using the columns method of Grid.

HTML

JS

Razor

C#

ASPX

Here we can dynamically add two columns to grid using the columns method. By pushing the newly defined stackedHeadercolumn to the stackedHeaderColumn collection of the grid stackedHeaderRows array we can dynamically render the stacked header column.

Figure1: shows before dynamic columns added in grid.

Figure 2: Shows columns added dynamically after clicking the button in grid.