ASP .NET Core MVC Documentation

Sets or gets the altRows property.

<script src="~/jqwidgets/jqxbuttons.js"></script>
<script src="~/jqwidgets/jqxdatatable.js"></script>
<script src="~/jqwidgets/jqxscrollbar.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.Employee>
@{
	string renderer = "function() {}';
	string rendering = "function() {}';
	string pagerRenderer = "function(element) {}';
	string renderToolbar = "function(element) {}';
	string renderStatusbar = "function(element) {}';
	string aggregatesRenderer = "function(element){}'
	string exportSettings = '{columnsHeader: true,hiddenColumns: false,serverURL: null,characterSet: null,collapsedRecords: false,recordsInView: true,fileName: "jqxDataTable"}';
	string editSettings = '{saveOnPageChange: true, saveOnBlur: true, saveOnSelectionChange: true, cancelOnEsc: true, saveOnEnter: true, editSingleCell: false, editOnDoubleClick: true, editOnF2: true}';
}
<jqx-data-table alt-rows="true" width="850" source="Model"> 
    <jqx-data-table-columns>
        <jqx-data-table-column column-group="name" dataField="FirstName" width="100" text="First Name"></jqx-data-table-column>
        <jqx-data-table-column column-group="name" dataField="LastName" width="100" text="Last Name"></jqx-data-table-column>
        <jqx-data-table-column dataField="Title" width="150"></jqx-data-table-column>
        <jqx-data-table-column dataField="Address" width="200"></jqx-data-table-column>
        <jqx-data-table-column dataField="City" width="150"></jqx-data-table-column>
        <jqx-data-table-column dataField="Country"></jqx-data-table-column>
    </jqx-data-table-columns>
    <jqx-data-table-column-groups>
        <jqx-data-table-column-group name="name" text="Name"></jqx-data-table-column-group>
    </jqx-data-table-column-groups>
</jqx-data-table>

Sets or gets the autoRowHeight property.

<script src="~/jqwidgets/jqxbuttons.js"></script>
<script src="~/jqwidgets/jqxdatatable.js"></script>
<script src="~/jqwidgets/jqxscrollbar.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.Employee>
@{
	string renderer = "function() {}';
	string rendering = "function() {}';
	string pagerRenderer = "function(element) {}';
	string renderToolbar = "function(element) {}';
	string renderStatusbar = "function(element) {}';
	string aggregatesRenderer = "function(element){}'
	string exportSettings = '{columnsHeader: true,hiddenColumns: false,serverURL: null,characterSet: null,collapsedRecords: false,recordsInView: true,fileName: "jqxDataTable"}';
	string editSettings = '{saveOnPageChange: true, saveOnBlur: true, saveOnSelectionChange: true, cancelOnEsc: true, saveOnEnter: true, editSingleCell: false, editOnDoubleClick: true, editOnF2: true}';
}
<jqx-data-table auto-row-height="false" width="850" source="Model"> 
    <jqx-data-table-columns>
        <jqx-data-table-column column-group="name" dataField="FirstName" width="100" text="First Name"></jqx-data-table-column>
        <jqx-data-table-column column-group="name" dataField="LastName" width="100" text="Last Name"></jqx-data-table-column>
        <jqx-data-table-column dataField="Title" width="150"></jqx-data-table-column>
        <jqx-data-table-column dataField="Address" width="200"></jqx-data-table-column>
        <jqx-data-table-column dataField="City" width="150"></jqx-data-table-column>
        <jqx-data-table-column dataField="Country"></jqx-data-table-column>
    </jqx-data-table-columns>
    <jqx-data-table-column-groups>
        <jqx-data-table-column-group name="name" text="Name"></jqx-data-table-column-group>
    </jqx-data-table-column-groups>
</jqx-data-table>

Sets or gets the aggregatesHeight property.

<script src="~/jqwidgets/jqxbuttons.js"></script>
<script src="~/jqwidgets/jqxdatatable.js"></script>
<script src="~/jqwidgets/jqxscrollbar.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.Employee>
@{
	string renderer = "function() {}';
	string rendering = "function() {}';
	string pagerRenderer = "function(element) {}';
	string renderToolbar = "function(element) {}';
	string renderStatusbar = "function(element) {}';
	string aggregatesRenderer = "function(element){}'
	string exportSettings = '{columnsHeader: true,hiddenColumns: false,serverURL: null,characterSet: null,collapsedRecords: false,recordsInView: true,fileName: "jqxDataTable"}';
	string editSettings = '{saveOnPageChange: true, saveOnBlur: true, saveOnSelectionChange: true, cancelOnEsc: true, saveOnEnter: true, editSingleCell: false, editOnDoubleClick: true, editOnF2: true}';
}
<jqx-data-table aggregates-height="40" width="850" source="Model"> 
    <jqx-data-table-columns>
        <jqx-data-table-column column-group="name" dataField="FirstName" width="100" text="First Name"></jqx-data-table-column>
        <jqx-data-table-column column-group="name" dataField="LastName" width="100" text="Last Name"></jqx-data-table-column>
        <jqx-data-table-column dataField="Title" width="150"></jqx-data-table-column>
        <jqx-data-table-column dataField="Address" width="200"></jqx-data-table-column>
        <jqx-data-table-column dataField="City" width="150"></jqx-data-table-column>
        <jqx-data-table-column dataField="Country"></jqx-data-table-column>
    </jqx-data-table-columns>
    <jqx-data-table-column-groups>
        <jqx-data-table-column-group name="name" text="Name"></jqx-data-table-column-group>
    </jqx-data-table-column-groups>
</jqx-data-table>

Sets or gets the autoShowLoadElement property.

<script src="~/jqwidgets/jqxbuttons.js"></script>
<script src="~/jqwidgets/jqxdatatable.js"></script>
<script src="~/jqwidgets/jqxscrollbar.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.Employee>
@{
	string renderer = "function() {}';
	string rendering = "function() {}';
	string pagerRenderer = "function(element) {}';
	string renderToolbar = "function(element) {}';
	string renderStatusbar = "function(element) {}';
	string aggregatesRenderer = "function(element){}'
	string exportSettings = '{columnsHeader: true,hiddenColumns: false,serverURL: null,characterSet: null,collapsedRecords: false,recordsInView: true,fileName: "jqxDataTable"}';
	string editSettings = '{saveOnPageChange: true, saveOnBlur: true, saveOnSelectionChange: true, cancelOnEsc: true, saveOnEnter: true, editSingleCell: false, editOnDoubleClick: true, editOnF2: true}';
}
<jqx-data-table auto-show-load-element="false" width="850" source="Model"> 
    <jqx-data-table-columns>
        <jqx-data-table-column column-group="name" dataField="FirstName" width="100" text="First Name"></jqx-data-table-column>
        <jqx-data-table-column column-group="name" dataField="LastName" width="100" text="Last Name"></jqx-data-table-column>
        <jqx-data-table-column dataField="Title" width="150"></jqx-data-table-column>
        <jqx-data-table-column dataField="Address" width="200"></jqx-data-table-column>
        <jqx-data-table-column dataField="City" width="150"></jqx-data-table-column>
        <jqx-data-table-column dataField="Country"></jqx-data-table-column>
    </jqx-data-table-columns>
    <jqx-data-table-column-groups>
        <jqx-data-table-column-group name="name" text="Name"></jqx-data-table-column-group>
    </jqx-data-table-column-groups>
</jqx-data-table>

Sets or gets the columnsHeight property.

<script src="~/jqwidgets/jqxbuttons.js"></script>
<script src="~/jqwidgets/jqxdatatable.js"></script>
<script src="~/jqwidgets/jqxscrollbar.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.Employee>
@{
	string renderer = "function() {}';
	string rendering = "function() {}';
	string pagerRenderer = "function(element) {}';
	string renderToolbar = "function(element) {}';
	string renderStatusbar = "function(element) {}';
	string aggregatesRenderer = "function(element){}'
	string exportSettings = '{columnsHeader: true,hiddenColumns: false,serverURL: null,characterSet: null,collapsedRecords: false,recordsInView: true,fileName: "jqxDataTable"}';
	string editSettings = '{saveOnPageChange: true, saveOnBlur: true, saveOnSelectionChange: true, cancelOnEsc: true, saveOnEnter: true, editSingleCell: false, editOnDoubleClick: true, editOnF2: true}';
}
<jqx-data-table columns-height="20" width="850" source="Model"> 
    <jqx-data-table-columns>
        <jqx-data-table-column column-group="name" dataField="FirstName" width="100" text="First Name"></jqx-data-table-column>
        <jqx-data-table-column column-group="name" dataField="LastName" width="100" text="Last Name"></jqx-data-table-column>
        <jqx-data-table-column dataField="Title" width="150"></jqx-data-table-column>
        <jqx-data-table-column dataField="Address" width="200"></jqx-data-table-column>
        <jqx-data-table-column dataField="City" width="150"></jqx-data-table-column>
        <jqx-data-table-column dataField="Country"></jqx-data-table-column>
    </jqx-data-table-columns>
    <jqx-data-table-column-groups>
        <jqx-data-table-column-group name="name" text="Name"></jqx-data-table-column-group>
    </jqx-data-table-column-groups>
</jqx-data-table>

Sets or gets the columns property.

<script src="~/jqwidgets/jqxbuttons.js"></script>
<script src="~/jqwidgets/jqxdatatable.js"></script>
<script src="~/jqwidgets/jqxscrollbar.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.Employee>
@{
	string renderer = "function() {}';
	string rendering = "function() {}';
	string pagerRenderer = "function(element) {}';
	string renderToolbar = "function(element) {}';
	string renderStatusbar = "function(element) {}';
	string aggregatesRenderer = "function(element){}'
	string exportSettings = '{columnsHeader: true,hiddenColumns: false,serverURL: null,characterSet: null,collapsedRecords: false,recordsInView: true,fileName: "jqxDataTable"}';
	string editSettings = '{saveOnPageChange: true, saveOnBlur: true, saveOnSelectionChange: true, cancelOnEsc: true, saveOnEnter: true, editSingleCell: false, editOnDoubleClick: true, editOnF2: true}';
}
<jqx-data-table width="850" source="Model"> 
    <jqx-data-table-columns>
        <jqx-data-table-column column-group="name" dataField="FirstName" width="100" text="First Name"></jqx-data-table-column>
        <jqx-data-table-column column-group="name" dataField="LastName" width="100" text="Last Name"></jqx-data-table-column>
        <jqx-data-table-column dataField="Title" width="150"></jqx-data-table-column>
        <jqx-data-table-column dataField="Address" width="200"></jqx-data-table-column>
        <jqx-data-table-column dataField="City" width="150"></jqx-data-table-column>
        <jqx-data-table-column dataField="Country"></jqx-data-table-column>
    </jqx-data-table-columns>
    <jqx-data-table-column-groups>
        <jqx-data-table-column-group name="name" text="Name"></jqx-data-table-column-group>
    </jqx-data-table-column-groups>
</jqx-data-table>

Sets or gets the columnGroups property.

<script src="~/jqwidgets/jqxbuttons.js"></script>
<script src="~/jqwidgets/jqxdatatable.js"></script>
<script src="~/jqwidgets/jqxscrollbar.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.Employee>
@{
	string renderer = "function() {}';
	string rendering = "function() {}';
	string pagerRenderer = "function(element) {}';
	string renderToolbar = "function(element) {}';
	string renderStatusbar = "function(element) {}';
	string aggregatesRenderer = "function(element){}'
	string exportSettings = '{columnsHeader: true,hiddenColumns: false,serverURL: null,characterSet: null,collapsedRecords: false,recordsInView: true,fileName: "jqxDataTable"}';
	string editSettings = '{saveOnPageChange: true, saveOnBlur: true, saveOnSelectionChange: true, cancelOnEsc: true, saveOnEnter: true, editSingleCell: false, editOnDoubleClick: true, editOnF2: true}';
}
<jqx-data-table width="850" source="Model"> 
    <jqx-data-table-columns>
        <jqx-data-table-column column-group="name" dataField="FirstName" width="100" text="First Name"></jqx-data-table-column>
        <jqx-data-table-column column-group="name" dataField="LastName" width="100" text="Last Name"></jqx-data-table-column>
        <jqx-data-table-column dataField="Title" width="150"></jqx-data-table-column>
        <jqx-data-table-column dataField="Address" width="200"></jqx-data-table-column>
        <jqx-data-table-column dataField="City" width="150"></jqx-data-table-column>
        <jqx-data-table-column dataField="Country"></jqx-data-table-column>
    </jqx-data-table-columns>
    <jqx-data-table-column-groups>
        <jqx-data-table-column-group name="name" text="Name"></jqx-data-table-column-group>
    </jqx-data-table-column-groups>
</jqx-data-table>

Sets or gets the columnsResize property.

<script src="~/jqwidgets/jqxbuttons.js"></script>
<script src="~/jqwidgets/jqxdatatable.js"></script>
<script src="~/jqwidgets/jqxscrollbar.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.Employee>
@{
	string renderer = "function() {}';
	string rendering = "function() {}';
	string pagerRenderer = "function(element) {}';
	string renderToolbar = "function(element) {}';
	string renderStatusbar = "function(element) {}';
	string aggregatesRenderer = "function(element){}'
	string exportSettings = '{columnsHeader: true,hiddenColumns: false,serverURL: null,characterSet: null,collapsedRecords: false,recordsInView: true,fileName: "jqxDataTable"}';
	string editSettings = '{saveOnPageChange: true, saveOnBlur: true, saveOnSelectionChange: true, cancelOnEsc: true, saveOnEnter: true, editSingleCell: false, editOnDoubleClick: true, editOnF2: true}';
}
<jqx-data-table columns-resize="true" width="850" source="Model"> 
    <jqx-data-table-columns>
        <jqx-data-table-column column-group="name" dataField="FirstName" width="100" text="First Name"></jqx-data-table-column>
        <jqx-data-table-column column-group="name" dataField="LastName" width="100" text="Last Name"></jqx-data-table-column>
        <jqx-data-table-column dataField="Title" width="150"></jqx-data-table-column>
        <jqx-data-table-column dataField="Address" width="200"></jqx-data-table-column>
        <jqx-data-table-column dataField="City" width="150"></jqx-data-table-column>
        <jqx-data-table-column dataField="Country"></jqx-data-table-column>
    </jqx-data-table-columns>
    <jqx-data-table-column-groups>
        <jqx-data-table-column-group name="name" text="Name"></jqx-data-table-column-group>
    </jqx-data-table-column-groups>
</jqx-data-table>

Sets or gets the columnsReorder property.

<script src="~/jqwidgets/jqxbuttons.js"></script>
<script src="~/jqwidgets/jqxdatatable.js"></script>
<script src="~/jqwidgets/jqxscrollbar.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.Employee>
@{
	string renderer = "function() {}';
	string rendering = "function() {}';
	string pagerRenderer = "function(element) {}';
	string renderToolbar = "function(element) {}';
	string renderStatusbar = "function(element) {}';
	string aggregatesRenderer = "function(element){}'
	string exportSettings = '{columnsHeader: true,hiddenColumns: false,serverURL: null,characterSet: null,collapsedRecords: false,recordsInView: true,fileName: "jqxDataTable"}';
	string editSettings = '{saveOnPageChange: true, saveOnBlur: true, saveOnSelectionChange: true, cancelOnEsc: true, saveOnEnter: true, editSingleCell: false, editOnDoubleClick: true, editOnF2: true}';
}
<jqx-data-table columns-reorder="true" width="850" source="Model"> 
    <jqx-data-table-columns>
        <jqx-data-table-column column-group="name" dataField="FirstName" width="100" text="First Name"></jqx-data-table-column>
        <jqx-data-table-column column-group="name" dataField="LastName" width="100" text="Last Name"></jqx-data-table-column>
        <jqx-data-table-column dataField="Title" width="150"></jqx-data-table-column>
        <jqx-data-table-column dataField="Address" width="200"></jqx-data-table-column>
        <jqx-data-table-column dataField="City" width="150"></jqx-data-table-column>
        <jqx-data-table-column dataField="Country"></jqx-data-table-column>
    </jqx-data-table-columns>
    <jqx-data-table-column-groups>
        <jqx-data-table-column-group name="name" text="Name"></jqx-data-table-column-group>
    </jqx-data-table-column-groups>
</jqx-data-table>

Sets or gets the disabled property.

