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