Category / Section
How to add image or any icons in stackedheader?
1 min read
To include icons or html elements in stacked-header column
Solution
You can append the template icon into the stacked-header column by using of “headerText” Grid Property. You can directly pass html string to the “headerText” property.
Please refer the below code example:
JS
<div id="Grid"></div>
<script type="text/javascript">
$(function () {
// the datasource "window.gridData" is referred from jsondata.min.js
$("#Grid").ejGrid({
dataSource: window.gridData,
allowPaging: true,
allowSorting: true,
showStackedHeader:true,
stackedHeaderRows:[{stackedHeaderColumns:[
{headerText:"Order Details <span class='e-calender e-icon'></span>", column:"OrderID,OrderDate,Freight"},
{headerText:"Ship Details",column:"ShipName,ShipCity,ShipCountry"}
]}
],
columns: [
{ 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 }
]
});
}); </script>
MVC
[In View]
@(Html.EJ().Grid<OrdersView>("StackedHeaderGrid")
.Datasource((IEnumerable<object>)ViewBag.datasource)
.ShowStackedHeader()
.StackedHeaderRows(row =>
{
row.StackedHeaderColumns(column =>
{
column.HeaderText("Order Details <span class='e-calender e-icon'></span>").Column(col =>
{
col.Add("OrderID");
col.Add("OrderDate");
col.Add("Freight");
}).Add();
column.HeaderText("Ship Details").Column(col =>
{
col.Add("ShipName");
col.Add("ShipCity");
col.Add("ShipCountry");
}).Add();
}).Add();
})
.AllowSorting()
.AllowPaging()
.Columns(col =>
{
col.Field("OrderID").HeaderText("Order ID").TextAlign(TextAlign.Right).Width(75).Add();
col.Field("OrderDate").HeaderText("Order Date").Width(80).Format("{0:MM/dd/yyyy}").Add();
col.Field("Freight").HeaderText("Freight").TextAlign(TextAlign.Right).Width(75).Format("{0:C}").Add();
col.Field("ShipName").HeaderText("Ship Name").TextAlign(TextAlign.Right).Width(80).Add();
col.Field("ShipCity").HeaderText("Ship City").Width(110).Add();
col.Field("ShipCountry").HeaderText("Ship Country").Width(110).Add();
}))
[Controller]
namespace EJGrid.Controllers
{
public class HomeController : Controller
{
public ActionResult Index()
{
var DataSource = OrderRepository.GetAllRecords();
ViewBag.data = DataSource;
return View();
}
}
}
ASP.NET
[aspx]
<ej:Grid ID="OrdersGrid" runat="server" ShowStackedHeader="true" AllowSorting="True" AllowPaging="True">
<Columns>
<ej:Column Field="OrderID" HeaderText="Order ID" TextAlign="Right" Width="75" />
<ej:Column Field="OrderDate" HeaderText="Order Date” TextAlign="Right" Width="75" Format="{0:MM/dd/yyyy}" />
<ej:Column Field="Freight" HeaderText="Freight" TextAlign="Right" 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,OrderDate,Freight" HeaderText=" Order Details <span class='e-calender e-icon'></span>" />
<ej:StackedHeaderColumn Column="ShipName,ShipCity,ShipCountry" HeaderText="Ship Details" />
</StackedHeaderColumns>
</ej:StackedHeaderRow>
</StackedHeaderRows>
</ej:Grid>
[CS]
public partial class _Default : Page
{
protected void Page_Load(object sender, EventArgs e)
{
this.OrdersGrid.DataSource = new NorthwindDataContext().Orders;
this.OrdersGrid.DataBind();
}
}
ASP.NET CORE:
<ej-grid id="FlatGrid" allow-sorting="true" show-stacked-header="true" allow-paging="true" datasource="ViewBag.dataSource" >
<e-stacked-header-rows>
<e-stacked-header-row>
<e-stacked-header-columns>
<e-stacked-header-column header-text="Order Details <span class='e-calender e-icon'></span>" column=@(new List<string>() { "OrderID","OrderDate","Freight"})></e-stacked-header-column>
<e-stacked-header-column header-text="Ship Details" column=@(new List<string>() { "ShipName","ShipCity","ShipCountry"})></e-stacked-header-column>
</e-stacked-header-columns>
</e-stacked-header-row>
</e-stacked-header-rows>
<e-columns>
<e-column field="OrderID" header-text="Order ID" text-align="Right" width="75"></e-column>
<e-column field="OrderDate" header-text="Order Date" format="{0:MM/dd/yyyy}" text-align=Right width="80"></e-column>
<e-column field="Freight" header-text="Freight" format="{0:C}" text-align=Right width="75"></e-column>
<e-column field="ShipName" header-text="Ship Name" width="80"></e-column>
<e-column field="ShipCity" header-text="Ship City" width="110"></e-column>
<e-column field="ShipCountry" header-text="Ship Country" width="75"></e-column>
</e-columns>
</ej-grid>
Angular:
<ej-grid id="Grid" [allowPaging]="true" [dataSource]="gridData" [showStackedHeader]="true" [stackedHeaderRows]="stackedHeaderRows">
<e-columns>
<e-column field="OrderID" headerText="Order ID" width="80"></e-column>
<e-column field="OrderDate" headerText="Order Date" width="80" format="{0:MM/dd/yyyy}" textAlign="right"></e-column>
<e-column field="Freight" headerText="Freight" width="75" format="{0:C}" textAlign="right"></e-column>
<e-column field="ShipName" headerText="Ship Name" width="110"></e-column>
<e-column field="ShipCity" headerText="Ship City" width="110"></e-column>
<e-column field="ShipCountry" headerText="Ship Country" width="110"></e-column>
</e-columns>
</ej-grid>
TS File:
@ViewChild('grid') Grid: EJComponents<any, any>;
export class GridComponent {
public gridData: any;
constructor() {
//The datasource "window.gridData" is referred from 'http://js.syncfusion.com/demos/web/scripts/jsondata.min.js
this.gridData = (window as any).gridData;
this.stackedHeaderRows = [{
stackedHeaderColumns:
[
{ headerText: "Order Details <span class='e-calender e-icon'></span>", column: "OrderID,OrderDate,Freight" },
{ headerText: "Ship Details", column: "ShipName,ShipCity,ShipCountry" }
]
}];
}
}
Screenshot:
