Column Template

12 Apr 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.

<ejs-grid id="Grid" dataSource="@ViewBag.DataSource" width="auto" >            
    <e-grid-columns>
        <e-grid-column headerText="EmployeeImage" template="#template" width="150" ></e-grid-column>                
        <e-grid-column field="EmployeeID" headerText="Employee ID" textAlign="Right" width="125"></e-grid-column>
        <e-grid-column field="FirstName" headerText="First Name" width="120"></e-grid-column>
        <e-grid-column field="Title" headerText="Title"  width="170"></e-grid-column>                
    </e-grid-columns>
</ejs-grid>

<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();
}

Grid actions such as editing, grouping, filtering and sorting etc. will depend upon the column field. If the field 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) {
        var ele = args.cell.querySelector('select');
        var drop = new ej.dropdowns.DropDownList({popupHeight: 150, popupWidth: 150});
        drop.appendTo(ele);
    }
<ejs-grid id="Grid" dataSource="@ViewBag.DataSource" queryCellInfo="dropdown">
    <e-grid-columns>
        <e-grid-column headerText="Order Status" width="200" template="#dropdown"></e-grid-column>
        <e-grid-column field="OrderID" headerText="Order ID" textAlign="Right" width="120"></e-grid-column>
        <e-grid-column field="CustomerID" headerText="Customer ID"  width="150"></e-grid-column>       
        <e-grid-column field="ShipCity" headerText="Ship City" width="150"></e-grid-column>
        <e-grid-column field="ShipName" headerText="Ship Name" width="150"></e-grid-column>
    </e-grid-columns>
</ejs-grid>

<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.

<ejs-grid id="Grid" dataSource="@ViewBag.DataSource" width="auto" >            
    <e-grid-columns>
        <e-grid-column headerText="Discontinued" template="#template" width="150" ></e-grid-column>                
        <e-grid-column field="ProductID" headerText="Product ID" textAlign="Right" width="125"></e-grid-column>
        <e-grid-column field="ProductName" headerText="Product Name" width="120"></e-grid-column>
        <e-grid-column field="SupplierID" headerText="SupplierID"  width="170"></e-grid-column>                
    </e-grid-columns>
</ejs-grid>

<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();
}

See Also