Add dynamically stackedHeaderColumns and columns to ejdatagrid

[CIOBANU Petre]

Hello , 

I  want  to  add  dynamically  stackedHeaderColumns  and columns   based on  a  json list :

  $scope.syncfusionGrid = function() {

            $("#Grid").ejGrid({

                dataSource: dataGridSource,

                    showStackedHeader: true,

                    allowPaging: false,

                    allowReordering: false,

                    allowScrolling: true,

                    scrollSettings: { width: "100%", height: 700, allowVirtualScrolling: false },

                    allowResizing: true,

                    enableRowHover: true,

                    allowSelection: true,

                    selectionType: "multiple",

                    selectionSettings: { selectionMode: ["cell"], cellSelectionMode: "box" },

                    editSettings: { allowEditing: true, editMode: "normal" },

                   

                   // exportToPdfAction: 'http://localhost:2850/api/timeseries/Export',

                  //  editSettings: { allowEditing: true sau   batch},

                    toolbarSettings: { showToolbar: true, toolbarItems: [ej.Grid.ToolBarItems.Update, ej.Grid.ToolBarItems.Cancel, ej.Grid.ToolBarItems.ExcelExport, ej.Grid.ToolBarItems.WordExport, ej.Grid.ToolBarItems.PdfExport] },

                    width: "95%",

                    allowSorting: false,

                    stackedHeaderRows: [

                        {

                            stackedHeaderColumns:

                            [

                                { headerText: headerText, column: "svk1,svk2", cssClass: "temp", textAlign: ej.TextAlign.Center } >  //ON  THIS I WANT  TO USE  A  DATASOURCE COME FROM JSON 

                                //{ headerText: "TTC Energinet.dk", column: "val3,val4", cssClass: "temp", textAlign: ej.TextAlign.Center },

                                //{ headerText: "TTC", column: "val5,val6", cssClass: "temp", textAlign: ej.TextAlign.Center },

                                //{ headerText: "Agreed TTC", column: "val7,val8", cssClass: "temp", textAlign: ej.TextAlign.Center },

                                //{ headerText: "Transmision TRM", column: "val9,val11", cssClass: "temp", textAlign: ej.TextAlign.Center },

                                //{ headerText: "Elspot Trading Capacity", column: "val12,val13", cssClass: "temp", textAlign: ej.TextAlign.Center },

                                //{ headerText: "Agreed  NTC", column: "val14,val15", cssClass: "temp", textAlign: ej.TextAlign.Center },

                                //{ headerText: "Elspot Transmision Plan", column: "val16,val17", cssClass: "temp", textAlign: ej.TextAlign.Center }

                            ]

                        }

                    ],

                    columns:

                    [

                        { field: "dateTime", headerText: "date", format: "{0:n}", allowEditing: false },

                        { field: "svk1", headerText: "SE3-DK1", format: "{0:n}", allowEditing: true , editType: "numericedit" },//ON  THIS I WANT  TO USE  A  DATASOURCE COME FROM JSON 

                        { field: "svk2", headerText: "DK1-SE3", format: "{0:n}", allowEditing: true ,editType: "numericedit"},//ON  THIS I WANT  TO USE  A  DATASOURCE COME FROM JSON 

                        //{ field: "val3", headerText: "SE3-DK1", format: "{0:n}", allowEditing: false },

                        //{ field: "val4", headerText: "DK1-SE3", format: "{0:n}", allowEditing: false },

                        //{ field: "val5", headerText: "SE3-DK1", format: "{0:n}", allowEditing: false },

                        //{ field: "val6", headerText: "DK1-SE3", format: "{0:n}", allowEditing: false },

                        //{ field: "val7", headerText: "SE3-DK1", format: "{0:n}", allowEditing: false },

                        //{ field: "val8", headerText: "DK1-SE3", format: "{0:n}", allowEditing: false },

                        //{ field: "val9", headerText: "SE3-DK1", format: "{0:n}", allowEditing: false },

                        //{ field: "val11", headerText: "DK1-SE3", format: "{0:n}", allowEditing: false },

                        //{ field: "val12", headerText: "SE3-DK1", format: "{0:n}", allowEditing: false },

                        //{ field: "val13", headerText: "DK1-SE3", format: "{0:n}", allowEditing: false },

                        //{ field: "val14", headerText: "SE3-DK1", format: "{0:n}", allowEditing: false },

                        //{ field: "val15", headerText: "DK1-SE3", format: "{0:n}", allowEditing: false },

                        //{ field: "val16", headerText: "SE3-DK1", format: "{0:n}", allowEditing: false },

                        //{ field: "val17", headerText: "DK1-SE3", format: "{0:n}", allowEditing: false }

                        // { field: "val2", headerText: returnColumnHeader(1), width: 60, format: "{0:n}", textAlign: ej.TextAlign.Center, allowEditing: false }

                    ], //END  COLUMNS

                    showSummary: true,

                    summaryRows: [

                        {

                            title: "Sum ",

                            summaryColumns: [

                                { summaryType: ej.Grid.SummaryType.Sum, displayColumn: "svk1", dataMember: "svk2", format: "{0:n}" },

                                { summaryType: ej.Grid.SummaryType.Sum, displayColumn: "svk2", dataMember: "svk2", format: "{0:n}" }

                                //{ summaryType: ej.Grid.SummaryType.Sum, displayColumn: "val3", dataMember: "val3", format: "{0:n}" },

                                //{ summaryType: ej.Grid.SummaryType.Sum, displayColumn: "val4", dataMember: "val4", format: "{0:n}" },

                                //{ summaryType: ej.Grid.SummaryType.Sum, displayColumn: "val5", dataMember: "val5", format: "{0:n}" },

                                //{ summaryType: ej.Grid.SummaryType.Sum, displayColumn: "val6", dataMember: "val6", format: "{0:n}" },

                                //{ summaryType: ej.Grid.SummaryType.Sum, displayColumn: "val7", dataMember: "val7", format: "{0:n}" },

                                //{ summaryType: ej.Grid.SummaryType.Sum, displayColumn: "val8", dataMember: "val8", format: "{0:n}" },

                                //{ summaryType: ej.Grid.SummaryType.Sum, displayColumn: "val9", dataMember: "val9", format: "{0:n}" },

                                //{ summaryType: ej.Grid.SummaryType.Sum, displayColumn: "val11", dataMember: "val11", format: "{0:n}" },

                                //{ summaryType: ej.Grid.SummaryType.Sum, displayColumn: "val12", dataMember: "val12", format: "{0:n}" },

                                //{ summaryType: ej.Grid.SummaryType.Sum, displayColumn: "val13", dataMember: "val13", format: "{0:n}" },

                                //{ summaryType: ej.Grid.SummaryType.Sum, displayColumn: "val14", dataMember: "val14", format: "{0:n}" },

                                //{ summaryType: ej.Grid.SummaryType.Sum, displayColumn: "val15", dataMember: "val15", format: "{0:n}" },

                                //{ summaryType: ej.Grid.SummaryType.Sum, displayColumn: "val16", dataMember: "val16", format: "{0:n}" },

                                //{ summaryType: ej.Grid.SummaryType.Sum, displayColumn: "val17", dataMember: "val17", format: "{0:n}" }

                            ]

                        },

                        {

                            title: "Min ",

                            summaryColumns: [

                                { summaryType: ej.Grid.SummaryType.Minimum, displayColumn: col1, dataMember: col1, format: "{0:n}" },

                                { summaryType: ej.Grid.SummaryType.Minimum, displayColumn: "svk2", dataMember: "svk2", format: "{0:n}" }

                                //{ summaryType: ej.Grid.SummaryType.Minimum, displayColumn: "val3", dataMember: "val3", format: "{0:n}" },

                                //{ summaryType: ej.Grid.SummaryType.Minimum, displayColumn: "val4", dataMember: "val4", format: "{0:n}" },

                                //{ summaryType: ej.Grid.SummaryType.Minimum, displayColumn: "val5", dataMember: "val5", format: "{0:n}" },

                                //{ summaryType: ej.Grid.SummaryType.Minimum, displayColumn: "val6", dataMember: "val6", format: "{0:n}" },

                                //{ summaryType: ej.Grid.SummaryType.Minimum, displayColumn: "val7", dataMember: "val7", format: "{0:n}" },

                                //{ summaryType: ej.Grid.SummaryType.Minimum, displayColumn: "val8", dataMember: "val8", format: "{0:n}" },

                                //{ summaryType: ej.Grid.SummaryType.Minimum, displayColumn: "val9", dataMember: "val9", format: "{0:n}" },

                                //{ summaryType: ej.Grid.SummaryType.Minimum, displayColumn: "val11", dataMember: "val11", format: "{0:n}" },

                                //{ summaryType: ej.Grid.SummaryType.Minimum, displayColumn: "val12", dataMember: "val12", format: "{0:n}" },

                                //{ summaryType: ej.Grid.SummaryType.Minimum, displayColumn: "val13", dataMember: "val13", format: "{0:n}" },

                                //{ summaryType: ej.Grid.SummaryType.Minimum, displayColumn: "val14", dataMember: "val14", format: "{0:n}" },

                                //{ summaryType: ej.Grid.SummaryType.Minimum, displayColumn: "val15", dataMember: "val15", format: "{0:n}" },

                                //{ summaryType: ej.Grid.SummaryType.Minimum, displayColumn: "val16", dataMember: "val16", format: "{0:n}" },

                                //{ summaryType: ej.Grid.SummaryType.Minimum, displayColumn: "val17", dataMember: "val17", format: "{0:n}" }

                            ]

                        },

                        {

                            title: "Max ",

                            summaryColumns: [

                                { summaryType: ej.Grid.SummaryType.Maximum, displayColumn: "svk1", dataMember: "svk2", format: "{0:n}" },

                                { summaryType: ej.Grid.SummaryType.Maximum, displayColumn: "svk2", dataMember: "svk2", format: "{0:n}" }

                                //{ summaryType: ej.Grid.SummaryType.Maximum, displayColumn: "val3", dataMember: "val3", format: "{0:n}" },

                                //{ summaryType: ej.Grid.SummaryType.Maximum, displayColumn: "val4", dataMember: "val4", format: "{0:n}" },

                                //{ summaryType: ej.Grid.SummaryType.Maximum, displayColumn: "val5", dataMember: "val5", format: "{0:n}" },

                                //{ summaryType: ej.Grid.SummaryType.Maximum, displayColumn: "val6", dataMember: "val6", format: "{0:n}" },

                                //{ summaryType: ej.Grid.SummaryType.Maximum, displayColumn: "val7", dataMember: "val7", format: "{0:n}" },

                                //{ summaryType: ej.Grid.SummaryType.Maximum, displayColumn: "val8", dataMember: "val8", format: "{0:n}" },

                                //{ summaryType: ej.Grid.SummaryType.Maximum, displayColumn: "val9", dataMember: "val9", format: "{0:n}" },

                                //{ summaryType: ej.Grid.SummaryType.Maximum, displayColumn: "val11", dataMember: "val11", format: "{0:n}" },

                                //{ summaryType: ej.Grid.SummaryType.Maximum, displayColumn: "val12", dataMember: "val12", format: "{0:n}" },

                                //{ summaryType: ej.Grid.SummaryType.Maximum, displayColumn: "val13", dataMember: "val13", format: "{0:n}" },

                                //{ summaryType: ej.Grid.SummaryType.Maximum, displayColumn: "val14", dataMember: "val14", format: "{0:n}" },

                                //{ summaryType: ej.Grid.SummaryType.Maximum, displayColumn: "val15", dataMember: "val15", format: "{0:n}" },

                                //{ summaryType: ej.Grid.SummaryType.Maximum, displayColumn: "val16", dataMember: "val16", format: "{0:n}" },

                                //{ summaryType: ej.Grid.SummaryType.Maximum, displayColumn: "val17", dataMember: "val17", format: "{0:n}" }

                            ]

                        },

                        {

                            title: "Average ",

                            summaryColumns: [

                                { summaryType: ej.Grid.SummaryType.Average, displayColumn: "svk1", dataMember: "svk1", format: "{0:n}" }

                                { summaryType: ej.Grid.SummaryType.Average, displayColumn: "svk2", dataMember: "svk2", format: "{0:n}" }

                                //{ summaryType: ej.Grid.SummaryType.Average, displayColumn: "val3", dataMember: "val3", format: "{0:n}" },

                                //{ summaryType: ej.Grid.SummaryType.Average, displayColumn: "val4", dataMember: "val4", format: "{0:n}" },

                                //{ summaryType: ej.Grid.SummaryType.Average, displayColumn: "val5", dataMember: "val5", format: "{0:n}" },

                                //{ summaryType: ej.Grid.SummaryType.Average, displayColumn: "val6", dataMember: "val6", format: "{0:n}" },

                                //{ summaryType: ej.Grid.SummaryType.Average, displayColumn: "val7", dataMember: "val7", format: "{0:n}" },

                                //{ summaryType: ej.Grid.SummaryType.Average, displayColumn: "val8", dataMember: "val8", format: "{0:n}" },

                                //{ summaryType: ej.Grid.SummaryType.Average, displayColumn: "val9", dataMember: "val9", format: "{0:n}" },

                                //{ summaryType: ej.Grid.SummaryType.Average, displayColumn: "val11", dataMember: "val11", format: "{0:n}" },

                                //{ summaryType: ej.Grid.SummaryType.Average, displayColumn: "val12", dataMember: "val12", format: "{0:n}" },

                                //{ summaryType: ej.Grid.SummaryType.Average, displayColumn: "val13", dataMember: "val13", format: "{0:n}" },

                                //{ summaryType: ej.Grid.SummaryType.Average, displayColumn: "val14", dataMember: "val14", format: "{0:n}" },

                                //{ summaryType: ej.Grid.SummaryType.Average, displayColumn: "val15", dataMember: "val15", format: "{0:n}" },

                                //{ summaryType: ej.Grid.SummaryType.Average, displayColumn: "val16", dataMember: "val16", format: "{0:n}" },

                                //{ summaryType: ej.Grid.SummaryType.Average, displayColumn: "val17", dataMember: "val17", format: "{0:n}" }

                            ]

                        }

                    ]

                }

            );

        }; 

