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 the Columns is necessary to map the data source 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.

Header Template

You can customize the header element by using the HeaderTemplate property. 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.

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 Columns.Format property. 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 100. 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 Columns.Format property 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

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.

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 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 Columns.AllowReordering to false.

Reorder Multiple Columns

User can reorder a single column at a time by Interaction. Sometimes we need to have 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();
}

Lock Columns

You can lock columns by using column.lockColumn property. 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 Columns.AllowResizing to false. In RTL mode, you can click and drag the left edge of the header cell to resize the column.

Min and max width

Column resize can be restricted between minimum and maximum width by defining the Columns->MinWidth and Columns->MaxWidth.

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

The following screenshot represents the column resizing in touch device.

Touch interaction

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.

Column type

Column type can be specified using the Columns.Type property. 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.

Column chooser

The column chooser has options to show or hide columns dynamically. It can be enabled by defining the ShowColumnChooser 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 Columns.ShowInColumnChooser as false.

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 Columns.ShowColumnMenu as false. You can customize the default items by defining the ColumnMenuItems with required items.

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() {
    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.

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, and AllowSorting properties.

tagHelper
controllingactions.cs
<ejs-grid id="Grid" dataSource=@ViewBag.DataSource allowGrouping="true" allowSorting="true" allowFiltering="true" >     
    <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"  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();
}

Complex data binding

You can achieve complex data binding in the grid by using the dot(.) operator in the Column.Field.

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.DataSource = ComplexData;
    return View();
}

Foreign Key Column

Foreign key column can be enabled by using Column.DataSource, Column.ForeignKeyField and Column.ForeignKeyValue properties.

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

How to render boolean values as checkbox

To render boolean values as checkbox in columns, you need to set displayAsCheckBox property 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