Cell

21 Dec 20225 minutes to read

Cell customization

The appearance of cells can be customized by using the queryCellInfo event.

The queryCellInfo event triggers for every cell.

<ejs-grid id="Grid" dataSource="@ViewBag.DataSource" queryCellInfo="customiseCell">
    <e-grid-columns>
        <e-grid-column field="OrderID" headerText="Order ID"  textAlign="Right" width="100"></e-grid-column>
        <e-grid-column field="CustomerID" headerText="Customer ID"  width="120"></e-grid-column>                
        <e-grid-column field="OrderDate" headerText="Order Date" format='yMd'  width="100"></e-grid-column>
        <e-grid-column field="Freight" headerText="Freight" textAlign="Right" format="C2" width="100"></e-grid-column>
        <e-grid-column field="ShipCity" headerText="Ship City" width="100"></e-grid-column>
    </e-grid-columns>
</ejs-grid>

<script>
function customiseCell(args) {
    if(args.column.field === 'Freight') {
        if (args.data['Freight'] < 30){
            args.cell.classList.add('below-30');
        } else if(args.data['Freight'] < 80 ) {
            args.cell.classList.add('below-80');
        } else {
            args.cell.classList.add('above-80');
        }
    }
}
</script>
public IActionResult Index()
{
    var Order = OrderDetails.GetAllRecords();
    ViewBag.DataSource = Order;
    return View();
}

Custom attributes

You can customize the grid cells by adding a CSS class to the customAttribute property of e-grid-column tag helper.

.e-attr {
    background: #d7f0f4;
}

In the below example, we have customized the cells of OrderID and ShipCity columns.

<ejs-grid id="Grid" dataSource="@ViewBag.DataSource">
    <e-grid-columns>
        <e-grid-column field="OrderID" headerText="Order ID" customAttributes=@(new { @class="e-attr" } ) textAlign="Right" width="100"></e-grid-column>
        <e-grid-column field="CustomerID" headerText="Customer ID"  width="120"></e-grid-column>                
        <e-grid-column field="ShipCity" headerText="Ship City" customAttributes=@(new { @class="e-attr" } ) width="100"></e-grid-column>
        <e-grid-column field="OrderDate" headerText="Order Date" format='yMd'  width="100"></e-grid-column>
    </e-grid-columns>
</ejs-grid>

<style>
    .e-attr {
        background: #d7f0f4;
    }
</style>
public IActionResult Index()
{
    var Order = OrderDetails.GetAllRecords();
    ViewBag.DataSource = Order;
    return View();
}

Grid lines

The GridLines have option to display cell border and it can be defined by the gridLines property.

The available modes of grid lines are:

Modes Actions
Both Displays both the horizontal and vertical grid lines.
None No grid lines are displayed.
Horizontal Displays the horizontal grid lines only.
Vertical Displays the vertical grid lines only.
Default Displays grid lines based on the theme. 
<ejs-grid id="Grid" dataSource="@ViewBag.DataSource" height="315" gridLines="Both" >            
    <e-grid-columns>
        <e-grid-column field="OrderID" headerText="Order ID" textAlign="Right" width="100"></e-grid-column>
        <e-grid-column field="CustomerID" headerText="Customer ID" width="120"></e-grid-column>               
        <e-grid-column field="ShipCity" headerText="Ship City" width="100"></e-grid-column>
        <e-grid-column field="ShipName" headerText="Ship Name" width="100"></e-grid-column>
    </e-grid-columns>
 </ejs-grid>
public IActionResult Index()
{
    var Order = OrderDetails.GetAllRecords();
    ViewBag.DataSource = Order;
    return View();
}

NOTE

By default, the grid renders with Default mode.