jqxGrid requires the following files:
jqx.base.css
jqxcore.js
jqxdata.js
jqxbuttons.js
jqxscrollbar.js
jqxmenu.js
jqxlistbox.js
jqxdropdownlist.js
jqxgrid.js
jqxgrid.selection.js
jqxgrid.columnsresize.js
jqxgrid.columnsreorder.js
jqxgrid.storage.js
jqxgrid.filter.js
jqxgrid.sort.js
jqxgrid.pager.js
jqxgrid.grouping.js
To call a function(method), you need to pass the method name and parameters(if any) in the UI component’s instance.<script src="~/jqwidgets/jqxbuttons.js"></script>
<script src="~/jqwidgets/jqxscrollbar.js"></script>
<script src="~/jqwidgets/jqxgrid.js"></script>
<script src="~/jqwidgets/jqxgrid.edit.js"></script>
<script src="~/jqwidgets/jqxgrid.columnsresize.js"></script>
<script src="~/jqwidgets/jqxgrid.filter.js"></script>
<script src="~/jqwidgets/jqxgrid.selection.js"></script>
<script src="~/jqwidgets/jqxgrid.sort.js"></script>
<script src="~/jqwidgets/jqxgrid.pager.js"></script>
<script src="~/jqwidgets/jqxgrid.aggregates.js"></script><script src="~/jqwidgets/jqxgrid.grouping.js"></script><script src="~/jqwidgets/jqxdata.export.js"></script><script src="~/jqwidgets/jqxgrid.export.js"></script><script src="~/jqwidgets/jqxmenu.js"></script><script src="~/jqwidgets/jqxlistbox.js"></script><script src="~/jqwidgets/jqxdropdownlist.js"></script>@model IEnumerable<jQWidgets.AspNet.Core.Models.SalesEmployee>@using jQWidgets.AspNetCore.Mvc.TagHelpers;@{ViewData["Title"] = "ASP .NET MVC Grid Aggregates Example";}@{var employee = Model.FirstOrDefault();}<jqx-grid id="grid" altrows="true" alt-rows="true" show-status-bar="true" show-aggregates="true" filterable="true" pageable="true" auto-height="true" source-id="ID" sortable="true" width="850" source="Model"><jqx-grid-columns><jqx-grid-column aggregates='['count']' datafield-for="@(employee.FirstName)" width="150" text="First Name"></jqx-grid-column><jqx-grid-column aggregates='['count']' datafield-for="@(employee.LastName)" width="150" text="Last Name"></jqx-grid-column><jqx-grid-column aggregates='['count']' datafield-for="@(employee.ProductName)" width="200" text="Product Name"></jqx-grid-column><jqx-grid-column aggregates='['sum']' datafield-for="@(employee.Price)" width="100" text="Price" cells-format="c2" cells-align="HorizontalAlignment.Right"></jqx-grid-column><jqx-grid-column aggregates='['sum']' datafield-for="@(employee.Quantity)" width="100" text="Quantity" cells-align="HorizontalAlignment.Right"></jqx-grid-column><jqx-grid-column aggregates='['sum']' datafield-for="@(employee.Total)" width="150" text="Total" cells-format="c2" cells-align="HorizontalAlignment.Right"></jqx-grid-column></jqx-grid-columns></jqx-grid>
To bind to an event of a UI Component, you can use<script src="~/jqwidgets/jqxbuttons.js"></script>
<script src="~/jqwidgets/jqxscrollbar.js"></script>
<script src="~/jqwidgets/jqxgrid.js"></script>
<script src="~/jqwidgets/jqxgrid.edit.js"></script>
<script src="~/jqwidgets/jqxgrid.columnsresize.js"></script>
<script src="~/jqwidgets/jqxgrid.filter.js"></script>
<script src="~/jqwidgets/jqxgrid.selection.js"></script>
<script src="~/jqwidgets/jqxgrid.sort.js"></script>
<script src="~/jqwidgets/jqxgrid.pager.js"></script>
<script src="~/jqwidgets/jqxgrid.aggregates.js"></script><script src="~/jqwidgets/jqxgrid.grouping.js"></script><script src="~/jqwidgets/jqxdata.export.js"></script><script src="~/jqwidgets/jqxgrid.export.js"></script><script src="~/jqwidgets/jqxmenu.js"></script><script src="~/jqwidgets/jqxlistbox.js"></script><script src="~/jqwidgets/jqxdropdownlist.js"></script>@model IEnumerable<jQWidgets.AspNet.Core.Models.SalesEmployee>@using jQWidgets.AspNetCore.Mvc.TagHelpers;@{ViewData["Title"] = "ASP .NET MVC Grid Aggregates Example";}@{var employee = Model.FirstOrDefault();}<jqx-grid id="grid" alt-rows="true" show-status-bar="true" show-aggregates="true" filterable="true" pageable="true" auto-height="true" source-id="ID" sortable="true" width="850" source="Model" instance="getInstance()"><jqx-grid-columns><jqx-grid-column aggregates='['count']' datafield-for="@(employee.FirstName)" width="150" text="First Name"></jqx-grid-column><jqx-grid-column aggregates='['count']' datafield-for="@(employee.LastName)" width="150" text="Last Name"></jqx-grid-column><jqx-grid-column aggregates='['count']' datafield-for="@(employee.ProductName)" width="200" text="Product Name"></jqx-grid-column><jqx-grid-column aggregates='['sum']' datafield-for="@(employee.Price)" width="100" text="Price" cells-format="c2" cells-align="HorizontalAlignment.Right"></jqx-grid-column><jqx-grid-column aggregates='['sum']' datafield-for="@(employee.Quantity)" width="100" text="Quantity" cells-align="HorizontalAlignment.Right"></jqx-grid-column><jqx-grid-column aggregates='['sum']' datafield-for="@(employee.Total)" width="150" text="Total" cells-format="c2" cells-align="HorizontalAlignment.Right"></jqx-grid-column></jqx-grid-columns></jqx-grid>@section scripts {<script type="text/javascript">function getInstance(instance) {instance["autoresizecolumns"]();}</script>}
on-event-type
syntax. The example
code below demonstrates how to bind to an event.
<script src="~/jqwidgets/jqxbuttons.js"></script>
<script src="~/jqwidgets/jqxscrollbar.js"></script>
<script src="~/jqwidgets/jqxgrid.js"></script>
<script src="~/jqwidgets/jqxgrid.edit.js"></script>
<script src="~/jqwidgets/jqxgrid.columnsresize.js"></script>
<script src="~/jqwidgets/jqxgrid.filter.js"></script>
<script src="~/jqwidgets/jqxgrid.selection.js"></script>
<script src="~/jqwidgets/jqxgrid.sort.js"></script>
<script src="~/jqwidgets/jqxgrid.pager.js"></script>
<script src="~/jqwidgets/jqxgrid.aggregates.js"></script><script src="~/jqwidgets/jqxgrid.grouping.js"></script><script src="~/jqwidgets/jqxdata.export.js"></script><script src="~/jqwidgets/jqxgrid.export.js"></script><script src="~/jqwidgets/jqxmenu.js"></script><script src="~/jqwidgets/jqxlistbox.js"></script><script src="~/jqwidgets/jqxdropdownlist.js"></script>@model IEnumerable<jQWidgets.AspNet.Core.Models.SalesEmployee>@using jQWidgets.AspNetCore.Mvc.TagHelpers;@{ViewData["Title"] = "ASP .NET MVC Grid Aggregates Example";}@{var employee = Model.FirstOrDefault();}<jqx-grid id="grid" on-bindingcomplete="eventHandler()"><jqx-grid-columns><jqx-grid-column aggregates='['count']' datafield-for="@(employee.FirstName)" width="150" text="First Name"></jqx-grid-column><jqx-grid-column aggregates='['count']' datafield-for="@(employee.LastName)" width="150" text="Last Name"></jqx-grid-column><jqx-grid-column aggregates='['count']' datafield-for="@(employee.ProductName)" width="200" text="Product Name"></jqx-grid-column><jqx-grid-column aggregates='['sum']' datafield-for="@(employee.Price)" width="100" text="Price" cells-format="c2" cells-align="HorizontalAlignment.Right"></jqx-grid-column><jqx-grid-column aggregates='['sum']' datafield-for="@(employee.Quantity)" width="100" text="Quantity" cells-align="HorizontalAlignment.Right"></jqx-grid-column><jqx-grid-column aggregates='['sum']' datafield-for="@(employee.Total)" width="150" text="Total" cells-format="c2" cells-align="HorizontalAlignment.Right"></jqx-grid-column></jqx-grid-columns></jqx-grid>@section scripts {<script type="text/javascript">function eventHandler(event) {}</script>}