Search results

Columns

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.

  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.

Auto generation

The Columns are automatically generated when Columns declaration is empty or undefined while initializing the grid. All the columns in the DataSource are bound as grid columns.

tagHelper
auto.cs
<ejs-grid id="Grid" dataSource="@ViewBag.DataSource">
           
</ejs-grid>
public IActionResult Index()
{
    var Order = OrderDetails.GetAllRecords();
    ViewBag.DataSource = Order;
    return View();
}

When columns are auto-generated, the column Type will be determined from the first record of the DataSource.

Set Primary key column for auto generated columns when editing is enabled

Primary key can be defined in the declaration of column object of the grid. If you did not declare the columns, the grid will generate the columns automatically. For these auto generated columns, you can set isPrimaryKey property of e-grid-column as true by using the following ways,

If Primary key “column index” is known then refer the following example

tagHelper
primary.cs
<ejs-grid id="Grid" dataSource="@ViewBag.DataSource" dataBound="dataBound">
    <e-grid-editSettings allowAdding="true" allowDeleting="true" allowEditing="true">
    </e-grid-editSettings>
</ejs-grid>

<script>
    function dataBound() {
        var grid = document.getElementById('Grid').ej2_instances[0];
        var column = grid.columns[0];
        column.isPrimaryKey = 'true';
    }
</script>
public IActionResult Index()
{
    var Order = OrderDetails.GetAllRecords();
    ViewBag.DataSource = Order;
    return View();
}

If Primary key “column fieldname” is known then you can get the column by using var column = grid.getColumnByField('OrderID') and then set primary key by defining isPrimaryKey property as true in e-grid-column tag helper.

Set column options to auto generated columns

You can set column options such as format, width to the auto generated columns by using dataBound event of the grid.

In the below example, width is set for OrderID column, date type is set for OrderDate column and numeric type is set for Freight column.

tagHelper
autocolumnformat.cs
<ejs-grid id="Grid" dataSource="@ViewBag.DataSource" dataBound="dataBound">
           
</ejs-grid>

<script>
    function dataBound() {
        for (var i = 0; i < this.columns.length; i++) {
            this.columns[0].width = 120;
            if (this.columns[i].field === "OrderDate") {
                this.columns[i].type = "date";
            }
            if (this.columns[i].type === "date") {
                this.columns[i].format = { type: "date", format: "dd/MM/yyyy" };
            }
            this.columns[3].format = "P2";
        }
        this.refreshColumns();
    }
</script>
public IActionResult Index()
{
    var Order = OrderDetails.GetAllRecords();
    ViewBag.DataSource = Order;
    return View();
}

Complex data binding

You can achieve complex data binding in the grid by using the dot(.) operator in the field property of e-grid-column tag helper.

tagHelper
complexbinding.cs
<ejs-grid id="Grid" dataSource="@ViewBag.data" height="315" >     
    <e-grid-columns>
        <e-grid-column field="EmployeeID" headerText="Employee ID"   width="100"  textAlign="Right"></e-grid-column>
        <e-grid-column field="Name.FirstName" headerText="Last Name"  width="120"></e-grid-column>               
        <e-grid-column field="Name.LastName"  headerText="Last Name"  width="100"></e-grid-column>
        <e-grid-column field="Title"  headerText="Title"  width="100"></e-grid-column>
    </e-grid-columns>
</ejs-grid>
public IActionResult Index()
{
    var ComplexData = ComplexData.GetAllRecords();
    ViewBag.data = ComplexData;
    return View();
}

For OData and ODataV4 adaptors, you need to add expand query to the query property (of Grid), to eager load the complex data.

tagHelper
query.cs
<ejs-grid id="Grid" query="new ej.data.Query().expand('Employee')" >
    <e-data-manager url="https://js.syncfusion.com/demos/ejServices/Wcf/Northwind.svc/Orders" adaptor="ODataAdaptor" crossdomain="true"></e-data-manager>
    <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="Employee.City" headerText="City" width="140"></e-grid-column>
    </e-grid-columns>
 </ejs-grid>
public IActionResult Index()
 {   
    return View();
 }

Foreign Key Column

Foreign key column can be enabled by using dataSource, foreignKeyField and foreignKeyValue properties of e-grid-column tag helper.

In the following example, Employee Name is a foreign column which shows FirstName column from foreign data.

