How to add columns with stacked headers dynamically?

1 min read

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

<button id="btn">
        Insert stacked columns
    </button>
 <div id="Grid"></div>

<script type="text/javascript">
        $(function () {
            $("#Grid").ejGrid({
                dataSource: window.gridData,
                allowPaging: true,
                showStackedHeader: true,
                stackedHeaderRows: [{
                    stackedHeaderColumns: [{ headerText: "Order Details", column: " OrderID,CustomerID,Freight" },
                                          { headerText: "Ship Details", column: "ShipName,ShipCity,ShipCountry" },
                                                             ] } ],
                columns: [
                  { field: "OrderID", headerText: "Order ID", width: 80 },
                     { field: "CustomerID", headerText: "Customer ID", width: 80 },
                  { field: "Freight", width: 75, format: "{0:C}" },
                     { field: "ShipName", headerText: "Ship Name", width: 110 },
                  { field: "ShipCity", headerText: "Ship City", width: 110 },
                     { field: "ShipCountry", headerText: "Ship Country", width: 110 }
                ]
            });
</script>

Razor

@(Html.EJ().Grid<object>("Grid")
          .Datasource((IEnumerable<object>)ViewBag.datasource)
        .ShowStackedHeader()
        .StackedHeaderRows(row =>{row.StackedHeaderColumns(column => {column.HeaderText("OrderDetails").Column(col =>
                {
                    col.Add("OrderID");
                    col.Add("CustomerID");
                    col.Add("Freight");
                }).Add();
                column.HeaderText("Ship Details").Column(col =>
                {
                    col.Add("ShipName");
                    col.Add("ShipCity");
                    col.Add("ShipCountry");
                }).Add();
            }).Add();
        })
         .AllowPaging()
        .Columns(col =>
        {
            col.Field("OrderID").HeaderText("Order ID").IsPrimaryKey(true).Width(80).Add();
            col.Field("CustomerID").HeaderText("Customer ID").Width(80).Add();
            col.Field("Freight").HeaderText("Freight").Width(75).Format("{0:C}").Add();
            col.Field("ShipName").HeaderText("Ship Name").Width(110).Add();
            col.Field("ShipCity").HeaderText("Ship City").Width(110).Add();
            col.Field("ShipCountry").HeaderText("Ship Country").Width(110).Add();
        }))

namespace Sample.Controllers
{
    public class GridController : Controller
    {
        public ActionResult GridFeatures()
        {
            ViewBag.datasource = new NorthwindDataContext().OrdersViews.ToList();
            return View();
        }
    }
}

ASPX

<ej:Grid ID="Grid" runat="server" ShowStackedHeader="true" AllowPaging="True">
            <Columns>
                <ej:Column Field="OrderID" HeaderText="Order ID" IsPrimaryKey="True" Width="80" />
                <ej:column field="CustomerID" headertext="CustomerID" isprimarykey="True" width="80" />
                <ej:Column Field="Freight" HeaderText="Freight" Width="75" Format="{0:C}" />
                <ej:Column Field="ShipName" HeaderText="Ship Name" Width="110" />
                <ej:Column Field="ShipCity" HeaderText="Ship City" Width="110" />
                <ej:Column Field="ShipCountry" HeaderText="Ship Country" Width="110" />
            </Columns>
            <StackedHeaderRows>
                <ej:StackedHeaderRow>
                    <StackedHeaderColumns>
                        <ej:StackedHeaderColumn Column="OrderID,CustomerID,Freight" HeaderText="Order Details" />
                        <ej:StackedHeaderColumn Column="ShipName,ShipCity,ShipCountry" HeaderText="Ship Details" />
                    </StackedHeaderColumns>
                </ej:StackedHeaderRow>
            </StackedHeaderRows>
        </ej:Grid>

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.

<script type="text/javascript">
        $("#btn").ejButton({
            click: function (args) {
                var grd = $("#Grid").ejGrid("instance");
                grd.model.stackedHeaderRows[0].stackedHeaderColumns.push({ headerText: "Address", column: "ShipAddress,ShipPostalCode" });
                var col = [{ field: "ShipAddress", width: 100 }, { field: "ShipPostalCode", width: 80 }];
                grd.columns(col, "add");
            }
        });
    </script>

shows before dynamic columns added in grid.

Figure1: shows before dynamic columns added in grid.

$C:\Users\Manisankar.durai\Desktop\sshot-2.png$

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

Conclusion

I hope you enjoyed learning about how to add columns with stacked headers dynamically.

You can refer to our JavaScript Grid feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our JavaScript Grid example to understand how to create and manipulate data.

For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.

If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!

Did you find this information helpful?

Yes

Comments (0)

How to add columns with stacked headers dynamically?

Access denied