Render other components in a column

2 Mar 20222 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) {
        let ele=args.cell.querySelector('select');
        let drop = new ej.dropdowns.DropDownList({popupHeight: 150, popupWidth: 150});
        drop.appendTo(ele);
    }

CSHTML

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

Render-other-comp.cs

public IActionResult Index()
{
    ViewBag.DataSource = OrderDetails.GetAllRecords();
    return View();
}

Render-other-comp.cs

public IActionResult Index()
{
    ViewBag.DataSource = OrderDetails.GetAllRecords();
    return View();
}