<script src="~/jqwidgets/jqxbuttons.js"></script>
<script src="~/jqwidgets/jqxdatatable.js"></script>
<script src="~/jqwidgets/jqxscrollbar.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.Employee>
@{
	string renderer = "function() {}';
	string rendering = "function() {}';
	string pagerRenderer = "function(element) {}';
	string renderToolbar = "function(element) {}';
	string renderStatusbar = "function(element) {}';
	string aggregatesRenderer = "function(element){}'
	string exportSettings = '{columnsHeader: true,hiddenColumns: false,serverURL: null,characterSet: null,collapsedRecords: false,recordsInView: true,fileName: "jqxDataTable"}';
	string editSettings = '{saveOnPageChange: true, saveOnBlur: true, saveOnSelectionChange: true, cancelOnEsc: true, saveOnEnter: true, editSingleCell: false, editOnDoubleClick: true, editOnF2: true}';
}
<jqx-data-table disabled="true" width="850" source="Model"> 
    <jqx-data-table-columns>
        <jqx-data-table-column column-group="name" dataField="FirstName" width="100" text="First Name"></jqx-data-table-column>
        <jqx-data-table-column column-group="name" dataField="LastName" width="100" text="Last Name"></jqx-data-table-column>
        <jqx-data-table-column dataField="Title" width="150"></jqx-data-table-column>
        <jqx-data-table-column dataField="Address" width="200"></jqx-data-table-column>
        <jqx-data-table-column dataField="City" width="150"></jqx-data-table-column>
        <jqx-data-table-column dataField="Country"></jqx-data-table-column>
    </jqx-data-table-columns>
    <jqx-data-table-column-groups>
        <jqx-data-table-column-group name="name" text="Name"></jqx-data-table-column-group>
    </jqx-data-table-column-groups>
</jqx-data-table>

Sets or gets the editable property.

<script src="~/jqwidgets/jqxbuttons.js"></script>
<script src="~/jqwidgets/jqxdatatable.js"></script>
<script src="~/jqwidgets/jqxscrollbar.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.Employee>
@{
	string renderer = "function() {}';
	string rendering = "function() {}';
	string pagerRenderer = "function(element) {}';
	string renderToolbar = "function(element) {}';
	string renderStatusbar = "function(element) {}';
	string aggregatesRenderer = "function(element){}'
	string exportSettings = '{columnsHeader: true,hiddenColumns: false,serverURL: null,characterSet: null,collapsedRecords: false,recordsInView: true,fileName: "jqxDataTable"}';
	string editSettings = '{saveOnPageChange: true, saveOnBlur: true, saveOnSelectionChange: true, cancelOnEsc: true, saveOnEnter: true, editSingleCell: false, editOnDoubleClick: true, editOnF2: true}';
}
<jqx-data-table editable="true" width="850" source="Model"> 
    <jqx-data-table-columns>
        <jqx-data-table-column column-group="name" dataField="FirstName" width="100" text="First Name"></jqx-data-table-column>
        <jqx-data-table-column column-group="name" dataField="LastName" width="100" text="Last Name"></jqx-data-table-column>
        <jqx-data-table-column dataField="Title" width="150"></jqx-data-table-column>
        <jqx-data-table-column dataField="Address" width="200"></jqx-data-table-column>
        <jqx-data-table-column dataField="City" width="150"></jqx-data-table-column>
        <jqx-data-table-column dataField="Country"></jqx-data-table-column>
    </jqx-data-table-columns>
    <jqx-data-table-column-groups>
        <jqx-data-table-column-group name="name" text="Name"></jqx-data-table-column-group>
    </jqx-data-table-column-groups>
</jqx-data-table>

Sets or gets the editSettings property.

<script src="~/jqwidgets/jqxbuttons.js"></script>
<script src="~/jqwidgets/jqxdatatable.js"></script>
<script src="~/jqwidgets/jqxscrollbar.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.Employee>
@{
	string renderer = "function() {}';
	string rendering = "function() {}';
	string pagerRenderer = "function(element) {}';
	string renderToolbar = "function(element) {}';
	string renderStatusbar = "function(element) {}';
	string aggregatesRenderer = "function(element){}'
	string exportSettings = '{columnsHeader: true,hiddenColumns: false,serverURL: null,characterSet: null,collapsedRecords: false,recordsInView: true,fileName: "jqxDataTable"}';
	string editSettings = '{saveOnPageChange: true, saveOnBlur: true, saveOnSelectionChange: true, cancelOnEsc: true, saveOnEnter: true, editSingleCell: false, editOnDoubleClick: true, editOnF2: true}';
}
<jqx-data-table edit-settings="editSettings" width="850" source="Model"> 
    <jqx-data-table-columns>
        <jqx-data-table-column column-group="name" dataField="FirstName" width="100" text="First Name"></jqx-data-table-column>
        <jqx-data-table-column column-group="name" dataField="LastName" width="100" text="Last Name"></jqx-data-table-column>
        <jqx-data-table-column dataField="Title" width="150"></jqx-data-table-column>
        <jqx-data-table-column dataField="Address" width="200"></jqx-data-table-column>
        <jqx-data-table-column dataField="City" width="150"></jqx-data-table-column>
        <jqx-data-table-column dataField="Country"></jqx-data-table-column>
    </jqx-data-table-columns>
    <jqx-data-table-column-groups>
        <jqx-data-table-column-group name="name" text="Name"></jqx-data-table-column-group>
    </jqx-data-table-column-groups>
</jqx-data-table>

Sets or gets the exportSettings property.

<script src="~/jqwidgets/jqxbuttons.js"></script>
<script src="~/jqwidgets/jqxdatatable.js"></script>
<script src="~/jqwidgets/jqxscrollbar.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.Employee>
@{
	string renderer = "function() {}';
	string rendering = "function() {}';
	string pagerRenderer = "function(element) {}';
	string renderToolbar = "function(element) {}';
	string renderStatusbar = "function(element) {}';
	string aggregatesRenderer = "function(element){}'
	string exportSettings = '{columnsHeader: true,hiddenColumns: false,serverURL: null,characterSet: null,collapsedRecords: false,recordsInView: true,fileName: "jqxDataTable"}';
	string editSettings = '{saveOnPageChange: true, saveOnBlur: true, saveOnSelectionChange: true, cancelOnEsc: true, saveOnEnter: true, editSingleCell: false, editOnDoubleClick: true, editOnF2: true}';
}
<jqx-data-table export-settings="exportSettings" width="850" source="Model"> 
    <jqx-data-table-columns>
        <jqx-data-table-column column-group="name" dataField="FirstName" width="100" text="First Name"></jqx-data-table-column>
        <jqx-data-table-column column-group="name" dataField="LastName" width="100" text="Last Name"></jqx-data-table-column>
        <jqx-data-table-column dataField="Title" width="150"></jqx-data-table-column>
        <jqx-data-table-column dataField="Address" width="200"></jqx-data-table-column>
        <jqx-data-table-column dataField="City" width="150"></jqx-data-table-column>
        <jqx-data-table-column dataField="Country"></jqx-data-table-column>
    </jqx-data-table-columns>
    <jqx-data-table-column-groups>
        <jqx-data-table-column-group name="name" text="Name"></jqx-data-table-column-group>
    </jqx-data-table-column-groups>
</jqx-data-table>

Sets or gets the enableHover property.

<script src="~/jqwidgets/jqxbuttons.js"></script>
<script src="~/jqwidgets/jqxdatatable.js"></script>
<script src="~/jqwidgets/jqxscrollbar.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.Employee>
@{
	string renderer = "function() {}';
	string rendering = "function() {}';
	string pagerRenderer = "function(element) {}';
	string renderToolbar = "function(element) {}';
	string renderStatusbar = "function(element) {}';
	string aggregatesRenderer = "function(element){}'
	string exportSettings = '{columnsHeader: true,hiddenColumns: false,serverURL: null,characterSet: null,collapsedRecords: false,recordsInView: true,fileName: "jqxDataTable"}';
	string editSettings = '{saveOnPageChange: true, saveOnBlur: true, saveOnSelectionChange: true, cancelOnEsc: true, saveOnEnter: true, editSingleCell: false, editOnDoubleClick: true, editOnF2: true}';
}
<jqx-data-table enable-hover="true" width="850" source="Model"> 
    <jqx-data-table-columns>
        <jqx-data-table-column column-group="name" dataField="FirstName" width="100" text="First Name"></jqx-data-table-column>
        <jqx-data-table-column column-group="name" dataField="LastName" width="100" text="Last Name"></jqx-data-table-column>
        <jqx-data-table-column dataField="Title" width="150"></jqx-data-table-column>
        <jqx-data-table-column dataField="Address" width="200"></jqx-data-table-column>
        <jqx-data-table-column dataField="City" width="150"></jqx-data-table-column>
        <jqx-data-table-column dataField="Country"></jqx-data-table-column>
    </jqx-data-table-columns>
    <jqx-data-table-column-groups>
        <jqx-data-table-column-group name="name" text="Name"></jqx-data-table-column-group>
    </jqx-data-table-column-groups>
</jqx-data-table>

Sets or gets the enableBrowserSelection property.

<script src="~/jqwidgets/jqxbuttons.js"></script>
<script src="~/jqwidgets/jqxdatatable.js"></script>
<script src="~/jqwidgets/jqxscrollbar.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.Employee>
@{
	string renderer = "function() {}';
	string rendering = "function() {}';
	string pagerRenderer = "function(element) {}';
	string renderToolbar = "function(element) {}';
	string renderStatusbar = "function(element) {}';
	string aggregatesRenderer = "function(element){}'
	string exportSettings = '{columnsHeader: true,hiddenColumns: false,serverURL: null,characterSet: null,collapsedRecords: false,recordsInView: true,fileName: "jqxDataTable"}';
	string editSettings = '{saveOnPageChange: true, saveOnBlur: true, saveOnSelectionChange: true, cancelOnEsc: true, saveOnEnter: true, editSingleCell: false, editOnDoubleClick: true, editOnF2: true}';
}
<jqx-data-table enable-browser-selection="true" width="850" source="Model"> 
    <jqx-data-table-columns>
        <jqx-data-table-column column-group="name" dataField="FirstName" width="100" text="First Name"></jqx-data-table-column>
        <jqx-data-table-column column-group="name" dataField="LastName" width="100" text="Last Name"></jqx-data-table-column>
        <jqx-data-table-column dataField="Title" width="150"></jqx-data-table-column>
        <jqx-data-table-column dataField="Address" width="200"></jqx-data-table-column>
        <jqx-data-table-column dataField="City" width="150"></jqx-data-table-column>
        <jqx-data-table-column dataField="Country"></jqx-data-table-column>
    </jqx-data-table-columns>
    <jqx-data-table-column-groups>
        <jqx-data-table-column-group name="name" text="Name"></jqx-data-table-column-group>
    </jqx-data-table-column-groups>
</jqx-data-table>

Sets or gets the filterable property.

<script src="~/jqwidgets/jqxbuttons.js"></script>
<script src="~/jqwidgets/jqxdatatable.js"></script>
<script src="~/jqwidgets/jqxscrollbar.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.Employee>
@{
	string renderer = "function() {}';
	string rendering = "function() {}';
	string pagerRenderer = "function(element) {}';
	string renderToolbar = "function(element) {}';
	string renderStatusbar = "function(element) {}';
	string aggregatesRenderer = "function(element){}'
	string exportSettings = '{columnsHeader: true,hiddenColumns: false,serverURL: null,characterSet: null,collapsedRecords: false,recordsInView: true,fileName: "jqxDataTable"}';
	string editSettings = '{saveOnPageChange: true, saveOnBlur: true, saveOnSelectionChange: true, cancelOnEsc: true, saveOnEnter: true, editSingleCell: false, editOnDoubleClick: true, editOnF2: true}';
}
<jqx-data-table filterable="true" width="850" source="Model"> 
    <jqx-data-table-columns>
        <jqx-data-table-column column-group="name" dataField="FirstName" width="100" text="First Name"></jqx-data-table-column>
        <jqx-data-table-column column-group="name" dataField="LastName" width="100" text="Last Name"></jqx-data-table-column>
        <jqx-data-table-column dataField="Title" width="150"></jqx-data-table-column>
        <jqx-data-table-column dataField="Address" width="200"></jqx-data-table-column>
        <jqx-data-table-column dataField="City" width="150"></jqx-data-table-column>
        <jqx-data-table-column dataField="Country"></jqx-data-table-column>
    </jqx-data-table-columns>
    <jqx-data-table-column-groups>
        <jqx-data-table-column-group name="name" text="Name"></jqx-data-table-column-group>
    </jqx-data-table-column-groups>
</jqx-data-table>

Sets or gets the filterHeight property.

<script src="~/jqwidgets/jqxbuttons.js"></script>
<script src="~/jqwidgets/jqxdatatable.js"></script>
<script src="~/jqwidgets/jqxscrollbar.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.Employee>
@{
	string renderer = "function() {}';
	string rendering = "function() {}';
	string pagerRenderer = "function(element) {}';
	string renderToolbar = "function(element) {}';
	string renderStatusbar = "function(element) {}';
	string aggregatesRenderer = "function(element){}'
	string exportSettings = '{columnsHeader: true,hiddenColumns: false,serverURL: null,characterSet: null,collapsedRecords: false,recordsInView: true,fileName: "jqxDataTable"}';
	string editSettings = '{saveOnPageChange: true, saveOnBlur: true, saveOnSelectionChange: true, cancelOnEsc: true, saveOnEnter: true, editSingleCell: false, editOnDoubleClick: true, editOnF2: true}';
}
<jqx-data-table filter-height="35" filterable="true" width="850" source="Model"> 
    <jqx-data-table-columns>
        <jqx-data-table-column column-group="name" dataField="FirstName" width="100" text="First Name"></jqx-data-table-column>
        <jqx-data-table-column column-group="name" dataField="LastName" width="100" text="Last Name"></jqx-data-table-column>
        <jqx-data-table-column dataField="Title" width="150"></jqx-data-table-column>
        <jqx-data-table-column dataField="Address" width="200"></jqx-data-table-column>
        <jqx-data-table-column dataField="City" width="150"></jqx-data-table-column>
        <jqx-data-table-column dataField="Country"></jqx-data-table-column>
    </jqx-data-table-columns>
    <jqx-data-table-column-groups>
        <jqx-data-table-column-group name="name" text="Name"></jqx-data-table-column-group>
    </jqx-data-table-column-groups>
</jqx-data-table>

Sets or gets the filterMode property.

<script src="~/jqwidgets/jqxbuttons.js"></script>
<script src="~/jqwidgets/jqxdatatable.js"></script>
<script src="~/jqwidgets/jqxscrollbar.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.Employee>
@{
	string renderer = "function() {}';
	string rendering = "function() {}';
	string pagerRenderer = "function(element) {}';
	string renderToolbar = "function(element) {}';
	string renderStatusbar = "function(element) {}';
	string aggregatesRenderer = "function(element){}'
	string exportSettings = '{columnsHeader: true,hiddenColumns: false,serverURL: null,characterSet: null,collapsedRecords: false,recordsInView: true,fileName: "jqxDataTable"}';
	string editSettings = '{saveOnPageChange: true, saveOnBlur: true, saveOnSelectionChange: true, cancelOnEsc: true, saveOnEnter: true, editSingleCell: false, editOnDoubleClick: true, editOnF2: true}';
}
<jqx-data-table filterable="true" filter-mode="advanced" width="850" source="Model"> 
    <jqx-data-table-columns>
        <jqx-data-table-column column-group="name" dataField="FirstName" width="100" text="First Name"></jqx-data-table-column>
        <jqx-data-table-column column-group="name" dataField="LastName" width="100" text="Last Name"></jqx-data-table-column>
        <jqx-data-table-column dataField="Title" width="150"></jqx-data-table-column>
        <jqx-data-table-column dataField="Address" width="200"></jqx-data-table-column>
        <jqx-data-table-column dataField="City" width="150"></jqx-data-table-column>
        <jqx-data-table-column dataField="Country"></jqx-data-table-column>
    </jqx-data-table-columns>
    <jqx-data-table-column-groups>
        <jqx-data-table-column-group name="name" text="Name"></jqx-data-table-column-group>
    </jqx-data-table-column-groups>
</jqx-data-table>

Sets or gets the groups property.

<script src="~/jqwidgets/jqxbuttons.js"></script>
<script src="~/jqwidgets/jqxdatatable.js"></script>
<script src="~/jqwidgets/jqxscrollbar.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.Employee>
@{
	string renderer = "function() {}';
	string rendering = "function() {}';
	string pagerRenderer = "function(element) {}';
	string renderToolbar = "function(element) {}';
	string renderStatusbar = "function(element) {}';
	string aggregatesRenderer = "function(element){}'
	string exportSettings = '{columnsHeader: true,hiddenColumns: false,serverURL: null,characterSet: null,collapsedRecords: false,recordsInView: true,fileName: "jqxDataTable"}';
	string editSettings = '{saveOnPageChange: true, saveOnBlur: true, saveOnSelectionChange: true, cancelOnEsc: true, saveOnEnter: true, editSingleCell: false, editOnDoubleClick: true, editOnF2: true}';
}
<jqx-data-table groups='['firstname']' width="850" source="Model"> 
    <jqx-data-table-columns>
        <jqx-data-table-column column-group="name" dataField="FirstName" width="100" text="First Name"></jqx-data-table-column>
        <jqx-data-table-column column-group="name" dataField="LastName" width="100" text="Last Name"></jqx-data-table-column>
        <jqx-data-table-column dataField="Title" width="150"></jqx-data-table-column>
        <jqx-data-table-column dataField="Address" width="200"></jqx-data-table-column>
        <jqx-data-table-column dataField="City" width="150"></jqx-data-table-column>
        <jqx-data-table-column dataField="Country"></jqx-data-table-column>
    </jqx-data-table-columns>
    <jqx-data-table-column-groups>
        <jqx-data-table-column-group name="name" text="Name"></jqx-data-table-column-group>
    </jqx-data-table-column-groups>
</jqx-data-table>

Sets or gets the groupsRenderer property.

<script src="~/jqwidgets/jqxbuttons.js"></script>
<script src="~/jqwidgets/jqxdatatable.js"></script>
<script src="~/jqwidgets/jqxscrollbar.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.Employee>
@{
	string renderer = "function() {}';
	string rendering = "function() {}';
	string pagerRenderer = "function(element) {}';
	string renderToolbar = "function(element) {}';
	string renderStatusbar = "function(element) {}';
	string aggregatesRenderer = "function(element){}'
	string exportSettings = '{columnsHeader: true,hiddenColumns: false,serverURL: null,characterSet: null,collapsedRecords: false,recordsInView: true,fileName: "jqxDataTable"}';
	string editSettings = '{saveOnPageChange: true, saveOnBlur: true, saveOnSelectionChange: true, cancelOnEsc: true, saveOnEnter: true, editSingleCell: false, editOnDoubleClick: true, editOnF2: true}';
}
<jqx-data-table groups-renderer="groupsRenderer" width="850" source="Model"> 
    <jqx-data-table-columns>
        <jqx-data-table-column column-group="name" dataField="FirstName" width="100" text="First Name"></jqx-data-table-column>
        <jqx-data-table-column column-group="name" dataField="LastName" width="100" text="Last Name"></jqx-data-table-column>
        <jqx-data-table-column dataField="Title" width="150"></jqx-data-table-column>
        <jqx-data-table-column dataField="Address" width="200"></jqx-data-table-column>
        <jqx-data-table-column dataField="City" width="150"></jqx-data-table-column>
        <jqx-data-table-column dataField="Country"></jqx-data-table-column>
    </jqx-data-table-columns>
    <jqx-data-table-column-groups>
        <jqx-data-table-column-group name="name" text="Name"></jqx-data-table-column-group>
    </jqx-data-table-column-groups>
</jqx-data-table>

Sets or gets the height property.

<script src="~/jqwidgets/jqxbuttons.js"></script>
<script src="~/jqwidgets/jqxdatatable.js"></script>
<script src="~/jqwidgets/jqxscrollbar.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.Employee>
@{
	string renderer = "function() {}';
	string rendering = "function() {}';
	string pagerRenderer = "function(element) {}';
	string renderToolbar = "function(element) {}';
	string renderStatusbar = "function(element) {}';
	string aggregatesRenderer = "function(element){}'
	string exportSettings = '{columnsHeader: true,hiddenColumns: false,serverURL: null,characterSet: null,collapsedRecords: false,recordsInView: true,fileName: "jqxDataTable"}';
	string editSettings = '{saveOnPageChange: true, saveOnBlur: true, saveOnSelectionChange: true, cancelOnEsc: true, saveOnEnter: true, editSingleCell: false, editOnDoubleClick: true, editOnF2: true}';
}
<jqx-data-table height="350" width="850" source="Model"> 
    <jqx-data-table-columns>
        <jqx-data-table-column column-group="name" dataField="FirstName" width="100" text="First Name"></jqx-data-table-column>
        <jqx-data-table-column column-group="name" dataField="LastName" width="100" text="Last Name"></jqx-data-table-column>
        <jqx-data-table-column dataField="Title" width="150"></jqx-data-table-column>
        <jqx-data-table-column dataField="Address" width="200"></jqx-data-table-column>
        <jqx-data-table-column dataField="City" width="150"></jqx-data-table-column>
        <jqx-data-table-column dataField="Country"></jqx-data-table-column>
    </jqx-data-table-columns>
    <jqx-data-table-column-groups>
        <jqx-data-table-column-group name="name" text="Name"></jqx-data-table-column-group>
    </jqx-data-table-column-groups>
</jqx-data-table>

Sets or gets the initRowDetails property.

<script src="~/jqwidgets/jqxbuttons.js"></script>
<script src="~/jqwidgets/jqxscrollbar.js"></script>
<script src="~/jqwidgets/jqxdatatable.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 DataTable Row Details Example";
}
@{
    var employee = Model.FirstOrDefault();
}
<script>
    var initRowDetails = function (id, record, element, rowinfo) {
        var id = id.toString();
        
        var grid = element;
        var data = [];
        var generaterow = function (i) {
            var row = {};      
            row["OrderDate"] = new Date(2016, Math.floor(Math.random() * 11), Math.floor(Math.random() * 27))
            row["Quantity"] = Math.floor(Math.random() * 50)
            row["ProductName"] = record.ProductName;
            return row;
        }
        for (var i = 0; i < Math.max(10, Math.floor(Math.random() * 20)) ; i++) {
            var row = generaterow(i);
            data[i] = row;
        }
        var source = {
            datafields: [
                { name: 'OrderDate', type: 'date' },
                { name: 'Quantity', type: 'string' },
                { name: 'ProductName', type: 'string' }
            ],
            localdata: data
        }
        var nestedGridAdapter = new $.jqx.dataAdapter(source);
        if (grid != null) {
            grid.jqxDataTable({
                source: nestedGridAdapter, width: 780, height: 200,
                columns: [
                  { text: 'Order Date', cellsFormat:'d', dataField: 'OrderDate', width: 200 },
                  { text: 'Quantity', cellsAlign:'right', dataField: 'Quantity', width: 200 },
                  { text: 'Product Name', dataField: 'ProductName' }
                ]
            });
        }
    }
</script>
<jqx-data-table id="grid" alt-rows="true" row-details="true" pageable="true" init-row-details="initRowDetails()" source-id="@(employee.ID)" theme="@ViewData["Theme"]' sortable="true">
    <jqx-data-table-columns>
        <jqx-data-table-column dataField-for="@(employee.FirstName)" width="150" text="First Name"></jqx-data-table-column>
        <jqx-data-table-column dataField-for="@(employee.LastName)" width="150" text="Last Name"></jqx-data-table-column>
        <jqx-data-table-column dataField-for="@(employee.ProductName)" width="200" text="Product Name"></jqx-data-table-column>
        <jqx-data-table-column dataField-for="@(employee.Price)" width="100" text="Price" cells-format="c2" cells-align="HorizontalAlignment.Right"></jqx-data-table-column>
        <jqx-data-table-column dataField-for="@(employee.Quantity)" width="100" text="Quantity" cells-align="HorizontalAlignment.Right"></jqx-data-table-column>
        <jqx-data-table-column dataField-for="@(employee.Total)" text="Total" cells-format="c2" cells-align="HorizontalAlignment.Right"></jqx-data-table-column>
 </jqx-data-table-columns>
</jqx-data-table>

Sets or gets the incrementalSearch property.

<script src="~/jqwidgets/jqxbuttons.js"></script>
<script src="~/jqwidgets/jqxdatatable.js"></script>
<script src="~/jqwidgets/jqxscrollbar.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.Employee>
@{
	string renderer = "function() {}';
	string rendering = "function() {}';
	string pagerRenderer = "function(element) {}';
	string renderToolbar = "function(element) {}';
	string renderStatusbar = "function(element) {}';
	string aggregatesRenderer = "function(element){}'
	string exportSettings = '{columnsHeader: true,hiddenColumns: false,serverURL: null,characterSet: null,collapsedRecords: false,recordsInView: true,fileName: "jqxDataTable"}';
	string editSettings = '{saveOnPageChange: true, saveOnBlur: true, saveOnSelectionChange: true, cancelOnEsc: true, saveOnEnter: true, editSingleCell: false, editOnDoubleClick: true, editOnF2: true}';
}
<jqx-data-table incremental-search="true" width="850" source="Model"> 
    <jqx-data-table-columns>
        <jqx-data-table-column column-group="name" dataField="FirstName" width="100" text="First Name"></jqx-data-table-column>
        <jqx-data-table-column column-group="name" dataField="LastName" width="100" text="Last Name"></jqx-data-table-column>
        <jqx-data-table-column dataField="Title" width="150"></jqx-data-table-column>
        <jqx-data-table-column dataField="Address" width="200"></jqx-data-table-column>
        <jqx-data-table-column dataField="City" width="150"></jqx-data-table-column>
        <jqx-data-table-column dataField="Country"></jqx-data-table-column>
    </jqx-data-table-columns>
    <jqx-data-table-column-groups>
        <jqx-data-table-column-group name="name" text="Name"></jqx-data-table-column-group>
    </jqx-data-table-column-groups>
</jqx-data-table>

Sets or gets the localization property.

<script src="~/jqwidgets/jqxbuttons.js"></script>
<script src="~/jqwidgets/jqxscrollbar.js"></script>
<script src="~/jqwidgets/jqxdatatable.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.Employee>
@{
    ViewData["Title"] = "ASP .NET MVC DataTable Localization Example";
}
@{
    var employee = Model.FirstOrDefault();
}
<script>
    var datatableInstance;
    function getInstance(instance)
    {
        datatableInstance = instance;
    }
    function datatableReady()
    {
    }
    var localization = function () {
        var localizationobj = {};
        localizationobj.pagerGoToPageString = "Gehe zu:";
        localizationobj.pagerShowRowsString = "Zeige Zeile:";
        localizationobj.pagerRangeString = " von ";
        localizationobj.pagerNextButtonString = "voriger";
        localizationobj.pagerFirstButtonString = "erste";
        localizationobj.pagerLastButtonString = "letzte";
        localizationobj.pagerPreviousButtonString = "n�chster";
        localizationobj.sortAscendingString = "Sortiere aufsteigend";
        localizationobj.sortDescendingString = "Sortiere absteigend";
        localizationobj.sortRemoveString = "Entferne Sortierung";
        localizationobj.emptydatastring = "keine Daten angezeigt";
        localizationobj.firstDay = 1;
        localizationobj.percentSymbol = "%";
        localizationobj.currencySymbol = "�";
        localizationobj.currencySymbolPosition = "after";
        localizationobj.decimalSeparator = ".";
        localizationobj.thousandsSeparator = ",";
        var days = {
            // full day names
            names: ["Sonntag", "Montag", "Dienstag", "Mittwoch", "Donnerstag", "Freitag", "Samstag"],
            // abbreviated day names
            namesAbbr: ["Sonn", "Mon", "Dien", "Mitt", "Donn", "Fre", "Sams"],
            // shortest day names
            namesShort: ["So", "Mo", "Di", "Mi", "Do", "Fr", "Sa"]
        };
        localizationobj.days = days;
        var months = {
            // full month names (13 months for lunar calendards -- 13th month should be "" if not lunar)
            names: ["Januar", "Februar", "M�rz", "April", "Mai", "Juni", "Juli", "August", "September", "Oktober", "November", "Dezember", ""],
            // abbreviated month names
            namesAbbr: ["Jan", "Feb", "M�r", "Apr", "Mai", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dez", ""]
        };
        var patterns = {
            d: "dd.MM.yyyy",
            D: "dddd, d. MMMM yyyy",
            t: "HH:mm",
            T: "HH:mm:ss",
            f: "dddd, d. MMMM yyyy HH:mm",
            F: "dddd, d. MMMM yyyy HH:mm:ss",
            M: "dd MMMM",
            Y: "MMMM yyyy"
        }
        localizationobj.patterns = patterns;
        localizationobj.months = months;
        return localizationobj;
    }();
</script>
<jqx-data-table localization='{{localization}}' sortable=true pageable=true pager-mode="advanced" ready="datatableReady()" source-id-for="@(employee.EmployeeID)" instance="getInstance()" theme="@ViewData["Theme"]' width="850"> 
    <jqx-data-table-columns>
        <jqx-data-table-column datafield-for="@(employee.FirstName)" width="100" text="Vorname"></jqx-data-table-column>
        <jqx-data-table-column datafield-for="@(employee.LastName)" width="100" text="Familienname"></jqx-data-table-column>
        <jqx-data-table-column datafield-for="@(employee.Title)" text="Titel" width="150"></jqx-data-table-column>
        <jqx-data-table-column datafield-for="@(employee.Address)" text="Adresse" width="200"></jqx-data-table-column>
        <jqx-data-table-column datafield-for="@(employee.City)" text="Stadt" width="150"></jqx-data-table-column>
        <jqx-data-table-column datafield-for="@(employee.Country)" text="Land"></jqx-data-table-column>
    </jqx-data-table-columns>
</jqx-data-table>

Sets or gets the pagerHeight property.

<script src="~/jqwidgets/jqxbuttons.js"></script>
<script src="~/jqwidgets/jqxdatatable.js"></script>
<script src="~/jqwidgets/jqxscrollbar.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.Employee>
@{
	string renderer = "function() {}';
	string rendering = "function() {}';
	string pagerRenderer = "function(element) {}';
	string renderToolbar = "function(element) {}';
	string renderStatusbar = "function(element) {}';
	string aggregatesRenderer = "function(element){}'
	string exportSettings = '{columnsHeader: true,hiddenColumns: false,serverURL: null,characterSet: null,collapsedRecords: false,recordsInView: true,fileName: "jqxDataTable"}';
	string editSettings = '{saveOnPageChange: true, saveOnBlur: true, saveOnSelectionChange: true, cancelOnEsc: true, saveOnEnter: true, editSingleCell: false, editOnDoubleClick: true, editOnF2: true}';
}
<jqx-data-table pager-height="35" pageable="true" width="850" source="Model"> 
    <jqx-data-table-columns>
        <jqx-data-table-column column-group="name" dataField="FirstName" width="100" text="First Name"></jqx-data-table-column>
        <jqx-data-table-column column-group="name" dataField="LastName" width="100" text="Last Name"></jqx-data-table-column>
        <jqx-data-table-column dataField="Title" width="150"></jqx-data-table-column>
        <jqx-data-table-column dataField="Address" width="200"></jqx-data-table-column>
        <jqx-data-table-column dataField="City" width="150"></jqx-data-table-column>
        <jqx-data-table-column dataField="Country"></jqx-data-table-column>
    </jqx-data-table-columns>
    <jqx-data-table-column-groups>
        <jqx-data-table-column-group name="name" text="Name"></jqx-data-table-column-group>
    </jqx-data-table-column-groups>
</jqx-data-table>

Sets or gets the pageSize property.

<script src="~/jqwidgets/jqxbuttons.js"></script>
<script src="~/jqwidgets/jqxdatatable.js"></script>
<script src="~/jqwidgets/jqxscrollbar.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.Employee>
@{
	string renderer = "function() {}';
	string rendering = "function() {}';
	string pagerRenderer = "function(element) {}';
	string renderToolbar = "function(element) {}';
	string renderStatusbar = "function(element) {}';
	string aggregatesRenderer = "function(element){}'
	string exportSettings = '{columnsHeader: true,hiddenColumns: false,serverURL: null,characterSet: null,collapsedRecords: false,recordsInView: true,fileName: "jqxDataTable"}';
	string editSettings = '{saveOnPageChange: true, saveOnBlur: true, saveOnSelectionChange: true, cancelOnEsc: true, saveOnEnter: true, editSingleCell: false, editOnDoubleClick: true, editOnF2: true}';
}
<jqx-data-table page-size="15" pageable="true" width="850" source="Model"> 
    <jqx-data-table-columns>
        <jqx-data-table-column column-group="name" dataField="FirstName" width="100" text="First Name"></jqx-data-table-column>
        <jqx-data-table-column column-group="name" dataField="LastName" width="100" text="Last Name"></jqx-data-table-column>
        <jqx-data-table-column dataField="Title" width="150"></jqx-data-table-column>
        <jqx-data-table-column dataField="Address" width="200"></jqx-data-table-column>
        <jqx-data-table-column dataField="City" width="150"></jqx-data-table-column>
        <jqx-data-table-column dataField="Country"></jqx-data-table-column>
    </jqx-data-table-columns>
    <jqx-data-table-column-groups>
        <jqx-data-table-column-group name="name" text="Name"></jqx-data-table-column-group>
    </jqx-data-table-column-groups>
</jqx-data-table>

Sets or gets the pageSizeOptions property.

<script src="~/jqwidgets/jqxbuttons.js"></script>
<script src="~/jqwidgets/jqxdatatable.js"></script>
<script src="~/jqwidgets/jqxscrollbar.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.Employee>
@{
	string renderer = "function() {}';
	string rendering = "function() {}';
	string pagerRenderer = "function(element) {}';
	string renderToolbar = "function(element) {}';
	string renderStatusbar = "function(element) {}';
	string aggregatesRenderer = "function(element){}'
	string exportSettings = '{columnsHeader: true,hiddenColumns: false,serverURL: null,characterSet: null,collapsedRecords: false,recordsInView: true,fileName: "jqxDataTable"}';
	string editSettings = '{saveOnPageChange: true, saveOnBlur: true, saveOnSelectionChange: true, cancelOnEsc: true, saveOnEnter: true, editSingleCell: false, editOnDoubleClick: true, editOnF2: true}';
}
<jqx-data-table page-size-options='[15, 25, 35]' pageable="true" width="850" source="Model"> 
    <jqx-data-table-columns>
        <jqx-data-table-column column-group="name" dataField="FirstName" width="100" text="First Name"></jqx-data-table-column>
        <jqx-data-table-column column-group="name" dataField="LastName" width="100" text="Last Name"></jqx-data-table-column>
        <jqx-data-table-column dataField="Title" width="150"></jqx-data-table-column>
        <jqx-data-table-column dataField="Address" width="200"></jqx-data-table-column>
        <jqx-data-table-column dataField="City" width="150"></jqx-data-table-column>
        <jqx-data-table-column dataField="Country"></jqx-data-table-column>
    </jqx-data-table-columns>
    <jqx-data-table-column-groups>
        <jqx-data-table-column-group name="name" text="Name"></jqx-data-table-column-group>
    </jqx-data-table-column-groups>
</jqx-data-table>

Sets or gets the pageable property.

<script src="~/jqwidgets/jqxbuttons.js"></script>
<script src="~/jqwidgets/jqxdatatable.js"></script>
<script src="~/jqwidgets/jqxscrollbar.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.Employee>
@{
	string renderer = "function() {}';
	string rendering = "function() {}';
	string pagerRenderer = "function(element) {}';
	string renderToolbar = "function(element) {}';
	string renderStatusbar = "function(element) {}';
	string aggregatesRenderer = "function(element){}'
	string exportSettings = '{columnsHeader: true,hiddenColumns: false,serverURL: null,characterSet: null,collapsedRecords: false,recordsInView: true,fileName: "jqxDataTable"}';
	string editSettings = '{saveOnPageChange: true, saveOnBlur: true, saveOnSelectionChange: true, cancelOnEsc: true, saveOnEnter: true, editSingleCell: false, editOnDoubleClick: true, editOnF2: true}';
}
<jqx-data-table pageable="true" width="850" source="Model"> 
    <jqx-data-table-columns>
        <jqx-data-table-column column-group="name" dataField="FirstName" width="100" text="First Name"></jqx-data-table-column>
        <jqx-data-table-column column-group="name" dataField="LastName" width="100" text="Last Name"></jqx-data-table-column>
        <jqx-data-table-column dataField="Title" width="150"></jqx-data-table-column>
        <jqx-data-table-column dataField="Address" width="200"></jqx-data-table-column>
        <jqx-data-table-column dataField="City" width="150"></jqx-data-table-column>
        <jqx-data-table-column dataField="Country"></jqx-data-table-column>
    </jqx-data-table-columns>
    <jqx-data-table-column-groups>
        <jqx-data-table-column-group name="name" text="Name"></jqx-data-table-column-group>
    </jqx-data-table-column-groups>
</jqx-data-table>

Sets or gets the pagerPosition property.

<script src="~/jqwidgets/jqxbuttons.js"></script>
<script src="~/jqwidgets/jqxdatatable.js"></script>
<script src="~/jqwidgets/jqxscrollbar.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.Employee>
@{
	string renderer = "function() {}';
	string rendering = "function() {}';
	string pagerRenderer = "function(element) {}';
	string renderToolbar = "function(element) {}';
	string renderStatusbar = "function(element) {}';
	string aggregatesRenderer = "function(element){}'
	string exportSettings = '{columnsHeader: true,hiddenColumns: false,serverURL: null,characterSet: null,collapsedRecords: false,recordsInView: true,fileName: "jqxDataTable"}';
	string editSettings = '{saveOnPageChange: true, saveOnBlur: true, saveOnSelectionChange: true, cancelOnEsc: true, saveOnEnter: true, editSingleCell: false, editOnDoubleClick: true, editOnF2: true}';
}
<jqx-data-table pager-position="top" width="850" source="Model"> 
    <jqx-data-table-columns>
        <jqx-data-table-column column-group="name" dataField="FirstName" width="100" text="First Name"></jqx-data-table-column>
        <jqx-data-table-column column-group="name" dataField="LastName" width="100" text="Last Name"></jqx-data-table-column>
        <jqx-data-table-column dataField="Title" width="150"></jqx-data-table-column>
        <jqx-data-table-column dataField="Address" width="200"></jqx-data-table-column>
        <jqx-data-table-column dataField="City" width="150"></jqx-data-table-column>
        <jqx-data-table-column dataField="Country"></jqx-data-table-column>
    </jqx-data-table-columns>
    <jqx-data-table-column-groups>
        <jqx-data-table-column-group name="name" text="Name"></jqx-data-table-column-group>
    </jqx-data-table-column-groups>
</jqx-data-table>

Sets or gets the pagerMode property.

<script src="~/jqwidgets/jqxbuttons.js"></script>
<script src="~/jqwidgets/jqxdatatable.js"></script>
<script src="~/jqwidgets/jqxscrollbar.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.Employee>
@{
	string renderer = "function() {}';
	string rendering = "function() {}';
	string pagerRenderer = "function(element) {}';
	string renderToolbar = "function(element) {}';
	string renderStatusbar = "function(element) {}';
	string aggregatesRenderer = "function(element){}'
	string exportSettings = '{columnsHeader: true,hiddenColumns: false,serverURL: null,characterSet: null,collapsedRecords: false,recordsInView: true,fileName: "jqxDataTable"}';
	string editSettings = '{saveOnPageChange: true, saveOnBlur: true, saveOnSelectionChange: true, cancelOnEsc: true, saveOnEnter: true, editSingleCell: false, editOnDoubleClick: true, editOnF2: true}';
}
<jqx-data-table pager-mode="advanced" width="850" source="Model"> 
    <jqx-data-table-columns>
        <jqx-data-table-column column-group="name" dataField="FirstName" width="100" text="First Name"></jqx-data-table-column>
        <jqx-data-table-column column-group="name" dataField="LastName" width="100" text="Last Name"></jqx-data-table-column>
        <jqx-data-table-column dataField="Title" width="150"></jqx-data-table-column>
        <jqx-data-table-column dataField="Address" width="200"></jqx-data-table-column>
        <jqx-data-table-column dataField="City" width="150"></jqx-data-table-column>
        <jqx-data-table-column dataField="Country"></jqx-data-table-column>
    </jqx-data-table-columns>
    <jqx-data-table-column-groups>
        <jqx-data-table-column-group name="name" text="Name"></jqx-data-table-column-group>
    </jqx-data-table-column-groups>
</jqx-data-table>

Sets or gets the pagerButtonsCount property.

<script src="~/jqwidgets/jqxbuttons.js"></script>
<script src="~/jqwidgets/jqxdatatable.js"></script>
<script src="~/jqwidgets/jqxscrollbar.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.Employee>
@{
	string renderer = "function() {}';
	string rendering = "function() {}';
	string pagerRenderer = "function(element) {}';
	string renderToolbar = "function(element) {}';
	string renderStatusbar = "function(element) {}';
	string aggregatesRenderer = "function(element){}'
	string exportSettings = '{columnsHeader: true,hiddenColumns: false,serverURL: null,characterSet: null,collapsedRecords: false,recordsInView: true,fileName: "jqxDataTable"}';
	string editSettings = '{saveOnPageChange: true, saveOnBlur: true, saveOnSelectionChange: true, cancelOnEsc: true, saveOnEnter: true, editSingleCell: false, editOnDoubleClick: true, editOnF2: true}';
}
<jqx-data-table pager-buttons-count="10" width="850" source="Model"> 
    <jqx-data-table-columns>
        <jqx-data-table-column column-group="name" dataField="FirstName" width="100" text="First Name"></jqx-data-table-column>
        <jqx-data-table-column column-group="name" dataField="LastName" width="100" text="Last Name"></jqx-data-table-column>
        <jqx-data-table-column dataField="Title" width="150"></jqx-data-table-column>
        <jqx-data-table-column dataField="Address" width="200"></jqx-data-table-column>
        <jqx-data-table-column dataField="City" width="150"></jqx-data-table-column>
        <jqx-data-table-column dataField="Country"></jqx-data-table-column>
    </jqx-data-table-columns>
    <jqx-data-table-column-groups>
        <jqx-data-table-column-group name="name" text="Name"></jqx-data-table-column-group>
    </jqx-data-table-column-groups>
</jqx-data-table>

Sets or gets the pagerRenderer property.

<script src="~/jqwidgets/jqxbuttons.js"></script>
<script src="~/jqwidgets/jqxdatatable.js"></script>
<script src="~/jqwidgets/jqxscrollbar.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.Employee>
@{
	string renderer = "function() {}';
	string rendering = "function() {}';
	string pagerRenderer = "function(element) {}';
	string renderToolbar = "function(element) {}';
	string renderStatusbar = "function(element) {}';
	string aggregatesRenderer = "function(element){}'
	string exportSettings = '{columnsHeader: true,hiddenColumns: false,serverURL: null,characterSet: null,collapsedRecords: false,recordsInView: true,fileName: "jqxDataTable"}';
	string editSettings = '{saveOnPageChange: true, saveOnBlur: true, saveOnSelectionChange: true, cancelOnEsc: true, saveOnEnter: true, editSingleCell: false, editOnDoubleClick: true, editOnF2: true}';
}
<jqx-data-table pager-renderer="pagerRenderer" width="850" source="Model"> 
    <jqx-data-table-columns>
        <jqx-data-table-column column-group="name" dataField="FirstName" width="100" text="First Name"></jqx-data-table-column>
        <jqx-data-table-column column-group="name" dataField="LastName" width="100" text="Last Name"></jqx-data-table-column>
        <jqx-data-table-column dataField="Title" width="150"></jqx-data-table-column>
        <jqx-data-table-column dataField="Address" width="200"></jqx-data-table-column>
        <jqx-data-table-column dataField="City" width="150"></jqx-data-table-column>
        <jqx-data-table-column dataField="Country"></jqx-data-table-column>
    </jqx-data-table-columns>
    <jqx-data-table-column-groups>
        <jqx-data-table-column-group name="name" text="Name"></jqx-data-table-column-group>
    </jqx-data-table-column-groups>
</jqx-data-table>

Sets or gets the ready property.

<script src="~/jqwidgets/jqxbuttons.js"></script>
<script src="~/jqwidgets/jqxdatatable.js"></script>
<script src="~/jqwidgets/jqxscrollbar.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.Employee>
@{
	string renderer = "function() {}';
	string rendering = "function() {}';
	string pagerRenderer = "function(element) {}';
	string renderToolbar = "function(element) {}';
	string renderStatusbar = "function(element) {}';
	string aggregatesRenderer = "function(element){}'
	string exportSettings = '{columnsHeader: true,hiddenColumns: false,serverURL: null,characterSet: null,collapsedRecords: false,recordsInView: true,fileName: "jqxDataTable"}';
	string editSettings = '{saveOnPageChange: true, saveOnBlur: true, saveOnSelectionChange: true, cancelOnEsc: true, saveOnEnter: true, editSingleCell: false, editOnDoubleClick: true, editOnF2: true}';
}
<jqx-data-table ready="ready" width="850" source="Model"> 
    <jqx-data-table-columns>
        <jqx-data-table-column column-group="name" dataField="FirstName" width="100" text="First Name"></jqx-data-table-column>
        <jqx-data-table-column column-group="name" dataField="LastName" width="100" text="Last Name"></jqx-data-table-column>
        <jqx-data-table-column dataField="Title" width="150"></jqx-data-table-column>
        <jqx-data-table-column dataField="Address" width="200"></jqx-data-table-column>
        <jqx-data-table-column dataField="City" width="150"></jqx-data-table-column>
        <jqx-data-table-column dataField="Country"></jqx-data-table-column>
    </jqx-data-table-columns>
    <jqx-data-table-column-groups>
        <jqx-data-table-column-group name="name" text="Name"></jqx-data-table-column-group>
    </jqx-data-table-column-groups>
</jqx-data-table>

Sets or gets the rowDetails property.

<script src="~/jqwidgets/jqxbuttons.js"></script>
<script src="~/jqwidgets/jqxscrollbar.js"></script>
<script src="~/jqwidgets/jqxdatatable.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 DataTable Row Details Example";
}
@{
    var employee = Model.FirstOrDefault();
}
<script>
    var initRowDetails = function (id, record, element, rowinfo) {
        var id = id.toString();
        
        var grid = element;
        var data = [];
        var generaterow = function (i) {
            var row = {};      
            row["OrderDate"] = new Date(2016, Math.floor(Math.random() * 11), Math.floor(Math.random() * 27))
            row["Quantity"] = Math.floor(Math.random() * 50)
            row["ProductName"] = record.ProductName;
            return row;
        }
        for (var i = 0; i < Math.max(10, Math.floor(Math.random() * 20)) ; i++) {
            var row = generaterow(i);
            data[i] = row;
        }
        var source = {
            datafields: [
                { name: 'OrderDate', type: 'date' },
                { name: 'Quantity', type: 'string' },
                { name: 'ProductName', type: 'string' }
            ],
            localdata: data
        }
        var nestedGridAdapter = new $.jqx.dataAdapter(source);
        if (grid != null) {
            grid.jqxDataTable({
                source: nestedGridAdapter, width: 780, height: 200,
                columns: [
                  { text: 'Order Date', cellsFormat:'d', dataField: 'OrderDate', width: 200 },
                  { text: 'Quantity', cellsAlign:'right', dataField: 'Quantity', width: 200 },
                  { text: 'Product Name', dataField: 'ProductName' }
                ]
            });
        }
    }
</script>
<jqx-data-table id="grid" alt-rows="true" row-details="true" pageable="true" init-row-details="initRowDetails()" source-id="@(employee.ID)" theme="@ViewData["Theme"]' sortable="true">
    <jqx-data-table-columns>
        <jqx-data-table-column dataField-for="@(employee.FirstName)" width="150" text="First Name"></jqx-data-table-column>
        <jqx-data-table-column dataField-for="@(employee.LastName)" width="150" text="Last Name"></jqx-data-table-column>
        <jqx-data-table-column dataField-for="@(employee.ProductName)" width="200" text="Product Name"></jqx-data-table-column>
        <jqx-data-table-column dataField-for="@(employee.Price)" width="100" text="Price" cells-format="c2" cells-align="HorizontalAlignment.Right"></jqx-data-table-column>
        <jqx-data-table-column dataField-for="@(employee.Quantity)" width="100" text="Quantity" cells-align="HorizontalAlignment.Right"></jqx-data-table-column>
        <jqx-data-table-column dataField-for="@(employee.Total)" text="Total" cells-format="c2" cells-align="HorizontalAlignment.Right"></jqx-data-table-column>
 </jqx-data-table-columns>
</jqx-data-table>

Sets or gets the renderToolbar property.

<script src="~/jqwidgets/jqxbuttons.js"></script>
<script src="~/jqwidgets/jqxdatatable.js"></script>
<script src="~/jqwidgets/jqxscrollbar.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.Employee>
@{
	string renderer = "function() {}';
	string rendering = "function() {}';
	string pagerRenderer = "function(element) {}';
	string renderToolbar = "function(element) {}';
	string renderStatusbar = "function(element) {}';
	string aggregatesRenderer = "function(element){}'
	string exportSettings = '{columnsHeader: true,hiddenColumns: false,serverURL: null,characterSet: null,collapsedRecords: false,recordsInView: true,fileName: "jqxDataTable"}';
	string editSettings = '{saveOnPageChange: true, saveOnBlur: true, saveOnSelectionChange: true, cancelOnEsc: true, saveOnEnter: true, editSingleCell: false, editOnDoubleClick: true, editOnF2: true}';
}
<jqx-data-table render-toolbar="renderToolbar" width="850" source="Model"> 
    <jqx-data-table-columns>
        <jqx-data-table-column column-group="name" dataField="FirstName" width="100" text="First Name"></jqx-data-table-column>
        <jqx-data-table-column column-group="name" dataField="LastName" width="100" text="Last Name"></jqx-data-table-column>
        <jqx-data-table-column dataField="Title" width="150"></jqx-data-table-column>
        <jqx-data-table-column dataField="Address" width="200"></jqx-data-table-column>
        <jqx-data-table-column dataField="City" width="150"></jqx-data-table-column>
        <jqx-data-table-column dataField="Country"></jqx-data-table-column>
    </jqx-data-table-columns>
    <jqx-data-table-column-groups>
        <jqx-data-table-column-group name="name" text="Name"></jqx-data-table-column-group>
    </jqx-data-table-column-groups>
</jqx-data-table>

Sets or gets the renderStatusbar property.

<script src="~/jqwidgets/jqxbuttons.js"></script>
<script src="~/jqwidgets/jqxdatatable.js"></script>
<script src="~/jqwidgets/jqxscrollbar.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.Employee>
@{
	string renderer = "function() {}';
	string rendering = "function() {}';
	string pagerRenderer = "function(element) {}';
	string renderToolbar = "function(element) {}';
	string renderStatusbar = "function(element) {}';
	string aggregatesRenderer = "function(element){}'
	string exportSettings = '{columnsHeader: true,hiddenColumns: false,serverURL: null,characterSet: null,collapsedRecords: false,recordsInView: true,fileName: "jqxDataTable"}';
	string editSettings = '{saveOnPageChange: true, saveOnBlur: true, saveOnSelectionChange: true, cancelOnEsc: true, saveOnEnter: true, editSingleCell: false, editOnDoubleClick: true, editOnF2: true}';
}
<jqx-data-table render-statusbar="renderStatusbar" width="850" source="Model"> 
    <jqx-data-table-columns>
        <jqx-data-table-column column-group="name" dataField="FirstName" width="100" text="First Name"></jqx-data-table-column>
        <jqx-data-table-column column-group="name" dataField="LastName" width="100" text="Last Name"></jqx-data-table-column>
        <jqx-data-table-column dataField="Title" width="150"></jqx-data-table-column>
        <jqx-data-table-column dataField="Address" width="200"></jqx-data-table-column>
        <jqx-data-table-column dataField="City" width="150"></jqx-data-table-column>
        <jqx-data-table-column dataField="Country"></jqx-data-table-column>
    </jqx-data-table-columns>
    <jqx-data-table-column-groups>
        <jqx-data-table-column-group name="name" text="Name"></jqx-data-table-column-group>
    </jqx-data-table-column-groups>
</jqx-data-table>

Sets or gets the rendering property.

<script src="~/jqwidgets/jqxbuttons.js"></script>
<script src="~/jqwidgets/jqxdatatable.js"></script>
<script src="~/jqwidgets/jqxscrollbar.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.Employee>
@{
	string renderer = "function() {}';
	string rendering = "function() {}';
	string pagerRenderer = "function(element) {}';
	string renderToolbar = "function(element) {}';
	string renderStatusbar = "function(element) {}';
	string aggregatesRenderer = "function(element){}'
	string exportSettings = '{columnsHeader: true,hiddenColumns: false,serverURL: null,characterSet: null,collapsedRecords: false,recordsInView: true,fileName: "jqxDataTable"}';
	string editSettings = '{saveOnPageChange: true, saveOnBlur: true, saveOnSelectionChange: true, cancelOnEsc: true, saveOnEnter: true, editSingleCell: false, editOnDoubleClick: true, editOnF2: true}';
}
<jqx-data-table rendering="rendering" width="850" source="Model"> 
    <jqx-data-table-columns>
        <jqx-data-table-column column-group="name" dataField="FirstName" width="100" text="First Name"></jqx-data-table-column>
        <jqx-data-table-column column-group="name" dataField="LastName" width="100" text="Last Name"></jqx-data-table-column>
        <jqx-data-table-column dataField="Title" width="150"></jqx-data-table-column>
        <jqx-data-table-column dataField="Address" width="200"></jqx-data-table-column>
        <jqx-data-table-column dataField="City" width="150"></jqx-data-table-column>
        <jqx-data-table-column dataField="Country"></jqx-data-table-column>
    </jqx-data-table-columns>
    <jqx-data-table-column-groups>
        <jqx-data-table-column-group name="name" text="Name"></jqx-data-table-column-group>
    </jqx-data-table-column-groups>
</jqx-data-table>

Sets or gets the rendered property.

<script src="~/jqwidgets/jqxbuttons.js"></script>
<script src="~/jqwidgets/jqxdatatable.js"></script>
<script src="~/jqwidgets/jqxscrollbar.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.Employee>
@{
	string renderer = "function() {}';
	string rendering = "function() {}';
	string pagerRenderer = "function(element) {}';
	string renderToolbar = "function(element) {}';
	string renderStatusbar = "function(element) {}';
	string aggregatesRenderer = "function(element){}'
	string exportSettings = '{columnsHeader: true,hiddenColumns: false,serverURL: null,characterSet: null,collapsedRecords: false,recordsInView: true,fileName: "jqxDataTable"}';
	string editSettings = '{saveOnPageChange: true, saveOnBlur: true, saveOnSelectionChange: true, cancelOnEsc: true, saveOnEnter: true, editSingleCell: false, editOnDoubleClick: true, editOnF2: true}';
}
<jqx-data-table rendered="rendered" width="850" source="Model"> 
    <jqx-data-table-columns>
        <jqx-data-table-column column-group="name" dataField="FirstName" width="100" text="First Name"></jqx-data-table-column>
        <jqx-data-table-column column-group="name" dataField="LastName" width="100" text="Last Name"></jqx-data-table-column>
        <jqx-data-table-column dataField="Title" width="150"></jqx-data-table-column>
        <jqx-data-table-column dataField="Address" width="200"></jqx-data-table-column>
        <jqx-data-table-column dataField="City" width="150"></jqx-data-table-column>
        <jqx-data-table-column dataField="Country"></jqx-data-table-column>
    </jqx-data-table-columns>
    <jqx-data-table-column-groups>
        <jqx-data-table-column-group name="name" text="Name"></jqx-data-table-column-group>
    </jqx-data-table-column-groups>
</jqx-data-table>

Sets or gets the rtl property.

<script src="~/jqwidgets/jqxbuttons.js"></script>
<script src="~/jqwidgets/jqxdatatable.js"></script>
<script src="~/jqwidgets/jqxscrollbar.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.Employee>
@{
	string renderer = "function() {}';
	string rendering = "function() {}';
	string pagerRenderer = "function(element) {}';
	string renderToolbar = "function(element) {}';
	string renderStatusbar = "function(element) {}';
	string aggregatesRenderer = "function(element){}'
	string exportSettings = '{columnsHeader: true,hiddenColumns: false,serverURL: null,characterSet: null,collapsedRecords: false,recordsInView: true,fileName: "jqxDataTable"}';
	string editSettings = '{saveOnPageChange: true, saveOnBlur: true, saveOnSelectionChange: true, cancelOnEsc: true, saveOnEnter: true, editSingleCell: false, editOnDoubleClick: true, editOnF2: true}';
}
<jqx-data-table rtl="true" width="850" source="Model"> 
    <jqx-data-table-columns>
        <jqx-data-table-column column-group="name" dataField="FirstName" width="100" text="First Name"></jqx-data-table-column>
        <jqx-data-table-column column-group="name" dataField="LastName" width="100" text="Last Name"></jqx-data-table-column>
        <jqx-data-table-column dataField="Title" width="150"></jqx-data-table-column>
        <jqx-data-table-column dataField="Address" width="200"></jqx-data-table-column>
        <jqx-data-table-column dataField="City" width="150"></jqx-data-table-column>
        <jqx-data-table-column dataField="Country"></jqx-data-table-column>
    </jqx-data-table-columns>
    <jqx-data-table-column-groups>
        <jqx-data-table-column-group name="name" text="Name"></jqx-data-table-column-group>
    </jqx-data-table-column-groups>
</jqx-data-table>

Sets or gets the source property.

<script src="~/jqwidgets/jqxbuttons.js"></script>
<script src="~/jqwidgets/jqxdatatable.js"></script>
<script src="~/jqwidgets/jqxscrollbar.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.Employee>
@{
	string renderer = "function() {}';
	string rendering = "function() {}';
	string pagerRenderer = "function(element) {}';
	string renderToolbar = "function(element) {}';
	string renderStatusbar = "function(element) {}';
	string aggregatesRenderer = "function(element){}'
	string exportSettings = '{columnsHeader: true,hiddenColumns: false,serverURL: null,characterSet: null,collapsedRecords: false,recordsInView: true,fileName: "jqxDataTable"}';
	string editSettings = '{saveOnPageChange: true, saveOnBlur: true, saveOnSelectionChange: true, cancelOnEsc: true, saveOnEnter: true, editSingleCell: false, editOnDoubleClick: true, editOnF2: true}';
}
<jqx-data-table width="850" source="Model"> 
    <jqx-data-table-columns>
        <jqx-data-table-column column-group="name" dataField="FirstName" width="100" text="First Name"></jqx-data-table-column>
        <jqx-data-table-column column-group="name" dataField="LastName" width="100" text="Last Name"></jqx-data-table-column>
        <jqx-data-table-column dataField="Title" width="150"></jqx-data-table-column>
        <jqx-data-table-column dataField="Address" width="200"></jqx-data-table-column>
        <jqx-data-table-column dataField="City" width="150"></jqx-data-table-column>
        <jqx-data-table-column dataField="Country"></jqx-data-table-column>
    </jqx-data-table-columns>
    <jqx-data-table-column-groups>
        <jqx-data-table-column-group name="name" text="Name"></jqx-data-table-column-group>
    </jqx-data-table-column-groups>
</jqx-data-table>

Sets or gets the sortable property.

<script src="~/jqwidgets/jqxbuttons.js"></script>
<script src="~/jqwidgets/jqxdatatable.js"></script>
<script src="~/jqwidgets/jqxscrollbar.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.Employee>
@{
	string renderer = "function() {}';
	string rendering = "function() {}';
	string pagerRenderer = "function(element) {}';
	string renderToolbar = "function(element) {}';
	string renderStatusbar = "function(element) {}';
	string aggregatesRenderer = "function(element){}'
	string exportSettings = '{columnsHeader: true,hiddenColumns: false,serverURL: null,characterSet: null,collapsedRecords: false,recordsInView: true,fileName: "jqxDataTable"}';
	string editSettings = '{saveOnPageChange: true, saveOnBlur: true, saveOnSelectionChange: true, cancelOnEsc: true, saveOnEnter: true, editSingleCell: false, editOnDoubleClick: true, editOnF2: true}';
}
<jqx-data-table sortable="true" width="850" source="Model"> 
    <jqx-data-table-columns>
        <jqx-data-table-column column-group="name" dataField="FirstName" width="100" text="First Name"></jqx-data-table-column>
        <jqx-data-table-column column-group="name" dataField="LastName" width="100" text="Last Name"></jqx-data-table-column>
        <jqx-data-table-column dataField="Title" width="150"></jqx-data-table-column>
        <jqx-data-table-column dataField="Address" width="200"></jqx-data-table-column>
        <jqx-data-table-column dataField="City" width="150"></jqx-data-table-column>
        <jqx-data-table-column dataField="Country"></jqx-data-table-column>
    </jqx-data-table-columns>
    <jqx-data-table-column-groups>
        <jqx-data-table-column-group name="name" text="Name"></jqx-data-table-column-group>
    </jqx-data-table-column-groups>
</jqx-data-table>

Sets or gets the showAggregates property.

<script src="~/jqwidgets/jqxbuttons.js"></script>
<script src="~/jqwidgets/jqxdatatable.js"></script>
<script src="~/jqwidgets/jqxscrollbar.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.Employee>
@{
	string renderer = "function() {}';
	string rendering = "function() {}';
	string pagerRenderer = "function(element) {}';
	string renderToolbar = "function(element) {}';
	string renderStatusbar = "function(element) {}';
	string aggregatesRenderer = "function(element){}'
	string exportSettings = '{columnsHeader: true,hiddenColumns: false,serverURL: null,characterSet: null,collapsedRecords: false,recordsInView: true,fileName: "jqxDataTable"}';
	string editSettings = '{saveOnPageChange: true, saveOnBlur: true, saveOnSelectionChange: true, cancelOnEsc: true, saveOnEnter: true, editSingleCell: false, editOnDoubleClick: true, editOnF2: true}';
}
<jqx-data-table show-aggregates="true" width="850" source="Model"> 
    <jqx-data-table-columns>
        <jqx-data-table-column column-group="name" dataField="FirstName" width="100" text="First Name"></jqx-data-table-column>
        <jqx-data-table-column column-group="name" dataField="LastName" width="100" text="Last Name"></jqx-data-table-column>
        <jqx-data-table-column dataField="Title" width="150"></jqx-data-table-column>
        <jqx-data-table-column dataField="Address" width="200"></jqx-data-table-column>
        <jqx-data-table-column dataField="City" width="150"></jqx-data-table-column>
        <jqx-data-table-column dataField="Country"></jqx-data-table-column>
    </jqx-data-table-columns>
    <jqx-data-table-column-groups>
        <jqx-data-table-column-group name="name" text="Name"></jqx-data-table-column-group>
    </jqx-data-table-column-groups>
</jqx-data-table>

Sets or gets the showToolbar property.

<script src="~/jqwidgets/jqxbuttons.js"></script>
<script src="~/jqwidgets/jqxdatatable.js"></script>
<script src="~/jqwidgets/jqxscrollbar.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.Employee>
@{
	string renderer = "function() {}';
	string rendering = "function() {}';
	string pagerRenderer = "function(element) {}';
	string renderToolbar = "function(element) {}';
	string renderStatusbar = "function(element) {}';
	string aggregatesRenderer = "function(element){}'
	string exportSettings = '{columnsHeader: true,hiddenColumns: false,serverURL: null,characterSet: null,collapsedRecords: false,recordsInView: true,fileName: "jqxDataTable"}';
	string editSettings = '{saveOnPageChange: true, saveOnBlur: true, saveOnSelectionChange: true, cancelOnEsc: true, saveOnEnter: true, editSingleCell: false, editOnDoubleClick: true, editOnF2: true}';
}
<jqx-data-table show-toolbar="true" width="850" source="Model"> 
    <jqx-data-table-columns>
        <jqx-data-table-column column-group="name" dataField="FirstName" width="100" text="First Name"></jqx-data-table-column>
        <jqx-data-table-column column-group="name" dataField="LastName" width="100" text="Last Name"></jqx-data-table-column>
        <jqx-data-table-column dataField="Title" width="150"></jqx-data-table-column>
        <jqx-data-table-column dataField="Address" width="200"></jqx-data-table-column>
        <jqx-data-table-column dataField="City" width="150"></jqx-data-table-column>
        <jqx-data-table-column dataField="Country"></jqx-data-table-column>
    </jqx-data-table-columns>
    <jqx-data-table-column-groups>
        <jqx-data-table-column-group name="name" text="Name"></jqx-data-table-column-group>
    </jqx-data-table-column-groups>
</jqx-data-table>

Sets or gets the showStatusbar property.

<script src="~/jqwidgets/jqxbuttons.js"></script>
<script src="~/jqwidgets/jqxdatatable.js"></script>
<script src="~/jqwidgets/jqxscrollbar.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.Employee>
@{
	string renderer = "function() {}';
	string rendering = "function() {}';
	string pagerRenderer = "function(element) {}';
	string renderToolbar = "function(element) {}';
	string renderStatusbar = "function(element) {}';
	string aggregatesRenderer = "function(element){}'
	string exportSettings = '{columnsHeader: true,hiddenColumns: false,serverURL: null,characterSet: null,collapsedRecords: false,recordsInView: true,fileName: "jqxDataTable"}';
	string editSettings = '{saveOnPageChange: true, saveOnBlur: true, saveOnSelectionChange: true, cancelOnEsc: true, saveOnEnter: true, editSingleCell: false, editOnDoubleClick: true, editOnF2: true}';
}
<jqx-data-table show-statusbar="true" width="850" source="Model"> 
    <jqx-data-table-columns>
        <jqx-data-table-column column-group="name" dataField="FirstName" width="100" text="First Name"></jqx-data-table-column>
        <jqx-data-table-column column-group="name" dataField="LastName" width="100" text="Last Name"></jqx-data-table-column>
        <jqx-data-table-column dataField="Title" width="150"></jqx-data-table-column>
        <jqx-data-table-column dataField="Address" width="200"></jqx-data-table-column>
        <jqx-data-table-column dataField="City" width="150"></jqx-data-table-column>
        <jqx-data-table-column dataField="Country"></jqx-data-table-column>
    </jqx-data-table-columns>
    <jqx-data-table-column-groups>
        <jqx-data-table-column-group name="name" text="Name"></jqx-data-table-column-group>
    </jqx-data-table-column-groups>
