Column Template in ASP.NET MVC Grid Component
21 Dec 20226 minutes to read
Render image in a column
The column Template
has options to display custom element instead of a field value in the column.
@Html.EJS().Grid("FlatGrid").DataSource((IEnumerable<object>)ViewBag.dataSource).Width("auto").Height("359").Columns(col =>
{
col.HeaderText("Employee Image").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Center).Template("#template").Width("150").Add();
col.Field("EmployeeID").HeaderText("Employee ID").Width("120").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
col.Field("FirstName").HeaderText("Name").Width("125").Add();
col.Field("City").HeaderText("City").Width("170").Add();
col.Field("Country").HeaderText("Country").Width("135").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
}).Render()
<style>
.image img {
height: 55px;
width: 55px;
border-radius: 50px;
box-shadow: inset 0 0 1px #e0e0e0, inset 0 0 14px rgba(0, 0, 0, 0.2);
}
</style>
<script id="template" type="text/x-template">
<div class="image">
<img src="/Content/images/Employees/${EmployeeID}.png" alt="${EmployeeID}" />
</div>
</script>
public IActionResult Index()
{
var Emp = EmployeeDetails.GetAllRecords();
ViewBag.DataSource = Emp;
return View();
}
NOTE
Grid actions such as editing, grouping, filtering and sorting etc. will depend upon the column
Field
. If theField
is not specified in the template column, the grid actions cannot be performed.
Render other components in a column
You can render any component in a grid column using the Template
property.
To render other components in the grid, ensure the following steps:
Step 1: Initialize the column template for your custom component.
template:`<div>
<select class="e-control e-dropdownlist">
<option value="1" selected="selected">Order Placed</option>
<option value="2">Processing</option>
<option value="3">Delivered</option>
</select>
</div>`
Step 2: Using the QueryCellInfo
event, you can render the DropDown component with the following code.
function dropdown(args) {
let ele=args.cell.querySelector('select');
let drop = new ej.dropdowns.DropDownList({popupHeight: 150, popupWidth: 150});
drop.appendTo(ele);
}
@Html.EJS().Grid("Grid").DataSource((IEnumerable<object>)ViewBag.DataSource).Columns(col =>
{
col.HeaderText("Order Status").Width("200").Template("#dropdown").Add();
col.Field("OrderID").HeaderText("Order ID").Width("120").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
col.Field("CustomerID").HeaderText("Customer Name").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("120").Add();
}).QueryCellInfo("dropdown").Render()
<div id='dropdown'>
<select class="e-control e-dropdownlist">
<option value="1" selected="selected">Order Placed</option>
<option value="2">Processing</option>
<option value="3">Delivered</option>
</select>
</div>
<script>
function dropdown(args) {
var ele = args.cell.querySelector('select');
var drop = new ej.dropdowns.DropDownList({ popupHeight: 150, popupWidth: 150 });
drop.appendTo(ele);
}
</script>
public IActionResult Index()
{
ViewBag.DataSource = OrderDetails.GetAllRecords();
return View();
}
public IActionResult Index()
{
ViewBag.DataSource = OrderDetails.GetAllRecords();
return View();
}
Using condition template
You can render the template elements based on condition.
In the following code, checkbox is rendered based on Discontinued field value.
@Html.EJS().Grid("FlatGrid").DataSource((IEnumerable<object>)ViewBag.dataSource).Width("auto").Height("359").Columns(col =>
{
col.HeaderText("Discontinued").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Center).Template("#template").Width("150").Add();
col.Field("ProductID").HeaderText("Product ID").Width("120").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
col.Field("ProductName").HeaderText("Name").Width("125").Add();
col.Field("SupplierID").HeaderText("Supplier ID").Width("170").Add();
col.Field("UnitsInStock").HeaderText("Units In Stock").Width("135").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
}).Render()
<script id="template" type="text/x-template">
<div class="template_checkbox">
${if(Discontinued)}
<input type="checkbox" checked> ${else}
<input type="checkbox"> ${/if}
</div>
</script>
public IActionResult Index()
{
var Category = CategoryDetails.GetAllRecords();
ViewBag.DataSource = Category;
return View();
}
How to get the row object by clicking on the template element
You can get the row object without selecting the row and achieve it using the column template feature and the getRowObjectFromUID
method of the Grid.
In the following sample, the button element is rendered in the Employee Data column. By clicking the button, you can get the row object using the getRowObjectFromUID
method of the Grid and display it in the console.
@Html.EJS().Grid("Grid").DataSource((IEnumerable<object>)ViewBag.DataSource).RecordClick("recordClick").Columns(col =>
{
col.HeaderText("Customer Data").IsPrimaryKey(true).Width("150").Template("#template").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
col.Field("CustomerID").HeaderText("Customer Name").Width("150").ValidationRules(new { required = "true", minLength = 3 }).Add();
col.Field("Freight").HeaderText("Freight").Width("120").Format("C2").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
col.Field("ShipName").HeaderText("Ship Name").Width("150").Add();
col.Field("ShipCountry").HeaderText("Ship Country").Width("150").Add();
}).Render()
<script id="template" type="text/x-template">
<button class="empData">Employee Data</button>
</script>
<script>
function recordClick(args) {
if (args.target.classList.contains('empData')) {
var rowObj = document.getElementById('Grid').ej2_instances[0].getRowObjectFromUID(ej.base.closest(args.target, '.e-row').getAttribute('data-uid'));
console.log(rowObj);
}
}
</script>
public IActionResult Index()
{
var Order = OrderDetails.GetAllRecords();
ViewBag.DataSource = Order;
return View();
}