Cell
21 Dec 20224 minutes to read
Cell customization
The appearance of cells can be customized by using the QueryCellInfo
event. The QueryCellInfo
event triggers for every cell. In that event handler, you can get QueryCellInfoEventArgs that contains the details of the cell.
@Html.EJS().Grid("CellCustomize").DataSource((IEnumerable<object>)ViewBag.DataSource).Columns(col =>
{
col.Field("OrderID").HeaderText("Order ID").Width("120").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
col.Field("CustomerID").HeaderText("Customer ID").Width("150").Add();
col.Field("OrderDate").HeaderText("Order Date").Width("130").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Format("yMd").Add();
col.Field("Freight").HeaderText("Freight").Width("120").Format("C2").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
col.Field("ShipCountry").HeaderText("Ship Country").Width("150").Add();
}).AllowPaging().QueryCellInfo("customiseCell").Render()
<style>
.below-5 {
background-color: orangered;
}
.below-8 {
background-color: yellow;
}
.above-8 {
background-color: greenyellow
}
</style>
<script>
function customiseCell(args) {
if (args.column.field === 'Freight') {
if (args.data['Freight'] < 5) {
args.cell.classList.add('below-5');
} else if (args.data['Freight'] < 8) {
args.cell.classList.add('below-8');
} else {
args.cell.classList.add('above-8');
}
}
}
</script>
public IActionResult Index()
{
var Order = OrderDetails.GetAllRecords();
ViewBag.DataSource = Order;
return View();
}
Custom attributes
You can customize the grid cells by adding a CSS class to the customAttribute
property of the column.
.e-attr {
background: #d7f0f4;
}
In the below example, we have customized the cells of OrderID and ShipCity columns.
@Html.EJS().Grid("CellCustomize").DataSource((IEnumerable<object>)ViewBag.DataSource).Columns(col =>
{
col.Field("OrderID").HeaderText("Order ID").Width("120").CustomAttributes(new { @class = "customcss" }).TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
col.Field("CustomerID").HeaderText("Customer ID").Width("150").Add();
col.Field("ShipCity").HeaderText("Ship City").CustomAttributes(new { @class = "e-attr" }).Width("150").Add();
col.Field("OrderDate").HeaderText("Order Date").Width("130").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Format("yMd").Add();
}).AllowPaging().Render()
<style>
.e-attr {
background: #d7f0f4;
}
</style>
public IActionResult Index()
{
var Order = OrderDetails.GetAllRecords();
ViewBag.DataSource = Order;
return View();
}
Grid lines
The GridLines
have option to display cell border and it can be defined by the GridLines
property.
The available modes of grid lines are:
Modes | Actions |
---|---|
Both | Displays both the horizontal and vertical grid lines. |
None | No grid lines are displayed. |
Horizontal | Displays the horizontal grid lines only. |
Vertical | Displays the vertical grid lines only. |
Default | Displays grid lines based on the theme. |
@Html.EJS().Grid("GridLine").DataSource((IEnumerable<object>)ViewBag.dataSource).GridLines(Syncfusion.EJ2.Grids.GridLine.Both).Columns(col =>
{
col.Field("OrderID").HeaderText("Order ID").Width("120").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
col.Field("CustomerID").HeaderText("Customer ID").Width("150").Add();
col.Field("OrderDate").HeaderText("Order Date").Width("130").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Format("yMd").Add();
col.Field("Freight").HeaderText("Freight").Width("120").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Format("C2").Add();
col.Field("ShipCountry").HeaderText("Ship Country").Width("150").Add();
}).AllowPaging().PageSettings(page => { page.PageCount(5);}).Render()
public IActionResult Index()
{
var Order = OrderDetails.GetAllRecords();
ViewBag.DataSource = Order;
return View();
}
NOTE
By default, the grid renders with Default mode.