Render other components in a column

17 Feb 20223 minutes to read

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