Columns in ASP.NET Core Grid Component

17 Jan 202424 minutes to read

The column definitions are used as the DataSource schema in the Grid. This plays a vital role in rendering column values in the required format.
The grid operations such as sorting, filtering and grouping etc. are performed based on column definitions. The field property of e-grid-column is necessary to map the datasource values in Grid columns.

NOTE

  1. If the column field is not specified in the dataSource, the column values will be empty.

    2. If the field name contains “dot” operator, it is considered as complex binding.

Column types

Column type can be specified using the type property of e-grid-column tag helper. It specifies the type of data the column binds.

If the format is defined for a column, the column uses type to select the appropriate format option (number or date)).

Grid column supports the following types:

  • string
  • number
  • boolean
  • date
  • datetime

NOTE

If the type is not defined, it will be determined from the first record of the DataSource.

Incase if the first record of the DataSource is null/blank value for a column then it is necessary to define the type for that column.

ValueAccessor

The valueAccessor is used to access/manipulate the value of display data. You can achieve custom value formatting by using the valueAccessor.

@{ 
    var valueAccessor = "valueAccessorFn";
}

<ejs-grid id="Grid" dataSource="@ViewBag.DataSource" height="280">
    <e-grid-columns>
        <e-grid-column field="OrderID" headerText="Order ID" width="100" textAlign="Right"></e-grid-column>
        <e-grid-column field="CustomerID" headerText="Customer Name" width="120"></e-grid-column>
        <e-grid-column field="ShipCity" valueAccessor="valueAccessor" headerText="Ship City" width="150"></e-grid-column> 
        <e-grid-column field="ShipName" headerText="Ship Name" 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>

<script>
    function valueAccessorFn(field, data, column){
        var value = data[field]
        if (data['ShipCountry'] !== undefined) {
            value = value + ' - ' + data['ShipCountry'];
        }
        return value;
    }
</script>
public IActionResult Index()
{
    var Order = OrderDetails.GetAllRecords();
    ViewBag.DataSource = Order;
    return View();
}

Format

To format cell values based on specific culture, use the format property of e-grid-column tag helper . The grid uses Internalization library to format number and date values.

<ejs-grid id="Grid" dataSource="@ViewBag.DataSource" height="315">   
    <e-grid-columns>
        <e-grid-column field="OrderID" headerText="Order ID" type="number" textAlign="Right" width="120"></e-grid-column>
        <e-grid-column field="CustomerID" headerText="Customer ID" type="string" width="140"></e-grid-column>
        <e-grid-column field="Freight" headerText="Freight" textAlign="Right" format="C2" width="120"></e-grid-column>
        <e-grid-column field="OrderDate" headerText="Order Date" format='yMd' textAlign="Right" width="140"></e-grid-column>
    </e-grid-columns>
</ejs-grid>
public IActionResult Index()
{
    var Order = OrderDetails.GetAllRecords();
    ViewBag.DataSource = Order;
    return View();
}

NOTE

By default, the number and date values are formatted in en-US locale.

Number formatting

The number or integer values can be formatted using the below format strings.

Format Description Remarks
N Denotes numeric type. The numeric format is followed by integer value as N2, N3. etc which denotes the number of precision to be allowed.
C Denotes currency type. The currency format is followed by integer value as C2, C3. etc which denotes the number of precision to be allowed.
P Denotes percentage type The percentage format expects the input value to be in the range of 0 to 1. For example the cell value 0.2 is formatted as 20%. The percentage format is followed by integer value as P2, P3. etc which denotes the number of precision to be allowed.

Date formatting

You can format date values either using built-in date format string or custom format string.

For built-in date format you can specify format property of e-grid-column as string (Example: yMd).

You can also use custom format string to format the date values. Some of the custom formats and the formatted date values are given in the below table.