tagHelper
foreign.cs
<ejs-grid id="Grid" dataSource="@ViewBag.datasource" >
    <e-grid-columns>
        <e-grid-column field="OrderID" headerText="Order ID" isPrimaryKey="true" textAlign="Right" width="120"></e-grid-column>
        <e-grid-column field="EmployeeID" headerText="Empolyee Name" foreignKeyValue="FirstName" dataSource="ViewBag.foreign" width="150"></e-grid-column>               
        <e-grid-column field="Freight" headerText="Freight" textAlign="Right" format="C2" width="120"></e-grid-column>               
        <e-grid-column field="ShipName" headerText="Ship Name" width="150"></e-grid-column>
    </e-grid-columns>
 </ejs-grid>
public IActionResult DefaultExporting()
{
    var order = OrdersDetails.GetAllRecords();
    ViewBag.dataSource = order;
    var emp = EmployeeView.GetAllRecords();
    ViewBag.foreign = emp;
    return View();
}

Header Template

You can customize the header element by using the headerTemplate property of e-grid-column tag helper. In this demo, the custom element is rendered for both EmployeeID and BirthDate column headers.

tagHelper
headertemplate.cs
<ejs-grid id="Grid" dataSource="@ViewBag.DataSource">
    <e-grid-columns>
        <e-grid-column field="EmployeeID" headerTemplate="#employeetemplate" textAlign="Right" width="120"></e-grid-column>
        <e-grid-column field="FirstName" width="140"></e-grid-column>
        <e-grid-column field="BirthDate" headerTemplate="#datetemplate" textAlign="Right" width="130"></e-grid-column>
        <e-grid-column field="City" width="120"></e-grid-column>
        <e-grid-column field="Country" width="140"></e-grid-column>
    </e-grid-columns>
</ejs-grid>

    <style>
        .e-grid .e-icon-userlogin::before {
            width: 15px !important;
            content: '\e7d4';
        }

        .e-grid .e-icon-calender::before {
            width: 15px !important;
            content: '\e7b5';
        }
    </style>

    <script id="datetemplate" type="text/x-template">
        <span class="e-icon-calender e-icons headericon"></span> Order Date
    </script>

    <script id="employeetemplate" type="text/x-template">
        <span class="e-icon-userlogin e-icons employee"></span> Emp ID
    </script>
public IActionResult Index()
{
    var Emp = EmployeeDetails.GetAllRecords();
    ViewBag.DataSource = Emp;
    return View();
}

Header text

By default, column header title is displayed from column field value. To override the default header title, you have to define the headerText value in the headerText property of e-grid-column tag helper.

tagHelper
headertext.cs
<ejs-grid id="Grid" dataSource="@ViewBag.DataSource">
    <e-grid-columns>
        <e-grid-column field="EmployeeID" headerText="Employee ID"  textAlign="Right" width="120"></e-grid-column>
        <e-grid-column field="FirstName" headerText="First Name" width="140"></e-grid-column>
        <e-grid-column field="BirthDate" headerText="Birth Date"  textAlign="Right" width="130"></e-grid-column>
        <e-grid-column field="City" headerText="City" width="120"></e-grid-column>
        <e-grid-column field="Country" width="140"></e-grid-column>
    </e-grid-columns>
</ejs-grid>
public IActionResult Index()
{
    var Emp = EmployeeDetails.GetAllRecords();
    ViewBag.DataSource = Emp;
    return View();
}
  • If both the field and headerText are not defined in the column, the column renders with “empty” header text.

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.

tagHelper
format.cs
<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();
}

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
tagHelper
format.cs
<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();
}

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.

AutoFit specific columns

The autoFitColumns method resizes the column to fit the widest cell’s content without wrapping. You can autofit a specific column at initial rendering by invoking the autoFitColumns method in dataBound event.

To use the autoFitColumns method, inject the Resize module in the grid.

tagHelper
autofit.cs
<ejs-grid id="Grid" dataSource="@ViewBag.DataSource" dataBound="dataBound" 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="ShipName" headerText="Ship Name" width="120"></e-grid-column>
        <e-grid-column field="ShipCity" headerText="Ship City" width="120"></e-grid-column>
        <e-grid-column field="ShipAddress" headerText="Ship Address" width="150"></e-grid-column>
    </e-grid-columns>
</ejs-grid>

<script>
    function dataBound(args) {
        this.autoFitColumns(['ShipName', 'ShipAddress']);    
    }
</script>
public IActionResult Index()
{
    var Order = OrderDetails.GetAllRecords();
    ViewBag.DataSource = Order;
    return View();
}

You can autofit all the columns by invoking the autoFitColumns method without column names.

Reorder

Reordering can be done by drag and drop of a particular column header from one index to another index within the grid. To enable reordering, set the allowReordering property to true.