[Balaji Marimuthu]

Hi Ciobanu,

Thanks for contacting Syncfusion support.

We have created a sample to dynamically bind the columns and stackedHeaderColumns to Grid from a JSON. Refer to the sample and code example as below.
Sample: http://jsplayground.syncfusion.com/j5fwz4fe

var data = ej.DataManager(window.gridData).executeLocal(ej.Query().take(50));

            var col = [

                       { field: "OrderID", headerText: "Order ID", width: 80 },

                       { field: "ShipCity", headerText: "Ship City", width: 110 },

                       { field: "ShipCountry", headerText: "Ship Country", width: 110 }

            ];

            var stackedHeadercol = [

                                  { headerText: "Ship Details", column: "ShipCity,ShipCountry" }

            ]

            $("#Grid").ejGrid({

                dataSource: data,

                allowPaging: true,

                allowSorting: true,

                showStackedHeader: true,

                allowReordering: true,

                allowResizing: true,

                stackedHeaderRows: [{ stackedHeaderColumns: stackedHeadercol }  //bind from datasource

                ],

                columns: col  //bind from datasource
            });

Or if you want to change the columns and stackedHeaderRows dynamically, we suggest you to use the setModel option. In the following code example, we change the columns dynamically and render the stackedHeaderRows in button click. Refer to the code example and Help Documents as below.