</jqx-data-table>

Sets or gets the statusBarHeight property.

<script src="~/jqwidgets/jqxbuttons.js"></script>
<script src="~/jqwidgets/jqxdatatable.js"></script>
<script src="~/jqwidgets/jqxscrollbar.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.Employee>
@{
	string renderer = "function() {}';
	string rendering = "function() {}';
	string pagerRenderer = "function(element) {}';
	string renderToolbar = "function(element) {}';
	string renderStatusbar = "function(element) {}';
	string aggregatesRenderer = "function(element){}'
	string exportSettings = '{columnsHeader: true,hiddenColumns: false,serverURL: null,characterSet: null,collapsedRecords: false,recordsInView: true,fileName: "jqxDataTable"}';
	string editSettings = '{saveOnPageChange: true, saveOnBlur: true, saveOnSelectionChange: true, cancelOnEsc: true, saveOnEnter: true, editSingleCell: false, editOnDoubleClick: true, editOnF2: true}';
}
<jqx-data-table status-bar-height="40" width="850" source="Model"> 
    <jqx-data-table-columns>
        <jqx-data-table-column column-group="name" dataField="FirstName" width="100" text="First Name"></jqx-data-table-column>
        <jqx-data-table-column column-group="name" dataField="LastName" width="100" text="Last Name"></jqx-data-table-column>
        <jqx-data-table-column dataField="Title" width="150"></jqx-data-table-column>
        <jqx-data-table-column dataField="Address" width="200"></jqx-data-table-column>
        <jqx-data-table-column dataField="City" width="150"></jqx-data-table-column>
        <jqx-data-table-column dataField="Country"></jqx-data-table-column>
    </jqx-data-table-columns>
    <jqx-data-table-column-groups>
        <jqx-data-table-column-group name="name" text="Name"></jqx-data-table-column-group>
    </jqx-data-table-column-groups>
</jqx-data-table>

Sets or gets the scrollBarSize property.

<script src="~/jqwidgets/jqxbuttons.js"></script>
<script src="~/jqwidgets/jqxdatatable.js"></script>
<script src="~/jqwidgets/jqxscrollbar.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.Employee>
@{
	string renderer = "function() {}';
	string rendering = "function() {}';
	string pagerRenderer = "function(element) {}';
	string renderToolbar = "function(element) {}';
	string renderStatusbar = "function(element) {}';
	string aggregatesRenderer = "function(element){}'
	string exportSettings = '{columnsHeader: true,hiddenColumns: false,serverURL: null,characterSet: null,collapsedRecords: false,recordsInView: true,fileName: "jqxDataTable"}';
	string editSettings = '{saveOnPageChange: true, saveOnBlur: true, saveOnSelectionChange: true, cancelOnEsc: true, saveOnEnter: true, editSingleCell: false, editOnDoubleClick: true, editOnF2: true}';
}
<jqx-data-table scroll-bar-size="20" width="850" source="Model"> 
    <jqx-data-table-columns>
        <jqx-data-table-column column-group="name" dataField="FirstName" width="100" text="First Name"></jqx-data-table-column>
        <jqx-data-table-column column-group="name" dataField="LastName" width="100" text="Last Name"></jqx-data-table-column>
        <jqx-data-table-column dataField="Title" width="150"></jqx-data-table-column>
        <jqx-data-table-column dataField="Address" width="200"></jqx-data-table-column>
        <jqx-data-table-column dataField="City" width="150"></jqx-data-table-column>
        <jqx-data-table-column dataField="Country"></jqx-data-table-column>
    </jqx-data-table-columns>
    <jqx-data-table-column-groups>
        <jqx-data-table-column-group name="name" text="Name"></jqx-data-table-column-group>
    </jqx-data-table-column-groups>
</jqx-data-table>

Sets or gets the selectionMode property.

<script src="~/jqwidgets/jqxbuttons.js"></script>
<script src="~/jqwidgets/jqxdatatable.js"></script>
<script src="~/jqwidgets/jqxscrollbar.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.Employee>
@{
	string renderer = "function() {}';
	string rendering = "function() {}';
	string pagerRenderer = "function(element) {}';
	string renderToolbar = "function(element) {}';
	string renderStatusbar = "function(element) {}';
	string aggregatesRenderer = "function(element){}'
	string exportSettings = '{columnsHeader: true,hiddenColumns: false,serverURL: null,characterSet: null,collapsedRecords: false,recordsInView: true,fileName: "jqxDataTable"}';
	string editSettings = '{saveOnPageChange: true, saveOnBlur: true, saveOnSelectionChange: true, cancelOnEsc: true, saveOnEnter: true, editSingleCell: false, editOnDoubleClick: true, editOnF2: true}';
}
<jqx-data-table selection-mode="singleRow" width="850" source="Model"> 
    <jqx-data-table-columns>
        <jqx-data-table-column column-group="name" dataField="FirstName" width="100" text="First Name"></jqx-data-table-column>
        <jqx-data-table-column column-group="name" dataField="LastName" width="100" text="Last Name"></jqx-data-table-column>
        <jqx-data-table-column dataField="Title" width="150"></jqx-data-table-column>
        <jqx-data-table-column dataField="Address" width="200"></jqx-data-table-column>
        <jqx-data-table-column dataField="City" width="150"></jqx-data-table-column>
        <jqx-data-table-column dataField="Country"></jqx-data-table-column>
    </jqx-data-table-columns>
    <jqx-data-table-column-groups>
        <jqx-data-table-column-group name="name" text="Name"></jqx-data-table-column-group>
    </jqx-data-table-column-groups>
</jqx-data-table>

Sets or gets the serverProcessing property.

<script src="~/jqwidgets/jqxbuttons.js"></script>
<script src="~/jqwidgets/jqxdatatable.js"></script>
<script src="~/jqwidgets/jqxscrollbar.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.Employee>
@{
	string renderer = "function() {}';
	string rendering = "function() {}';
	string pagerRenderer = "function(element) {}';
	string renderToolbar = "function(element) {}';
	string renderStatusbar = "function(element) {}';
	string aggregatesRenderer = "function(element){}'
	string exportSettings = '{columnsHeader: true,hiddenColumns: false,serverURL: null,characterSet: null,collapsedRecords: false,recordsInView: true,fileName: "jqxDataTable"}';
	string editSettings = '{saveOnPageChange: true, saveOnBlur: true, saveOnSelectionChange: true, cancelOnEsc: true, saveOnEnter: true, editSingleCell: false, editOnDoubleClick: true, editOnF2: true}';
}
<jqx-data-table server-processing="true" width="850" source="Model"> 
    <jqx-data-table-columns>
        <jqx-data-table-column column-group="name" dataField="FirstName" width="100" text="First Name"></jqx-data-table-column>
        <jqx-data-table-column column-group="name" dataField="LastName" width="100" text="Last Name"></jqx-data-table-column>
        <jqx-data-table-column dataField="Title" width="150"></jqx-data-table-column>
        <jqx-data-table-column dataField="Address" width="200"></jqx-data-table-column>
        <jqx-data-table-column dataField="City" width="150"></jqx-data-table-column>
        <jqx-data-table-column dataField="Country"></jqx-data-table-column>
    </jqx-data-table-columns>
    <jqx-data-table-column-groups>
        <jqx-data-table-column-group name="name" text="Name"></jqx-data-table-column-group>
    </jqx-data-table-column-groups>
</jqx-data-table>

Sets or gets the showHeader property.

<script src="~/jqwidgets/jqxbuttons.js"></script>
<script src="~/jqwidgets/jqxdatatable.js"></script>
<script src="~/jqwidgets/jqxscrollbar.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.Employee>
@{
	string renderer = "function() {}';
	string rendering = "function() {}';
	string pagerRenderer = "function(element) {}';
	string renderToolbar = "function(element) {}';
	string renderStatusbar = "function(element) {}';
	string aggregatesRenderer = "function(element){}'
	string exportSettings = '{columnsHeader: true,hiddenColumns: false,serverURL: null,characterSet: null,collapsedRecords: false,recordsInView: true,fileName: "jqxDataTable"}';
	string editSettings = '{saveOnPageChange: true, saveOnBlur: true, saveOnSelectionChange: true, cancelOnEsc: true, saveOnEnter: true, editSingleCell: false, editOnDoubleClick: true, editOnF2: true}';
}
<jqx-data-table show-header="false" width="850" source="Model"> 
    <jqx-data-table-columns>
        <jqx-data-table-column column-group="name" dataField="FirstName" width="100" text="First Name"></jqx-data-table-column>
        <jqx-data-table-column column-group="name" dataField="LastName" width="100" text="Last Name"></jqx-data-table-column>
        <jqx-data-table-column dataField="Title" width="150"></jqx-data-table-column>
        <jqx-data-table-column dataField="Address" width="200"></jqx-data-table-column>
        <jqx-data-table-column dataField="City" width="150"></jqx-data-table-column>
        <jqx-data-table-column dataField="Country"></jqx-data-table-column>
    </jqx-data-table-columns>
    <jqx-data-table-column-groups>
        <jqx-data-table-column-group name="name" text="Name"></jqx-data-table-column-group>
    </jqx-data-table-column-groups>
</jqx-data-table>

Sets or gets the theme property.

<script src="~/jqwidgets/jqxbuttons.js"></script>
<script src="~/jqwidgets/jqxdatatable.js"></script>
<script src="~/jqwidgets/jqxscrollbar.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.Employee>
@{
	string renderer = "function() {}';
	string rendering = "function() {}';
	string pagerRenderer = "function(element) {}';
	string renderToolbar = "function(element) {}';
	string renderStatusbar = "function(element) {}';
	string aggregatesRenderer = "function(element){}'
	string exportSettings = '{columnsHeader: true,hiddenColumns: false,serverURL: null,characterSet: null,collapsedRecords: false,recordsInView: true,fileName: "jqxDataTable"}';
	string editSettings = '{saveOnPageChange: true, saveOnBlur: true, saveOnSelectionChange: true, cancelOnEsc: true, saveOnEnter: true, editSingleCell: false, editOnDoubleClick: true, editOnF2: true}';
}
<jqx-data-table columns-reorder="true" width="850" source="Model"> 
    <jqx-data-table-columns>
        <jqx-data-table-column column-group="name" dataField="FirstName" width="100" text="First Name"></jqx-data-table-column>
        <jqx-data-table-column column-group="name" dataField="LastName" width="100" text="Last Name"></jqx-data-table-column>
        <jqx-data-table-column dataField="Title" width="150"></jqx-data-table-column>
        <jqx-data-table-column dataField="Address" width="200"></jqx-data-table-column>
        <jqx-data-table-column dataField="City" width="150"></jqx-data-table-column>
        <jqx-data-table-column dataField="Country"></jqx-data-table-column>
    </jqx-data-table-columns>
    <jqx-data-table-column-groups>
        <jqx-data-table-column-group name="name" text="Name"></jqx-data-table-column-group>
    </jqx-data-table-column-groups>
</jqx-data-table>

Sets or gets the toolbarHeight property.

<script src="~/jqwidgets/jqxbuttons.js"></script>
<script src="~/jqwidgets/jqxdatatable.js"></script>
<script src="~/jqwidgets/jqxscrollbar.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.Employee>
@{
	string renderer = "function() {}';
	string rendering = "function() {}';
	string pagerRenderer = "function(element) {}';
	string renderToolbar = "function(element) {}';
	string renderStatusbar = "function(element) {}';
	string aggregatesRenderer = "function(element){}'
	string exportSettings = '{columnsHeader: true,hiddenColumns: false,serverURL: null,characterSet: null,collapsedRecords: false,recordsInView: true,fileName: "jqxDataTable"}';
	string editSettings = '{saveOnPageChange: true, saveOnBlur: true, saveOnSelectionChange: true, cancelOnEsc: true, saveOnEnter: true, editSingleCell: false, editOnDoubleClick: true, editOnF2: true}';
}
<jqx-data-table toolbar-height="40" width="850" source="Model"> 
    <jqx-data-table-columns>
        <jqx-data-table-column column-group="name" dataField="FirstName" width="100" text="First Name"></jqx-data-table-column>
        <jqx-data-table-column column-group="name" dataField="LastName" width="100" text="Last Name"></jqx-data-table-column>
        <jqx-data-table-column dataField="Title" width="150"></jqx-data-table-column>
        <jqx-data-table-column dataField="Address" width="200"></jqx-data-table-column>
        <jqx-data-table-column dataField="City" width="150"></jqx-data-table-column>
        <jqx-data-table-column dataField="Country"></jqx-data-table-column>
    </jqx-data-table-columns>
    <jqx-data-table-column-groups>
        <jqx-data-table-column-group name="name" text="Name"></jqx-data-table-column-group>
    </jqx-data-table-column-groups>
</jqx-data-table>

Sets or gets the width property.

<script src="~/jqwidgets/jqxbuttons.js"></script>
<script src="~/jqwidgets/jqxdatatable.js"></script>
<script src="~/jqwidgets/jqxscrollbar.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.Employee>
@{
	string renderer = "function() {}';
	string rendering = "function() {}';
	string pagerRenderer = "function(element) {}';
	string renderToolbar = "function(element) {}';
	string renderStatusbar = "function(element) {}';
	string aggregatesRenderer = "function(element){}'
	string exportSettings = '{columnsHeader: true,hiddenColumns: false,serverURL: null,characterSet: null,collapsedRecords: false,recordsInView: true,fileName: "jqxDataTable"}';
	string editSettings = '{saveOnPageChange: true, saveOnBlur: true, saveOnSelectionChange: true, cancelOnEsc: true, saveOnEnter: true, editSingleCell: false, editOnDoubleClick: true, editOnF2: true}';
}
<jqx-data-table width="850" source="Model"> 
    <jqx-data-table-columns>
        <jqx-data-table-column column-group="name" dataField="FirstName" width="100" text="First Name"></jqx-data-table-column>
        <jqx-data-table-column column-group="name" dataField="LastName" width="100" text="Last Name"></jqx-data-table-column>
        <jqx-data-table-column dataField="Title" width="150"></jqx-data-table-column>
        <jqx-data-table-column dataField="Address" width="200"></jqx-data-table-column>
        <jqx-data-table-column dataField="City" width="150"></jqx-data-table-column>
        <jqx-data-table-column dataField="Country"></jqx-data-table-column>
    </jqx-data-table-columns>
    <jqx-data-table-column-groups>
        <jqx-data-table-column-group name="name" text="Name"></jqx-data-table-column-group>
    </jqx-data-table-column-groups>
</jqx-data-table>

Code examples

Bind to the bindingComplete event of jqxDataTable.

<script src="~/jqwidgets/jqxbuttons.js"></script>
<script src="~/jqwidgets/jqxdatatable.js"></script>
<script src="~/jqwidgets/jqxscrollbar.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.Employee>
@{
	string renderer = "function() {}';
	string rendering = "function() {}';
	string pagerRenderer = "function(element) {}';
	string renderToolbar = "function(element) {}';
	string renderStatusbar = "function(element) {}';
	string aggregatesRenderer = "function(element){}'
	string exportSettings = '{columnsHeader: true,hiddenColumns: false,serverURL: null,characterSet: null,collapsedRecords: false,recordsInView: true,fileName: "jqxDataTable"}';
	string editSettings = '{saveOnPageChange: true, saveOnBlur: true, saveOnSelectionChange: true, cancelOnEsc: true, saveOnEnter: true, editSingleCell: false, editOnDoubleClick: true, editOnF2: true}';
}
<jqx-data-table on-binding-complete="eventHandler()"> 
    <jqx-data-table-columns>
        <jqx-data-table-column column-group="name" dataField="FirstName" width="100" text="First Name"></jqx-data-table-column>
        <jqx-data-table-column column-group="name" dataField="LastName" width="100" text="Last Name"></jqx-data-table-column>
        <jqx-data-table-column dataField="Title" width="150"></jqx-data-table-column>
        <jqx-data-table-column dataField="Address" width="200"></jqx-data-table-column>
        <jqx-data-table-column dataField="City" width="150"></jqx-data-table-column>
        <jqx-data-table-column dataField="Country"></jqx-data-table-column>
    </jqx-data-table-columns>
    <jqx-data-table-column-groups>
        <jqx-data-table-column-group name="name" text="Name"></jqx-data-table-column-group>
    </jqx-data-table-column-groups>
