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>

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

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.

Did you find this information helpful?

Yes

Comments (0)

How to add columns with stacked headers dynamically?

Access denied