The HTML tags can be displayed in the Grid header and content by enabling the DisableHtmlEncode
property in Column
.
@Html.EJS().Grid("HTMLEncode").DataSource((IEnumerable<object>)ViewBag.dataSource).Columns(col =>
{
col.Field("OrderID").HeaderText("<span> Order ID </span>").Width("120").DisableHtmlEncode(true).TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
col.Field("CustomerID").HeaderText("<span> Customer ID </span>").Width("150").DisableHtmlEncode(true).Add();
col.Field("OrderDate").HeaderText("Order Date").Width("130").Format("yMd").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).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().PageSettings(page => { page.PageCount(5);}).Render()
public IActionResult Index()
{
var Order = OrderDetails.GetAllRecords();
ViewBag.DataSource = Order;
return View();
}
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();
}
The auto wrap allows the cell content of the grid to wrap to the next line when it exceeds the boundary of the cell width. The Cell Content wrapping works based on the position of white space between words.
To enable auto wrap, set the AllowTextWrap
property to true.
You can configure the auto wrap mode by setting the WrapMode
property of TextWrapSettings
.
There are three types of WrapMode
. They are:
Note: When a column width is not specified, then auto wrap of columns will be adjusted with respect to the grid’s width.
In the following example, the WrapMode
is set to Content.
@Html.EJS().Grid("AutoWrap").DataSource((IEnumerable<object>)ViewBag.dataSource).AllowTextWrap().Columns(col =>
{
col.Field("NumberofPatentFamilies").HeaderText("NumberofPatentFamilies").Width("120").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
col.Field("Inventor").HeaderText("Inventor").Width("150").Add();
col.Field("NumberofINPADOCpatents").HeaderText("NumberofINPADOCpatents").Width("120").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
col.Field("Mainfieldsofinvention").HeaderText("Mainfieldsofinvention").Width("150").Add();
col.Field("Active").HeaderText("Active").Width("150").Add();
}).AllowPaging().TextWrapSettings(text => { text.WrapMode(Syncfusion.EJ2.Grids.WrapMode.Content);}).Render()
public IActionResult Index()
{
var Records = InventorDetails.GetAllRecords();
ViewBag.DataSource = Records;
return View();
}
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();
}
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();
}
By default, the grid renders with Default mode.
The clip mode provides options to display its overflow cell content and it can be defined by the ClipMode
property in Column
.
There are three types of ClipMode. They are:
@Html.EJS().Grid("ClipMode").DataSource((IEnumerable<object>)ViewBag.dataSource).Columns(col =>
{
col.Field("NumberofPatentFamilies").HeaderText("NumberofPatentFamilies").Width("120").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
col.Field("Inventor").HeaderText("Inventor").ClipMode(Syncfusion.EJ2.Grids.ClipMode.Clip).Width("150").Add();
col.Field("NumberofINPADOCpatents").ClipMode(Syncfusion.EJ2.Grids.ClipMode.Ellipsis).HeaderText("NumberofINPADOCpatents").Width("120").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
col.Field("Mainfieldsofinvention").ClipMode(Syncfusion.EJ2.Grids.ClipMode.EllipsisWithTooltip).HeaderText("Mainfieldsofinvention").Width("150").Add();
col.Field("Active").HeaderText("Active").Width("150").Add();
}).AllowPaging().Render()
public IActionResult Index()
{
var Order = OrderDetails.GetAllRecords();
ViewBag.DataSource = Order;
return View();
}
By default,
ClipMode
value is Ellipsis.