</jqx-data-table>
							
@section scripts {								
<script type="text/javascript">									
	function eventHandler(event) {									
	}									
</script>									
}

Code examples

Bind to the cellBeginEdit event of jqxDataTable.

<script src="~/jqwidgets/jqxbuttons.js"></script>
<script src="~/jqwidgets/jqxdatatable.js"></script>
<script src="~/jqwidgets/jqxscrollbar.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.Employee>
@{
	string renderer = "function() {}';
	string rendering = "function() {}';
	string pagerRenderer = "function(element) {}';
	string renderToolbar = "function(element) {}';
	string renderStatusbar = "function(element) {}';
	string aggregatesRenderer = "function(element){}'
	string exportSettings = '{columnsHeader: true,hiddenColumns: false,serverURL: null,characterSet: null,collapsedRecords: false,recordsInView: true,fileName: "jqxDataTable"}';
	string editSettings = '{saveOnPageChange: true, saveOnBlur: true, saveOnSelectionChange: true, cancelOnEsc: true, saveOnEnter: true, editSingleCell: false, editOnDoubleClick: true, editOnF2: true}';
}
<jqx-data-table on-cell-begin-edit="eventHandler()"> 
    <jqx-data-table-columns>
        <jqx-data-table-column column-group="name" dataField="FirstName" width="100" text="First Name"></jqx-data-table-column>
        <jqx-data-table-column column-group="name" dataField="LastName" width="100" text="Last Name"></jqx-data-table-column>
        <jqx-data-table-column dataField="Title" width="150"></jqx-data-table-column>
        <jqx-data-table-column dataField="Address" width="200"></jqx-data-table-column>
        <jqx-data-table-column dataField="City" width="150"></jqx-data-table-column>
        <jqx-data-table-column dataField="Country"></jqx-data-table-column>
    </jqx-data-table-columns>
    <jqx-data-table-column-groups>
        <jqx-data-table-column-group name="name" text="Name"></jqx-data-table-column-group>
    </jqx-data-table-column-groups>
</jqx-data-table>
							
@section scripts {								
<script type="text/javascript">									
	function eventHandler(event) {									
	}									
</script>									
}

Code examples

Bind to the cellEndEdit event of jqxDataTable.

<script src="~/jqwidgets/jqxbuttons.js"></script>
<script src="~/jqwidgets/jqxdatatable.js"></script>
<script src="~/jqwidgets/jqxscrollbar.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.Employee>
@{
	string renderer = "function() {}';
	string rendering = "function() {}';
	string pagerRenderer = "function(element) {}';
	string renderToolbar = "function(element) {}';
	string renderStatusbar = "function(element) {}';
	string aggregatesRenderer = "function(element){}'
	string exportSettings = '{columnsHeader: true,hiddenColumns: false,serverURL: null,characterSet: null,collapsedRecords: false,recordsInView: true,fileName: "jqxDataTable"}';
	string editSettings = '{saveOnPageChange: true, saveOnBlur: true, saveOnSelectionChange: true, cancelOnEsc: true, saveOnEnter: true, editSingleCell: false, editOnDoubleClick: true, editOnF2: true}';
}
<jqx-data-table on-cell-end-edit="eventHandler()"> 
    <jqx-data-table-columns>
        <jqx-data-table-column column-group="name" dataField="FirstName" width="100" text="First Name"></jqx-data-table-column>
        <jqx-data-table-column column-group="name" dataField="LastName" width="100" text="Last Name"></jqx-data-table-column>
        <jqx-data-table-column dataField="Title" width="150"></jqx-data-table-column>
        <jqx-data-table-column dataField="Address" width="200"></jqx-data-table-column>
        <jqx-data-table-column dataField="City" width="150"></jqx-data-table-column>
        <jqx-data-table-column dataField="Country"></jqx-data-table-column>
    </jqx-data-table-columns>
    <jqx-data-table-column-groups>
        <jqx-data-table-column-group name="name" text="Name"></jqx-data-table-column-group>
    </jqx-data-table-column-groups>
</jqx-data-table>
							
@section scripts {								
<script type="text/javascript">									
	function eventHandler(event) {									
	}									
</script>									
}

Code examples

Bind to the cellValueChanged event of jqxDataTable.

<script src="~/jqwidgets/jqxbuttons.js"></script>
<script src="~/jqwidgets/jqxdatatable.js"></script>
<script src="~/jqwidgets/jqxscrollbar.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.Employee>
@{
	string renderer = "function() {}';
	string rendering = "function() {}';
	string pagerRenderer = "function(element) {}';
	string renderToolbar = "function(element) {}';
	string renderStatusbar = "function(element) {}';
	string aggregatesRenderer = "function(element){}'
	string exportSettings = '{columnsHeader: true,hiddenColumns: false,serverURL: null,characterSet: null,collapsedRecords: false,recordsInView: true,fileName: "jqxDataTable"}';
	string editSettings = '{saveOnPageChange: true, saveOnBlur: true, saveOnSelectionChange: true, cancelOnEsc: true, saveOnEnter: true, editSingleCell: false, editOnDoubleClick: true, editOnF2: true}';
}
<jqx-data-table on-cell-value-changed="eventHandler()"> 
    <jqx-data-table-columns>
        <jqx-data-table-column column-group="name" dataField="FirstName" width="100" text="First Name"></jqx-data-table-column>
        <jqx-data-table-column column-group="name" dataField="LastName" width="100" text="Last Name"></jqx-data-table-column>
        <jqx-data-table-column dataField="Title" width="150"></jqx-data-table-column>
        <jqx-data-table-column dataField="Address" width="200"></jqx-data-table-column>
        <jqx-data-table-column dataField="City" width="150"></jqx-data-table-column>
        <jqx-data-table-column dataField="Country"></jqx-data-table-column>
    </jqx-data-table-columns>
    <jqx-data-table-column-groups>
        <jqx-data-table-column-group name="name" text="Name"></jqx-data-table-column-group>
    </jqx-data-table-column-groups>
</jqx-data-table>
							
@section scripts {								
<script type="text/javascript">									
	function eventHandler(event) {									
	}									
</script>									
}

Code examples

Bind to the columnResized event of jqxDataTable.

<script src="~/jqwidgets/jqxbuttons.js"></script>
<script src="~/jqwidgets/jqxdatatable.js"></script>
<script src="~/jqwidgets/jqxscrollbar.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.Employee>
@{
	string renderer = "function() {}';
	string rendering = "function() {}';
	string pagerRenderer = "function(element) {}';
	string renderToolbar = "function(element) {}';
	string renderStatusbar = "function(element) {}';
	string aggregatesRenderer = "function(element){}'
	string exportSettings = '{columnsHeader: true,hiddenColumns: false,serverURL: null,characterSet: null,collapsedRecords: false,recordsInView: true,fileName: "jqxDataTable"}';
	string editSettings = '{saveOnPageChange: true, saveOnBlur: true, saveOnSelectionChange: true, cancelOnEsc: true, saveOnEnter: true, editSingleCell: false, editOnDoubleClick: true, editOnF2: true}';
}
<jqx-data-table on-column-resized="eventHandler()"> 
    <jqx-data-table-columns>
        <jqx-data-table-column column-group="name" dataField="FirstName" width="100" text="First Name"></jqx-data-table-column>
        <jqx-data-table-column column-group="name" dataField="LastName" width="100" text="Last Name"></jqx-data-table-column>
        <jqx-data-table-column dataField="Title" width="150"></jqx-data-table-column>
        <jqx-data-table-column dataField="Address" width="200"></jqx-data-table-column>
        <jqx-data-table-column dataField="City" width="150"></jqx-data-table-column>
        <jqx-data-table-column dataField="Country"></jqx-data-table-column>
    </jqx-data-table-columns>
    <jqx-data-table-column-groups>
        <jqx-data-table-column-group name="name" text="Name"></jqx-data-table-column-group>
    </jqx-data-table-column-groups>
</jqx-data-table>
							
@section scripts {								
<script type="text/javascript">									
	function eventHandler(event) {									
	}									
</script>									
}

Code examples

Bind to the columnReordered event of jqxDataTable.

<script src="~/jqwidgets/jqxbuttons.js"></script>
<script src="~/jqwidgets/jqxdatatable.js"></script>
<script src="~/jqwidgets/jqxscrollbar.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.Employee>
@{
	string renderer = "function() {}';
	string rendering = "function() {}';
	string pagerRenderer = "function(element) {}';
	string renderToolbar = "function(element) {}';
	string renderStatusbar = "function(element) {}';
	string aggregatesRenderer = "function(element){}'
	string exportSettings = '{columnsHeader: true,hiddenColumns: false,serverURL: null,characterSet: null,collapsedRecords: false,recordsInView: true,fileName: "jqxDataTable"}';
	string editSettings = '{saveOnPageChange: true, saveOnBlur: true, saveOnSelectionChange: true, cancelOnEsc: true, saveOnEnter: true, editSingleCell: false, editOnDoubleClick: true, editOnF2: true}';
}
<jqx-data-table on-column-reordered="eventHandler()"> 
    <jqx-data-table-columns>
        <jqx-data-table-column column-group="name" dataField="FirstName" width="100" text="First Name"></jqx-data-table-column>
        <jqx-data-table-column column-group="name" dataField="LastName" width="100" text="Last Name"></jqx-data-table-column>
        <jqx-data-table-column dataField="Title" width="150"></jqx-data-table-column>
        <jqx-data-table-column dataField="Address" width="200"></jqx-data-table-column>
        <jqx-data-table-column dataField="City" width="150"></jqx-data-table-column>
        <jqx-data-table-column dataField="Country"></jqx-data-table-column>
    </jqx-data-table-columns>
    <jqx-data-table-column-groups>
        <jqx-data-table-column-group name="name" text="Name"></jqx-data-table-column-group>
    </jqx-data-table-column-groups>
</jqx-data-table>
							
@section scripts {								
<script type="text/javascript">									
	function eventHandler(event) {									
	}									
</script>									
}

Code examples

Bind to the sort event of jqxDataTable.

<script src="~/jqwidgets/jqxbuttons.js"></script>
<script src="~/jqwidgets/jqxdatatable.js"></script>
<script src="~/jqwidgets/jqxscrollbar.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.Employee>
@{
	string renderer = "function() {}';
	string rendering = "function() {}';
	string pagerRenderer = "function(element) {}';
	string renderToolbar = "function(element) {}';
	string renderStatusbar = "function(element) {}';
	string aggregatesRenderer = "function(element){}'
	string exportSettings = '{columnsHeader: true,hiddenColumns: false,serverURL: null,characterSet: null,collapsedRecords: false,recordsInView: true,fileName: "jqxDataTable"}';
	string editSettings = '{saveOnPageChange: true, saveOnBlur: true, saveOnSelectionChange: true, cancelOnEsc: true, saveOnEnter: true, editSingleCell: false, editOnDoubleClick: true, editOnF2: true}';
}
<jqx-data-table on-sort="eventHandler()"> 
    <jqx-data-table-columns>
        <jqx-data-table-column column-group="name" dataField="FirstName" width="100" text="First Name"></jqx-data-table-column>
        <jqx-data-table-column column-group="name" dataField="LastName" width="100" text="Last Name"></jqx-data-table-column>
        <jqx-data-table-column dataField="Title" width="150"></jqx-data-table-column>
        <jqx-data-table-column dataField="Address" width="200"></jqx-data-table-column>
        <jqx-data-table-column dataField="City" width="150"></jqx-data-table-column>
        <jqx-data-table-column dataField="Country"></jqx-data-table-column>
    </jqx-data-table-columns>
    <jqx-data-table-column-groups>
        <jqx-data-table-column-group name="name" text="Name"></jqx-data-table-column-group>
    </jqx-data-table-column-groups>
</jqx-data-table>
							
@section scripts {								
<script type="text/javascript">									
	function eventHandler(event) {									
	}									
</script>									
}

Code examples

Bind to the filter event of jqxDataTable.

<script src="~/jqwidgets/jqxbuttons.js"></script>
<script src="~/jqwidgets/jqxdatatable.js"></script>
<script src="~/jqwidgets/jqxscrollbar.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.Employee>
@{
	string renderer = "function() {}';
	string rendering = "function() {}';
	string pagerRenderer = "function(element) {}';
	string renderToolbar = "function(element) {}';
	string renderStatusbar = "function(element) {}';
	string aggregatesRenderer = "function(element){}'
	string exportSettings = '{columnsHeader: true,hiddenColumns: false,serverURL: null,characterSet: null,collapsedRecords: false,recordsInView: true,fileName: "jqxDataTable"}';
	string editSettings = '{saveOnPageChange: true, saveOnBlur: true, saveOnSelectionChange: true, cancelOnEsc: true, saveOnEnter: true, editSingleCell: false, editOnDoubleClick: true, editOnF2: true}';
}
<jqx-data-table on-filter="eventHandler()"> 
    <jqx-data-table-columns>
        <jqx-data-table-column column-group="name" dataField="FirstName" width="100" text="First Name"></jqx-data-table-column>
        <jqx-data-table-column column-group="name" dataField="LastName" width="100" text="Last Name"></jqx-data-table-column>
        <jqx-data-table-column dataField="Title" width="150"></jqx-data-table-column>
        <jqx-data-table-column dataField="Address" width="200"></jqx-data-table-column>
        <jqx-data-table-column dataField="City" width="150"></jqx-data-table-column>
        <jqx-data-table-column dataField="Country"></jqx-data-table-column>
    </jqx-data-table-columns>
    <jqx-data-table-column-groups>
        <jqx-data-table-column-group name="name" text="Name"></jqx-data-table-column-group>
    </jqx-data-table-column-groups>
</jqx-data-table>
							
@section scripts {								
<script type="text/javascript">									
	function eventHandler(event) {									
	}									
</script>									
}

Code examples

Bind to the pageChanged event of jqxDataTable.

<script src="~/jqwidgets/jqxbuttons.js"></script>
<script src="~/jqwidgets/jqxdatatable.js"></script>
<script src="~/jqwidgets/jqxscrollbar.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.Employee>
@{
	string renderer = "function() {}';
	string rendering = "function() {}';
	string pagerRenderer = "function(element) {}';
	string renderToolbar = "function(element) {}';
	string renderStatusbar = "function(element) {}';
	string aggregatesRenderer = "function(element){}'
	string exportSettings = '{columnsHeader: true,hiddenColumns: false,serverURL: null,characterSet: null,collapsedRecords: false,recordsInView: true,fileName: "jqxDataTable"}';
	string editSettings = '{saveOnPageChange: true, saveOnBlur: true, saveOnSelectionChange: true, cancelOnEsc: true, saveOnEnter: true, editSingleCell: false, editOnDoubleClick: true, editOnF2: true}';
}
<jqx-data-table on-page-changed="eventHandler()"> 
    <jqx-data-table-columns>
        <jqx-data-table-column column-group="name" dataField="FirstName" width="100" text="First Name"></jqx-data-table-column>
        <jqx-data-table-column column-group="name" dataField="LastName" width="100" text="Last Name"></jqx-data-table-column>
        <jqx-data-table-column dataField="Title" width="150"></jqx-data-table-column>
        <jqx-data-table-column dataField="Address" width="200"></jqx-data-table-column>
        <jqx-data-table-column dataField="City" width="150"></jqx-data-table-column>
        <jqx-data-table-column dataField="Country"></jqx-data-table-column>
    </jqx-data-table-columns>
    <jqx-data-table-column-groups>
        <jqx-data-table-column-group name="name" text="Name"></jqx-data-table-column-group>
    </jqx-data-table-column-groups>
</jqx-data-table>
							
@section scripts {								
<script type="text/javascript">									
	function eventHandler(event) {									
	}									
</script>									
}

Code examples

Bind to the pageSizeChanged event of jqxDataTable.