Format Formatted value
{ type:’date’, format:’dd/MM/yyyy’ } 04/07/1996
{ type:’date’, format:’dd.MM.yyyy’ } 04.07.1996
{ type:’date’, skeleton:’short’ } 7/4/96
{ type: ‘dateTime’, format: ‘dd/MM/yyyy hh:mm a’ } 04/07/1996 12:00 AM
{ type: ‘dateTime’, format: ‘MM/dd/yyyy hh:mm:ss a’ } 07/04/1996 12:00:00 AM 
<ejs-grid id="Grid" dataSource="@ViewBag.DataSource" height="315">
    <e-grid-columns>
        <e-grid-column field="OrderID" headerText="Order ID" type="number" textAlign="Right" width="120"></e-grid-column>
        <e-grid-column field="CustomerID" headerText="Customer ID" type="string" width="140"></e-grid-column>
        <e-grid-column field="Freight" headerText="Freight" textAlign="Right" format="C2" width="120"></e-grid-column>
        <e-grid-column field="Price" headerText="Price" textAlign="Right" format="P2" width="120"></e-grid-column>
        <e-grid-column field="OrderDate" headerText="Order Date" customFormat="@(new { type ="date", format="dd/MM/yyyy" })" type="date" textAlign="Right" width="140"></e-grid-column>
        <e-grid-column field="ShippedDate" headerText="Shipped Date" customFormat="@(new { type ="date", format="dd.MM.yyyy" })" type="date" textAlign="Right" width="140"></e-grid-column>
    </e-grid-columns>
</ejs-grid>
public IActionResult Index()
{
    var Order = OrderDetails.GetAllRecords();
    ViewBag.DataSource = Order;
    return View();
}

Render boolean value as checkbox

To render boolean values as checkbox in columns, you need to set displayAsCheckBox property of e-grid-column as true.

<ejs-grid id="Grid" dataSource="ViewBag.DataSource">
    <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" type="string" width="120"></e-grid-column>                
        <e-grid-column field="Freight" headerText="Freight" textAlign="Right" format="C2" width="120" ></e-grid-column>                               
        <e-grid-column field="Verified" headerText="Verified" displayAsCheckBox="true" textAlign="Center"></e-grid-column>
    </e-grid-columns>
</ejs-grid>
public IActionResult Index()
 {
    var orders = OrdersDetails.GetAllRecords();
    ViewBag.DataSource = orders;            
    return View();
  }

Visibility

You can hide any particular column in Grid before rendering by defining visible property of e-grid-column as false. In the below sample ShipCity column is defined as visible false.

<ejs-grid id="Grid" dataSource="@ViewBag.DataSource">    
    <e-grid-columns>
        <e-grid-column field="OrderID" headerText="Order ID" width="150" ></e-grid-column>
        <e-grid-column field="CustomerID" headerText="Customer ID" width="150"></e-grid-column>
        <e-grid-column field="OrderDate" headerText="Order Date" format="yMd" textAlign="Right" width="130"></e-grid-column>
        <e-grid-column field="ShipCity" headerText="Ship City" visible="false" width="150"></e-grid-column>
    </e-grid-columns>
</ejs-grid>
public IActionResult Index()
{
    var Order = OrderDetails.GetAllRecords();
    ViewBag.DataSource = Order;
    return View();
}

Lock columns

You can lock columns by using lockColumn property of e-grid-column tag helper. The locked columns will be moved to the first position. Also you can’t reorder its position.

In the below example, Ship City column is locked and its reordering functionality is disabled.

<ejs-grid id="Grid" dataSource="@ViewBag.DataSource" allowReordering="true" height="315">   
    <e-grid-columns>
        <e-grid-column field="OrderID" headerText="Order ID"  width="140"></e-grid-column>
        <e-grid-column field="CustomerID" headerText="Customer ID" type="string" width="130"></e-grid-column>
        <e-grid-column field="ShipCity" width="120" lockColumn="true"></e-grid-column>
        <e-grid-column field="ShipName" width="120"></e-grid-column>
        <e-grid-column field="ShipPostalCode"width="150"></e-grid-column>        
        <e-grid-column field="ShipRegion" width="120"></e-grid-column>
    </e-grid-columns>
