We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Add dynamically stackedHeaderColumns and columns to ejdatagrid

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}" }
                            ]
                        }
                    ]
                }
            );

        }; 

3 Replies

BM Balaji Marimuthu Syncfusion Team March 8, 2016 09:18 AM UTC

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


CP CIOBANU Petre March 8, 2016 12:23 PM UTC

Hello ,
Thank  you  for   quick  answer ...
Regards ,
Petru


BM Balaji Marimuthu Syncfusion Team March 9, 2016 04:44 AM UTC

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

Loader.
Live Chat Icon For mobile
Up arrow icon