Help Documents: http://help.syncfusion.com/js/api/ejgrid#members:columns
http://help.syncfusion.com/js/api/ejgrid#members:stackedheaderrows

<input id="btn" />

$("#btn").ejButton({

                text: "Button",

                click: function (args) {

                    //dynamically add columns

                    var gridObj = $("#Grid").ejGrid("instance");

                    var col = [

                        { field: "OrderID", headerText: "Order ID", width: 80 },

                                         { field: "OrderDate", headerText: "Order Date", width: 80, format: "{0:MM/dd/yyyy}", textAlign: ej.TextAlign.Right },

                        { field: "Freight", width: 75, format: "{0:C}", textAlign: ej.TextAlign.Right },

                                         { field: "ShipName", headerText: "Ship Name", width: 110 },

                        { field: "ShipCity", headerText: "Ship City", width: 110 },

                                         { field: "ShipCountry", headerText: "Ship Country", width: 110 }

                    ]

                    $("#Grid").ejGrid("option", "columns", col);

                    //dynamically add stacked header rows

                    $("#Grid").ejGrid("option", "stackedHeaderRows", [{

                        stackedHeaderColumns: [{ headerText: "Order Details", column: "OrderID,OrderDate,Freight" }

                                        , { headerText: "Ship Details", column: "ShipName,ShipCity,ShipCountry" }

                        ]

                    }

                    ])

                }

Add columns to existing Columns:

To add the columns to the existing columns dynamically, use columns method in Grid.

Help Document: http://help.syncfusion.com/js/api/ejgrid#methods:columns

//Add columns dynamically

            $("#btn1").ejButton({

                text: "Add columns",

                click: function (args) {

                    var gridObj = $("#Grid").data("ejGrid");

                    var col1 = [{ field: "CustomerID", headerText: "Customer ID", width: 80 },

                    { field: "EmployeeID", headerText: "Employee ID", width: 110 }, ]

                    gridObj.columns(col1, "add");

                }

            })

If we misunderstood your requirement, kindly share more information about how you want to add columns and stackedHeaderColumns dynamically.

Regards,
Balaji Marimuthu

[CIOBANU Petre]

Hello ,

Thank  you  for   quick  answer ...

Regards ,

Petru

[Balaji Marimuthu]

Hi Petru,

Thanks for the update.

We are happy that the provided information helped you. Please get back to us if you need any further assistance. 

Regards,
Balaji Marimuthu