tagHelper
reorder.cs
<ejs-grid id="Grid" dataSource="@ViewBag.DataSource" allowReordering="true"  height="315">   
    <e-grid-columns>
        <e-grid-column field="EmployeeID" headerText="Employee ID"  width="100"></e-grid-column>
        <e-grid-column field="FirstName" headerText="First Name"  width="120"></e-grid-column>
        <e-grid-column field="Title" headerText="Title" width="100"></e-grid-column>
        <e-grid-column field="BirthDate" headerText="Birth Date" width="100" format="yMd"></e-grid-column>
    </e-grid-columns>
</ejs-grid>
public IActionResult Index()
{
    var Emp = EmployeeDetails.GetAllRecords();
    ViewBag.DataSource = Emp;
    return View();
}

You can disable reordering a particular column by setting the allowReordering property of e-grid-column as false.

Reorder Single Column

Grid have option to reorder Columns either by Interaction or by using the reorderColumns method. In the below sample, Name column is reordered to last column position by using the method.

tagHelper
reordercols.cs
<ejs-button id="ReorderSingleCols" content="Reorder Name Column to Last"></ejs-button>
<ejs-grid id="Grid" dataSource="@ViewBag.DataSource" allowReordering="true" height="315">   
    <e-grid-columns>
        <e-grid-column field="EmployeeID" headerText="Employee ID"  width="100"></e-grid-column>
        <e-grid-column field="FirstName" headerText="Name"  width="120"></e-grid-column>
        <e-grid-column field="Title" headerText="Title" width="100"></e-grid-column>
        <e-grid-column field="BirthDate" headerText="Birth Date" width="100" format="yMd"></e-grid-column>
    </e-grid-columns>
</ejs-grid>

<script>

document.getElementById("ReorderSingleCols").onclick = function () {
    var grid = document.getElementById("Grid").ej2_instances[0];
    grid.reorderColumns('FirstName','BirthDate');
}

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

Reorder Multiple Columns

You can reorder a single column at a time by Interaction. Sometimes we need to reorder multiple columns at the same time, It can be achieved through programmatically by using reorderColumns method.

In the below sample, Ship City and Ship Region column is reordered to last column position.

tagHelper
reordercols.cs
<ejs-button id="reorderMultipleCols" content="Reorder Name and Title to Last"></ejs-button>
<ejs-grid id="Grid" dataSource="@ViewBag.DataSource" allowReordering="true"  height="315">   
    <e-grid-columns>
        <e-grid-column field="EmployeeID" headerText="Employee ID"  width="100"></e-grid-column>
        <e-grid-column field="FirstName" headerText="Name"  width="120"></e-grid-column>
        <e-grid-column field="Title" headerText="Title" width="100"></e-grid-column>
        <e-grid-column field="BirthDate" headerText="Birth Date" width="100" format="yMd"></e-grid-column>
    </e-grid-columns>
</ejs-grid>

<script>

document.getElementById("reorderMultipleCols").onclick = function () {
    var grid = document.getElementById("Grid").ej2_instances[0];
    grid.reorderColumns(['FirstName','Title'],'BirthDate');
}

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

Reorder Events

During the reorder action, the grid component triggers the below three events.

  1. The columnDragStart event triggers when column header element drag (move) starts.
  2. The columnDrag event triggers when column header element is dragged (moved) continuously.
  3. The columnDrop event triggers when a column header element is dropped on the target column.
tagHelper
reorderevents.cs
<ejs-grid id="Grid" dataSource="@ViewBag.DataSource" allowReordering="true" height="315" columnDragStart="columnDragStart"
columnDrag="columnDrag" columnDrop="columnDrop">   
    <e-grid-columns>
        <e-grid-column field="EmployeeID" headerText="Employee ID"  width="100"></e-grid-column>
        <e-grid-column field="FirstName" headerText="First Name"  width="120"></e-grid-column>
        <e-grid-column field="Title" headerText="Title" width="100"></e-grid-column>
        <e-grid-column field="BirthDate" headerText="Birth Date" width="100" format="yMd"></e-grid-column>
    </e-grid-columns>
</ejs-grid>

  <script>

    function columnDragStart() {
        alert('columnDragStart event is triggered')
    }
    function columnDrag() {
        alert('columnDrag event is triggered')
    }
    function columnDrop() {
        alert('columnDrop event is triggered')
    }
    
  </script>
public IActionResult Index()
{
    var Emp = EmployeeDetails.GetAllRecords();
    ViewBag.DataSource = Emp;
    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.

tagHelper
lock.cs
<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();
}

Column resizing

Column width can be resized by clicking and dragging the right edge of the column header. While dragging, the width of the respective column will be resized immediately. Each column can be auto resized by double-clicking the right edge of the column header to fit the width of that column based on the widest cell content. To enable column resize, set the allowResizing property to true.

tagHelper
resize.cs
<ejs-grid id="Grid" dataSource="@ViewBag.DataSource" allowResizing="true"  height="315">   
    <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="Freight" headerText="Freight" 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-column field="ShipAddress" headerText="Ship Address" width="150"></e-grid-column>
        <e-grid-column field="ShipCountry"  headerText="Ship Country" width="150"></e-grid-column>
        <e-grid-column field="ShipPostalCode" headerText="Ship Postal Code width="150"></e-grid-column>
    </e-grid-columns>
</ejs-grid>
public IActionResult Index()
{
    var Order = OrderDetails.GetAllRecords();
    ViewBag.DataSource = Order;
    return View();
}

You can disable resizing for a particular column by setting the allowResizing property of e-grid-column tag helper to false. In RTL mode, you can click and drag the left edge of the header cell to resize the column.

Column Resizing by using method

To resize a column, set width to that particular column and then refresh the grid header by using the refreshHeader method. Please refer the below code

var grid = document.getElementById('Grid').ej2_instances[0]; //Grid Instance

var columns = grid.columns;

columns[0].width = 150;

grid.refreshHeader();

Min and max width

Column resize can be restricted between minimum and maximum width by defining the minWidth and maxWidth properties in e-grid-column tag helper.

In the following sample, minimum and maximum width are defined for OrderID, Ship Name, and Ship Country columns.

tagHelper
min.cs
<ejs-grid id="Grid" dataSource="@ViewBag.DataSource" allowResizing="true"  height="315">   
    <e-grid-columns>
        <e-grid-column field="OrderID" headerText="Order ID" minWidth="100" width="150" maxWidth="300"></e-grid-column>
        <e-grid-column field="CustomerID" headerText="Customer ID" width="150"></e-grid-column>
        <e-grid-column field="Freight" headerText="Freight" 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" minWidth="120" width="150" maxWidth="250"></e-grid-column>
        <e-grid-column field="ShipAddress" headerText="Ship Address" width="150"></e-grid-column>
        <e-grid-column field="ShipCountry"  headerText="Ship Country" minWidth="150" width="150" maxWidth="350"></e-grid-column>
        <e-grid-column field="ShipPostalCode" headerText="Ship Postal Code" width="150"></e-grid-column>
    </e-grid-columns>
</ejs-grid>
public IActionResult Index()
{
    var Order = OrderDetails.GetAllRecords();
    ViewBag.DataSource = Order;
    return View();
}

Resize Stacked Column

Stacked columns can be resized by clicking and dragging the right edge of the stacked column header. While dragging, the width of the respective child columns will be resized at the same time. You can disable resize for any particular stacked column by setting allowResizing property e-grid-column as false to its columns.

In this example, we have disabled resize for Ship City column.

tagHelper
stacked.cs
<ejs-grid id="Grid" dataSource="@ViewBag.DataSource" allowResizing="true"  height="315">   
    <e-grid-columns>
        <e-grid-column field="OrderID" headerText="Order ID" isPrimaryKey="true" textAlign="Right" width="100"></e-grid-column>
        <e-grid-column headerText="Order Details" columns="@( new List<Syncfusion.EJ2.Grids.GridColumn>() { new Syncfusion.EJ2.Grids.GridColumn { Field = "OrderDate", Width = "120", HeaderText = "Order Date", Format="yMd", TextAlign= Syncfusion.EJ2.Grids.TextAlign.Right  },                                                                                                           new Syncfusion.EJ2.Grids.GridColumn { Field = "Freight", Width = "100", HeaderText = "Freight($)", Format="C2",  TextAlign= Syncfusion.EJ2.Grids.TextAlign.Right } } )">
        </e-grid-column>
        <e-grid-column headerText="Shipped Details" columns="@( new List<Syncfusion.EJ2.Grids.GridColumn>() { new Syncfusion.EJ2.Grids.GridColumn { Field = "ShipCity", Width = "100", HeaderText = "Ship City", TextAlign=Syncfusion.EJ2.Grids.TextAlign.Right, Format="yMd" },                                                                                                               new Syncfusion.EJ2.Grids.GridColumn { Field = "ShipCountry", Width = "120", HeaderText = "Ship Country" } } )">
        </e-grid-column>
    </e-grid-columns>
</ejs-grid>
public IActionResult Index()
{
    var Order = OrderDetails.GetAllRecords();
    ViewBag.DataSource = Order;
    return View();
}

Touch interaction

When the right edge of the header cell is tapped, a floating handler will be visible over the right border of the column. To resize the column, tap and drag the floating handler as needed. You can autoFit a column by using the Column menu of the grid.

The following screenshot represents the column resizing in touch device.

Touch interaction

Resizing Events

During the resizing action, the grid component triggers the below three events.

  1. The resizeStart event triggers when column resize starts.
  2. The resizing event triggers when column header element is dragged (moved) continuously.
  3. The resizeStop event triggers when column resize ends.
tagHelper
resizeevents.cs
<ejs-grid id="Grid" dataSource="@ViewBag.DataSource" allowResizing="true" height="315" resizeStart="resizeStart"
resizing="resizing" resizeStop="resizeStop">   
    <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="Freight" headerText="Freight" 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-column field="ShipAddress" headerText="Ship Address" width="150"></e-grid-column>
        <e-grid-column field="ShipCountry"  headerText="Ship Country" width="150"></e-grid-column>
        <e-grid-column field="ShipPostalCode" headerText="Ship Postal Code" width="150"></e-grid-column>
    </e-grid-columns>
</ejs-grid>

  <script>

    function resizeStart() {
        alert('resizeStart event is triggered')
    }
    function resizing() {
        alert('resizing event is triggered')
    }
    function resizeStop() {
        alert('resizeStop event is triggered')
    }
  </script>
public IActionResult Index()
{
    var Order = OrderDetails.GetAllRecords();
    ViewBag.DataSource = Order;
    return View();
}

Column template

The column template has options to display custom element instead of a field value in the column.

tagHelper
template.cs
<ejs-grid id="Grid" dataSource="@ViewBag.DataSource" width="auto" >            
    <e-grid-columns>
        <e-grid-column headerText="EmployeeImage" template="#template" width="150" ></e-grid-column>                
        <e-grid-column field="EmployeeID" headerText="Employee ID" textAlign="Right" width="125"></e-grid-column>
        <e-grid-column field="FirstName" headerText="First Name" width="120"></e-grid-column>
        <e-grid-column field="Title" headerText="Title"  width="170"></e-grid-column>                
    </e-grid-columns>
</ejs-grid>

<style>
    .image img {
        height: 55px;
        width: 55px;
        border-radius: 50px;
        box-shadow: inset 0 0 1px #e0e0e0, inset 0 0 14px rgba(0, 0, 0, 0.2);
    }
</style>

<script id="template" type="text/x-template">
    <div class="image">        
        <img src="/Content/images/Employees/${EmployeeID}.png" alt="${EmployeeID}" />
    </div>
</script>
public IActionResult Index()
{
    var Emp = EmployeeDetails.GetAllRecords();
    ViewBag.DataSource = Emp;
    return View();
}

Grid actions such as editing, grouping, filtering and sorting etc. will depend upon the column field. If the field is not specified in the template column, the grid actions cannot be performed.

Using condition template

You can render the template elements based on condition.

In the following code, checkbox is rendered based on Discontinued field value.

tagHelper
template.cs
<ejs-grid id="Grid" dataSource="@ViewBag.DataSource" width="auto" >            
    <e-grid-columns>
        <e-grid-column headerText="Discontinued" template="#template" width="150" ></e-grid-column>                
        <e-grid-column field="ProductID" headerText="Product ID" textAlign="Right" width="125"></e-grid-column>
        <e-grid-column field="ProductName" headerText="Product Name" width="120"></e-grid-column>
        <e-grid-column field="SupplierID" headerText="SupplierID"  width="170"></e-grid-column>                
    </e-grid-columns>
</ejs-grid>

<script id="template" type="text/x-template">
    <div class="template_checkbox">
        ${if(Discontinued)}
            <input type="checkbox" checked> ${else}
            <input type="checkbox"> 
        ${/if}
    </div>
</script>
public IActionResult Index()
{
    var Category = CategoryDetails.GetAllRecords();
    ViewBag.DataSource = Category;
    return View();
}

Column type

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

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.

Column chooser

The column chooser has options to show or hide columns dynamically. It can be enabled by defining the showColumnChooser property as true.

tagHelper
columnchooser.cs
<ejs-grid id="Grid" dataSource="@ViewBag.DataSource" showColumnChooser="true" toolbar="@(new List<string>() { "ColumnChooser"})">    
    <e-grid-columns>
        <e-grid-column field="OrderID" headerText="Order ID" width="150" ></e-grid-column>
        <e-grid-column field="CustomerID" headerText="Customer ID" showInColumnChooser="true" 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="Freight" headerText="Freight" width="150"></e-grid-column>
        <e-grid-column field="ShipppedDate" headerText="Shipped Date" format="yMd" textAlign="Right" width="130"></e-grid-column>
        <e-grid-column field="ShipCountry"  headerText="Ship Country" width="150" ></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();
}

You can hide the column names in column chooser by defining the showInColumnChooser property as false in e-grid-column tag helper of particular column.

Open column chooser by external button

