ASP .NET Core MVC Demos
Show Demo List
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>
jqx-grid tag helper are:
{{String}} which determines the URL called when a Grid row is added.{{ModelExpression}} used for model binding and determines the column's bound member.{{String}} which determines the URL called when a Grid row is deleted.{{String}} which determines the URL called when the Grid is edited.{{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.{{Boolean}} which determines whether server processing is enabled.
{{String}} which determines the data source's ID member.{{ModelExpression}} used for model binding and determines the data source's ID member.{{String}} which determines the data source's Root member.{{Integer}} which determines the data source's TotalRecords member.{{String}} which determines the data source's URL.{{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.
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.
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.
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.
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.
The Grid supports multiple column types like date, text, boolean and list 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.
Cell formatting feature enables you to customize the rendering of the Grid cells by providing formatting strings or implementing custom formatting functions.
All strings can be localized, which is useful for multi-language web sites.
jQWidgets © 2011-2025. All Rights Reserved.