ASP .NET Core MVC Grid Tag Helper

The jqx-grid tag helper allows you to easily append and display a Grid to your web page and data bind it to your web server's data source. 
<jqx-grid id="grid" serverProcessing="true" altrows="true" filterable="true" pageable="true" editable="true" autoheight="true" sourceId-for="@employee.ID" theme="@ViewData["Theme"]" sortable="true" width="850" sourceRoot="Employees" sourceTotalRecords="TotalRecords" edit="@Url.Action("Edit","TagHelpers")" sourceUrl="@Url.Action("GetPageData","TagHelpers")" sourceModel="employee">
    <jqx-grid-columns>
        <jqx-grid-column datafield-for="@(employee.FirstName)" width="150" text="First Name"></jqx-grid-column>
        <jqx-grid-column datafield-for="@(employee.LastName)" width="150" text="Last Name"></jqx-grid-column>
        <jqx-grid-column datafield-for="@(employee.ProductName)" columntype="dropdownlist" createeditor="createEditor()" width="250" text="Product Name"></jqx-grid-column>
        <jqx-grid-column datafield-for="@(employee.Price)" width="100" text="Price" cellsformat="c2" cellsalign="HorizontalAlignment.Right"></jqx-grid-column>
        <jqx-grid-column datafield-for="@(employee.Quantity)" width="100" text="Quantity" cellsalign="HorizontalAlignment.Right"></jqx-grid-column>
        <jqx-grid-column datafield-for="@(employee.Total)" width="100" text="Total" cellsformat="c2" cellsalign="HorizontalAlignment.Right"></jqx-grid-column>
 </jqx-grid-columns>
</jqx-grid>

The Grid tag helper shares the same API members as the Javascript Grid widget i.e all properties, methods and events can be used. Additional properties for the jqx-grid tag helper are:
  • create - {{String}} which determines the URL called when a Grid row is added.
  • datafield-for - {{ModelExpression}} used for model binding and determines the column's bound member.
  • delete - {{String}} which determines the URL called when a Grid row is deleted.
  • edit - {{String}} which determines the URL called when the Grid is edited.
  • instance - {{String}} which determines the javascript member within the Script tag which refers to the Grid's instance. This member is useful when you want to dynamically invoke API members of the Javascript component.
  • serverProcessing - {{Boolean}} which determines whether server processing is enabled.
  • sourceId - {{String}} which determines the data source's ID member.
  • sourceId-for - {{ModelExpression}} used for model binding and determines the data source's ID member.
  • sourceRoot - {{String}} which determines the data source's Root member.
  • sourceTotalRecords - {{Integer}} which determines the data source's TotalRecords member.
  • sourceUrl - {{String}} which determines the data source's URL.
  • sourceModel - {{Model}} which determines the data source's Model.

jqx-grid-columns tag helper should be defined within the jqx-grid tag helper and defines the Grid columns collection. jqx-grid-column tag helper should be defined within the jqx-grid-columns tag helper and defines a Grid column. jqx-grid-column-groups tag helper should be defined within the jqx-grid tag helper and defines the Grid columns hierarchy. jqx-grid-column-group tag helper should be defined within the jqx-grid-column-groups tag helper and defines a Grid column group.

Highlights

Filtering

The Grid filtering allows users to choose a filter option from a filter menu or to display a filter row ui element by setting a boolean property, called showfilterrow to true.

Sorting

The Grid component has sorting capabilities like one-click automatic sorting, selection of sort option from a context menu and sorting through API calls. The grid chooses the appropriate comparison. asp.net core mvc grid component sorting

Paging

For data navigation, the Grid has a pager element, which can be enabled by setting the pageable boolean property to true. The Grid's pager by default is disabled.
asp.net core mvc grid component

Nested Grids

Our Grid component has an easy way to display nested Grids. A demo how to achieve that can be found on the Grid's demos list.
asp.net core mvc grid component nested grids

Column Types

The Grid supports multiple column types like date, text, boolean and list columns.

Pinned Columns

Excel-like pinned (frozen) columns support is integrated. This feature also allows you to pin columns to the left the Grid's canvas. The pinned columns are very useful when working with large tables and it makes it easy to scroll and compare data from different parts of the table.

Cells Formatting and Rendering

Cell formatting feature enables you to customize the rendering of the Grid cells by providing formatting strings or implementing custom formatting functions.

Localization

All strings can be localized, which is useful for multi-language web sites.