The Column chooser can be displayed on a page through external button by invoking the openColumnChooser method with X and Y axis positions.

tagHelper
externalbutton.cs
<ejs-button id="show" content="OPEN COLUMN CHOOSER"></ejs-button>
        <ejs-grid id="Grid" dataSource="@ViewBag.DataSource" showColumnChooser="true" allowPaging="true">
            <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 Name" width="150"></e-grid-column>
                <e-grid-column field="OrderDate" headerText=" Order Date" textAlign="Right" format="yMd" width="130"></e-grid-column>
                <e-grid-column field="Freight" headerText="Freight" textAlign="Right" format="C2" width="120"></e-grid-column>
                <e-grid-column field="ShippedDate" headerText="Shipped Date" textAlign="Right" format="yMd" width="140"></e-grid-column>                
                <e-grid-column field="ShipCountry"  headerText="Ship Country" width="150"></e-grid-column>
                <e-grid-column field="ShipCity"   headerText="Ship City" width="150"></e-grid-column> 
            </e-grid-columns>
        </ejs-grid>
    </div>
    
<script>
    document.getElementById('show').addEventListener("click", function(){
        var grid = document.getElementById('Grid').ej2_instances[0];
        grid.columnChooserModule.openColumnChooser(200, 50); // give X and Y axis
    });
</script>
public IActionResult Index()
{
    var Order = OrderDetails.GetAllRecords();
    ViewBag.DataSource = Order;
    return View();
}

Column menu

The column menu has options to integrate features like sorting, grouping, filtering, column chooser, and autofit. It will show a menu with the integrated feature when users click on multiple icon of the column. To enable column menu, you need to define the showColumnMenu property as true.

The default items are displayed in following table.

Item Description
SortAscending Sort the current column in ascending order.
SortDescending Sort the current column in descending order.
Group Group the current column.
Ungroup Ungroup the current column.
AutoFit Auto fit the current column.
AutoFitAll Auto fit all columns.
ColumnChooser Choose the column visibility.
Filter Show the filter option as given in FilterSettings.Type

You can disable column menu for a particular column by defining the showColumnMenu property of e-grid-column as false. You can customize the default items by defining the columnMenuItems with required items.

Column menu Events

During the resizing action, the grid component triggers the below two events.

  1. The columnMenuOpen event triggers before the column menu opens.
  2. The columnMenuClick event triggers when the user clicks the column menu of the grid.
tagHelper
columnmenuevents.cs
<ejs-grid id="Grid" dataSource="@ViewBag.DataSource" showColumnMenu="true" allowSorting="true" allowFiltering="true" allowPaging="true" allowGrouping="true"
columnMenuOpen="columnMenuOpen" columnMenuClick="columnMenuClick"> 
   <e-grid-groupsettings  showGroupedColumn="true"></e-grid-groupsettings>
    <e-grid-filtersettings type="CheckBox"></e-grid-filtersettings>   
    <e-grid-columns>
        <e-grid-column field="OrderID" headerText="Order ID"  width="200"  textAlign="Right" showInColumnChooser="false" ></e-grid-column>        
        <e-grid-column field="Freight" headerText="Freight" textAlign="Right"  format="C2" editType="numericedit" width="150"></e-grid-column>
        <e-grid-column field="ShipName" headerText="Ship Name"  width="300"></e-grid-column>
        <e-grid-column field="ShipCountry"  headerText="Ship Country" visible="false"  width="200" ></e-grid-column>
        <e-grid-column field="ShipCity" headerText="Ship City"  width="200"></e-grid-column>
    </e-grid-columns>
</ejs-grid>

<script>
    function columnMenuOpen() {
        alert('columnMenuOpen event is triggered')
    }

    function columnMenuClick() {
        alert('columnMenuClick event is triggered')
    }
</script>
public IActionResult Index()
{
    var Order = OrderDetails.GetAllRecords();
    ViewBag.DataSource = Order;
    return View();
}

Custom Column Menu Item

Custom column menu items can be added by defining the columnMenuItems as collection of the columnMenuItemModel.

Actions for this customized items can be defined in the columnMenuClick event.

tagHelper
customcolumnmenu.cs
@{ 

        List<object> columnMenuitems = new List<object>();
        columnMenuitems.Add(new { text = "Clear Sorting", id = "gridclearsorting" });
 }
 <ejs-grid id="Grid" dataSource="@ViewBag.DataSource" columnMenuItems="columnMenuitems"  columnMenuClick="columnMenuClick" showColumnMenu="true" allowSorting="true"  allowPaging="true" >
    <e-grid-columns>
        <e-grid-column field="OrderID" headerText="Order ID"  width="200"  textAlign="Right" showInColumnChooser="false" ></e-grid-column>
        <e-grid-column field="Freight" headerText="Freight" textAlign="Right"  format="C2" editType="numericedit" width="150"></e-grid-column>
        <e-grid-column field="ShipName" headerText="Ship Name"  width="300"></e-grid-column>
        <e-grid-column field="ShipCountry"  headerText="Ship Country" visible="false"  width="200" ></e-grid-column>
        <e-grid-column field="ShipCity" headerText="Ship City"  width="200"></e-grid-column>
    </e-grid-columns>