<script src="~/jqwidgets/jqxbuttons.js"></script>
<script src="~/jqwidgets/jqxdatatable.js"></script>
<script src="~/jqwidgets/jqxscrollbar.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.Employee>
@{
	string renderer = "function() {}';
	string rendering = "function() {}';
	string pagerRenderer = "function(element) {}';
	string renderToolbar = "function(element) {}';
	string renderStatusbar = "function(element) {}';
	string aggregatesRenderer = "function(element){}'
	string exportSettings = '{columnsHeader: true,hiddenColumns: false,serverURL: null,characterSet: null,collapsedRecords: false,recordsInView: true,fileName: "jqxDataTable"}';
	string editSettings = '{saveOnPageChange: true, saveOnBlur: true, saveOnSelectionChange: true, cancelOnEsc: true, saveOnEnter: true, editSingleCell: false, editOnDoubleClick: true, editOnF2: true}';
}
<jqx-data-table on-page-size-changed="eventHandler()"> 
    <jqx-data-table-columns>
        <jqx-data-table-column column-group="name" dataField="FirstName" width="100" text="First Name"></jqx-data-table-column>
        <jqx-data-table-column column-group="name" dataField="LastName" width="100" text="Last Name"></jqx-data-table-column>
        <jqx-data-table-column dataField="Title" width="150"></jqx-data-table-column>
        <jqx-data-table-column dataField="Address" width="200"></jqx-data-table-column>
        <jqx-data-table-column dataField="City" width="150"></jqx-data-table-column>
        <jqx-data-table-column dataField="Country"></jqx-data-table-column>
    </jqx-data-table-columns>
    <jqx-data-table-column-groups>
        <jqx-data-table-column-group name="name" text="Name"></jqx-data-table-column-group>
    </jqx-data-table-column-groups>
</jqx-data-table>
							
@section scripts {								
<script type="text/javascript">									
	function eventHandler(event) {									
	}									
</script>									
}

Code examples

Bind to the rowClick event of jqxDataTable.

<script src="~/jqwidgets/jqxbuttons.js"></script>
<script src="~/jqwidgets/jqxdatatable.js"></script>
<script src="~/jqwidgets/jqxscrollbar.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.Employee>
@{
	string renderer = "function() {}';
	string rendering = "function() {}';
	string pagerRenderer = "function(element) {}';
	string renderToolbar = "function(element) {}';
	string renderStatusbar = "function(element) {}';
	string aggregatesRenderer = "function(element){}'
	string exportSettings = '{columnsHeader: true,hiddenColumns: false,serverURL: null,characterSet: null,collapsedRecords: false,recordsInView: true,fileName: "jqxDataTable"}';
	string editSettings = '{saveOnPageChange: true, saveOnBlur: true, saveOnSelectionChange: true, cancelOnEsc: true, saveOnEnter: true, editSingleCell: false, editOnDoubleClick: true, editOnF2: true}';
}
<jqx-data-table on-row-click="eventHandler()"> 
    <jqx-data-table-columns>
        <jqx-data-table-column column-group="name" dataField="FirstName" width="100" text="First Name"></jqx-data-table-column>
        <jqx-data-table-column column-group="name" dataField="LastName" width="100" text="Last Name"></jqx-data-table-column>
        <jqx-data-table-column dataField="Title" width="150"></jqx-data-table-column>
        <jqx-data-table-column dataField="Address" width="200"></jqx-data-table-column>
        <jqx-data-table-column dataField="City" width="150"></jqx-data-table-column>
        <jqx-data-table-column dataField="Country"></jqx-data-table-column>
    </jqx-data-table-columns>
    <jqx-data-table-column-groups>
        <jqx-data-table-column-group name="name" text="Name"></jqx-data-table-column-group>
    </jqx-data-table-column-groups>
</jqx-data-table>
							
@section scripts {								
<script type="text/javascript">									
	function eventHandler(event) {									
	}									
</script>									
}

Code examples

Bind to the rowDoubleClick event of jqxDataTable.

<script src="~/jqwidgets/jqxbuttons.js"></script>
<script src="~/jqwidgets/jqxdatatable.js"></script>
<script src="~/jqwidgets/jqxscrollbar.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.Employee>
@{
	string renderer = "function() {}';
	string rendering = "function() {}';
	string pagerRenderer = "function(element) {}';
	string renderToolbar = "function(element) {}';
	string renderStatusbar = "function(element) {}';
	string aggregatesRenderer = "function(element){}'
	string exportSettings = '{columnsHeader: true,hiddenColumns: false,serverURL: null,characterSet: null,collapsedRecords: false,recordsInView: true,fileName: "jqxDataTable"}';
	string editSettings = '{saveOnPageChange: true, saveOnBlur: true, saveOnSelectionChange: true, cancelOnEsc: true, saveOnEnter: true, editSingleCell: false, editOnDoubleClick: true, editOnF2: true}';
}
<jqx-data-table on-row-double-click="eventHandler()"> 
    <jqx-data-table-columns>
        <jqx-data-table-column column-group="name" dataField="FirstName" width="100" text="First Name"></jqx-data-table-column>
        <jqx-data-table-column column-group="name" dataField="LastName" width="100" text="Last Name"></jqx-data-table-column>
        <jqx-data-table-column dataField="Title" width="150"></jqx-data-table-column>
        <jqx-data-table-column dataField="Address" width="200"></jqx-data-table-column>
        <jqx-data-table-column dataField="City" width="150"></jqx-data-table-column>
        <jqx-data-table-column dataField="Country"></jqx-data-table-column>
    </jqx-data-table-columns>
    <jqx-data-table-column-groups>
        <jqx-data-table-column-group name="name" text="Name"></jqx-data-table-column-group>
    </jqx-data-table-column-groups>
</jqx-data-table>
							
@section scripts {								
<script type="text/javascript">									
	function eventHandler(event) {									
	}									
</script>									
}

Code examples

Bind to the rowSelect event of jqxDataTable.

<script src="~/jqwidgets/jqxbuttons.js"></script>
<script src="~/jqwidgets/jqxdatatable.js"></script>
<script src="~/jqwidgets/jqxscrollbar.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.Employee>
@{
	string renderer = "function() {}';
	string rendering = "function() {}';
	string pagerRenderer = "function(element) {}';
	string renderToolbar = "function(element) {}';
	string renderStatusbar = "function(element) {}';
	string aggregatesRenderer = "function(element){}'
	string exportSettings = '{columnsHeader: true,hiddenColumns: false,serverURL: null,characterSet: null,collapsedRecords: false,recordsInView: true,fileName: "jqxDataTable"}';
	string editSettings = '{saveOnPageChange: true, saveOnBlur: true, saveOnSelectionChange: true, cancelOnEsc: true, saveOnEnter: true, editSingleCell: false, editOnDoubleClick: true, editOnF2: true}';
}
<jqx-data-table on-row-select="eventHandler()"> 
    <jqx-data-table-columns>
        <jqx-data-table-column column-group="name" dataField="FirstName" width="100" text="First Name"></jqx-data-table-column>
        <jqx-data-table-column column-group="name" dataField="LastName" width="100" text="Last Name"></jqx-data-table-column>
        <jqx-data-table-column dataField="Title" width="150"></jqx-data-table-column>
        <jqx-data-table-column dataField="Address" width="200"></jqx-data-table-column>
        <jqx-data-table-column dataField="City" width="150"></jqx-data-table-column>
        <jqx-data-table-column dataField="Country"></jqx-data-table-column>
    </jqx-data-table-columns>
    <jqx-data-table-column-groups>
        <jqx-data-table-column-group name="name" text="Name"></jqx-data-table-column-group>
    </jqx-data-table-column-groups>
</jqx-data-table>
							
@section scripts {								
<script type="text/javascript">									
	function eventHandler(event) {									
	}									
</script>									
}

Code examples

Bind to the rowUnselect event of jqxDataTable.

<script src="~/jqwidgets/jqxbuttons.js"></script>
<script src="~/jqwidgets/jqxdatatable.js"></script>
<script src="~/jqwidgets/jqxscrollbar.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.Employee>
@{
	string renderer = "function() {}';
	string rendering = "function() {}';
	string pagerRenderer = "function(element) {}';
	string renderToolbar = "function(element) {}';
	string renderStatusbar = "function(element) {}';
	string aggregatesRenderer = "function(element){}'
	string exportSettings = '{columnsHeader: true,hiddenColumns: false,serverURL: null,characterSet: null,collapsedRecords: false,recordsInView: true,fileName: "jqxDataTable"}';
	string editSettings = '{saveOnPageChange: true, saveOnBlur: true, saveOnSelectionChange: true, cancelOnEsc: true, saveOnEnter: true, editSingleCell: false, editOnDoubleClick: true, editOnF2: true}';
}
<jqx-data-table on-row-unselect="eventHandler()"> 
    <jqx-data-table-columns>
        <jqx-data-table-column column-group="name" dataField="FirstName" width="100" text="First Name"></jqx-data-table-column>
        <jqx-data-table-column column-group="name" dataField="LastName" width="100" text="Last Name"></jqx-data-table-column>
        <jqx-data-table-column dataField="Title" width="150"></jqx-data-table-column>
        <jqx-data-table-column dataField="Address" width="200"></jqx-data-table-column>
        <jqx-data-table-column dataField="City" width="150"></jqx-data-table-column>
        <jqx-data-table-column dataField="Country"></jqx-data-table-column>
    </jqx-data-table-columns>
    <jqx-data-table-column-groups>
        <jqx-data-table-column-group name="name" text="Name"></jqx-data-table-column-group>
    </jqx-data-table-column-groups>
</jqx-data-table>
							
@section scripts {								
<script type="text/javascript">									
	function eventHandler(event) {									
	}									
</script>									
}

Code examples

Bind to the rowBeginEdit event of jqxDataTable.

<script src="~/jqwidgets/jqxbuttons.js"></script>
<script src="~/jqwidgets/jqxdatatable.js"></script>
<script src="~/jqwidgets/jqxscrollbar.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.Employee>
@{
	string renderer = "function() {}';
	string rendering = "function() {}';
	string pagerRenderer = "function(element) {}';
	string renderToolbar = "function(element) {}';
	string renderStatusbar = "function(element) {}';
	string aggregatesRenderer = "function(element){}'
	string exportSettings = '{columnsHeader: true,hiddenColumns: false,serverURL: null,characterSet: null,collapsedRecords: false,recordsInView: true,fileName: "jqxDataTable"}';
	string editSettings = '{saveOnPageChange: true, saveOnBlur: true, saveOnSelectionChange: true, cancelOnEsc: true, saveOnEnter: true, editSingleCell: false, editOnDoubleClick: true, editOnF2: true}';
}
<jqx-data-table on-row-begin-edit="eventHandler()"> 
    <jqx-data-table-columns>
        <jqx-data-table-column column-group="name" dataField="FirstName" width="100" text="First Name"></jqx-data-table-column>
        <jqx-data-table-column column-group="name" dataField="LastName" width="100" text="Last Name"></jqx-data-table-column>
        <jqx-data-table-column dataField="Title" width="150"></jqx-data-table-column>
        <jqx-data-table-column dataField="Address" width="200"></jqx-data-table-column>
        <jqx-data-table-column dataField="City" width="150"></jqx-data-table-column>
        <jqx-data-table-column dataField="Country"></jqx-data-table-column>
    </jqx-data-table-columns>
    <jqx-data-table-column-groups>
        <jqx-data-table-column-group name="name" text="Name"></jqx-data-table-column-group>
    </jqx-data-table-column-groups>
</jqx-data-table>
							
@section scripts {								
<script type="text/javascript">									
	function eventHandler(event) {									
	}									
</script>									
}

Code examples

Bind to the rowEndEdit event of jqxDataTable.

<script src="~/jqwidgets/jqxbuttons.js"></script>
<script src="~/jqwidgets/jqxdatatable.js"></script>
<script src="~/jqwidgets/jqxscrollbar.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.Employee>
@{
	string renderer = "function() {}';
	string rendering = "function() {}';
	string pagerRenderer = "function(element) {}';
	string renderToolbar = "function(element) {}';
	string renderStatusbar = "function(element) {}';
	string aggregatesRenderer = "function(element){}'
	string exportSettings = '{columnsHeader: true,hiddenColumns: false,serverURL: null,characterSet: null,collapsedRecords: false,recordsInView: true,fileName: "jqxDataTable"}';
	string editSettings = '{saveOnPageChange: true, saveOnBlur: true, saveOnSelectionChange: true, cancelOnEsc: true, saveOnEnter: true, editSingleCell: false, editOnDoubleClick: true, editOnF2: true}';
}
<jqx-data-table on-row-end-edit="eventHandler()"> 
    <jqx-data-table-columns>
        <jqx-data-table-column column-group="name" dataField="FirstName" width="100" text="First Name"></jqx-data-table-column>
        <jqx-data-table-column column-group="name" dataField="LastName" width="100" text="Last Name"></jqx-data-table-column>
        <jqx-data-table-column dataField="Title" width="150"></jqx-data-table-column>
        <jqx-data-table-column dataField="Address" width="200"></jqx-data-table-column>
        <jqx-data-table-column dataField="City" width="150"></jqx-data-table-column>
        <jqx-data-table-column dataField="Country"></jqx-data-table-column>
    </jqx-data-table-columns>
    <jqx-data-table-column-groups>
        <jqx-data-table-column-group name="name" text="Name"></jqx-data-table-column-group>
    </jqx-data-table-column-groups>
</jqx-data-table>
							
@section scripts {								
<script type="text/javascript">									
	function eventHandler(event) {									
	}									
</script>									
}

Code examples

Bind to the rowExpand event of jqxDataTable.

<script src="~/jqwidgets/jqxbuttons.js"></script>
<script src="~/jqwidgets/jqxdatatable.js"></script>
<script src="~/jqwidgets/jqxscrollbar.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.Employee>
@{
	string renderer = "function() {}';
	string rendering = "function() {}';
	string pagerRenderer = "function(element) {}';
	string renderToolbar = "function(element) {}';
	string renderStatusbar = "function(element) {}';
	string aggregatesRenderer = "function(element){}'
	string exportSettings = '{columnsHeader: true,hiddenColumns: false,serverURL: null,characterSet: null,collapsedRecords: false,recordsInView: true,fileName: "jqxDataTable"}';
	string editSettings = '{saveOnPageChange: true, saveOnBlur: true, saveOnSelectionChange: true, cancelOnEsc: true, saveOnEnter: true, editSingleCell: false, editOnDoubleClick: true, editOnF2: true}';
}
<jqx-data-table on-row-expand="eventHandler()"> 
    <jqx-data-table-columns>
        <jqx-data-table-column column-group="name" dataField="FirstName" width="100" text="First Name"></jqx-data-table-column>
        <jqx-data-table-column column-group="name" dataField="LastName" width="100" text="Last Name"></jqx-data-table-column>
        <jqx-data-table-column dataField="Title" width="150"></jqx-data-table-column>
        <jqx-data-table-column dataField="Address" width="200"></jqx-data-table-column>
        <jqx-data-table-column dataField="City" width="150"></jqx-data-table-column>
        <jqx-data-table-column dataField="Country"></jqx-data-table-column>
    </jqx-data-table-columns>
    <jqx-data-table-column-groups>
        <jqx-data-table-column-group name="name" text="Name"></jqx-data-table-column-group>
    </jqx-data-table-column-groups>
</jqx-data-table>
							
@section scripts {								
<script type="text/javascript">									
	function eventHandler(event) {									
	}									
</script>									
}

Code examples

Bind to the rowCollapse event of jqxDataTable.

<script src="~/jqwidgets/jqxbuttons.js"></script>
<script src="~/jqwidgets/jqxdatatable.js"></script>
<script src="~/jqwidgets/jqxscrollbar.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.Employee>
@{
	string renderer = "function() {}';
	string rendering = "function() {}';
	string pagerRenderer = "function(element) {}';
	string renderToolbar = "function(element) {}';
	string renderStatusbar = "function(element) {}';
	string aggregatesRenderer = "function(element){}'
	string exportSettings = '{columnsHeader: true,hiddenColumns: false,serverURL: null,characterSet: null,collapsedRecords: false,recordsInView: true,fileName: "jqxDataTable"}';
	string editSettings = '{saveOnPageChange: true, saveOnBlur: true, saveOnSelectionChange: true, cancelOnEsc: true, saveOnEnter: true, editSingleCell: false, editOnDoubleClick: true, editOnF2: true}';
}
<jqx-data-table on-row-collapse="eventHandler()"> 
    <jqx-data-table-columns>
        <jqx-data-table-column column-group="name" dataField="FirstName" width="100" text="First Name"></jqx-data-table-column>
        <jqx-data-table-column column-group="name" dataField="LastName" width="100" text="Last Name"></jqx-data-table-column>
        <jqx-data-table-column dataField="Title" width="150"></jqx-data-table-column>
        <jqx-data-table-column dataField="Address" width="200"></jqx-data-table-column>
        <jqx-data-table-column dataField="City" width="150"></jqx-data-table-column>
        <jqx-data-table-column dataField="Country"></jqx-data-table-column>
    </jqx-data-table-columns>
    <jqx-data-table-column-groups>
        <jqx-data-table-column-group name="name" text="Name"></jqx-data-table-column-group>
    </jqx-data-table-column-groups>
</jqx-data-table>
							
@section scripts {								
<script type="text/javascript">									
	function eventHandler(event) {									
	}									
</script>									
}