</ejs-grid>
public IActionResult Index()
{
    var order = OrderDetails.GetAllRecords();
    ViewBag.DataSource = order;
    return View();
}

Controlling Grid actions

You can enable or disable grid action for a particular column by setting the allowFiltering, allowGrouping, allowEditing,allowReordering, and allowSorting properties.

<ejs-grid id="Grid" dataSource="@ViewBag.DataSource" allowGrouping="true" allowSorting="true" allowReordering="true" allowFiltering="true" >     
<e-grid-editSettings allowAdding="true" allowDeleting="true" allowEditing="true" mode="Batch"></e-grid-editSettings>
    <e-grid-columns>
        <e-grid-column field="OrderID" headerText="Order ID"  allowGrouping="false" width="100"  textAlign="Right"></e-grid-column>
        <e-grid-column field="CustomerID" headerText="Customer ID" allowReordering="false" allowEditing="false" width="120"></e-grid-column>               
        <e-grid-column field="ShipCity"  headerText="Ship City" allowFiltering="false" width="100"></e-grid-column>
        <e-grid-column field="ShipName"  headerText="Ship Name" allowSorting="false" width="100"></e-grid-column>
    </e-grid-columns>
</ejs-grid>
public IActionResult Index()
{
    var Order = OrderDetails.GetAllRecords();
    ViewBag.DataSource = Order;
    return View();
}

Show or hide columns by external button

You can show or hide grid columns dynamically using external buttons by invoking the showColumns or hideColumns method.

<ejs-button id="show" cssClass="e-flat" content="Show Columns"></ejs-button>
    <ejs-button id="hide" cssClass="e-flat" content="Hide Columns"></ejs-button>

    <ejs-grid id="Grid" dataSource="@ViewBag.DataSource" height="280">
        <e-grid-columns>
            <e-grid-column field="OrderID" headerText="Order ID" width="100" textAlign="Right"></e-grid-column>
            <e-grid-column field="CustomerID" headerText="Customer Name" 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-column field="OrderDate" headerText="Order Date" format="yMd" width="100"></e-grid-column>
        </e-grid-columns>
    </ejs-grid>

    <script>

        document.getElementById("show").addEventListener("click", function(){
            var grid = document.getElementById("Grid").ej2_instances[0];
            grid.showColumns(['Customer Name', 'Order Date']); //show by HeaderText
        });

        document.getElementById("hide").addEventListener("click", function() {
            var grid = document.getElementById("Grid").ej2_instances[0];
            grid.hideColumns(['Customer Name', 'Order Date']); //hide by HeaderText
        })

    </script>
public IActionResult Index()
{
    var Order = OrderDetails.GetAllRecords();
    ViewBag.DataSource = Order;
    return View();
}

Customize column styles

You can customize the appearance of the header and content of a particular column using the customAttributes property.

To customize the grid column, follow the given steps:

Step 1:

Create a CSS class with custom style to override the default style for rowcell and headercell.

.e-grid .e-rowcell.customcss{
    background-color: #ecedee;
    color: 'red';
    font-family: 'Bell MT';
    font-size: 20px;
}

.e-grid .e-headercell.customcss{
    background-color: #2382c3;
    color: white;
    font-family: 'Bell MT';
    font-size: 20px;
}

Step 2:

Add the custom CSS class to the specified column by using the customAttributes property.

<e-grid-column field="Freight" headerText="Freight" width="150"  customAttributes=@(new { @class="customcss" } )></e-grid-column>
<ejs-grid id="Grid" dataSource="@ViewBag.DataSource"  allowFiltering="true" >
    <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="Freight" headerText="Freight" customAttributes=@(new{@class="customcss"}) width="150" ></e-grid-column>        
        <e-grid-column field="ShipCity" headerText="Shio City" width="100"></e-grid-column>
        <e-grid-column field="ShipName" headerText="Ship Name" width="100"></e-grid-column>
    </e-grid-columns>
</ejs-grid>