</ejs-grid>

<script>
    function columnMenuClick(args) {
        if (args.item.id === 'gridclearsorting') {
            this.clearSorting();
        }
    }
</script>
public IActionResult Index()
{
    var Order = OrderDetails.GetAllRecords();
    ViewBag.DataSource = Order;
    return View();
}

Customize menu items for particular columns

Sometimes, you have a scenario that to hide an item from column menu for particular columns. In that case, you need to define the ColumnMenuOpenEventArgs.Hide as true in the columnMenuOpen event.

The following sample, Filter item was hidden in column menu when opens for the OrderID column.

tagHelper
customizecolumnmenu.cs
<ejs-grid id="Grid" dataSource="@ViewBag.DataSource" columnMenuOpen="columnMenuOpen" allowFiltering="true" allowGrouping="true" showColumnMenu="true" allowSorting="true"  allowPaging="true" >
     <e-grid-filtersettings type="Menu"></e-grid-filtersettings>
    <e-grid-columns>
        <e-grid-column field="OrderID" headerText="Order ID"  width="200"  textAlign="Right"  ></e-grid-column>
        <e-grid-column field="Freight" headerText="Freight" textAlign="Right"  format="C2" editType="numericedit" width="150"></e-grid-column>
        <e-grid-column field="ShipName" headerText="Ship Name"  width="300"></e-grid-column>
        <e-grid-column field="ShipCountry"  headerText="Ship Country" visible="false"  width="200" ></e-grid-column>
        <e-grid-column field="ShipCity" headerText="Ship City"  width="200"></e-grid-column>
    </e-grid-columns>
</ejs-grid>
<script>
    function columnMenuOpen(args) {
        for (let item of args.items) {
            if (item.text === 'Filter' && args.column.field === 'OrderID') {
                item.hide = true;
            } else {
                item.hide = false;
            }
        }      
    }
</script>
public IActionResult Index()
{
    var Order = OrderDetails.GetAllRecords();
    ViewBag.DataSource = Order;
    return View();
}

Column spanning

The grid has option to span the adjacent cells. You need to define the colSpan attribute to span cells in the queryCellInfo event.

In the following demo, employee Davolio is doing testing from 9.00 A.M. to 10.00 A.M. so that the cells have been spanned.

tagHelper
columnspanning.cs
<ejs-grid id="Grid" dataSource="@ViewBag.DataSource" queryCellInfo="QueryCellEvent" gridLines="Both" allowPaging="true">
    <e-grid-columns>
        <e-grid-column field="EmployeeID" headerText="Employee ID" isPrimaryKey="true"  textAlign="Right" width="150"></e-grid-column>
        <e-grid-column field="EmployeeName" headerText="Employee Name" width="200"></e-grid-column>
        <e-grid-column field="Time900" headerText="9.00 AM" width="120"></e-grid-column>
        <e-grid-column field="Time930" headerText="9.30 AM" width="120"></e-grid-column>
        <e-grid-column field="Time1000" headerText="10.00 AM" width="120"></e-grid-column>
        <e-grid-column field="Time1030" headerText="10.30 AM" width="120"></e-grid-column>
        <e-grid-column field="Time1100" headerText="11.00 AM" width="120"></e-grid-column>
        <e-grid-column field="Time1130" headerText="11.30 AM" width="120"></e-grid-column>
        <e-grid-column field="Time1200" headerText="12.00 AM" width="120"></e-grid-column>
        <e-grid-column field="Time1230" headerText="12.30 AM" width="120"></e-grid-column>
        <e-grid-column field="Time100" headerText="1.00 PM" width="120"></e-grid-column>
        <e-grid-column field="Time130" headerText="1.30 PM" width="120"></e-grid-column>
        <e-grid-column field="Time200" headerText="2.00 PM" width="120"></e-grid-column>
        <e-grid-column field="Time230" headerText="2.30 PM" width="120"></e-grid-column>
        <e-grid-column field="Time300" headerText="3.00 PM" width="120"></e-grid-column>
        <e-grid-column field="Time330" headerText="3.30 PM" width="120"></e-grid-column>
        <e-grid-column field="Time400" headerText="4.00 PM" width="120"></e-grid-column>
        <e-grid-column field="Time430" headerText="4.30 PM" width="120"></e-grid-column>
        <e-grid-column field="Time500" headerText="5.00 PM" width="120"></e-grid-column>
    </e-grid-columns>          
