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. (Last updated on: November 16, 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Add dynamically stackedHeaderColumns and columns to ejdatagrid

Thread ID:

Created:

Updated:

Platform:

Replies:

123318 Mar 7,2016 06:50 PM UTC Mar 9,2016 04:44 AM UTC JavaScript 3
loading
Tags: ejGrid
CIOBANU Petre
Asked On March 7, 2016 06:50 PM UTC

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 [Syncfusion]
Replied On 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

CIOBANU Petre
Replied On March 8, 2016 12:23 PM UTC

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

Balaji Marimuthu [Syncfusion]
Replied On 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

CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

;