<style>

.e-grid .e-rowcell.customcss{
    background-color: #ecedee;
    color: 'red';
    font-family: 'Bell MT';
    font-size: 20px;
}

.e-grid .e-headercell.customcss{
    background-color: #2382c3;
    color: white;
    font-family: 'Bell MT';
    font-size: 20px;
}

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

Display custom tooltip for columns

To display a custom ToolTip (EJ2 Tooltip), you can render the Grid control inside the Tooltip component and set the target as “.e-rowcell”. The tooltip is displayed when hovering the grid cells.

Change the tooltip content for the grid cells by using the following code in the (beforeRender) event.

function beforeRender(args) {
        // event triggered before render the tooltip on target element.
        var tooltip = document.getElementById("Tooltip").ej2_instances[0]
        tooltip.content = args.target.closest("td").innerText;
}
<ejs-tooltip id="Tooltip" target=".e-rowcell" beforeRender="beforeRender">
    <e-content-template>
        <ejs-grid id="Grid" dataSource="@ViewBag.DataSource">
            <e-grid-columns>
                <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>
    </e-content-template>
</ejs-tooltip>

<script>
    function beforeRender(args) {
        // event triggered before render the tooltip on target element.
        var tooltip = document.getElementById("Tooltip").ej2_instances[0]
        tooltip.content = args.target.closest("td").innerText;
    }
</script>
public IActionResult Index()
{
    ViewBag.DataSource = OrderDetails.GetAllRecords();
    return View();
}

Align the text of Grid content and header

For aligning the text of Grid content and header part, use TextAlign and HeaderTextAlign properties.

Grid column supports the following alignments:

  • Left
  • Right
  • Center
  • Justify
<ejs-grid id="Grid" dataSource="@ViewBag.DataSource">
    <e-grid-columns>
        <e-grid-column field="OrderID" headerText="Order ID" textAlign="Right" headerTextAlign="Right" width="100"></e-grid-column>
        <e-grid-column field="CustomerID" headerText="Customer ID" textAlign="Left" headerTextAlign="Left" width="120"></e-grid-column>
        <e-grid-column field="ShipCity" headerText="Ship City" textAlign="Center" headerTextAlign="Center" width="100"></e-grid-column>
        <e-grid-column field="Freight" headerText="Freight" textAlign="Justify" headerTextAlign="Justify" width="100" format='C2'></e-grid-column>
    </e-grid-columns>
</ejs-grid>
public IActionResult Index()
{
    var Order = OrderDetails.GetAllRecords();
    ViewBag.DataSource = Order;
    return View();
}

How to prevent checkbox in the blank row

By default, cells in the grid will be blank if the corresponding column values in the data source are null or undefined. The grid also has the option to prevent the rendering of checkboxes in such cases, even if the displayAsCheckBox property is set to true for that column, by using the rowDataBound event of the Grid.

In the following sample, the rowDataBound event of the Grid is used to set the innerHTML of the checkbox element to empty.

<ejs-grid id="Grid" dataSource="@ViewBag.DataSource" rowDataBound="rowBound">
    <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="Verified" headerText="Verified" width="100" displayAsCheckBox="true"></e-grid-column>
    </e-grid-columns>
</ejs-grid>

<script>
    function rowBound(args) {
        let grid = document.getElementById('Grid').ej2_instances[0];
        let count = 0;
        let keys = Object.keys(args.data);
        for (let i = 0; i < keys.length; i++) {
            if (args.data[keys[i]] == null || args.data[keys[i]] == '' || args.data[keys[i]] == undefined) {
                count++;
            }
        }
        if (count == keys.length) {
            for (let i = 0; i < grid.columns.length; i++) {
                if (grid.columns[i].displayAsCheckBox) {
                    args.row.children[i].innerHTML = '';
                }
            }
        }
    }
</script>
public IActionResult Index()
{
    var orders = OrdersDetails.GetAllRecords();
    ViewBag.DataSource = orders;            
    return View();
}

See Also