</ejs-grid>
<script>
 function QueryCellEvent(args)
        {
            var data = args.data;
            switch (data.EmployeeID) {
                case 10001:
                    if (args.column.field === 'Time900' || args.column.field === 'Time230' || args.column.field === 'Time430') {
                        args.colSpan = 2;
                    } else if (args.column.field === 'Time1100') {
                        args.colSpan = 3;
                    }
                    break;
                case 10002:
                    if (args.column.field === 'Time930' || args.column.field === 'Time230' ||
                        args.column.field === 'Time430') {
                        args.colSpan = 3;
                    } else if (args.column.field === 'Time1100') {
                        args.colSpan = 4;
                    }
                    break;
                case 10003:
                    if (args.column.field === 'Time900' || args.column.field === 'Time1130') {
                        args.colSpan = 3;
                    } else if (args.column.field === 'Time1030' || args.column.field === 'Time330' ||
                        args.column.field === 'Time430' || args.column.field === 'Time230') {
                        args.colSpan = 2;
                    }
                    break;
                case 10004:
                    if (args.column.field === 'Time900') {
                        args.colSpan = 3;
                    } else if (args.column.field === 'Time1100') {
                        args.colSpan = 4;
                    } else if (args.column.field === 'Time400' || args.column.field === 'Time230') {
                        args.colSpan = 2;
                    }
                    break;
                case 10005:
                    if (args.column.field === 'Time900') {
                        args.colSpan = 4;
                    } else if (args.column.field === 'Time1130') {
                        args.colSpan = 3;
                    } else if (args.column.field === 'Time330' || args.column.field === 'Time430' || args.column.field === 'Time230') {
                        args.colSpan = 2;
                    }
                    break;
                case 10006:
                    if (args.column.field === 'Time900' || args.column.field === 'Time430' ||
                        args.column.field === 'Time230' || args.column.field === 'Time330') {
                        args.colSpan = 2;
                    } else if (args.column.field === 'Time1000' || args.column.field === 'Time1130') {
                        args.colSpan = 3;
                    }
                    break;
                case 10007:
                    if (args.column.field === 'Time900' || args.column.field === 'Time300' || args.column.field === 'Time1030') {
                        args.colSpan = 2;
                    } else if (args.column.field === 'Time1130' || args.column.field === 'Time400') {
                        args.colSpan = 3;
                    }
                    break;
                case 10008:
                    if (args.column.field === 'Time900' || args.column.field === 'Time1030' || args.column.field === 'Time230') {
                        args.colSpan = 3;
                    } else if (args.column.field === 'Time400') {
                        args.colSpan = 2;
                    }
                    break;
                case 10009:
                    if (args.column.field === 'Time900' || args.column.field === 'Time1130') {
                        args.colSpan = 3;
                    } else if (args.column.field === 'Time430' || args.column.field === 'Time230') {
                        args.colSpan = 2;
                    }
                    break;
                case 100010:
                    if (args.column.field === 'Time900' || args.column.field === 'Time230' ||
                        args.column.field === 'Time400' || args.column.field === 'Time1130') {
                        args.colSpan = 3;
                    } else if (args.column.field === 'Time1030') {
                        args.colSpan = 2;
                    }
                    break;
            }

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

Responsive columns

You can toggle column visibility based on media queries which are defined at the hideAtMedia. The hideAtMedia accepts valid Media Queries. In the below sample, for OrderID column, hideAtMedia property of e-grid-column is set as (min-width: 700px) so that OrderID column will gets hidden when the browser screen width is lessthan 700px.

tagHelper
responsivecolumns.cs
<ejs-grid id="Grid" dataSource="@ViewBag.DataSource">     
    <e-grid-columns>
        <e-grid-column field="OrderID" headerText="Order ID" hideAtMedia='(min-width: 700px)' width="120"  textAlign="Right"  ></e-grid-column>
        <e-grid-column field="CustomerID" headerText="Customer ID" hideAtMedia='(max-width: 500px)' width="150"></e-grid-column>        
        <e-grid-column field="OrderDate" headerText="Order Date" hideAtMedia= '(min-width: 500px)' textAlign="Right" format="yMd" width="130"></e-grid-column>
        <e-grid-column field="Freight" headerText="Freight" textAlign="Right" format="C2" 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.

tagHelper
controllingactions.cs
<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/hide columns by external button

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

tagHelper
showhide.cs
<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();
}

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.

tagHelper
booleanascheckbox.cs
<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();
  }

See Also