ï»¿

Custom Elements Documentation

altrows boolean false

Sets or gets the altrows property.

<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>Grid Custom Element</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />
    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />
    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.pager.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.sort.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.edit.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.filter.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.columnsresize.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.aggregates.js"></script>
    <script type="text/javascript">
		var adapter = new jqx.dataAdapter({
			dataType: "xml",
			dataFields: [
				{ name: 'ProductName', type: 'string' },
				{ name: 'QuantityPerUnit', type: 'int' },
				{ name: 'UnitPrice', type: 'float' },
				{ name: 'UnitsInStock', type: 'float' },
				{ name: 'Discontinued', type: 'bool' }
			],
			root: "Products",
			record: "Product",
			id: 'ProductID',
			url: "../sampledata/products.xml"
		});

		var columns = [
                  { text: 'Product Name', datafield: 'ProductName', width: 250 },
                  { text: 'Quantity per Unit', datafield: 'QuantityPerUnit', cellsalign: 'right', align: 'right', width: 200 },
                  { text: 'Unit Price', datafield: 'UnitPrice', align: 'right', cellsalign: 'right', cellsformat: 'c2', width: 200 },
                  { text: 'Units In Stock', datafield: 'UnitsInStock', cellsalign: 'right', width: 100 },
                  { text: 'Discontinued', columntype: 'checkbox', datafield: 'Discontinued' }
                ];

        JQXElements.settings["gridSettings"] =
        {
			 source:adapter, columns:columns,altrows:true, theme:"light"            
        }

    </script>
</head>
<body>
   <jqx-grid settings="gridSettings"></jqx-grid>
</body>
</html>

altstart number 1

Sets or gets the altstart property.

<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>Grid Custom Element</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />
    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />
    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.pager.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.sort.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.edit.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.filter.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.columnsresize.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.aggregates.js"></script>
    <script type="text/javascript">
		var adapter = new jqx.dataAdapter({
			dataType: "xml",
			dataFields: [
				{ name: 'ProductName', type: 'string' },
				{ name: 'QuantityPerUnit', type: 'int' },
				{ name: 'UnitPrice', type: 'float' },
				{ name: 'UnitsInStock', type: 'float' },
				{ name: 'Discontinued', type: 'bool' }
			],
			root: "Products",
			record: "Product",
			id: 'ProductID',
			url: "../sampledata/products.xml"
		});

		var columns = [
                  { text: 'Product Name', datafield: 'ProductName', width: 250 },
                  { text: 'Quantity per Unit', datafield: 'QuantityPerUnit', cellsalign: 'right', align: 'right', width: 200 },
                  { text: 'Unit Price', datafield: 'UnitPrice', align: 'right', cellsalign: 'right', cellsformat: 'c2', width: 200 },
                  { text: 'Units In Stock', datafield: 'UnitsInStock', cellsalign: 'right', width: 100 },
                  { text: 'Discontinued', columntype: 'checkbox', datafield: 'Discontinued' }
                ];

        JQXElements.settings["gridSettings"] =
        {
			 source:adapter, columns:columns,altstart:1, theme:"light"            
        }

    </script>
</head>
<body>
   <jqx-grid settings="gridSettings"></jqx-grid>
</body>
</html>

altstep number 1

Sets or gets the altstep property.

<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>Grid Custom Element</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />
    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />
    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.pager.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.sort.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.edit.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.filter.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.columnsresize.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.aggregates.js"></script>
    <script type="text/javascript">
		var adapter = new jqx.dataAdapter({
			dataType: "xml",
			dataFields: [
				{ name: 'ProductName', type: 'string' },
				{ name: 'QuantityPerUnit', type: 'int' },
				{ name: 'UnitPrice', type: 'float' },
				{ name: 'UnitsInStock', type: 'float' },
				{ name: 'Discontinued', type: 'bool' }
			],
			root: "Products",
			record: "Product",
			id: 'ProductID',
			url: "../sampledata/products.xml"
		});

		var columns = [
                  { text: 'Product Name', datafield: 'ProductName', width: 250 },
                  { text: 'Quantity per Unit', datafield: 'QuantityPerUnit', cellsalign: 'right', align: 'right', width: 200 },
                  { text: 'Unit Price', datafield: 'UnitPrice', align: 'right', cellsalign: 'right', cellsformat: 'c2', width: 200 },
                  { text: 'Units In Stock', datafield: 'UnitsInStock', cellsalign: 'right', width: 100 },
                  { text: 'Discontinued', columntype: 'checkbox', datafield: 'Discontinued' }
                ];

        JQXElements.settings["gridSettings"] =
        {
			 source:adapter, columns:columns,altstep:2, theme:"light"            
        }

    </script>
</head>
<body>
   <jqx-grid settings="gridSettings"></jqx-grid>
</body>
</html>

autoshowloadelement boolean true

Sets or gets the autoshowloadelement property.

<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>Grid Custom Element</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />
    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />
    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.pager.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.sort.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.edit.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.filter.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.columnsresize.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.aggregates.js"></script>
    <script type="text/javascript">
		var adapter = new jqx.dataAdapter({
			dataType: "xml",
			dataFields: [
				{ name: 'ProductName', type: 'string' },
				{ name: 'QuantityPerUnit', type: 'int' },
				{ name: 'UnitPrice', type: 'float' },
				{ name: 'UnitsInStock', type: 'float' },
				{ name: 'Discontinued', type: 'bool' }
			],
			root: "Products",
			record: "Product",
			id: 'ProductID',
			url: "../sampledata/products.xml"
		});

		var columns = [
                  { text: 'Product Name', datafield: 'ProductName', width: 250 },
                  { text: 'Quantity per Unit', datafield: 'QuantityPerUnit', cellsalign: 'right', align: 'right', width: 200 },
                  { text: 'Unit Price', datafield: 'UnitPrice', align: 'right', cellsalign: 'right', cellsformat: 'c2', width: 200 },
                  { text: 'Units In Stock', datafield: 'UnitsInStock', cellsalign: 'right', width: 100 },
                  { text: 'Discontinued', columntype: 'checkbox', datafield: 'Discontinued' }
                ];

        JQXElements.settings["gridSettings"] =
        {
			 source:adapter, columns:columns,autoshowloadelement:false, theme:"light"            
        }

    </script>
</head>
<body>
   <jqx-grid settings="gridSettings"></jqx-grid>
</body>
</html>

autoshowfiltericon boolean true

Sets or gets the autoshowfiltericon property.

<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>Grid Custom Element</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />
    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />
    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.pager.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.sort.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.edit.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.filter.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.columnsresize.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.aggregates.js"></script>
    <script type="text/javascript">
		var adapter = new jqx.dataAdapter({
			dataType: "xml",
			dataFields: [
				{ name: 'ProductName', type: 'string' },
				{ name: 'QuantityPerUnit', type: 'int' },
				{ name: 'UnitPrice', type: 'float' },
				{ name: 'UnitsInStock', type: 'float' },
				{ name: 'Discontinued', type: 'bool' }
			],
			root: "Products",
			record: "Product",
			id: 'ProductID',
			url: "../sampledata/products.xml"
		});

		var columns = [
                  { text: 'Product Name', datafield: 'ProductName', width: 250 },
                  { text: 'Quantity per Unit', datafield: 'QuantityPerUnit', cellsalign: 'right', align: 'right', width: 200 },
                  { text: 'Unit Price', datafield: 'UnitPrice', align: 'right', cellsalign: 'right', cellsformat: 'c2', width: 200 },
                  { text: 'Units In Stock', datafield: 'UnitsInStock', cellsalign: 'right', width: 100 },
                  { text: 'Discontinued', columntype: 'checkbox', datafield: 'Discontinued' }
                ];

        JQXElements.settings["gridSettings"] =
        {
			 source:adapter, columns:columns,autoshowfiltericon:false, theme:"light"            
        }

    </script>
</head>
<body>
   <jqx-grid settings="gridSettings"></jqx-grid>
</body>
</html>

autoshowcolumnsmenubutton boolean true

Sets or gets the autoshowcolumnsmenubutton property.

<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>Grid Custom Element</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />
    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />
    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.pager.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.sort.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.edit.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.filter.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.columnsresize.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.aggregates.js"></script>
    <script type="text/javascript">
		var adapter = new jqx.dataAdapter({
			dataType: "xml",
			dataFields: [
				{ name: 'ProductName', type: 'string' },
				{ name: 'QuantityPerUnit', type: 'int' },
				{ name: 'UnitPrice', type: 'float' },
				{ name: 'UnitsInStock', type: 'float' },
				{ name: 'Discontinued', type: 'bool' }
			],
			root: "Products",
			record: "Product",
			id: 'ProductID',
			url: "../sampledata/products.xml"
		});

		var columns = [
                  { text: 'Product Name', datafield: 'ProductName', width: 250 },
                  { text: 'Quantity per Unit', datafield: 'QuantityPerUnit', cellsalign: 'right', align: 'right', width: 200 },
                  { text: 'Unit Price', datafield: 'UnitPrice', align: 'right', cellsalign: 'right', cellsformat: 'c2', width: 200 },
                  { text: 'Units In Stock', datafield: 'UnitsInStock', cellsalign: 'right', width: 100 },
                  { text: 'Discontinued', columntype: 'checkbox', datafield: 'Discontinued' }
                ];

        JQXElements.settings["gridSettings"] =
        {
			 source:adapter, columns:columns,autoshowcolumnsmenubutton:false, theme:"light"            
        }

    </script>
</head>
<body>
   <jqx-grid settings="gridSettings"></jqx-grid>
</body>
</html>

clipboard boolean true

Sets or gets the clipboard property.

<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>Grid Custom Element</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />
    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />
    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.pager.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.sort.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.edit.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.filter.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.columnsresize.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.aggregates.js"></script>
    <script type="text/javascript">
		var adapter = new jqx.dataAdapter({
			dataType: "xml",
			dataFields: [
				{ name: 'ProductName', type: 'string' },
				{ name: 'QuantityPerUnit', type: 'int' },
				{ name: 'UnitPrice', type: 'float' },
				{ name: 'UnitsInStock', type: 'float' },
				{ name: 'Discontinued', type: 'bool' }
			],
			root: "Products",
			record: "Product",
			id: 'ProductID',
			url: "../sampledata/products.xml"
		});

		var columns = [
                  { text: 'Product Name', datafield: 'ProductName', width: 250 },
                  { text: 'Quantity per Unit', datafield: 'QuantityPerUnit', cellsalign: 'right', align: 'right', width: 200 },
                  { text: 'Unit Price', datafield: 'UnitPrice', align: 'right', cellsalign: 'right', cellsformat: 'c2', width: 200 },
                  { text: 'Units In Stock', datafield: 'UnitsInStock', cellsalign: 'right', width: 100 },
                  { text: 'Discontinued', columntype: 'checkbox', datafield: 'Discontinued' }
                ];

        JQXElements.settings["gridSettings"] =
        {
			 source:adapter, columns:columns,clipboard:false, theme:"light"            
        }

    </script>
</head>
<body>
   <jqx-grid settings="gridSettings"></jqx-grid>
</body>
</html>

closeablegroups boolean true

Sets or gets the closeablegroups property.

<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>Grid Custom Element</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />
    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />
    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.pager.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.sort.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.edit.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.filter.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.columnsresize.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.aggregates.js"></script>
    <script type="text/javascript">
		var adapter = new jqx.dataAdapter({
			dataType: "xml",
			dataFields: [
				{ name: 'ProductName', type: 'string' },
				{ name: 'QuantityPerUnit', type: 'int' },
				{ name: 'UnitPrice', type: 'float' },
				{ name: 'UnitsInStock', type: 'float' },
				{ name: 'Discontinued', type: 'bool' }
			],
			root: "Products",
			record: "Product",
			id: 'ProductID',
			url: "../sampledata/products.xml"
		});

		var columns = [
                  { text: 'Product Name', datafield: 'ProductName', width: 250 },
                  { text: 'Quantity per Unit', datafield: 'QuantityPerUnit', cellsalign: 'right', align: 'right', width: 200 },
                  { text: 'Unit Price', datafield: 'UnitPrice', align: 'right', cellsalign: 'right', cellsformat: 'c2', width: 200 },
                  { text: 'Units In Stock', datafield: 'UnitsInStock', cellsalign: 'right', width: 100 },
                  { text: 'Discontinued', columntype: 'checkbox', datafield: 'Discontinued' }
                ];

        JQXElements.settings["gridSettings"] =
        {
			 source:adapter, columns:columns,closeablegroups:false, theme:"light"            
        }

    </script>
</head>
<body>
   <jqx-grid settings="gridSettings"></jqx-grid>
</body>
</html>

columnsmenuwidth number 15

Sets or gets the columnsmenuwidth property.

<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>Grid Custom Element</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />
    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />
    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.pager.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.sort.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.edit.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.filter.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.columnsresize.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.aggregates.js"></script>
    <script type="text/javascript">
		var adapter = new jqx.dataAdapter({
			dataType: "xml",
			dataFields: [
				{ name: 'ProductName', type: 'string' },
				{ name: 'QuantityPerUnit', type: 'int' },
				{ name: 'UnitPrice', type: 'float' },
				{ name: 'UnitsInStock', type: 'float' },
				{ name: 'Discontinued', type: 'bool' }
			],
			root: "Products",
			record: "Product",
			id: 'ProductID',
			url: "../sampledata/products.xml"
		});

		var columns = [
                  { text: 'Product Name', datafield: 'ProductName', width: 250 },
                  { text: 'Quantity per Unit', datafield: 'QuantityPerUnit', cellsalign: 'right', align: 'right', width: 200 },
                  { text: 'Unit Price', datafield: 'UnitPrice', align: 'right', cellsalign: 'right', cellsformat: 'c2', width: 200 },
                  { text: 'Units In Stock', datafield: 'UnitsInStock', cellsalign: 'right', width: 100 },
                  { text: 'Discontinued', columntype: 'checkbox', datafield: 'Discontinued' }
                ];

        JQXElements.settings["gridSettings"] =
        {
			 source:adapter, columns:columns,columnsmenuwidth:40, theme:"light"            
        }

    </script>
</head>
<body>
   <jqx-grid settings="gridSettings"></jqx-grid>
</body>
</html>

columnmenuopening function null

Sets or gets the columnmenuopening property.

<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>Grid Custom Element</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />
    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />
    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.pager.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.sort.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.edit.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.filter.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.columnsresize.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.aggregates.js"></script>
    <script type="text/javascript">
		var adapter = new jqx.dataAdapter({
			dataType: "xml",
			dataFields: [
				{ name: 'ProductName', type: 'string' },
				{ name: 'QuantityPerUnit', type: 'int' },
				{ name: 'UnitPrice', type: 'float' },
				{ name: 'UnitsInStock', type: 'float' },
				{ name: 'Discontinued', type: 'bool' }
			],
			root: "Products",
			record: "Product",
			id: 'ProductID',
			url: "../sampledata/products.xml"
		});

		var columns = [
                  { text: 'Product Name', datafield: 'ProductName', width: 250 },
                  { text: 'Quantity per Unit', datafield: 'QuantityPerUnit', cellsalign: 'right', align: 'right', width: 200 },
                  { text: 'Unit Price', datafield: 'UnitPrice', align: 'right', cellsalign: 'right', cellsformat: 'c2', width: 200 },
                  { text: 'Units In Stock', datafield: 'UnitsInStock', cellsalign: 'right', width: 100 },
                  { text: 'Discontinued', columntype: 'checkbox', datafield: 'Discontinued' }
                ];

        JQXElements.settings["gridSettings"] =
        {
			 source:adapter, columns:columns, columnmenuopening:"columnmenuopening", theme:"light"            
        }

    </script>
</head>
<body>
   <jqx-grid settings="gridSettings"></jqx-grid>
</body>
</html>

columnmenuclosing function null

Sets or gets the columnmenuclosing property.

<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>Grid Custom Element</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />
    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />
    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.pager.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.sort.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.edit.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.filter.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.columnsresize.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.aggregates.js"></script>
    <script type="text/javascript">
		var adapter = new jqx.dataAdapter({
			dataType: "xml",
			dataFields: [
				{ name: 'ProductName', type: 'string' },
				{ name: 'QuantityPerUnit', type: 'int' },
				{ name: 'UnitPrice', type: 'float' },
				{ name: 'UnitsInStock', type: 'float' },
				{ name: 'Discontinued', type: 'bool' }
			],
			root: "Products",
			record: "Product",
			id: 'ProductID',
			url: "../sampledata/products.xml"
		});

		var columns = [
                  { text: 'Product Name', datafield: 'ProductName', width: 250 },
                  { text: 'Quantity per Unit', datafield: 'QuantityPerUnit', cellsalign: 'right', align: 'right', width: 200 },
                  { text: 'Unit Price', datafield: 'UnitPrice', align: 'right', cellsalign: 'right', cellsformat: 'c2', width: 200 },
                  { text: 'Units In Stock', datafield: 'UnitsInStock', cellsalign: 'right', width: 100 },
                  { text: 'Discontinued', columntype: 'checkbox', datafield: 'Discontinued' }
                ];

        JQXElements.settings["gridSettings"] =
        {
			 source:adapter, columns:columns, columnmenuclosing:"columnmenuclosing", theme:"light"            
        }

    </script>
</head>
<body>
   <jqx-grid settings="gridSettings"></jqx-grid>
</body>
</html>

cellhover function null

Sets or gets the cellhover property.

<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>Grid Custom Element</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />
    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />
    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.pager.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.sort.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.edit.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.filter.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.columnsresize.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.aggregates.js"></script>
    <script type="text/javascript">
		var adapter = new jqx.dataAdapter({
			dataType: "xml",
			dataFields: [
				{ name: 'ProductName', type: 'string' },
				{ name: 'QuantityPerUnit', type: 'int' },
				{ name: 'UnitPrice', type: 'float' },
				{ name: 'UnitsInStock', type: 'float' },
				{ name: 'Discontinued', type: 'bool' }
			],
			root: "Products",
			record: "Product",
			id: 'ProductID',
			url: "../sampledata/products.xml"
		});

		var columns = [
                  { text: 'Product Name', datafield: 'ProductName', width: 250 },
                  { text: 'Quantity per Unit', datafield: 'QuantityPerUnit', cellsalign: 'right', align: 'right', width: 200 },
                  { text: 'Unit Price', datafield: 'UnitPrice', align: 'right', cellsalign: 'right', cellsformat: 'c2', width: 200 },
                  { text: 'Units In Stock', datafield: 'UnitsInStock', cellsalign: 'right', width: 100 },
                  { text: 'Discontinued', columntype: 'checkbox', datafield: 'Discontinued' }
                ];

        JQXElements.settings["gridSettings"] =
        {
			 source:adapter, columns:columns, cellhover:"cellhover", theme:"light"            
        }

    </script>
</head>
<body>
   <jqx-grid settings="gridSettings"></jqx-grid>
</body>
</html>

enablekeyboarddelete boolean true

Sets or gets the enablekeyboarddelete property.

<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>Grid Custom Element</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />
    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />
    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.pager.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.sort.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.edit.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.filter.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.columnsresize.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.aggregates.js"></script>
    <script type="text/javascript">
		var adapter = new jqx.dataAdapter({
			dataType: "xml",
			dataFields: [
				{ name: 'ProductName', type: 'string' },
				{ name: 'QuantityPerUnit', type: 'int' },
				{ name: 'UnitPrice', type: 'float' },
				{ name: 'UnitsInStock', type: 'float' },
				{ name: 'Discontinued', type: 'bool' }
			],
			root: "Products",
			record: "Product",
			id: 'ProductID',
			url: "../sampledata/products.xml"
		});

		var columns = [
                  { text: 'Product Name', datafield: 'ProductName', width: 250 },
                  { text: 'Quantity per Unit', datafield: 'QuantityPerUnit', cellsalign: 'right', align: 'right', width: 200 },
                  { text: 'Unit Price', datafield: 'UnitPrice', align: 'right', cellsalign: 'right', cellsformat: 'c2', width: 200 },
                  { text: 'Units In Stock', datafield: 'UnitsInStock', cellsalign: 'right', width: 100 },
                  { text: 'Discontinued', columntype: 'checkbox', datafield: 'Discontinued' }
                ];

        JQXElements.settings["gridSettings"] =
        {
			 source:adapter, columns:columns,enablekeyboarddelete:false, theme:"light"            
        }

    </script>
</head>
<body>
   <jqx-grid settings="gridSettings"></jqx-grid>
</body>
</html>

enableellipsis boolean true

Sets or gets the enableellipsis property.

<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>Grid Custom Element</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />
    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />
    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.pager.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.sort.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.edit.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.filter.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.columnsresize.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.aggregates.js"></script>
    <script type="text/javascript">
		var adapter = new jqx.dataAdapter({
			dataType: "xml",
			dataFields: [
				{ name: 'ProductName', type: 'string' },
				{ name: 'QuantityPerUnit', type: 'int' },
				{ name: 'UnitPrice', type: 'float' },
				{ name: 'UnitsInStock', type: 'float' },
				{ name: 'Discontinued', type: 'bool' }
			],
			root: "Products",
			record: "Product",
			id: 'ProductID',
			url: "../sampledata/products.xml"
		});

		var columns = [
                  { text: 'Product Name', datafield: 'ProductName', width: 250 },
                  { text: 'Quantity per Unit', datafield: 'QuantityPerUnit', cellsalign: 'right', align: 'right', width: 200 },
                  { text: 'Unit Price', datafield: 'UnitPrice', align: 'right', cellsalign: 'right', cellsformat: 'c2', width: 200 },
                  { text: 'Units In Stock', datafield: 'UnitsInStock', cellsalign: 'right', width: 100 },
                  { text: 'Discontinued', columntype: 'checkbox', datafield: 'Discontinued' }
                ];

        JQXElements.settings["gridSettings"] =
        {
			 source:adapter, columns:columns,enableellipsis:false, theme:"light"            
        }

    </script>
</head>
<body>
   <jqx-grid settings="gridSettings"></jqx-grid>
</body>
</html>

enablemousewheel boolean true

Sets or gets the enablemousewheel property.

<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>Grid Custom Element</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />
    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />
    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.pager.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.sort.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.edit.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.filter.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.columnsresize.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.aggregates.js"></script>
    <script type="text/javascript">
		var adapter = new jqx.dataAdapter({
			dataType: "xml",
			dataFields: [
				{ name: 'ProductName', type: 'string' },
				{ name: 'QuantityPerUnit', type: 'int' },
				{ name: 'UnitPrice', type: 'float' },
				{ name: 'UnitsInStock', type: 'float' },
				{ name: 'Discontinued', type: 'bool' }
			],
			root: "Products",
			record: "Product",
			id: 'ProductID',
			url: "../sampledata/products.xml"
		});

		var columns = [
                  { text: 'Product Name', datafield: 'ProductName', width: 250 },
                  { text: 'Quantity per Unit', datafield: 'QuantityPerUnit', cellsalign: 'right', align: 'right', width: 200 },
                  { text: 'Unit Price', datafield: 'UnitPrice', align: 'right', cellsalign: 'right', cellsformat: 'c2', width: 200 },
                  { text: 'Units In Stock', datafield: 'UnitsInStock', cellsalign: 'right', width: 100 },
                  { text: 'Discontinued', columntype: 'checkbox', datafield: 'Discontinued' }
                ];

        JQXElements.settings["gridSettings"] =
        {
			 source:adapter, columns:columns,enablemousewheel:false, theme:"light"            
        }

    </script>
</head>
<body>
   <jqx-grid settings="gridSettings"></jqx-grid>
</body>
</html>

enableanimations boolean true

Sets or gets the enableanimations property.

<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>Grid Custom Element</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />
    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />
    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.pager.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.sort.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.edit.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.filter.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.columnsresize.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.aggregates.js"></script>
    <script type="text/javascript">
		var adapter = new jqx.dataAdapter({
			dataType: "xml",
			dataFields: [
				{ name: 'ProductName', type: 'string' },
				{ name: 'QuantityPerUnit', type: 'int' },
				{ name: 'UnitPrice', type: 'float' },
				{ name: 'UnitsInStock', type: 'float' },
				{ name: 'Discontinued', type: 'bool' }
			],
			root: "Products",
			record: "Product",
			id: 'ProductID',
			url: "../sampledata/products.xml"
		});

		var columns = [
                  { text: 'Product Name', datafield: 'ProductName', width: 250 },
                  { text: 'Quantity per Unit', datafield: 'QuantityPerUnit', cellsalign: 'right', align: 'right', width: 200 },
                  { text: 'Unit Price', datafield: 'UnitPrice', align: 'right', cellsalign: 'right', cellsformat: 'c2', width: 200 },
                  { text: 'Units In Stock', datafield: 'UnitsInStock', cellsalign: 'right', width: 100 },
                  { text: 'Discontinued', columntype: 'checkbox', datafield: 'Discontinued' }
                ];

        JQXElements.settings["gridSettings"] =
        {
			 source:adapter, columns:columns,enableanimations:false, theme:"light"            
        }

    </script>
</head>
<body>
   <jqx-grid settings="gridSettings"></jqx-grid>
</body>
</html>

enabletooltips boolean false

Sets or gets the enabletooltips property.

<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>Grid Custom Element</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />
    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />
    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.pager.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.sort.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.edit.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.filter.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.columnsresize.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.aggregates.js"></script>
    <script type="text/javascript">
		var adapter = new jqx.dataAdapter({
			dataType: "xml",
			dataFields: [
				{ name: 'ProductName', type: 'string' },
				{ name: 'QuantityPerUnit', type: 'int' },
				{ name: 'UnitPrice', type: 'float' },
				{ name: 'UnitsInStock', type: 'float' },
				{ name: 'Discontinued', type: 'bool' }
			],
			root: "Products",
			record: "Product",
			id: 'ProductID',
			url: "../sampledata/products.xml"
		});

		var columns = [
                  { text: 'Product Name', datafield: 'ProductName', width: 250 },
                  { text: 'Quantity per Unit', datafield: 'QuantityPerUnit', cellsalign: 'right', align: 'right', width: 200 },
                  { text: 'Unit Price', datafield: 'UnitPrice', align: 'right', cellsalign: 'right', cellsformat: 'c2', width: 200 },
                  { text: 'Units In Stock', datafield: 'UnitsInStock', cellsalign: 'right', width: 100 },
                  { text: 'Discontinued', columntype: 'checkbox', datafield: 'Discontinued' }
                ];

        JQXElements.settings["gridSettings"] =
        {
			 source:adapter, columns:columns,enabletooltips:false, theme:"light"            
        }

    </script>
</head>
<body>
   <jqx-grid settings="gridSettings"></jqx-grid>
</body>
</html>

enablehover boolean true

Sets or gets the enablehover property.

<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>Grid Custom Element</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />
    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />
    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.pager.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.sort.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.edit.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.filter.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.columnsresize.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.aggregates.js"></script>
    <script type="text/javascript">
		var adapter = new jqx.dataAdapter({
			dataType: "xml",
			dataFields: [
				{ name: 'ProductName', type: 'string' },
				{ name: 'QuantityPerUnit', type: 'int' },
				{ name: 'UnitPrice', type: 'float' },
				{ name: 'UnitsInStock', type: 'float' },
				{ name: 'Discontinued', type: 'bool' }
			],
			root: "Products",
			record: "Product",
			id: 'ProductID',
			url: "../sampledata/products.xml"
		});

		var columns = [
                  { text: 'Product Name', datafield: 'ProductName', width: 250 },
                  { text: 'Quantity per Unit', datafield: 'QuantityPerUnit', cellsalign: 'right', align: 'right', width: 200 },
                  { text: 'Unit Price', datafield: 'UnitPrice', align: 'right', cellsalign: 'right', cellsformat: 'c2', width: 200 },
                  { text: 'Units In Stock', datafield: 'UnitsInStock', cellsalign: 'right', width: 100 },
                  { text: 'Discontinued', columntype: 'checkbox', datafield: 'Discontinued' }
                ];

        JQXElements.settings["gridSettings"] =
        {
			 source:adapter, columns:columns,enablehover:false, theme:"light"            
        }

    </script>
</head>
<body>
   <jqx-grid settings="gridSettings"></jqx-grid>
</body>
</html>

enablebrowserselection boolean false

Sets or gets the enablebrowserselection property.

<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>Grid Custom Element</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />
    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />
    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.pager.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.sort.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.edit.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.filter.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.columnsresize.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.aggregates.js"></script>
    <script type="text/javascript">
		var adapter = new jqx.dataAdapter({
			dataType: "xml",
			dataFields: [
				{ name: 'ProductName', type: 'string' },
				{ name: 'QuantityPerUnit', type: 'int' },
				{ name: 'UnitPrice', type: 'float' },
				{ name: 'UnitsInStock', type: 'float' },
				{ name: 'Discontinued', type: 'bool' }
			],
			root: "Products",
			record: "Product",
			id: 'ProductID',
			url: "../sampledata/products.xml"
		});

		var columns = [
                  { text: 'Product Name', datafield: 'ProductName', width: 250 },
                  { text: 'Quantity per Unit', datafield: 'QuantityPerUnit', cellsalign: 'right', align: 'right', width: 200 },
                  { text: 'Unit Price', datafield: 'UnitPrice', align: 'right', cellsalign: 'right', cellsformat: 'c2', width: 200 },
                  { text: 'Units In Stock', datafield: 'UnitsInStock', cellsalign: 'right', width: 100 },
                  { text: 'Discontinued', columntype: 'checkbox', datafield: 'Discontinued' }
                ];

        JQXElements.settings["gridSettings"] =
        {
			 source:adapter, columns:columns,enablebrowserselection:false, theme:"light"            
        }

    </script>
</head>
<body>
   <jqx-grid settings="gridSettings"></jqx-grid>
</body>
</html>

everpresentrowposition string 'top'

Sets or gets the everpresentrowposition property.

<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>Grid Custom Element</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />
    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />
    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.pager.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.sort.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.edit.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.filter.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.columnsresize.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.aggregates.js"></script>
    <script type="text/javascript">
		var adapter = new jqx.dataAdapter({
			dataType: "xml",
			dataFields: [
				{ name: 'ProductName', type: 'string' },
				{ name: 'QuantityPerUnit', type: 'int' },
				{ name: 'UnitPrice', type: 'float' },
				{ name: 'UnitsInStock', type: 'float' },
				{ name: 'Discontinued', type: 'bool' }
			],
			root: "Products",
			record: "Product",
			id: 'ProductID',
			url: "../sampledata/products.xml"
		});

		var columns = [
                  { text: 'Product Name', datafield: 'ProductName', width: 250 },
                  { text: 'Quantity per Unit', datafield: 'QuantityPerUnit', cellsalign: 'right', align: 'right', width: 200 },
                  { text: 'Unit Price', datafield: 'UnitPrice', align: 'right', cellsalign: 'right', cellsformat: 'c2', width: 200 },
                  { text: 'Units In Stock', datafield: 'UnitsInStock', cellsalign: 'right', width: 100 },
                  { text: 'Discontinued', columntype: 'checkbox', datafield: 'Discontinued' }
                ];

        JQXElements.settings["gridSettings"] =
        {
			 source:adapter, columns:columns, everpresentrowposition:"bottom", theme:"light"            
        }

    </script>
</head>
<body>
   <jqx-grid settings="gridSettings"></jqx-grid>
</body>
</html>

everpresentrowheight number 30

Sets or gets the everpresentrowheight property.

<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>Grid Custom Element</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />
    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />
    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.pager.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.sort.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.edit.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.filter.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.columnsresize.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.aggregates.js"></script>
    <script type="text/javascript">
		var adapter = new jqx.dataAdapter({
			dataType: "xml",
			dataFields: [
				{ name: 'ProductName', type: 'string' },
				{ name: 'QuantityPerUnit', type: 'int' },
				{ name: 'UnitPrice', type: 'float' },
				{ name: 'UnitsInStock', type: 'float' },
				{ name: 'Discontinued', type: 'bool' }
			],
			root: "Products",
			record: "Product",
			id: 'ProductID',
			url: "../sampledata/products.xml"
		});

		var columns = [
                  { text: 'Product Name', datafield: 'ProductName', width: 250 },
                  { text: 'Quantity per Unit', datafield: 'QuantityPerUnit', cellsalign: 'right', align: 'right', width: 200 },
                  { text: 'Unit Price', datafield: 'UnitPrice', align: 'right', cellsalign: 'right', cellsformat: 'c2', width: 200 },
                  { text: 'Units In Stock', datafield: 'UnitsInStock', cellsalign: 'right', width: 100 },
                  { text: 'Discontinued', columntype: 'checkbox', datafield: 'Discontinued' }
                ];

        JQXElements.settings["gridSettings"] =
        {
			 source:adapter, columns:columns,everpresentrowheight:32, theme:"light"            
        }

    </script>
</head>
<body>
   <jqx-grid settings="gridSettings"></jqx-grid>
</body>
</html>

everpresentrowactions string "add reset"

Sets or gets the everpresentrowactions property.

<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>Grid Custom Element</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />
    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />
    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.pager.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.sort.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.edit.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.filter.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.columnsresize.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.aggregates.js"></script>
    <script type="text/javascript">
		var adapter = new jqx.dataAdapter({
			dataType: "xml",
			dataFields: [
				{ name: 'ProductName', type: 'string' },
				{ name: 'QuantityPerUnit', type: 'int' },
				{ name: 'UnitPrice', type: 'float' },
				{ name: 'UnitsInStock', type: 'float' },
				{ name: 'Discontinued', type: 'bool' }
			],
			root: "Products",
			record: "Product",
			id: 'ProductID',
			url: "../sampledata/products.xml"
		});

		var columns = [
                  { text: 'Product Name', datafield: 'ProductName', width: 250 },
                  { text: 'Quantity per Unit', datafield: 'QuantityPerUnit', cellsalign: 'right', align: 'right', width: 200 },
                  { text: 'Unit Price', datafield: 'UnitPrice', align: 'right', cellsalign: 'right', cellsformat: 'c2', width: 200 },
                  { text: 'Units In Stock', datafield: 'UnitsInStock', cellsalign: 'right', width: 100 },
                  { text: 'Discontinued', columntype: 'checkbox', datafield: 'Discontinued' }
                ];

        JQXElements.settings["gridSettings"] =
        {
			 source:adapter, columns:columns, everpresentrowactions:"add update delete reset", theme:"light"            
        }

    </script>
</head>
<body>
   <jqx-grid settings="gridSettings"></jqx-grid>
</body>
</html>

everpresentrowactionsmode string "popup"

Sets or gets the everpresentrowactionsmode property.

<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>Grid Custom Element</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />
    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />
    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.pager.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.sort.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.edit.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.filter.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.columnsresize.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.aggregates.js"></script>
    <script type="text/javascript">
		var adapter = new jqx.dataAdapter({
			dataType: "xml",
			dataFields: [
				{ name: 'ProductName', type: 'string' },
				{ name: 'QuantityPerUnit', type: 'int' },
				{ name: 'UnitPrice', type: 'float' },
				{ name: 'UnitsInStock', type: 'float' },
				{ name: 'Discontinued', type: 'bool' }
			],
			root: "Products",
			record: "Product",
			id: 'ProductID',
			url: "../sampledata/products.xml"
		});

		var columns = [
                  { text: 'Product Name', datafield: 'ProductName', width: 250 },
                  { text: 'Quantity per Unit', datafield: 'QuantityPerUnit', cellsalign: 'right', align: 'right', width: 200 },
                  { text: 'Unit Price', datafield: 'UnitPrice', align: 'right', cellsalign: 'right', cellsformat: 'c2', width: 200 },
                  { text: 'Units In Stock', datafield: 'UnitsInStock', cellsalign: 'right', width: 100 },
                  { text: 'Discontinued', columntype: 'checkbox', datafield: 'Discontinued' }
                ];

        JQXElements.settings["gridSettings"] =
        {
			 source:adapter, columns:columns, everpresentrowactionsmode:"popup", theme:"light"            
        }

    </script>
</head>
<body>
   <jqx-grid settings="gridSettings"></jqx-grid>
</body>
</html>

filterrowheight number 31

Sets or gets the filterrowheight property.

<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>Grid Custom Element</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />
    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />
    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.pager.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.sort.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.edit.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.filter.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.columnsresize.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.aggregates.js"></script>
    <script type="text/javascript">
		var adapter = new jqx.dataAdapter({
			dataType: "xml",
			dataFields: [
				{ name: 'ProductName', type: 'string' },
				{ name: 'QuantityPerUnit', type: 'int' },
				{ name: 'UnitPrice', type: 'float' },
				{ name: 'UnitsInStock', type: 'float' },
				{ name: 'Discontinued', type: 'bool' }
			],
			root: "Products",
			record: "Product",
			id: 'ProductID',
			url: "../sampledata/products.xml"
		});

		var columns = [
                  { text: 'Product Name', datafield: 'ProductName', width: 250 },
                  { text: 'Quantity per Unit', datafield: 'QuantityPerUnit', cellsalign: 'right', align: 'right', width: 200 },
                  { text: 'Unit Price', datafield: 'UnitPrice', align: 'right', cellsalign: 'right', cellsformat: 'c2', width: 200 },
                  { text: 'Units In Stock', datafield: 'UnitsInStock', cellsalign: 'right', width: 100 },
                  { text: 'Discontinued', columntype: 'checkbox', datafield: 'Discontinued' }
                ];

        JQXElements.settings["gridSettings"] =
        {
			 source:adapter, columns:columns,filterrowheight:35, theme:"light"            
        }

    </script>
</head>
<body>
   <jqx-grid settings="gridSettings"></jqx-grid>
</body>
</html>

filtermode string "default"

Sets or gets the filtermode property.

<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>Grid Custom Element</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />
    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />
    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.pager.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.sort.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.edit.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.filter.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.columnsresize.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.aggregates.js"></script>
    <script type="text/javascript">
		var adapter = new jqx.dataAdapter({
			dataType: "xml",
			dataFields: [
				{ name: 'ProductName', type: 'string' },
				{ name: 'QuantityPerUnit', type: 'int' },
				{ name: 'UnitPrice', type: 'float' },
				{ name: 'UnitsInStock', type: 'float' },
				{ name: 'Discontinued', type: 'bool' }
			],
			root: "Products",
			record: "Product",
			id: 'ProductID',
			url: "../sampledata/products.xml"
		});

		var columns = [
                  { text: 'Product Name', datafield: 'ProductName', width: 250 },
                  { text: 'Quantity per Unit', datafield: 'QuantityPerUnit', cellsalign: 'right', align: 'right', width: 200 },
                  { text: 'Unit Price', datafield: 'UnitPrice', align: 'right', cellsalign: 'right', cellsformat: 'c2', width: 200 },
                  { text: 'Units In Stock', datafield: 'UnitsInStock', cellsalign: 'right', width: 100 },
                  { text: 'Discontinued', columntype: 'checkbox', datafield: 'Discontinued' }
                ];

        JQXElements.settings["gridSettings"] =
        {
			 source:adapter, columns:columns, filtermode:"excel", theme:"light"            
        }

    </script>
</head>
<body>
   <jqx-grid settings="gridSettings"></jqx-grid>
</body>
</html>

groupsrenderer function null

Sets or gets the groupsrenderer property.

<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>Grid Custom Element</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />
    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />
    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.pager.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.sort.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.edit.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.filter.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.columnsresize.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.aggregates.js"></script>
    <script type="text/javascript">
		var adapter = new jqx.dataAdapter({
			dataType: "xml",
			dataFields: [
				{ name: 'ProductName', type: 'string' },
				{ name: 'QuantityPerUnit', type: 'int' },
				{ name: 'UnitPrice', type: 'float' },
				{ name: 'UnitsInStock', type: 'float' },
				{ name: 'Discontinued', type: 'bool' }
			],
			root: "Products",
			record: "Product",
			id: 'ProductID',
			url: "../sampledata/products.xml"
		});

		var columns = [
                  { text: 'Product Name', datafield: 'ProductName', width: 250 },
                  { text: 'Quantity per Unit', datafield: 'QuantityPerUnit', cellsalign: 'right', align: 'right', width: 200 },
                  { text: 'Unit Price', datafield: 'UnitPrice', align: 'right', cellsalign: 'right', cellsformat: 'c2', width: 200 },
                  { text: 'Units In Stock', datafield: 'UnitsInStock', cellsalign: 'right', width: 100 },
                  { text: 'Discontinued', columntype: 'checkbox', datafield: 'Discontinued' }
                ];

        JQXElements.settings["gridSettings"] =
        {
			 source:adapter, columns:columns, groups:"['firstname']", groupsrenderer:"groupsrenderer", theme:"light"            
        }

    </script>
</head>
<body>
   <jqx-grid settings="gridSettings"></jqx-grid>
</body>
</html>

groupcolumnrenderer function null

Sets or gets the groupcolumnrenderer property.

<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>Grid Custom Element</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />
    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />
    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.pager.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.sort.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.edit.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.filter.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.columnsresize.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.aggregates.js"></script>
    <script type="text/javascript">
		var adapter = new jqx.dataAdapter({
			dataType: "xml",
			dataFields: [
				{ name: 'ProductName', type: 'string' },
				{ name: 'QuantityPerUnit', type: 'int' },
				{ name: 'UnitPrice', type: 'float' },
				{ name: 'UnitsInStock', type: 'float' },
				{ name: 'Discontinued', type: 'bool' }
			],
			root: "Products",
			record: "Product",
			id: 'ProductID',
			url: "../sampledata/products.xml"
		});

		var columns = [
                  { text: 'Product Name', datafield: 'ProductName', width: 250 },
                  { text: 'Quantity per Unit', datafield: 'QuantityPerUnit', cellsalign: 'right', align: 'right', width: 200 },
                  { text: 'Unit Price', datafield: 'UnitPrice', align: 'right', cellsalign: 'right', cellsformat: 'c2', width: 200 },
                  { text: 'Units In Stock', datafield: 'UnitsInStock', cellsalign: 'right', width: 100 },
                  { text: 'Discontinued', columntype: 'checkbox', datafield: 'Discontinued' }
                ];

        JQXElements.settings["gridSettings"] =
        {
			 source:adapter, columns:columns, groups:"['firstname']", groupcolumnrenderer:"groupcolumnrenderer", theme:"light"            
        }

    </script>
</head>
<body>
   <jqx-grid settings="gridSettings"></jqx-grid>
</body>
</html>

groupsexpandedbydefault boolean false

Sets or gets the groupsexpandedbydefault property.

<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>Grid Custom Element</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />
    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />
    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.pager.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.sort.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.edit.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.filter.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.columnsresize.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.aggregates.js"></script>
    <script type="text/javascript">
		var adapter = new jqx.dataAdapter({
			dataType: "xml",
			dataFields: [
				{ name: 'ProductName', type: 'string' },
				{ name: 'QuantityPerUnit', type: 'int' },
				{ name: 'UnitPrice', type: 'float' },
				{ name: 'UnitsInStock', type: 'float' },
				{ name: 'Discontinued', type: 'bool' }
			],
			root: "Products",
			record: "Product",
			id: 'ProductID',
			url: "../sampledata/products.xml"
		});

		var columns = [
                  { text: 'Product Name', datafield: 'ProductName', width: 250 },
                  { text: 'Quantity per Unit', datafield: 'QuantityPerUnit', cellsalign: 'right', align: 'right', width: 200 },
                  { text: 'Unit Price', datafield: 'UnitPrice', align: 'right', cellsalign: 'right', cellsformat: 'c2', width: 200 },
                  { text: 'Units In Stock', datafield: 'UnitsInStock', cellsalign: 'right', width: 100 },
                  { text: 'Discontinued', columntype: 'checkbox', datafield: 'Discontinued' }
                ];

        JQXElements.settings["gridSettings"] =
        {
			 source:adapter, columns:columns, groups:"['firstname']",groupsexpandedbydefault:true, theme:"light"            
        }

    </script>
</head>
<body>
   <jqx-grid settings="gridSettings"></jqx-grid>
</body>
</html>

handlekeyboardnavigation function null

Sets or gets the handlekeyboardnavigation property.

<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>Grid Custom Element</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />
    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />
    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.pager.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.sort.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.edit.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.filter.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.columnsresize.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.aggregates.js"></script>
    <script type="text/javascript">
		var adapter = new jqx.dataAdapter({
			dataType: "xml",
			dataFields: [
				{ name: 'ProductName', type: 'string' },
				{ name: 'QuantityPerUnit', type: 'int' },
				{ name: 'UnitPrice', type: 'float' },
				{ name: 'UnitsInStock', type: 'float' },
				{ name: 'Discontinued', type: 'bool' }
			],
			root: "Products",
			record: "Product",
			id: 'ProductID',
			url: "../sampledata/products.xml"
		});

		var columns = [
                  { text: 'Product Name', datafield: 'ProductName', width: 250 },
                  { text: 'Quantity per Unit', datafield: 'QuantityPerUnit', cellsalign: 'right', align: 'right', width: 200 },
                  { text: 'Unit Price', datafield: 'UnitPrice', align: 'right', cellsalign: 'right', cellsformat: 'c2', width: 200 },
                  { text: 'Units In Stock', datafield: 'UnitsInStock', cellsalign: 'right', width: 100 },
                  { text: 'Discontinued', columntype: 'checkbox', datafield: 'Discontinued' }
                ];

        JQXElements.settings["gridSettings"] =
        {
			 source:adapter, columns:columns, handlekeyboardnavigation:"handlekeyboardnavigation", theme:"light"            
        }

    </script>
</head>
<body>
   <jqx-grid settings="gridSettings"></jqx-grid>
</body>
</html>

pagerrenderer function null

Sets or gets the pagerrenderer property.

<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>Grid Custom Element</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />
    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />
    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.pager.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.sort.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.edit.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.filter.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.columnsresize.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.aggregates.js"></script>
    <script type="text/javascript">
		var adapter = new jqx.dataAdapter({
			dataType: "xml",
			dataFields: [
				{ name: 'ProductName', type: 'string' },
				{ name: 'QuantityPerUnit', type: 'int' },
				{ name: 'UnitPrice', type: 'float' },
				{ name: 'UnitsInStock', type: 'float' },
				{ name: 'Discontinued', type: 'bool' }
			],
			root: "Products",
			record: "Product",
			id: 'ProductID',
			url: "../sampledata/products.xml"
		});

		var columns = [
                  { text: 'Product Name', datafield: 'ProductName', width: 250 },
                  { text: 'Quantity per Unit', datafield: 'QuantityPerUnit', cellsalign: 'right', align: 'right', width: 200 },
                  { text: 'Unit Price', datafield: 'UnitPrice', align: 'right', cellsalign: 'right', cellsformat: 'c2', width: 200 },
                  { text: 'Units In Stock', datafield: 'UnitsInStock', cellsalign: 'right', width: 100 },
                  { text: 'Discontinued', columntype: 'checkbox', datafield: 'Discontinued' }
                ];

        JQXElements.settings["gridSettings"] =
        {
			 source:adapter, columns:columns, pagerrenderer:"pagerrenderer", pageable:"pageable", theme:"light"            
        }

    </script>
</head>
<body>
   <jqx-grid settings="gridSettings"></jqx-grid>
</body>
</html>

rtl boolean false

Sets or gets the rtl property.

<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>Grid Custom Element</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />
    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />
    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.pager.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.sort.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.edit.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.filter.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.columnsresize.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.aggregates.js"></script>
    <script type="text/javascript">
		var adapter = new jqx.dataAdapter({
			dataType: "xml",
			dataFields: [
				{ name: 'ProductName', type: 'string' },
				{ name: 'QuantityPerUnit', type: 'int' },
				{ name: 'UnitPrice', type: 'float' },
				{ name: 'UnitsInStock', type: 'float' },
				{ name: 'Discontinued', type: 'bool' }
			],
			root: "Products",
			record: "Product",
			id: 'ProductID',
			url: "../sampledata/products.xml"
		});

		var columns = [
                  { text: 'Product Name', datafield: 'ProductName', width: 250 },
                  { text: 'Quantity per Unit', datafield: 'QuantityPerUnit', cellsalign: 'right', align: 'right', width: 200 },
                  { text: 'Unit Price', datafield: 'UnitPrice', align: 'right', cellsalign: 'right', cellsformat: 'c2', width: 200 },
                  { text: 'Units In Stock', datafield: 'UnitsInStock', cellsalign: 'right', width: 100 },
                  { text: 'Discontinued', columntype: 'checkbox', datafield: 'Discontinued' }
                ];

        JQXElements.settings["gridSettings"] =
        {
			 source:adapter, columns:columns,rtl:true, theme:"light"            
        }

    </script>
</head>
<body>
   <jqx-grid settings="gridSettings"></jqx-grid>
</body>
</html>

showdefaultloadelement boolean true

Sets or gets the showdefaultloadelement property.

<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>Grid Custom Element</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />
    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />
    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.pager.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.sort.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.edit.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.filter.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.columnsresize.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.aggregates.js"></script>
    <script type="text/javascript">
		var adapter = new jqx.dataAdapter({
			dataType: "xml",
			dataFields: [
				{ name: 'ProductName', type: 'string' },
				{ name: 'QuantityPerUnit', type: 'int' },
				{ name: 'UnitPrice', type: 'float' },
				{ name: 'UnitsInStock', type: 'float' },
				{ name: 'Discontinued', type: 'bool' }
			],
			root: "Products",
			record: "Product",
			id: 'ProductID',
			url: "../sampledata/products.xml"
		});

		var columns = [
                  { text: 'Product Name', datafield: 'ProductName', width: 250 },
                  { text: 'Quantity per Unit', datafield: 'QuantityPerUnit', cellsalign: 'right', align: 'right', width: 200 },
                  { text: 'Unit Price', datafield: 'UnitPrice', align: 'right', cellsalign: 'right', cellsformat: 'c2', width: 200 },
                  { text: 'Units In Stock', datafield: 'UnitsInStock', cellsalign: 'right', width: 100 },
                  { text: 'Discontinued', columntype: 'checkbox', datafield: 'Discontinued' }
                ];

        JQXElements.settings["gridSettings"] =
        {
			 source:adapter, columns:columns,showdefaultloadelement:false, theme:"light"            
        }

    </script>
</head>
<body>
   <jqx-grid settings="gridSettings"></jqx-grid>
</body>
</html>

showfiltercolumnbackground boolean true

Sets or gets the showfiltercolumnbackground property.

<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>Grid Custom Element</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />
    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />
    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.pager.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.sort.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.edit.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.filter.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.columnsresize.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.aggregates.js"></script>
    <script type="text/javascript">
		var adapter = new jqx.dataAdapter({
			dataType: "xml",
			dataFields: [
				{ name: 'ProductName', type: 'string' },
				{ name: 'QuantityPerUnit', type: 'int' },
				{ name: 'UnitPrice', type: 'float' },
				{ name: 'UnitsInStock', type: 'float' },
				{ name: 'Discontinued', type: 'bool' }
			],
			root: "Products",
			record: "Product",
			id: 'ProductID',
			url: "../sampledata/products.xml"
		});

		var columns = [
                  { text: 'Product Name', datafield: 'ProductName', width: 250 },
                  { text: 'Quantity per Unit', datafield: 'QuantityPerUnit', cellsalign: 'right', align: 'right', width: 200 },
                  { text: 'Unit Price', datafield: 'UnitPrice', align: 'right', cellsalign: 'right', cellsformat: 'c2', width: 200 },
                  { text: 'Units In Stock', datafield: 'UnitsInStock', cellsalign: 'right', width: 100 },
                  { text: 'Discontinued', columntype: 'checkbox', datafield: 'Discontinued' }
                ];

        JQXElements.settings["gridSettings"] =
        {
			 source:adapter, columns:columns,showfiltercolumnbackground:false, theme:"light"            
        }

    </script>
</head>
<body>
   <jqx-grid settings="gridSettings"></jqx-grid>
</body>
</html>

showfiltermenuitems boolean true

Sets or gets the showfiltermenuitems property.

<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>Grid Custom Element</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />
    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />
    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.pager.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.sort.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.edit.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.filter.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.columnsresize.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.aggregates.js"></script>
    <script type="text/javascript">
		var adapter = new jqx.dataAdapter({
			dataType: "xml",
			dataFields: [
				{ name: 'ProductName', type: 'string' },
				{ name: 'QuantityPerUnit', type: 'int' },
				{ name: 'UnitPrice', type: 'float' },
				{ name: 'UnitsInStock', type: 'float' },
				{ name: 'Discontinued', type: 'bool' }
			],
			root: "Products",
			record: "Product",
			id: 'ProductID',
			url: "../sampledata/products.xml"
		});

		var columns = [
                  { text: 'Product Name', datafield: 'ProductName', width: 250 },
                  { text: 'Quantity per Unit', datafield: 'QuantityPerUnit', cellsalign: 'right', align: 'right', width: 200 },
                  { text: 'Unit Price', datafield: 'UnitPrice', align: 'right', cellsalign: 'right', cellsformat: 'c2', width: 200 },
                  { text: 'Units In Stock', datafield: 'UnitsInStock', cellsalign: 'right', width: 100 },
                  { text: 'Discontinued', columntype: 'checkbox', datafield: 'Discontinued' }
                ];

        JQXElements.settings["gridSettings"] =
        {
			 source:adapter, columns:columns,showfiltermenuitems:false, theme:"light"            
        }

    </script>
</head>
<body>
   <jqx-grid settings="gridSettings"></jqx-grid>
</body>
</html>

showpinnedcolumnbackground boolean true

Sets or gets the showpinnedcolumnbackground property.

<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>Grid Custom Element</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />
    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />
    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.pager.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.sort.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.edit.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.filter.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.columnsresize.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.aggregates.js"></script>
    <script type="text/javascript">
		var adapter = new jqx.dataAdapter({
			dataType: "xml",
			dataFields: [
				{ name: 'ProductName', type: 'string' },
				{ name: 'QuantityPerUnit', type: 'int' },
				{ name: 'UnitPrice', type: 'float' },
				{ name: 'UnitsInStock', type: 'float' },
				{ name: 'Discontinued', type: 'bool' }
			],
			root: "Products",
			record: "Product",
			id: 'ProductID',
			url: "../sampledata/products.xml"
		});

		var columns = [
                  { text: 'Product Name', datafield: 'ProductName', width: 250 },
                  { text: 'Quantity per Unit', datafield: 'QuantityPerUnit', cellsalign: 'right', align: 'right', width: 200 },
                  { text: 'Unit Price', datafield: 'UnitPrice', align: 'right', cellsalign: 'right', cellsformat: 'c2', width: 200 },
                  { text: 'Units In Stock', datafield: 'UnitsInStock', cellsalign: 'right', width: 100 },
                  { text: 'Discontinued', columntype: 'checkbox', datafield: 'Discontinued' }
                ];

        JQXElements.settings["gridSettings"] =
        {
			 source:adapter, columns:columns,showpinnedcolumnbackground:false, theme:"light"            
        }

    </script>
</head>
<body>
   <jqx-grid settings="gridSettings"></jqx-grid>
</body>
</html>

showsortcolumnbackground boolean true

Sets or gets the showsortcolumnbackground property.

<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>Grid Custom Element</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />
    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />
    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.pager.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.sort.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.edit.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.filter.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.columnsresize.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.aggregates.js"></script>
    <script type="text/javascript">
		var adapter = new jqx.dataAdapter({
			dataType: "xml",
			dataFields: [
				{ name: 'ProductName', type: 'string' },
				{ name: 'QuantityPerUnit', type: 'int' },
				{ name: 'UnitPrice', type: 'float' },
				{ name: 'UnitsInStock', type: 'float' },
				{ name: 'Discontinued', type: 'bool' }
			],
			root: "Products",
			record: "Product",
			id: 'ProductID',
			url: "../sampledata/products.xml"
		});

		var columns = [
                  { text: 'Product Name', datafield: 'ProductName', width: 250 },
                  { text: 'Quantity per Unit', datafield: 'QuantityPerUnit', cellsalign: 'right', align: 'right', width: 200 },
                  { text: 'Unit Price', datafield: 'UnitPrice', align: 'right', cellsalign: 'right', cellsformat: 'c2', width: 200 },
                  { text: 'Units In Stock', datafield: 'UnitsInStock', cellsalign: 'right', width: 100 },
                  { text: 'Discontinued', columntype: 'checkbox', datafield: 'Discontinued' }
                ];

        JQXElements.settings["gridSettings"] =
        {
			 source:adapter, columns:columns,showsortcolumnbackground:false, theme:"light"            
        }

    </script>
</head>
<body>
   <jqx-grid settings="gridSettings"></jqx-grid>
</body>
</html>

showsortmenuitems boolean true

Sets or gets the showsortmenuitems property.

<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>Grid Custom Element</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />
    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />
    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.pager.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.sort.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.edit.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.filter.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.columnsresize.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.aggregates.js"></script>
    <script type="text/javascript">
		var adapter = new jqx.dataAdapter({
			dataType: "xml",
			dataFields: [
				{ name: 'ProductName', type: 'string' },
				{ name: 'QuantityPerUnit', type: 'int' },
				{ name: 'UnitPrice', type: 'float' },
				{ name: 'UnitsInStock', type: 'float' },
				{ name: 'Discontinued', type: 'bool' }
			],
			root: "Products",
			record: "Product",
			id: 'ProductID',
			url: "../sampledata/products.xml"
		});

		var columns = [
                  { text: 'Product Name', datafield: 'ProductName', width: 250 },
                  { text: 'Quantity per Unit', datafield: 'QuantityPerUnit', cellsalign: 'right', align: 'right', width: 200 },
                  { text: 'Unit Price', datafield: 'UnitPrice', align: 'right', cellsalign: 'right', cellsformat: 'c2', width: 200 },
                  { text: 'Units In Stock', datafield: 'UnitsInStock', cellsalign: 'right', width: 100 },
                  { text: 'Discontinued', columntype: 'checkbox', datafield: 'Discontinued' }
                ];

        JQXElements.settings["gridSettings"] =
        {
			 source:adapter, columns:columns,showsortmenuitems:false, theme:"light"            
        }

    </script>
</head>
<body>
   <jqx-grid settings="gridSettings"></jqx-grid>
</body>
</html>

showgroupmenuitems boolean true

Sets or gets the showgroupmenuitems property.

<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>Grid Custom Element</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />
    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />
    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.pager.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.sort.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.edit.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.filter.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.columnsresize.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.aggregates.js"></script>
    <script type="text/javascript">
		var adapter = new jqx.dataAdapter({
			dataType: "xml",
			dataFields: [
				{ name: 'ProductName', type: 'string' },
				{ name: 'QuantityPerUnit', type: 'int' },
				{ name: 'UnitPrice', type: 'float' },
				{ name: 'UnitsInStock', type: 'float' },
				{ name: 'Discontinued', type: 'bool' }
			],
			root: "Products",
			record: "Product",
			id: 'ProductID',
			url: "../sampledata/products.xml"
		});

		var columns = [
                  { text: 'Product Name', datafield: 'ProductName', width: 250 },
                  { text: 'Quantity per Unit', datafield: 'QuantityPerUnit', cellsalign: 'right', align: 'right', width: 200 },
                  { text: 'Unit Price', datafield: 'UnitPrice', align: 'right', cellsalign: 'right', cellsformat: 'c2', width: 200 },
                  { text: 'Units In Stock', datafield: 'UnitsInStock', cellsalign: 'right', width: 100 },
                  { text: 'Discontinued', columntype: 'checkbox', datafield: 'Discontinued' }
                ];

        JQXElements.settings["gridSettings"] =
        {
			 source:adapter, columns:columns,showgroupmenuitems:false, theme:"light"            
        }

    </script>
</head>
<body>
   <jqx-grid settings="gridSettings"></jqx-grid>
</body>
</html>

showrowdetailscolumn boolean true

Sets or gets the showrowdetailscolumn property.

<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>Grid Custom Element</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />
    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />
    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.pager.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.sort.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.edit.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.filter.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.columnsresize.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.aggregates.js"></script>
    <script type="text/javascript">
		var adapter = new jqx.dataAdapter({
			dataType: "xml",
			dataFields: [
				{ name: 'ProductName', type: 'string' },
				{ name: 'QuantityPerUnit', type: 'int' },
				{ name: 'UnitPrice', type: 'float' },
				{ name: 'UnitsInStock', type: 'float' },
				{ name: 'Discontinued', type: 'bool' }
			],
			root: "Products",
			record: "Product",
			id: 'ProductID',
			url: "../sampledata/products.xml"
		});

		var columns = [
                  { text: 'Product Name', datafield: 'ProductName', width: 250 },
                  { text: 'Quantity per Unit', datafield: 'QuantityPerUnit', cellsalign: 'right', align: 'right', width: 200 },
                  { text: 'Unit Price', datafield: 'UnitPrice', align: 'right', cellsalign: 'right', cellsformat: 'c2', width: 200 },
                  { text: 'Units In Stock', datafield: 'UnitsInStock', cellsalign: 'right', width: 100 },
                  { text: 'Discontinued', columntype: 'checkbox', datafield: 'Discontinued' }
                ];

        JQXElements.settings["gridSettings"] =
        {
			 source:adapter, columns:columns,showrowdetailscolumn:false, theme:"light"            
        }

    </script>
</head>
<body>
   <jqx-grid settings="gridSettings"></jqx-grid>
</body>
</html>

showheader boolean true

Sets or gets the showheader property.

<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>Grid Custom Element</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />
    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />
    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.pager.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.sort.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.edit.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.filter.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.columnsresize.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.aggregates.js"></script>
    <script type="text/javascript">
		var adapter = new jqx.dataAdapter({
			dataType: "xml",
			dataFields: [
				{ name: 'ProductName', type: 'string' },
				{ name: 'QuantityPerUnit', type: 'int' },
				{ name: 'UnitPrice', type: 'float' },
				{ name: 'UnitsInStock', type: 'float' },
				{ name: 'Discontinued', type: 'bool' }
			],
			root: "Products",
			record: "Product",
			id: 'ProductID',
			url: "../sampledata/products.xml"
		});

		var columns = [
                  { text: 'Product Name', datafield: 'ProductName', width: 250 },
                  { text: 'Quantity per Unit', datafield: 'QuantityPerUnit', cellsalign: 'right', align: 'right', width: 200 },
                  { text: 'Unit Price', datafield: 'UnitPrice', align: 'right', cellsalign: 'right', cellsformat: 'c2', width: 200 },
                  { text: 'Units In Stock', datafield: 'UnitsInStock', cellsalign: 'right', width: 100 },
                  { text: 'Discontinued', columntype: 'checkbox', datafield: 'Discontinued' }
                ];

        JQXElements.settings["gridSettings"] =
        {
			 source:adapter, columns:columns,showheader:false, theme:"light"            
        }

    </script>
</head>
<body>
   <jqx-grid settings="gridSettings"></jqx-grid>
</body>
</html>

showgroupsheader boolean true

Sets or gets the showgroupsheader property.

<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>Grid Custom Element</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />
    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />
    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.pager.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.sort.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.edit.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.filter.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.columnsresize.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.aggregates.js"></script>
    <script type="text/javascript">
		var adapter = new jqx.dataAdapter({
			dataType: "xml",
			dataFields: [
				{ name: 'ProductName', type: 'string' },
				{ name: 'QuantityPerUnit', type: 'int' },
				{ name: 'UnitPrice', type: 'float' },
				{ name: 'UnitsInStock', type: 'float' },
				{ name: 'Discontinued', type: 'bool' }
			],
			root: "Products",
			record: "Product",
			id: 'ProductID',
			url: "../sampledata/products.xml"
		});

		var columns = [
                  { text: 'Product Name', datafield: 'ProductName', width: 250 },
                  { text: 'Quantity per Unit', datafield: 'QuantityPerUnit', cellsalign: 'right', align: 'right', width: 200 },
                  { text: 'Unit Price', datafield: 'UnitPrice', align: 'right', cellsalign: 'right', cellsformat: 'c2', width: 200 },
                  { text: 'Units In Stock', datafield: 'UnitsInStock', cellsalign: 'right', width: 100 },
                  { text: 'Discontinued', columntype: 'checkbox', datafield: 'Discontinued' }
                ];

        JQXElements.settings["gridSettings"] =
        {
			 source:adapter, columns:columns,showgroupsheader:false, theme:"light"            
        }

    </script>
</head>
<body>
   <jqx-grid settings="gridSettings"></jqx-grid>
</body>
</html>

showaggregates boolean false

Sets or gets the showaggregates property.

<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>Grid Custom Element</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />
    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />
    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.pager.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.sort.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.edit.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.filter.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.columnsresize.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.aggregates.js"></script>
    <script type="text/javascript">
		var adapter = new jqx.dataAdapter({
			dataType: "xml",
			dataFields: [
				{ name: 'ProductName', type: 'string' },
				{ name: 'QuantityPerUnit', type: 'int' },
				{ name: 'UnitPrice', type: 'float' },
				{ name: 'UnitsInStock', type: 'float' },
				{ name: 'Discontinued', type: 'bool' }
			],
			root: "Products",
			record: "Product",
			id: 'ProductID',
			url: "../sampledata/products.xml"
		});

		var columns = [
                  { text: 'Product Name', datafield: 'ProductName', width: 250 },
                  { text: 'Quantity per Unit', datafield: 'QuantityPerUnit', cellsalign: 'right', align: 'right', width: 200 },
                  { text: 'Unit Price', datafield: 'UnitPrice', align: 'right', cellsalign: 'right', cellsformat: 'c2', width: 200 },
                  { text: 'Units In Stock', datafield: 'UnitsInStock', cellsalign: 'right', width: 100 },
                  { text: 'Discontinued', columntype: 'checkbox', datafield: 'Discontinued' }
                ];

        JQXElements.settings["gridSettings"] =
        {
			 source:adapter, columns:columns,showaggregates:true, theme:"light"            
        }

    </script>
</head>
<body>
   <jqx-grid settings="gridSettings"></jqx-grid>
</body>
</html>

showgroupaggregates boolean false

Sets or gets the showgroupaggregates property.

<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>Grid Custom Element</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />
    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />
    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.pager.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.sort.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.edit.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.filter.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.columnsresize.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.aggregates.js"></script>
    <script type="text/javascript">
		var adapter = new jqx.dataAdapter({
			dataType: "xml",
			dataFields: [
				{ name: 'ProductName', type: 'string' },
				{ name: 'QuantityPerUnit', type: 'int' },
				{ name: 'UnitPrice', type: 'float' },
				{ name: 'UnitsInStock', type: 'float' },
				{ name: 'Discontinued', type: 'bool' }
			],
			root: "Products",
			record: "Product",
			id: 'ProductID',
			url: "../sampledata/products.xml"
		});

		var columns = [
                  { text: 'Product Name', datafield: 'ProductName', width: 250 },
                  { text: 'Quantity per Unit', datafield: 'QuantityPerUnit', cellsalign: 'right', align: 'right', width: 200 },
                  { text: 'Unit Price', datafield: 'UnitPrice', align: 'right', cellsalign: 'right', cellsformat: 'c2', width: 200 },
                  { text: 'Units In Stock', datafield: 'UnitsInStock', cellsalign: 'right', width: 100 },
                  { text: 'Discontinued', columntype: 'checkbox', datafield: 'Discontinued' }
                ];

        JQXElements.settings["gridSettings"] =
        {
			 source:adapter, columns:columns,showgroupaggregates:true, theme:"light"            
        }

    </script>
</head>
<body>
   <jqx-grid settings="gridSettings"></jqx-grid>
</body>
</html>

showeverpresentrow boolean false

Sets or gets the showeverpresentrow property.

<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>Grid Custom Element</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />
    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />
    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.pager.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.sort.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.edit.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.filter.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.columnsresize.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.aggregates.js"></script>
    <script type="text/javascript">
		var adapter = new jqx.dataAdapter({
			dataType: "xml",
			dataFields: [
				{ name: 'ProductName', type: 'string' },
				{ name: 'QuantityPerUnit', type: 'int' },
				{ name: 'UnitPrice', type: 'float' },
				{ name: 'UnitsInStock', type: 'float' },
				{ name: 'Discontinued', type: 'bool' }
			],
			root: "Products",
			record: "Product",
			id: 'ProductID',
			url: "../sampledata/products.xml"
		});

		var columns = [
                  { text: 'Product Name', datafield: 'ProductName', width: 250 },
                  { text: 'Quantity per Unit', datafield: 'QuantityPerUnit', cellsalign: 'right', align: 'right', width: 200 },
                  { text: 'Unit Price', datafield: 'UnitPrice', align: 'right', cellsalign: 'right', cellsformat: 'c2', width: 200 },
                  { text: 'Units In Stock', datafield: 'UnitsInStock', cellsalign: 'right', width: 100 },
                  { text: 'Discontinued', columntype: 'checkbox', datafield: 'Discontinued' }
                ];

        JQXElements.settings["gridSettings"] =
        {
			 source:adapter, columns:columns,showeverpresentrow:true, theme:"light"            
        }

    </script>
</head>
<body>
   <jqx-grid settings="gridSettings"></jqx-grid>
</body>
</html>

showfilterrow boolean false

Sets or gets the showfilterrow property.

<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>Grid Custom Element</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />
    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />
    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.pager.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.sort.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.edit.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.filter.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.columnsresize.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.aggregates.js"></script>
    <script type="text/javascript">
		var adapter = new jqx.dataAdapter({
			dataType: "xml",
			dataFields: [
				{ name: 'ProductName', type: 'string' },
				{ name: 'QuantityPerUnit', type: 'int' },
				{ name: 'UnitPrice', type: 'float' },
				{ name: 'UnitsInStock', type: 'float' },
				{ name: 'Discontinued', type: 'bool' }
			],
			root: "Products",
			record: "Product",
			id: 'ProductID',
			url: "../sampledata/products.xml"
		});

		var columns = [
                  { text: 'Product Name', datafield: 'ProductName', width: 250 },
                  { text: 'Quantity per Unit', datafield: 'QuantityPerUnit', cellsalign: 'right', align: 'right', width: 200 },
                  { text: 'Unit Price', datafield: 'UnitPrice', align: 'right', cellsalign: 'right', cellsformat: 'c2', width: 200 },
                  { text: 'Units In Stock', datafield: 'UnitsInStock', cellsalign: 'right', width: 100 },
                  { text: 'Discontinued', columntype: 'checkbox', datafield: 'Discontinued' }
                ];

        JQXElements.settings["gridSettings"] =
        {
			 source:adapter, columns:columns,filterable:true,showfilterrow:true, theme:"light"            
        }

    </script>
</head>
<body>
   <jqx-grid settings="gridSettings"></jqx-grid>
</body>
</html>

showemptyrow boolean true

Sets or gets the showemptyrow property.

<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>Grid Custom Element</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />
    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />
    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.pager.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.sort.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.edit.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.filter.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.columnsresize.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.aggregates.js"></script>
    <script type="text/javascript">
		var adapter = new jqx.dataAdapter({
			dataType: "xml",
			dataFields: [
				{ name: 'ProductName', type: 'string' },
				{ name: 'QuantityPerUnit', type: 'int' },
				{ name: 'UnitPrice', type: 'float' },
				{ name: 'UnitsInStock', type: 'float' },
				{ name: 'Discontinued', type: 'bool' }
			],
			root: "Products",
			record: "Product",
			id: 'ProductID',
			url: "../sampledata/products.xml"
		});

		var columns = [
                  { text: 'Product Name', datafield: 'ProductName', width: 250 },
                  { text: 'Quantity per Unit', datafield: 'QuantityPerUnit', cellsalign: 'right', align: 'right', width: 200 },
                  { text: 'Unit Price', datafield: 'UnitPrice', align: 'right', cellsalign: 'right', cellsformat: 'c2', width: 200 },
                  { text: 'Units In Stock', datafield: 'UnitsInStock', cellsalign: 'right', width: 100 },
                  { text: 'Discontinued', columntype: 'checkbox', datafield: 'Discontinued' }
                ];

        JQXElements.settings["gridSettings"] =
        {
			 source:adapter, columns:columns,showemptyrow:false, theme:"light"            
        }

    </script>
</head>
<body>
   <jqx-grid settings="gridSettings"></jqx-grid>
</body>
</html>

showstatusbar boolean false

Sets or gets the showstatusbar property.

<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>Grid Custom Element</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />
    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />
    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.pager.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.sort.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.edit.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.filter.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.columnsresize.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.aggregates.js"></script>
    <script type="text/javascript">
		var adapter = new jqx.dataAdapter({
			dataType: "xml",
			dataFields: [
				{ name: 'ProductName', type: 'string' },
				{ name: 'QuantityPerUnit', type: 'int' },
				{ name: 'UnitPrice', type: 'float' },
				{ name: 'UnitsInStock', type: 'float' },
				{ name: 'Discontinued', type: 'bool' }
			],
			root: "Products",
			record: "Product",
			id: 'ProductID',
			url: "../sampledata/products.xml"
		});

		var columns = [
                  { text: 'Product Name', datafield: 'ProductName', width: 250 },
                  { text: 'Quantity per Unit', datafield: 'QuantityPerUnit', cellsalign: 'right', align: 'right', width: 200 },
                  { text: 'Unit Price', datafield: 'UnitPrice', align: 'right', cellsalign: 'right', cellsformat: 'c2', width: 200 },
                  { text: 'Units In Stock', datafield: 'UnitsInStock', cellsalign: 'right', width: 100 },
                  { text: 'Discontinued', columntype: 'checkbox', datafield: 'Discontinued' }
                ];

        JQXElements.settings["gridSettings"] =
        {
			 source:adapter, columns:columns,showstatusbar:true, theme:"light"            
        }

    </script>
</head>
<body>
   <jqx-grid settings="gridSettings"></jqx-grid>
</body>
</html>

statusbarheight number 34

Sets or gets the statusbarheight property.

<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>Grid Custom Element</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />
    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />
    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.pager.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.sort.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.edit.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.filter.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.columnsresize.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.aggregates.js"></script>
    <script type="text/javascript">
		var adapter = new jqx.dataAdapter({
			dataType: "xml",
			dataFields: [
				{ name: 'ProductName', type: 'string' },
				{ name: 'QuantityPerUnit', type: 'int' },
				{ name: 'UnitPrice', type: 'float' },
				{ name: 'UnitsInStock', type: 'float' },
				{ name: 'Discontinued', type: 'bool' }
			],
			root: "Products",
			record: "Product",
			id: 'ProductID',
			url: "../sampledata/products.xml"
		});

		var columns = [
                  { text: 'Product Name', datafield: 'ProductName', width: 250 },
                  { text: 'Quantity per Unit', datafield: 'QuantityPerUnit', cellsalign: 'right', align: 'right', width: 200 },
                  { text: 'Unit Price', datafield: 'UnitPrice', align: 'right', cellsalign: 'right', cellsformat: 'c2', width: 200 },
                  { text: 'Units In Stock', datafield: 'UnitsInStock', cellsalign: 'right', width: 100 },
                  { text: 'Discontinued', columntype: 'checkbox', datafield: 'Discontinued' }
                ];

        JQXElements.settings["gridSettings"] =
        {
			 source:adapter, columns:columns,showstatusbar:true,statusbarheight:50, theme:"light"            
        }

    </script>
</head>
<body>
   <jqx-grid settings="gridSettings"></jqx-grid>
</body>
</html>

showtoolbar boolean false

Sets or gets the showtoolbar property.

<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>Grid Custom Element</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />
    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />
    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.pager.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.sort.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.edit.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.filter.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.columnsresize.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.aggregates.js"></script>
    <script type="text/javascript">
		var adapter = new jqx.dataAdapter({
			dataType: "xml",
			dataFields: [
				{ name: 'ProductName', type: 'string' },
				{ name: 'QuantityPerUnit', type: 'int' },
				{ name: 'UnitPrice', type: 'float' },
				{ name: 'UnitsInStock', type: 'float' },
				{ name: 'Discontinued', type: 'bool' }
			],
			root: "Products",
			record: "Product",
			id: 'ProductID',
			url: "../sampledata/products.xml"
		});

		var columns = [
                  { text: 'Product Name', datafield: 'ProductName', width: 250 },
                  { text: 'Quantity per Unit', datafield: 'QuantityPerUnit', cellsalign: 'right', align: 'right', width: 200 },
                  { text: 'Unit Price', datafield: 'UnitPrice', align: 'right', cellsalign: 'right', cellsformat: 'c2', width: 200 },
                  { text: 'Units In Stock', datafield: 'UnitsInStock', cellsalign: 'right', width: 100 },
                  { text: 'Discontinued', columntype: 'checkbox', datafield: 'Discontinued' }
                ];

        JQXElements.settings["gridSettings"] =
        {
			 source:adapter, columns:columns,showtoolbar:true, theme:"light"            
        }

    </script>
</head>
<body>
   <jqx-grid settings="gridSettings"></jqx-grid>
</body>
</html>

selectionmode string 'singlerow'

Sets or gets the selectionmode property.

<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>Grid Custom Element</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />
    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />
    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.pager.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.sort.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.edit.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.filter.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.columnsresize.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.aggregates.js"></script>
    <script type="text/javascript">
		var adapter = new jqx.dataAdapter({
			dataType: "xml",
			dataFields: [
				{ name: 'ProductName', type: 'string' },
				{ name: 'QuantityPerUnit', type: 'int' },
				{ name: 'UnitPrice', type: 'float' },
				{ name: 'UnitsInStock', type: 'float' },
				{ name: 'Discontinued', type: 'bool' }
			],
			root: "Products",
			record: "Product",
			id: 'ProductID',
			url: "../sampledata/products.xml"
		});

		var columns = [
                  { text: 'Product Name', datafield: 'ProductName', width: 250 },
                  { text: 'Quantity per Unit', datafield: 'QuantityPerUnit', cellsalign: 'right', align: 'right', width: 200 },
                  { text: 'Unit Price', datafield: 'UnitPrice', align: 'right', cellsalign: 'right', cellsformat: 'c2', width: 200 },
                  { text: 'Units In Stock', datafield: 'UnitsInStock', cellsalign: 'right', width: 100 },
                  { text: 'Discontinued', columntype: 'checkbox', datafield: 'Discontinued' }
                ];

        JQXElements.settings["gridSettings"] =
        {
			 source:adapter, columns:columns, selectionmode:"multiplerows", theme:"light"            
        }

    </script>
</head>
<body>
   <jqx-grid settings="gridSettings"></jqx-grid>
</body>
</html>

updatefilterconditions function null

Sets or gets the updatefilterconditions property.

<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>Grid Custom Element</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />
    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />
    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.pager.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.sort.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.edit.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.filter.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.columnsresize.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.aggregates.js"></script>
    <script type="text/javascript">
		var adapter = new jqx.dataAdapter({
			dataType: "xml",
			dataFields: [
				{ name: 'ProductName', type: 'string' },
				{ name: 'QuantityPerUnit', type: 'int' },
				{ name: 'UnitPrice', type: 'float' },
				{ name: 'UnitsInStock', type: 'float' },
				{ name: 'Discontinued', type: 'bool' }
			],
			root: "Products",
			record: "Product",
			id: 'ProductID',
			url: "../sampledata/products.xml"
		});

		var columns = [
                  { text: 'Product Name', datafield: 'ProductName', width: 250 },
                  { text: 'Quantity per Unit', datafield: 'QuantityPerUnit', cellsalign: 'right', align: 'right', width: 200 },
                  { text: 'Unit Price', datafield: 'UnitPrice', align: 'right', cellsalign: 'right', cellsformat: 'c2', width: 200 },
                  { text: 'Units In Stock', datafield: 'UnitsInStock', cellsalign: 'right', width: 100 },
                  { text: 'Discontinued', columntype: 'checkbox', datafield: 'Discontinued' }
                ];

        JQXElements.settings["gridSettings"] =
        {
			 source:adapter, columns:columns, updatefilterconditions:"updatefilterconditions", theme:"light"            
        }

    </script>
</head>
<body>
   <jqx-grid settings="gridSettings"></jqx-grid>
</body>
</html>

updatefilterpanel function null

Sets or gets the updatefilterpanel property.

<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>Grid Custom Element</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />
    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />
    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.pager.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.sort.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.edit.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.filter.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.columnsresize.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.aggregates.js"></script>
    <script type="text/javascript">
		var adapter = new jqx.dataAdapter({
			dataType: "xml",
			dataFields: [
				{ name: 'ProductName', type: 'string' },
				{ name: 'QuantityPerUnit', type: 'int' },
				{ name: 'UnitPrice', type: 'float' },
				{ name: 'UnitsInStock', type: 'float' },
				{ name: 'Discontinued', type: 'bool' }
			],
			root: "Products",
			record: "Product",
			id: 'ProductID',
			url: "../sampledata/products.xml"
		});

		var columns = [
                  { text: 'Product Name', datafield: 'ProductName', width: 250 },
                  { text: 'Quantity per Unit', datafield: 'QuantityPerUnit', cellsalign: 'right', align: 'right', width: 200 },
                  { text: 'Unit Price', datafield: 'UnitPrice', align: 'right', cellsalign: 'right', cellsformat: 'c2', width: 200 },
                  { text: 'Units In Stock', datafield: 'UnitsInStock', cellsalign: 'right', width: 100 },
                  { text: 'Discontinued', columntype: 'checkbox', datafield: 'Discontinued' }
                ];

        JQXElements.settings["gridSettings"] =
        {
			 source:adapter, columns:columns, updatefilterpanel:"updatefilterpanel", theme:"light"            
        }

    </script>
</head>
<body>
   <jqx-grid settings="gridSettings"></jqx-grid>
</body>
</html>

theme string ''

Sets or gets the theme property.

<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>Grid Custom Element</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />
    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />
    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.pager.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.sort.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.edit.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.filter.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.columnsresize.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.aggregates.js"></script>
    <script type="text/javascript">
		var adapter = new jqx.dataAdapter({
			dataType: "xml",
			dataFields: [
				{ name: 'ProductName', type: 'string' },
				{ name: 'QuantityPerUnit', type: 'int' },
				{ name: 'UnitPrice', type: 'float' },
				{ name: 'UnitsInStock', type: 'float' },
				{ name: 'Discontinued', type: 'bool' }
			],
			root: "Products",
			record: "Product",
			id: 'ProductID',
			url: "../sampledata/products.xml"
		});

		var columns = [
                  { text: 'Product Name', datafield: 'ProductName', width: 250 },
                  { text: 'Quantity per Unit', datafield: 'QuantityPerUnit', cellsalign: 'right', align: 'right', width: 200 },
                  { text: 'Unit Price', datafield: 'UnitPrice', align: 'right', cellsalign: 'right', cellsformat: 'c2', width: 200 },
                  { text: 'Units In Stock', datafield: 'UnitsInStock', cellsalign: 'right', width: 100 },
                  { text: 'Discontinued', columntype: 'checkbox', datafield: 'Discontinued' }
                ];

        JQXElements.settings["gridSettings"] =
        {
			 source:adapter, columns:columns, theme:"light"            
        }

    </script>
</head>
<body>
   <jqx-grid settings="gridSettings"></jqx-grid>
</body>
</html>

toolbarheight number 34

Sets or gets the toolbarheight property.

<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>Grid Custom Element</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />
    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />
    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.pager.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.sort.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.edit.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.filter.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.columnsresize.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.aggregates.js"></script>
    <script type="text/javascript">
		var adapter = new jqx.dataAdapter({
			dataType: "xml",
			dataFields: [
				{ name: 'ProductName', type: 'string' },
				{ name: 'QuantityPerUnit', type: 'int' },
				{ name: 'UnitPrice', type: 'float' },
				{ name: 'UnitsInStock', type: 'float' },
				{ name: 'Discontinued', type: 'bool' }
			],
			root: "Products",
			record: "Product",
			id: 'ProductID',
			url: "../sampledata/products.xml"
		});

		var columns = [
                  { text: 'Product Name', datafield: 'ProductName', width: 250 },
                  { text: 'Quantity per Unit', datafield: 'QuantityPerUnit', cellsalign: 'right', align: 'right', width: 200 },
                  { text: 'Unit Price', datafield: 'UnitPrice', align: 'right', cellsalign: 'right', cellsformat: 'c2', width: 200 },
                  { text: 'Units In Stock', datafield: 'UnitsInStock', cellsalign: 'right', width: 100 },
                  { text: 'Discontinued', columntype: 'checkbox', datafield: 'Discontinued' }
                ];

        JQXElements.settings["gridSettings"] =
        {
			 source:adapter, columns:columns,toolbarheight:40,showtoolbar:true, theme:"light"            
        }

    </script>
</head>
<body>
   <jqx-grid settings="gridSettings"></jqx-grid>
</body>
</html>

autoheight boolean false

Sets or gets the autoheight property.

<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>Grid Custom Element</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />
    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />
    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.pager.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.sort.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.edit.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.filter.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.columnsresize.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.aggregates.js"></script>
    <script type="text/javascript">
		var adapter = new jqx.dataAdapter({
			dataType: "xml",
			dataFields: [
				{ name: 'ProductName', type: 'string' },
				{ name: 'QuantityPerUnit', type: 'int' },
				{ name: 'UnitPrice', type: 'float' },
				{ name: 'UnitsInStock', type: 'float' },
				{ name: 'Discontinued', type: 'bool' }
			],
			root: "Products",
			record: "Product",
			id: 'ProductID',
			url: "../sampledata/products.xml"
		});

		var columns = [
                  { text: 'Product Name', datafield: 'ProductName', width: 250 },
                  { text: 'Quantity per Unit', datafield: 'QuantityPerUnit', cellsalign: 'right', align: 'right', width: 200 },
                  { text: 'Unit Price', datafield: 'UnitPrice', align: 'right', cellsalign: 'right', cellsformat: 'c2', width: 200 },
                  { text: 'Units In Stock', datafield: 'UnitsInStock', cellsalign: 'right', width: 100 },
                  { text: 'Discontinued', columntype: 'checkbox', datafield: 'Discontinued' }
                ];

        JQXElements.settings["gridSettings"] =
        {
			 source:adapter, columns:columns,pageable:true,autoheight:true, theme:"light"            
        }

    </script>
</head>
<body>
   <jqx-grid settings="gridSettings"></jqx-grid>
</body>
</html>

autorowheight boolean false

Sets or gets the autorowheight property.

<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>Grid Custom Element</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />
    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />
    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.pager.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.sort.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.edit.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.filter.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.columnsresize.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.aggregates.js"></script>
    <script type="text/javascript">
		var adapter = new jqx.dataAdapter({
			dataType: "xml",
			dataFields: [
				{ name: 'ProductName', type: 'string' },
				{ name: 'QuantityPerUnit', type: 'int' },
				{ name: 'UnitPrice', type: 'float' },
				{ name: 'UnitsInStock', type: 'float' },
				{ name: 'Discontinued', type: 'bool' }
			],
			root: "Products",
			record: "Product",
			id: 'ProductID',
			url: "../sampledata/products.xml"
		});

		var columns = [
                  { text: 'Product Name', datafield: 'ProductName', width: 250 },
                  { text: 'Quantity per Unit', datafield: 'QuantityPerUnit', cellsalign: 'right', align: 'right', width: 200 },
                  { text: 'Unit Price', datafield: 'UnitPrice', align: 'right', cellsalign: 'right', cellsformat: 'c2', width: 200 },
                  { text: 'Units In Stock', datafield: 'UnitsInStock', cellsalign: 'right', width: 100 },
                  { text: 'Discontinued', columntype: 'checkbox', datafield: 'Discontinued' }
                ];

        JQXElements.settings["gridSettings"] =
        {
			 source:adapter, columns:columns,autorowheight:true,autoheight:true,pageable:true, theme:"light"            
        }

    </script>
</head>
<body>
   <jqx-grid settings="gridSettings"></jqx-grid>
</body>
</html>

columnsheight number 28

Sets or gets the columnsheight property.

<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>Grid Custom Element</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />
    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />
    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.pager.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.sort.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.edit.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.filter.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.columnsresize.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.aggregates.js"></script>
    <script type="text/javascript">
		var adapter = new jqx.dataAdapter({
			dataType: "xml",
			dataFields: [
				{ name: 'ProductName', type: 'string' },
				{ name: 'QuantityPerUnit', type: 'int' },
				{ name: 'UnitPrice', type: 'float' },
				{ name: 'UnitsInStock', type: 'float' },
				{ name: 'Discontinued', type: 'bool' }
			],
			root: "Products",
			record: "Product",
			id: 'ProductID',
			url: "../sampledata/products.xml"
		});

		var columns = [
                  { text: 'Product Name', datafield: 'ProductName', width: 250 },
                  { text: 'Quantity per Unit', datafield: 'QuantityPerUnit', cellsalign: 'right', align: 'right', width: 200 },
                  { text: 'Unit Price', datafield: 'UnitPrice', align: 'right', cellsalign: 'right', cellsformat: 'c2', width: 200 },
                  { text: 'Units In Stock', datafield: 'UnitsInStock', cellsalign: 'right', width: 100 },
                  { text: 'Discontinued', columntype: 'checkbox', datafield: 'Discontinued' }
                ];

        JQXElements.settings["gridSettings"] =
        {
			 source:adapter, columns:columns,columnsheight:33, theme:"light"            
        }

    </script>
</head>
<body>
   <jqx-grid settings="gridSettings"></jqx-grid>
</body>
</html>

deferreddatafields array []

Sets or gets the deferreddatafields property.

<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>Grid Custom Element</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />
    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />
    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.pager.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.sort.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.edit.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.filter.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.columnsresize.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.aggregates.js"></script>
    <script type="text/javascript">
		var adapter = new jqx.dataAdapter({
			dataType: "xml",
			dataFields: [
				{ name: 'ProductName', type: 'string' },
				{ name: 'QuantityPerUnit', type: 'int' },
				{ name: 'UnitPrice', type: 'float' },
				{ name: 'UnitsInStock', type: 'float' },
				{ name: 'Discontinued', type: 'bool' }
			],
			root: "Products",
			record: "Product",
			id: 'ProductID',
			url: "../sampledata/products.xml"
		});

		var columns = [
                  { text: 'Product Name', datafield: 'ProductName', width: 250 },
                  { text: 'Quantity per Unit', datafield: 'QuantityPerUnit', cellsalign: 'right', align: 'right', width: 200 },
                  { text: 'Unit Price', datafield: 'UnitPrice', align: 'right', cellsalign: 'right', cellsformat: 'c2', width: 200 },
                  { text: 'Units In Stock', datafield: 'UnitsInStock', cellsalign: 'right', width: 100 },
                  { text: 'Discontinued', columntype: 'checkbox', datafield: 'Discontinued' }
                ];

        JQXElements.settings["gridSettings"] =
        {
			 source:adapter, columns:columns, deferreddatafields:"['firstname']", theme:"light"            
        }

    </script>
</head>
<body>
   <jqx-grid settings="gridSettings"></jqx-grid>
</body>
</html>

groupsheaderheight number 34

Sets or gets the groupsheaderheight property.

<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>Grid Custom Element</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />
    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />
    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.pager.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.sort.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.edit.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.filter.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.columnsresize.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.aggregates.js"></script>
    <script type="text/javascript">
		var adapter = new jqx.dataAdapter({
			dataType: "xml",
			dataFields: [
				{ name: 'ProductName', type: 'string' },
				{ name: 'QuantityPerUnit', type: 'int' },
				{ name: 'UnitPrice', type: 'float' },
				{ name: 'UnitsInStock', type: 'float' },
				{ name: 'Discontinued', type: 'bool' }
			],
			root: "Products",
			record: "Product",
			id: 'ProductID',
			url: "../sampledata/products.xml"
		});

		var columns = [
                  { text: 'Product Name', datafield: 'ProductName', width: 250 },
                  { text: 'Quantity per Unit', datafield: 'QuantityPerUnit', cellsalign: 'right', align: 'right', width: 200 },
                  { text: 'Unit Price', datafield: 'UnitPrice', align: 'right', cellsalign: 'right', cellsformat: 'c2', width: 200 },
                  { text: 'Units In Stock', datafield: 'UnitsInStock', cellsalign: 'right', width: 100 },
                  { text: 'Discontinued', columntype: 'checkbox', datafield: 'Discontinued' }
                ];

        JQXElements.settings["gridSettings"] =
        {
			 source:adapter, columns:columns,groupable:true,groupsheaderheight:60, theme:"light"            
        }

    </script>
</head>
<body>
   <jqx-grid settings="gridSettings"></jqx-grid>
</body>
</html>

groupindentwidth number 20

Sets or gets the groupindentwidth property.

<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>Grid Custom Element</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />
    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />
    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.pager.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.sort.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.edit.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.filter.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.columnsresize.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.aggregates.js"></script>
    <script type="text/javascript">
		var adapter = new jqx.dataAdapter({
			dataType: "xml",
			dataFields: [
				{ name: 'ProductName', type: 'string' },
				{ name: 'QuantityPerUnit', type: 'int' },
				{ name: 'UnitPrice', type: 'float' },
				{ name: 'UnitsInStock', type: 'float' },
				{ name: 'Discontinued', type: 'bool' }
			],
			root: "Products",
			record: "Product",
			id: 'ProductID',
			url: "../sampledata/products.xml"
		});

		var columns = [
                  { text: 'Product Name', datafield: 'ProductName', width: 250 },
                  { text: 'Quantity per Unit', datafield: 'QuantityPerUnit', cellsalign: 'right', align: 'right', width: 200 },
                  { text: 'Unit Price', datafield: 'UnitPrice', align: 'right', cellsalign: 'right', cellsformat: 'c2', width: 200 },
                  { text: 'Units In Stock', datafield: 'UnitsInStock', cellsalign: 'right', width: 100 },
                  { text: 'Discontinued', columntype: 'checkbox', datafield: 'Discontinued' }
                ];

        JQXElements.settings["gridSettings"] =
        {
			 source:adapter, columns:columns,groupindentwidth:40,groupable:true, theme:"light"            
        }

    </script>
</head>
<body>
   <jqx-grid settings="gridSettings"></jqx-grid>
</body>
</html>

height string | number 400

Sets or gets the height property.

<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>Grid Custom Element</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />
    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />
    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.pager.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.sort.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.edit.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.filter.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.columnsresize.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.aggregates.js"></script>
    <script type="text/javascript">
		var adapter = new jqx.dataAdapter({
			dataType: "xml",
			dataFields: [
				{ name: 'ProductName', type: 'string' },
				{ name: 'QuantityPerUnit', type: 'int' },
				{ name: 'UnitPrice', type: 'float' },
				{ name: 'UnitsInStock', type: 'float' },
				{ name: 'Discontinued', type: 'bool' }
			],
			root: "Products",
			record: "Product",
			id: 'ProductID',
			url: "../sampledata/products.xml"
		});

		var columns = [
                  { text: 'Product Name', datafield: 'ProductName', width: 250 },
                  { text: 'Quantity per Unit', datafield: 'QuantityPerUnit', cellsalign: 'right', align: 'right', width: 200 },
                  { text: 'Unit Price', datafield: 'UnitPrice', align: 'right', cellsalign: 'right', cellsformat: 'c2', width: 200 },
                  { text: 'Units In Stock', datafield: 'UnitsInStock', cellsalign: 'right', width: 100 },
                  { text: 'Discontinued', columntype: 'checkbox', datafield: 'Discontinued' }
                ];

        JQXElements.settings["gridSettings"] =
        {
			 source:adapter, columns:columns,height:500, theme:"light"            
        }

    </script>
</head>
<body>
   <jqx-grid settings="gridSettings"></jqx-grid>
</body>
</html>

pagerheight number 30

Sets or gets the pagerheight property.

<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>Grid Custom Element</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />
    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />
    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.pager.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.sort.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.edit.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.filter.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.columnsresize.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.aggregates.js"></script>
    <script type="text/javascript">
		var adapter = new jqx.dataAdapter({
			dataType: "xml",
			dataFields: [
				{ name: 'ProductName', type: 'string' },
				{ name: 'QuantityPerUnit', type: 'int' },
				{ name: 'UnitPrice', type: 'float' },
				{ name: 'UnitsInStock', type: 'float' },
				{ name: 'Discontinued', type: 'bool' }
			],
			root: "Products",
			record: "Product",
			id: 'ProductID',
			url: "../sampledata/products.xml"
		});

		var columns = [
                  { text: 'Product Name', datafield: 'ProductName', width: 250 },
                  { text: 'Quantity per Unit', datafield: 'QuantityPerUnit', cellsalign: 'right', align: 'right', width: 200 },
                  { text: 'Unit Price', datafield: 'UnitPrice', align: 'right', cellsalign: 'right', cellsformat: 'c2', width: 200 },
                  { text: 'Units In Stock', datafield: 'UnitsInStock', cellsalign: 'right', width: 100 },
                  { text: 'Discontinued', columntype: 'checkbox', datafield: 'Discontinued' }
                ];

        JQXElements.settings["gridSettings"] =
        {
			 source:adapter, columns:columns,pagerheight:32,pageable:true, theme:"light"            
        }

    </script>
</head>
<body>
   <jqx-grid settings="gridSettings"></jqx-grid>
</body>
</html>

rowsheight number 28

Sets or gets the rowsheight property.

<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>Grid Custom Element</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />
    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />
    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.pager.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.sort.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.edit.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.filter.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.columnsresize.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.aggregates.js"></script>
    <script type="text/javascript">
		var adapter = new jqx.dataAdapter({
			dataType: "xml",
			dataFields: [
				{ name: 'ProductName', type: 'string' },
				{ name: 'QuantityPerUnit', type: 'int' },
				{ name: 'UnitPrice', type: 'float' },
				{ name: 'UnitsInStock', type: 'float' },
				{ name: 'Discontinued', type: 'bool' }
			],
			root: "Products",
			record: "Product",
			id: 'ProductID',
			url: "../sampledata/products.xml"
		});

		var columns = [
                  { text: 'Product Name', datafield: 'ProductName', width: 250 },
                  { text: 'Quantity per Unit', datafield: 'QuantityPerUnit', cellsalign: 'right', align: 'right', width: 200 },
                  { text: 'Unit Price', datafield: 'UnitPrice', align: 'right', cellsalign: 'right', cellsformat: 'c2', width: 200 },
                  { text: 'Units In Stock', datafield: 'UnitsInStock', cellsalign: 'right', width: 100 },
                  { text: 'Discontinued', columntype: 'checkbox', datafield: 'Discontinued' }
                ];

        JQXElements.settings["gridSettings"] =
        {
			 source:adapter, columns:columns,rowsheight:30, theme:"light"            
        }

    </script>
</head>
<body>
   <jqx-grid settings="gridSettings"></jqx-grid>
</body>
</html>

scrollbarsize number 15

Sets or gets the scrollbarsize property.

<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>Grid Custom Element</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />
    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />
    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.pager.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.sort.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.edit.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.filter.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.columnsresize.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.aggregates.js"></script>
    <script type="text/javascript">
		var adapter = new jqx.dataAdapter({
			dataType: "xml",
			dataFields: [
				{ name: 'ProductName', type: 'string' },
				{ name: 'QuantityPerUnit', type: 'int' },
				{ name: 'UnitPrice', type: 'float' },
				{ name: 'UnitsInStock', type: 'float' },
				{ name: 'Discontinued', type: 'bool' }
			],
			root: "Products",
			record: "Product",
			id: 'ProductID',
			url: "../sampledata/products.xml"
		});

		var columns = [
                  { text: 'Product Name', datafield: 'ProductName', width: 250 },
                  { text: 'Quantity per Unit', datafield: 'QuantityPerUnit', cellsalign: 'right', align: 'right', width: 200 },
                  { text: 'Unit Price', datafield: 'UnitPrice', align: 'right', cellsalign: 'right', cellsformat: 'c2', width: 200 },
                  { text: 'Units In Stock', datafield: 'UnitsInStock', cellsalign: 'right', width: 100 },
                  { text: 'Discontinued', columntype: 'checkbox', datafield: 'Discontinued' }
                ];

        JQXElements.settings["gridSettings"] =
        {
			 source:adapter, columns:columns,scrollbarsize:20, theme:"light"            
        }

    </script>
</head>
<body>
   <jqx-grid settings="gridSettings"></jqx-grid>
</body>
</html>

scrollmode string "default"

Sets or gets the scrollmode property.

<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>Grid Custom Element</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />
    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />
    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.pager.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.sort.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.edit.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.filter.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.columnsresize.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.aggregates.js"></script>
    <script type="text/javascript">
		var adapter = new jqx.dataAdapter({
			dataType: "xml",
			dataFields: [
				{ name: 'ProductName', type: 'string' },
				{ name: 'QuantityPerUnit', type: 'int' },
				{ name: 'UnitPrice', type: 'float' },
				{ name: 'UnitsInStock', type: 'float' },
				{ name: 'Discontinued', type: 'bool' }
			],
			root: "Products",
			record: "Product",
			id: 'ProductID',
			url: "../sampledata/products.xml"
		});

		var columns = [
                  { text: 'Product Name', datafield: 'ProductName', width: 250 },
                  { text: 'Quantity per Unit', datafield: 'QuantityPerUnit', cellsalign: 'right', align: 'right', width: 200 },
                  { text: 'Unit Price', datafield: 'UnitPrice', align: 'right', cellsalign: 'right', cellsformat: 'c2', width: 200 },
                  { text: 'Units In Stock', datafield: 'UnitsInStock', cellsalign: 'right', width: 100 },
                  { text: 'Discontinued', columntype: 'checkbox', datafield: 'Discontinued' }
                ];

        JQXElements.settings["gridSettings"] =
        {
			 source:adapter, columns:columns, scrollmode:"logical", theme:"light"            
        }

    </script>
</head>
<body>
   <jqx-grid settings="gridSettings"></jqx-grid>
</body>
</html>

scrollfeedback function null

Sets or gets the scrollfeedback property.

<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>Grid Custom Element</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />
    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />
    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.pager.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.sort.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.edit.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.filter.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.columnsresize.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.aggregates.js"></script>
    <script type="text/javascript">
		var adapter = new jqx.dataAdapter({
			dataType: "xml",
			dataFields: [
				{ name: 'ProductName', type: 'string' },
				{ name: 'QuantityPerUnit', type: 'int' },
				{ name: 'UnitPrice', type: 'float' },
				{ name: 'UnitsInStock', type: 'float' },
				{ name: 'Discontinued', type: 'bool' }
			],
			root: "Products",
			record: "Product",
			id: 'ProductID',
			url: "../sampledata/products.xml"
		});

		var columns = [
                  { text: 'Product Name', datafield: 'ProductName', width: 250 },
                  { text: 'Quantity per Unit', datafield: 'QuantityPerUnit', cellsalign: 'right', align: 'right', width: 200 },
                  { text: 'Unit Price', datafield: 'UnitPrice', align: 'right', cellsalign: 'right', cellsformat: 'c2', width: 200 },
                  { text: 'Units In Stock', datafield: 'UnitsInStock', cellsalign: 'right', width: 100 },
                  { text: 'Discontinued', columntype: 'checkbox', datafield: 'Discontinued' }
                ];

        JQXElements.settings["gridSettings"] =
        {
			 source:adapter, columns:columns, scrollfeedback:"scrollfeedback", scrollmode:"deferred", theme:"light"            
        }

    </script>
</head>
<body>
   <jqx-grid settings="gridSettings"></jqx-grid>
</body>
</html>

width string | number 600

Sets or gets the width property.

<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>Grid Custom Element</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />
    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />
    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.pager.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.sort.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.edit.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.filter.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.columnsresize.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.aggregates.js"></script>
    <script type="text/javascript">
		var adapter = new jqx.dataAdapter({
			dataType: "xml",
			dataFields: [
				{ name: 'ProductName', type: 'string' },
				{ name: 'QuantityPerUnit', type: 'int' },
				{ name: 'UnitPrice', type: 'float' },
				{ name: 'UnitsInStock', type: 'float' },
				{ name: 'Discontinued', type: 'bool' }
			],
			root: "Products",
			record: "Product",
			id: 'ProductID',
			url: "../sampledata/products.xml"
		});

		var columns = [
                  { text: 'Product Name', datafield: 'ProductName', width: 250 },
                  { text: 'Quantity per Unit', datafield: 'QuantityPerUnit', cellsalign: 'right', align: 'right', width: 200 },
                  { text: 'Unit Price', datafield: 'UnitPrice', align: 'right', cellsalign: 'right', cellsformat: 'c2', width: 200 },
                  { text: 'Units In Stock', datafield: 'UnitsInStock', cellsalign: 'right', width: 100 },
                  { text: 'Discontinued', columntype: 'checkbox', datafield: 'Discontinued' }
                ];

        JQXElements.settings["gridSettings"] =
        {
			 source:adapter, columns:columns, theme:"light"            
        }

    </script>
</head>
<body>
   <jqx-grid settings="gridSettings"></jqx-grid>
</body>
</html>

autosavestate boolean false

Sets or gets the autosavestate property.

<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>Grid Custom Element</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />
    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />
    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.pager.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.sort.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.edit.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.filter.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.columnsresize.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.aggregates.js"></script>
    <script type="text/javascript">
		var adapter = new jqx.dataAdapter({
			dataType: "xml",
			dataFields: [
				{ name: 'ProductName', type: 'string' },
				{ name: 'QuantityPerUnit', type: 'int' },
				{ name: 'UnitPrice', type: 'float' },
				{ name: 'UnitsInStock', type: 'float' },
				{ name: 'Discontinued', type: 'bool' }
			],
			root: "Products",
			record: "Product",
			id: 'ProductID',
			url: "../sampledata/products.xml"
		});

		var columns = [
                  { text: 'Product Name', datafield: 'ProductName', width: 250 },
                  { text: 'Quantity per Unit', datafield: 'QuantityPerUnit', cellsalign: 'right', align: 'right', width: 200 },
                  { text: 'Unit Price', datafield: 'UnitPrice', align: 'right', cellsalign: 'right', cellsformat: 'c2', width: 200 },
                  { text: 'Units In Stock', datafield: 'UnitsInStock', cellsalign: 'right', width: 100 },
                  { text: 'Discontinued', columntype: 'checkbox', datafield: 'Discontinued' }
                ];

        JQXElements.settings["gridSettings"] =
        {
			 source:adapter, columns:columns, theme:"light",autoloadstate:true,autosavestate:true            
        }

    </script>
</head>
<body>
   <jqx-grid settings="gridSettings"></jqx-grid>
</body>
</html>

autoloadstate boolean false

Sets or gets the autoloadstate property.

<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>Grid Custom Element</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />
    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />
    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.pager.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.sort.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.edit.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.filter.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.columnsresize.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.aggregates.js"></script>
    <script type="text/javascript">
		var adapter = new jqx.dataAdapter({
			dataType: "xml",
			dataFields: [
				{ name: 'ProductName', type: 'string' },
				{ name: 'QuantityPerUnit', type: 'int' },
				{ name: 'UnitPrice', type: 'float' },
				{ name: 'UnitsInStock', type: 'float' },
				{ name: 'Discontinued', type: 'bool' }
			],
			root: "Products",
			record: "Product",
			id: 'ProductID',
			url: "../sampledata/products.xml"
		});

		var columns = [
                  { text: 'Product Name', datafield: 'ProductName', width: 250 },
                  { text: 'Quantity per Unit', datafield: 'QuantityPerUnit', cellsalign: 'right', align: 'right', width: 200 },
                  { text: 'Unit Price', datafield: 'UnitPrice', align: 'right', cellsalign: 'right', cellsformat: 'c2', width: 200 },
                  { text: 'Units In Stock', datafield: 'UnitsInStock', cellsalign: 'right', width: 100 },
                  { text: 'Discontinued', columntype: 'checkbox', datafield: 'Discontinued' }
                ];

        JQXElements.settings["gridSettings"] =
        {
			 source:adapter, columns:columns, theme:"light",autoloadstate:true,autosavestate:true            
        }

    </script>
</head>
<body>
   <jqx-grid settings="gridSettings"></jqx-grid>
</body>
</html>

columns array []

Sets or gets the columns property.

<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>Grid Custom Element</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />
    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />
    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.pager.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.sort.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.edit.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.filter.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.columnsresize.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.aggregates.js"></script>
    <script type="text/javascript">
		var adapter = new jqx.dataAdapter({
			dataType: "xml",
			dataFields: [
				{ name: 'ProductName', type: 'string' },
				{ name: 'QuantityPerUnit', type: 'int' },
				{ name: 'UnitPrice', type: 'float' },
				{ name: 'UnitsInStock', type: 'float' },
				{ name: 'Discontinued', type: 'bool' }
			],
			root: "Products",
			record: "Product",
			id: 'ProductID',
			url: "../sampledata/products.xml"
		});

		var columns = [
                  { text: 'Product Name', datafield: 'ProductName', width: 250 },
                  { text: 'Quantity per Unit', datafield: 'QuantityPerUnit', cellsalign: 'right', align: 'right', width: 200 },
                  { text: 'Unit Price', datafield: 'UnitPrice', align: 'right', cellsalign: 'right', cellsformat: 'c2', width: 200 },
                  { text: 'Units In Stock', datafield: 'UnitsInStock', cellsalign: 'right', width: 100 },
                  { text: 'Discontinued', columntype: 'checkbox', datafield: 'Discontinued' }
                ];

        JQXElements.settings["gridSettings"] =
        {
			 source:adapter, columns:columns, theme:"light"            
        }

    </script>
</head>
<body>
   <jqx-grid settings="gridSettings"></jqx-grid>
</body>
</html>

columngroups array []

Sets or gets the columngroups property.

<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>Grid Custom Element</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />
    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />
    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.pager.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.sort.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.edit.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.filter.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.columnsresize.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.aggregates.js"></script>
    <script type="text/javascript">
		var adapter = new jqx.dataAdapter({
			dataType: "xml",
			dataFields: [
				{ name: 'ProductName', type: 'string' },
				{ name: 'QuantityPerUnit', type: 'int' },
				{ name: 'UnitPrice', type: 'float' },
				{ name: 'UnitsInStock', type: 'float' },
				{ name: 'Discontinued', type: 'bool' }
			],
			root: "Products",
			record: "Product",
			id: 'ProductID',
			url: "../sampledata/products.xml"
		});

		var columns = [
                  { text: 'Product Name', datafield: 'ProductName', width: 250 },
                  { text: 'Quantity per Unit', datafield: 'QuantityPerUnit', cellsalign: 'right', align: 'right', width: 200 },
                  { text: 'Unit Price', datafield: 'UnitPrice', align: 'right', cellsalign: 'right', cellsformat: 'c2', width: 200 },
                  { text: 'Units In Stock', datafield: 'UnitsInStock', cellsalign: 'right', width: 100 },
                  { text: 'Discontinued', columntype: 'checkbox', datafield: 'Discontinued' }
                ];

        JQXElements.settings["gridSettings"] =
        {
			 source:adapter, columns:columns, theme:"light"            
        }

    </script>
</head>
<body>
   <jqx-grid settings="gridSettings"></jqx-grid>
</body>
</html>

columnsmenu boolean true

Sets or gets the columnsmenu property.

<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>Grid Custom Element</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />
    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />
    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.pager.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.sort.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.edit.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.filter.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.columnsresize.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.aggregates.js"></script>
    <script type="text/javascript">
		var adapter = new jqx.dataAdapter({
			dataType: "xml",
			dataFields: [
				{ name: 'ProductName', type: 'string' },
				{ name: 'QuantityPerUnit', type: 'int' },
				{ name: 'UnitPrice', type: 'float' },
				{ name: 'UnitsInStock', type: 'float' },
				{ name: 'Discontinued', type: 'bool' }
			],
			root: "Products",
			record: "Product",
			id: 'ProductID',
			url: "../sampledata/products.xml"
		});

		var columns = [
                  { text: 'Product Name', datafield: 'ProductName', width: 250 },
                  { text: 'Quantity per Unit', datafield: 'QuantityPerUnit', cellsalign: 'right', align: 'right', width: 200 },
                  { text: 'Unit Price', datafield: 'UnitPrice', align: 'right', cellsalign: 'right', cellsformat: 'c2', width: 200 },
                  { text: 'Units In Stock', datafield: 'UnitsInStock', cellsalign: 'right', width: 100 },
                  { text: 'Discontinued', columntype: 'checkbox', datafield: 'Discontinued' }
                ];

        JQXElements.settings["gridSettings"] =
        {
			 source:adapter, columns:columns, theme:"light",columnsmenu:true            
        }

    </script>
</head>
<body>
   <jqx-grid settings="gridSettings"></jqx-grid>
</body>
</html>

columnsresize boolean false

Sets or gets the columnsresize property.

<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>Grid Custom Element</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />
    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />
    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.pager.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.sort.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.edit.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.filter.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.columnsresize.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.aggregates.js"></script>
    <script type="text/javascript">
		var adapter = new jqx.dataAdapter({
			dataType: "xml",
			dataFields: [
				{ name: 'ProductName', type: 'string' },
				{ name: 'QuantityPerUnit', type: 'int' },
				{ name: 'UnitPrice', type: 'float' },
				{ name: 'UnitsInStock', type: 'float' },
				{ name: 'Discontinued', type: 'bool' }
			],
			root: "Products",
			record: "Product",
			id: 'ProductID',
			url: "../sampledata/products.xml"
		});

		var columns = [
                  { text: 'Product Name', datafield: 'ProductName', width: 250 },
                  { text: 'Quantity per Unit', datafield: 'QuantityPerUnit', cellsalign: 'right', align: 'right', width: 200 },
                  { text: 'Unit Price', datafield: 'UnitPrice', align: 'right', cellsalign: 'right', cellsformat: 'c2', width: 200 },
                  { text: 'Units In Stock', datafield: 'UnitsInStock', cellsalign: 'right', width: 100 },
                  { text: 'Discontinued', columntype: 'checkbox', datafield: 'Discontinued' }
                ];

        JQXElements.settings["gridSettings"] =
        {
			 source:adapter, columns:columns, theme:"light",columnsresize:true            
        }

    </script>
</head>
<body>
   <jqx-grid settings="gridSettings"></jqx-grid>
</body>
</html>

columnsautoresize boolean true

Sets or gets the columnsautoresize property.

<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>Grid Custom Element</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />
    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />
    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.pager.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.sort.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.edit.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.filter.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.columnsresize.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.aggregates.js"></script>
    <script type="text/javascript">
		var adapter = new jqx.dataAdapter({
			dataType: "xml",
			dataFields: [
				{ name: 'ProductName', type: 'string' },
				{ name: 'QuantityPerUnit', type: 'int' },
				{ name: 'UnitPrice', type: 'float' },
				{ name: 'UnitsInStock', type: 'float' },
				{ name: 'Discontinued', type: 'bool' }
			],
			root: "Products",
			record: "Product",
			id: 'ProductID',
			url: "../sampledata/products.xml"
		});

		var columns = [
                  { text: 'Product Name', datafield: 'ProductName', width: 250 },
                  { text: 'Quantity per Unit', datafield: 'QuantityPerUnit', cellsalign: 'right', align: 'right', width: 200 },
                  { text: 'Unit Price', datafield: 'UnitPrice', align: 'right', cellsalign: 'right', cellsformat: 'c2', width: 200 },
                  { text: 'Units In Stock', datafield: 'UnitsInStock', cellsalign: 'right', width: 100 },
                  { text: 'Discontinued', columntype: 'checkbox', datafield: 'Discontinued' }
                ];

        JQXElements.settings["gridSettings"] =
        {
			 source:adapter, columns:columns, theme:"light",columnsautoresize:true            
        }

    </script>
</head>
<body>
   <jqx-grid settings="gridSettings"></jqx-grid>
</body>
</html>

columnsreorder boolean false

Sets or gets the columnsreorder property.

<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>Grid Custom Element</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />
    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />
    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.pager.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.sort.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.edit.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.filter.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.columnsresize.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.aggregates.js"></script>
    <script type="text/javascript">
		var adapter = new jqx.dataAdapter({
			dataType: "xml",
			dataFields: [
				{ name: 'ProductName', type: 'string' },
				{ name: 'QuantityPerUnit', type: 'int' },
				{ name: 'UnitPrice', type: 'float' },
				{ name: 'UnitsInStock', type: 'float' },
				{ name: 'Discontinued', type: 'bool' }
			],
			root: "Products",
			record: "Product",
			id: 'ProductID',
			url: "../sampledata/products.xml"
		});

		var columns = [
                  { text: 'Product Name', datafield: 'ProductName', width: 250 },
                  { text: 'Quantity per Unit', datafield: 'QuantityPerUnit', cellsalign: 'right', align: 'right', width: 200 },
                  { text: 'Unit Price', datafield: 'UnitPrice', align: 'right', cellsalign: 'right', cellsformat: 'c2', width: 200 },
                  { text: 'Units In Stock', datafield: 'UnitsInStock', cellsalign: 'right', width: 100 },
                  { text: 'Discontinued', columntype: 'checkbox', datafield: 'Discontinued' }
                ];

        JQXElements.settings["gridSettings"] =
        {
			 source:adapter, columns:columns, theme:"light",columnsreorder:true            
        }

    </script>
</head>
<body>
   <jqx-grid settings="gridSettings"></jqx-grid>
</body>
</html>

disabled boolean false

Sets or gets the disabled property.

<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>Grid Custom Element</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />
    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />
    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.pager.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.sort.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.edit.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.filter.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.columnsresize.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.aggregates.js"></script>
    <script type="text/javascript">
		var adapter = new jqx.dataAdapter({
			dataType: "xml",
			dataFields: [
				{ name: 'ProductName', type: 'string' },
				{ name: 'QuantityPerUnit', type: 'int' },
				{ name: 'UnitPrice', type: 'float' },
				{ name: 'UnitsInStock', type: 'float' },
				{ name: 'Discontinued', type: 'bool' }
			],
			root: "Products",
			record: "Product",
			id: 'ProductID',
			url: "../sampledata/products.xml"
		});

		var columns = [
                  { text: 'Product Name', datafield: 'ProductName', width: 250 },
                  { text: 'Quantity per Unit', datafield: 'QuantityPerUnit', cellsalign: 'right', align: 'right', width: 200 },
                  { text: 'Unit Price', datafield: 'UnitPrice', align: 'right', cellsalign: 'right', cellsformat: 'c2', width: 200 },
                  { text: 'Units In Stock', datafield: 'UnitsInStock', cellsalign: 'right', width: 100 },
                  { text: 'Discontinued', columntype: 'checkbox', datafield: 'Discontinued' }
                ];

        JQXElements.settings["gridSettings"] =
        {
			 source:adapter, columns:columns, theme:"light",disabled:true            
        }

    </script>
</head>
<body>
   <jqx-grid settings="gridSettings"></jqx-grid>
</body>
</html>

editable boolean false

Sets or gets the editable property.

<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>Grid Custom Element</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />
    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />
    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.pager.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.sort.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.edit.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.filter.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.columnsresize.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.aggregates.js"></script>
    <script type="text/javascript">
		var adapter = new jqx.dataAdapter({
			dataType: "xml",
			dataFields: [
				{ name: 'ProductName', type: 'string' },
				{ name: 'QuantityPerUnit', type: 'int' },
				{ name: 'UnitPrice', type: 'float' },
				{ name: 'UnitsInStock', type: 'float' },
				{ name: 'Discontinued', type: 'bool' }
			],
			root: "Products",
			record: "Product",
			id: 'ProductID',
			url: "../sampledata/products.xml"
		});

		var columns = [
                  { text: 'Product Name', datafield: 'ProductName', width: 250 },
                  { text: 'Quantity per Unit', datafield: 'QuantityPerUnit', cellsalign: 'right', align: 'right', width: 200 },
                  { text: 'Unit Price', datafield: 'UnitPrice', align: 'right', cellsalign: 'right', cellsformat: 'c2', width: 200 },
                  { text: 'Units In Stock', datafield: 'UnitsInStock', cellsalign: 'right', width: 100 },
                  { text: 'Discontinued', columntype: 'checkbox', datafield: 'Discontinued' }
                ];

        JQXElements.settings["gridSettings"] =
        {
			 source:adapter, columns:columns, theme:"light",editable:true            
        }

    </script>
</head>
<body>
   <jqx-grid settings="gridSettings"></jqx-grid>
</body>
</html>

editmode string 'selectedcell'

Sets or gets the editmode property.

<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>Grid Custom Element</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />
    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />
    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.pager.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.sort.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.edit.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.filter.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.columnsresize.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.aggregates.js"></script>
    <script type="text/javascript">
		var adapter = new jqx.dataAdapter({
			dataType: "xml",
			dataFields: [
				{ name: 'ProductName', type: 'string' },
				{ name: 'QuantityPerUnit', type: 'int' },
				{ name: 'UnitPrice', type: 'float' },
				{ name: 'UnitsInStock', type: 'float' },
				{ name: 'Discontinued', type: 'bool' }
			],
			root: "Products",
			record: "Product",
			id: 'ProductID',
			url: "../sampledata/products.xml"
		});

		var columns = [
                  { text: 'Product Name', datafield: 'ProductName', width: 250 },
                  { text: 'Quantity per Unit', datafield: 'QuantityPerUnit', cellsalign: 'right', align: 'right', width: 200 },
                  { text: 'Unit Price', datafield: 'UnitPrice', align: 'right', cellsalign: 'right', cellsformat: 'c2', width: 200 },
                  { text: 'Units In Stock', datafield: 'UnitsInStock', cellsalign: 'right', width: 100 },
                  { text: 'Discontinued', columntype: 'checkbox', datafield: 'Discontinued' }
                ];

        JQXElements.settings["gridSettings"] =
        {
			 source:adapter, columns:columns, theme:"light",editable:true, editmode:"dblclick"            
        }

    </script>
</head>
<body>
   <jqx-grid settings="gridSettings"></jqx-grid>
</body>
</html>

filter function null

Sets or gets the filter property.

<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>Grid Custom Element</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />
    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />
    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.pager.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.sort.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.edit.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.filter.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.columnsresize.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.aggregates.js"></script>
    <script type="text/javascript">
		var adapter = new jqx.dataAdapter({
			dataType: "xml",
			dataFields: [
				{ name: 'ProductName', type: 'string' },
				{ name: 'QuantityPerUnit', type: 'int' },
				{ name: 'UnitPrice', type: 'float' },
				{ name: 'UnitsInStock', type: 'float' },
				{ name: 'Discontinued', type: 'bool' }
			],
			root: "Products",
			record: "Product",
			id: 'ProductID',
			url: "../sampledata/products.xml"
		});

		var columns = [
                  { text: 'Product Name', datafield: 'ProductName', width: 250 },
                  { text: 'Quantity per Unit', datafield: 'QuantityPerUnit', cellsalign: 'right', align: 'right', width: 200 },
                  { text: 'Unit Price', datafield: 'UnitPrice', align: 'right', cellsalign: 'right', cellsformat: 'c2', width: 200 },
                  { text: 'Units In Stock', datafield: 'UnitsInStock', cellsalign: 'right', width: 100 },
                  { text: 'Discontinued', columntype: 'checkbox', datafield: 'Discontinued' }
                ];

        JQXElements.settings["gridSettings"] =
        {
			 source:adapter, columns:columns, theme:"light", filter:"filter"            
        }

    </script>
</head>
<body>
   <jqx-grid settings="gridSettings"></jqx-grid>
</body>
</html>

filterable boolean false

Sets or gets the filterable property.

<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>Grid Custom Element</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />
    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />
    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.pager.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.sort.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.edit.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.filter.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.columnsresize.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.aggregates.js"></script>
    <script type="text/javascript">
		var adapter = new jqx.dataAdapter({
			dataType: "xml",
			dataFields: [
				{ name: 'ProductName', type: 'string' },
				{ name: 'QuantityPerUnit', type: 'int' },
				{ name: 'UnitPrice', type: 'float' },
				{ name: 'UnitsInStock', type: 'float' },
				{ name: 'Discontinued', type: 'bool' }
			],
			root: "Products",
			record: "Product",
			id: 'ProductID',
			url: "../sampledata/products.xml"
		});

		var columns = [
                  { text: 'Product Name', datafield: 'ProductName', width: 250 },
                  { text: 'Quantity per Unit', datafield: 'QuantityPerUnit', cellsalign: 'right', align: 'right', width: 200 },
                  { text: 'Unit Price', datafield: 'UnitPrice', align: 'right', cellsalign: 'right', cellsformat: 'c2', width: 200 },
                  { text: 'Units In Stock', datafield: 'UnitsInStock', cellsalign: 'right', width: 100 },
                  { text: 'Discontinued', columntype: 'checkbox', datafield: 'Discontinued' }
                ];

        JQXElements.settings["gridSettings"] =
        {
			 source:adapter, columns:columns, theme:"light",filterable:true            
        }

    </script>
</head>
<body>
   <jqx-grid settings="gridSettings"></jqx-grid>
</body>
</html>

groupable boolean false

Sets or gets the groupable property.

<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>Grid Custom Element</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />
    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />
    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.pager.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.sort.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.edit.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.filter.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.columnsresize.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.aggregates.js"></script>
    <script type="text/javascript">
		var adapter = new jqx.dataAdapter({
			dataType: "xml",
			dataFields: [
				{ name: 'ProductName', type: 'string' },
				{ name: 'QuantityPerUnit', type: 'int' },
				{ name: 'UnitPrice', type: 'float' },
				{ name: 'UnitsInStock', type: 'float' },
				{ name: 'Discontinued', type: 'bool' }
			],
			root: "Products",
			record: "Product",
			id: 'ProductID',
			url: "../sampledata/products.xml"
		});

		var columns = [
                  { text: 'Product Name', datafield: 'ProductName', width: 250 },
                  { text: 'Quantity per Unit', datafield: 'QuantityPerUnit', cellsalign: 'right', align: 'right', width: 200 },
                  { text: 'Unit Price', datafield: 'UnitPrice', align: 'right', cellsalign: 'right', cellsformat: 'c2', width: 200 },
                  { text: 'Units In Stock', datafield: 'UnitsInStock', cellsalign: 'right', width: 100 },
                  { text: 'Discontinued', columntype: 'checkbox', datafield: 'Discontinued' }
                ];

        JQXElements.settings["gridSettings"] =
        {
			 source:adapter, columns:columns, theme:"light",groupable:true, groups:"['firstname']"            
        }

    </script>
</head>
<body>
   <jqx-grid settings="gridSettings"></jqx-grid>
</body>
</html>

groups array []

Sets or gets the groups property.

<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>Grid Custom Element</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />
    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />
    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.pager.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.sort.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.edit.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.filter.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.columnsresize.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.aggregates.js"></script>
    <script type="text/javascript">
		var adapter = new jqx.dataAdapter({
			dataType: "xml",
			dataFields: [
				{ name: 'ProductName', type: 'string' },
				{ name: 'QuantityPerUnit', type: 'int' },
				{ name: 'UnitPrice', type: 'float' },
				{ name: 'UnitsInStock', type: 'float' },
				{ name: 'Discontinued', type: 'bool' }
			],
			root: "Products",
			record: "Product",
			id: 'ProductID',
			url: "../sampledata/products.xml"
		});

		var columns = [
                  { text: 'Product Name', datafield: 'ProductName', width: 250 },
                  { text: 'Quantity per Unit', datafield: 'QuantityPerUnit', cellsalign: 'right', align: 'right', width: 200 },
                  { text: 'Unit Price', datafield: 'UnitPrice', align: 'right', cellsalign: 'right', cellsformat: 'c2', width: 200 },
                  { text: 'Units In Stock', datafield: 'UnitsInStock', cellsalign: 'right', width: 100 },
                  { text: 'Discontinued', columntype: 'checkbox', datafield: 'Discontinued' }
                ];

        JQXElements.settings["gridSettings"] =
        {
			 source:adapter, columns:columns, theme:"light",groupable:true, groups:"['firstname']"            
        }

    </script>
</head>
<body>
   <jqx-grid settings="gridSettings"></jqx-grid>
</body>
</html>

horizontalscrollbarstep number 5

Sets or gets the horizontalscrollbarstep property.

<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>Grid Custom Element</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />
    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />
    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.pager.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.sort.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.edit.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.filter.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.columnsresize.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.aggregates.js"></script>
    <script type="text/javascript">
		var adapter = new jqx.dataAdapter({
			dataType: "xml",
			dataFields: [
				{ name: 'ProductName', type: 'string' },
				{ name: 'QuantityPerUnit', type: 'int' },
				{ name: 'UnitPrice', type: 'float' },
				{ name: 'UnitsInStock', type: 'float' },
				{ name: 'Discontinued', type: 'bool' }
			],
			root: "Products",
			record: "Product",
			id: 'ProductID',
			url: "../sampledata/products.xml"
		});

		var columns = [
                  { text: 'Product Name', datafield: 'ProductName', width: 250 },
                  { text: 'Quantity per Unit', datafield: 'QuantityPerUnit', cellsalign: 'right', align: 'right', width: 200 },
                  { text: 'Unit Price', datafield: 'UnitPrice', align: 'right', cellsalign: 'right', cellsformat: 'c2', width: 200 },
                  { text: 'Units In Stock', datafield: 'UnitsInStock', cellsalign: 'right', width: 100 },
                  { text: 'Discontinued', columntype: 'checkbox', datafield: 'Discontinued' }
                ];

        JQXElements.settings["gridSettings"] =
        {
			 source:adapter, columns:columns, theme:"light",horizontalscrollbarstep:60            
        }

    </script>
</head>
<body>
   <jqx-grid settings="gridSettings"></jqx-grid>
</body>
</html>

horizontalscrollbarlargestep number 50

Sets or gets the horizontalscrollbarlargestep property.

<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>Grid Custom Element</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />
    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />
    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.pager.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.sort.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.edit.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.filter.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.columnsresize.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.aggregates.js"></script>
    <script type="text/javascript">
		var adapter = new jqx.dataAdapter({
			dataType: "xml",
			dataFields: [
				{ name: 'ProductName', type: 'string' },
				{ name: 'QuantityPerUnit', type: 'int' },
				{ name: 'UnitPrice', type: 'float' },
				{ name: 'UnitsInStock', type: 'float' },
				{ name: 'Discontinued', type: 'bool' }
			],
			root: "Products",
			record: "Product",
			id: 'ProductID',
			url: "../sampledata/products.xml"
		});

		var columns = [
                  { text: 'Product Name', datafield: 'ProductName', width: 250 },
                  { text: 'Quantity per Unit', datafield: 'QuantityPerUnit', cellsalign: 'right', align: 'right', width: 200 },
                  { text: 'Unit Price', datafield: 'UnitPrice', align: 'right', cellsalign: 'right', cellsformat: 'c2', width: 200 },
                  { text: 'Units In Stock', datafield: 'UnitsInStock', cellsalign: 'right', width: 100 },
                  { text: 'Discontinued', columntype: 'checkbox', datafield: 'Discontinued' }
                ];

        JQXElements.settings["gridSettings"] =
        {
			 source:adapter, columns:columns, theme:"light",horizontalscrollbarlargestep:600            
        }

    </script>
</head>
<body>
   <jqx-grid settings="gridSettings"></jqx-grid>
</body>
</html>

initrowdetails function null

Sets or gets the initrowdetails property.

<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>Grid Custom Element</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />
    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />
    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.pager.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.sort.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.edit.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.filter.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.columnsresize.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.aggregates.js"></script>
    <script type="text/javascript">
		var adapter = new jqx.dataAdapter({
			dataType: "xml",
			dataFields: [
				{ name: 'ProductName', type: 'string' },
				{ name: 'QuantityPerUnit', type: 'int' },
				{ name: 'UnitPrice', type: 'float' },
				{ name: 'UnitsInStock', type: 'float' },
				{ name: 'Discontinued', type: 'bool' }
			],
			root: "Products",
			record: "Product",
			id: 'ProductID',
			url: "../sampledata/products.xml"
		});

		var columns = [
                  { text: 'Product Name', datafield: 'ProductName', width: 250 },
                  { text: 'Quantity per Unit', datafield: 'QuantityPerUnit', cellsalign: 'right', align: 'right', width: 200 },
                  { text: 'Unit Price', datafield: 'UnitPrice', align: 'right', cellsalign: 'right', cellsformat: 'c2', width: 200 },
                  { text: 'Units In Stock', datafield: 'UnitsInStock', cellsalign: 'right', width: 100 },
                  { text: 'Discontinued', columntype: 'checkbox', datafield: 'Discontinued' }
                ];

        JQXElements.settings["gridSettings"] =
        {
			 source:adapter, columns:columns, theme:"light", initrowdetails:"initrowdetails"            
        }

    </script>
</head>
<body>
   <jqx-grid settings="gridSettings"></jqx-grid>
</body>
</html>

keyboardnavigation boolean true

Sets or gets the keyboardnavigation property.

<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>Grid Custom Element</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />
    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />
    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.pager.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.sort.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.edit.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.filter.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.columnsresize.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.aggregates.js"></script>
    <script type="text/javascript">
		var adapter = new jqx.dataAdapter({
			dataType: "xml",
			dataFields: [
				{ name: 'ProductName', type: 'string' },
				{ name: 'QuantityPerUnit', type: 'int' },
				{ name: 'UnitPrice', type: 'float' },
				{ name: 'UnitsInStock', type: 'float' },
				{ name: 'Discontinued', type: 'bool' }
			],
			root: "Products",
			record: "Product",
			id: 'ProductID',
			url: "../sampledata/products.xml"
		});

		var columns = [
                  { text: 'Product Name', datafield: 'ProductName', width: 250 },
                  { text: 'Quantity per Unit', datafield: 'QuantityPerUnit', cellsalign: 'right', align: 'right', width: 200 },
                  { text: 'Unit Price', datafield: 'UnitPrice', align: 'right', cellsalign: 'right', cellsformat: 'c2', width: 200 },
                  { text: 'Units In Stock', datafield: 'UnitsInStock', cellsalign: 'right', width: 100 },
                  { text: 'Discontinued', columntype: 'checkbox', datafield: 'Discontinued' }
                ];

        JQXElements.settings["gridSettings"] =
        {
			 source:adapter, columns:columns, theme:"light",keyboardnavigation:false            
        }

    </script>
</head>
<body>
   <jqx-grid settings="gridSettings"></jqx-grid>
</body>
</html>

localization object null

Sets or gets the localization property.

<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>Grid Custom Element</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />
    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />
    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.pager.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.sort.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.edit.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.filter.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.columnsresize.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.aggregates.js"></script>
    <script type="text/javascript">
		var adapter = new jqx.dataAdapter({
			dataType: "xml",
			dataFields: [
				{ name: 'ProductName', type: 'string' },
				{ name: 'QuantityPerUnit', type: 'int' },
				{ name: 'UnitPrice', type: 'float' },
				{ name: 'UnitsInStock', type: 'float' },
				{ name: 'Discontinued', type: 'bool' }
			],
			root: "Products",
			record: "Product",
			id: 'ProductID',
			url: "../sampledata/products.xml"
		});

		var columns = [
                  { text: 'Product Name', datafield: 'ProductName', width: 250 },
                  { text: 'Quantity per Unit', datafield: 'QuantityPerUnit', cellsalign: 'right', align: 'right', width: 200 },
                  { text: 'Unit Price', datafield: 'UnitPrice', align: 'right', cellsalign: 'right', cellsformat: 'c2', width: 200 },
                  { text: 'Units In Stock', datafield: 'UnitsInStock', cellsalign: 'right', width: 100 },
                  { text: 'Discontinued', columntype: 'checkbox', datafield: 'Discontinued' }
                ];

        JQXElements.settings["gridSettings"] =
        {
			 source:adapter, columns:columns, theme:"light", localization:localization            
        }

    </script>
</head>
<body>
   <jqx-grid settings="gridSettings"></jqx-grid>
</body>
</html>

pagesize number 10

Sets or gets the pagesize property.

<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>Grid Custom Element</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />
    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />
    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.pager.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.sort.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.edit.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.filter.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.columnsresize.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.aggregates.js"></script>
    <script type="text/javascript">
		var adapter = new jqx.dataAdapter({
			dataType: "xml",
			dataFields: [
				{ name: 'ProductName', type: 'string' },
				{ name: 'QuantityPerUnit', type: 'int' },
				{ name: 'UnitPrice', type: 'float' },
				{ name: 'UnitsInStock', type: 'float' },
				{ name: 'Discontinued', type: 'bool' }
			],
			root: "Products",
			record: "Product",
			id: 'ProductID',
			url: "../sampledata/products.xml"
		});

		var columns = [
                  { text: 'Product Name', datafield: 'ProductName', width: 250 },
                  { text: 'Quantity per Unit', datafield: 'QuantityPerUnit', cellsalign: 'right', align: 'right', width: 200 },
                  { text: 'Unit Price', datafield: 'UnitPrice', align: 'right', cellsalign: 'right', cellsformat: 'c2', width: 200 },
                  { text: 'Units In Stock', datafield: 'UnitsInStock', cellsalign: 'right', width: 100 },
                  { text: 'Discontinued', columntype: 'checkbox', datafield: 'Discontinued' }
                ];

        JQXElements.settings["gridSettings"] =
        {
			 source:adapter, columns:columns, theme:"light",pagesize:30,pageable:true            
        }

    </script>
</head>
<body>
   <jqx-grid settings="gridSettings"></jqx-grid>
</body>
</html>

pagesizeoptions array ['5', '10', '20']

Sets or gets the pagesizeoptions property.

<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>Grid Custom Element</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />
    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />
    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.pager.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.sort.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.edit.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.filter.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.columnsresize.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.aggregates.js"></script>
    <script type="text/javascript">
		var adapter = new jqx.dataAdapter({
			dataType: "xml",
			dataFields: [
				{ name: 'ProductName', type: 'string' },
				{ name: 'QuantityPerUnit', type: 'int' },
				{ name: 'UnitPrice', type: 'float' },
				{ name: 'UnitsInStock', type: 'float' },
				{ name: 'Discontinued', type: 'bool' }
			],
			root: "Products",
			record: "Product",
			id: 'ProductID',
			url: "../sampledata/products.xml"
		});

		var columns = [
                  { text: 'Product Name', datafield: 'ProductName', width: 250 },
                  { text: 'Quantity per Unit', datafield: 'QuantityPerUnit', cellsalign: 'right', align: 'right', width: 200 },
                  { text: 'Unit Price', datafield: 'UnitPrice', align: 'right', cellsalign: 'right', cellsformat: 'c2', width: 200 },
                  { text: 'Units In Stock', datafield: 'UnitsInStock', cellsalign: 'right', width: 100 },
                  { text: 'Discontinued', columntype: 'checkbox', datafield: 'Discontinued' }
                ];

        JQXElements.settings["gridSettings"] =
        {
			 source:adapter, columns:columns, theme:"light", pagesizeoptions:"['15', '30', '50']",pageable:true            
        }

    </script>
</head>
<body>
   <jqx-grid settings="gridSettings"></jqx-grid>
</body>
</html>

pagermode string "default"

Sets or gets the pagermode property.

<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>Grid Custom Element</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />
    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />
    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.pager.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.sort.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.edit.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.filter.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.columnsresize.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.aggregates.js"></script>
    <script type="text/javascript">
		var adapter = new jqx.dataAdapter({
			dataType: "xml",
			dataFields: [
				{ name: 'ProductName', type: 'string' },
				{ name: 'QuantityPerUnit', type: 'int' },
				{ name: 'UnitPrice', type: 'float' },
				{ name: 'UnitsInStock', type: 'float' },
				{ name: 'Discontinued', type: 'bool' }
			],
			root: "Products",
			record: "Product",
			id: 'ProductID',
			url: "../sampledata/products.xml"
		});

		var columns = [
                  { text: 'Product Name', datafield: 'ProductName', width: 250 },
                  { text: 'Quantity per Unit', datafield: 'QuantityPerUnit', cellsalign: 'right', align: 'right', width: 200 },
                  { text: 'Unit Price', datafield: 'UnitPrice', align: 'right', cellsalign: 'right', cellsformat: 'c2', width: 200 },
                  { text: 'Units In Stock', datafield: 'UnitsInStock', cellsalign: 'right', width: 100 },
                  { text: 'Discontinued', columntype: 'checkbox', datafield: 'Discontinued' }
                ];

        JQXElements.settings["gridSettings"] =
        {
			 source:adapter, columns:columns, theme:"light", pagermode:"simple",pageable:true            
        }

    </script>
</head>
<body>
   <jqx-grid settings="gridSettings"></jqx-grid>
</body>
</html>

pagerbuttonscount number 5

Sets or gets the pagerbuttonscount property.

<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>Grid Custom Element</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />
    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />
    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.pager.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.sort.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.edit.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.filter.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.columnsresize.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.aggregates.js"></script>
    <script type="text/javascript">
		var adapter = new jqx.dataAdapter({
			dataType: "xml",
			dataFields: [
				{ name: 'ProductName', type: 'string' },
				{ name: 'QuantityPerUnit', type: 'int' },
				{ name: 'UnitPrice', type: 'float' },
				{ name: 'UnitsInStock', type: 'float' },
				{ name: 'Discontinued', type: 'bool' }
			],
			root: "Products",
			record: "Product",
			id: 'ProductID',
			url: "../sampledata/products.xml"
		});

		var columns = [
                  { text: 'Product Name', datafield: 'ProductName', width: 250 },
                  { text: 'Quantity per Unit', datafield: 'QuantityPerUnit', cellsalign: 'right', align: 'right', width: 200 },
                  { text: 'Unit Price', datafield: 'UnitPrice', align: 'right', cellsalign: 'right', cellsformat: 'c2', width: 200 },
                  { text: 'Units In Stock', datafield: 'UnitsInStock', cellsalign: 'right', width: 100 },
                  { text: 'Discontinued', columntype: 'checkbox', datafield: 'Discontinued' }
                ];

        JQXElements.settings["gridSettings"] =
        {
			 source:adapter, columns:columns, theme:"light",pageable:true,pagerbuttonscount:10            
        }

    </script>
</head>
<body>
   <jqx-grid settings="gridSettings"></jqx-grid>
</body>
</html>

pageable boolean false

Sets or gets the pageable property.

<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>Grid Custom Element</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />
    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />
    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.pager.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.sort.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.edit.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.filter.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.columnsresize.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.aggregates.js"></script>
    <script type="text/javascript">
		var adapter = new jqx.dataAdapter({
			dataType: "xml",
			dataFields: [
				{ name: 'ProductName', type: 'string' },
				{ name: 'QuantityPerUnit', type: 'int' },
				{ name: 'UnitPrice', type: 'float' },
				{ name: 'UnitsInStock', type: 'float' },
				{ name: 'Discontinued', type: 'bool' }
			],
			root: "Products",
			record: "Product",
			id: 'ProductID',
			url: "../sampledata/products.xml"
		});

		var columns = [
                  { text: 'Product Name', datafield: 'ProductName', width: 250 },
                  { text: 'Quantity per Unit', datafield: 'QuantityPerUnit', cellsalign: 'right', align: 'right', width: 200 },
                  { text: 'Unit Price', datafield: 'UnitPrice', align: 'right', cellsalign: 'right', cellsformat: 'c2', width: 200 },
                  { text: 'Units In Stock', datafield: 'UnitsInStock', cellsalign: 'right', width: 100 },
                  { text: 'Discontinued', columntype: 'checkbox', datafield: 'Discontinued' }
                ];

        JQXElements.settings["gridSettings"] =
        {
			 source:adapter, columns:columns, theme:"light",pageable:true            
        }

    </script>
</head>
<body>
   <jqx-grid settings="gridSettings"></jqx-grid>
</body>
</html>

rowdetails boolean false

Sets or gets the rowdetails property.

<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>Grid Custom Element</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />
    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />
    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.pager.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.sort.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.edit.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.filter.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.columnsresize.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.aggregates.js"></script>
    <script type="text/javascript">
		var adapter = new jqx.dataAdapter({
			dataType: "xml",
			dataFields: [
				{ name: 'ProductName', type: 'string' },
				{ name: 'QuantityPerUnit', type: 'int' },
				{ name: 'UnitPrice', type: 'float' },
				{ name: 'UnitsInStock', type: 'float' },
				{ name: 'Discontinued', type: 'bool' }
			],
			root: "Products",
			record: "Product",
			id: 'ProductID',
			url: "../sampledata/products.xml"
		});

		var columns = [
                  { text: 'Product Name', datafield: 'ProductName', width: 250 },
                  { text: 'Quantity per Unit', datafield: 'QuantityPerUnit', cellsalign: 'right', align: 'right', width: 200 },
                  { text: 'Unit Price', datafield: 'UnitPrice', align: 'right', cellsalign: 'right', cellsformat: 'c2', width: 200 },
                  { text: 'Units In Stock', datafield: 'UnitsInStock', cellsalign: 'right', width: 100 },
                  { text: 'Discontinued', columntype: 'checkbox', datafield: 'Discontinued' }
                ];

        JQXElements.settings["gridSettings"] =
        {
			 source:adapter, columns:columns, theme:"light", rowdetails:"rowdetails"            
        }

    </script>
</head>
<body>
   <jqx-grid settings="gridSettings"></jqx-grid>
</body>
</html>

rowdetailstemplate object null

Sets or gets the rowdetailstemplate property.

<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>Grid Custom Element</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />
    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />
    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.pager.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.sort.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.edit.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.filter.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.columnsresize.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.aggregates.js"></script>
    <script type="text/javascript">
		var adapter = new jqx.dataAdapter({
			dataType: "xml",
			dataFields: [
				{ name: 'ProductName', type: 'string' },
				{ name: 'QuantityPerUnit', type: 'int' },
				{ name: 'UnitPrice', type: 'float' },
				{ name: 'UnitsInStock', type: 'float' },
				{ name: 'Discontinued', type: 'bool' }
			],
			root: "Products",
			record: "Product",
			id: 'ProductID',
			url: "../sampledata/products.xml"
		});

		var columns = [
                  { text: 'Product Name', datafield: 'ProductName', width: 250 },
                  { text: 'Quantity per Unit', datafield: 'QuantityPerUnit', cellsalign: 'right', align: 'right', width: 200 },
                  { text: 'Unit Price', datafield: 'UnitPrice', align: 'right', cellsalign: 'right', cellsformat: 'c2', width: 200 },
                  { text: 'Units In Stock', datafield: 'UnitsInStock', cellsalign: 'right', width: 100 },
                  { text: 'Discontinued', columntype: 'checkbox', datafield: 'Discontinued' }
                ];

        JQXElements.settings["gridSettings"] =
        {
			 source:adapter, columns:columns, theme:"light", rowdetailstemplate:"rowdetailstemplate"            
        }

    </script>
</head>
<body>
   <jqx-grid settings="gridSettings"></jqx-grid>
</body>
</html>

ready function null

Sets or gets the ready property.

<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>Grid Custom Element</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />
    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />
    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.pager.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.sort.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.edit.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.filter.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.columnsresize.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.aggregates.js"></script>
    <script type="text/javascript">
		var adapter = new jqx.dataAdapter({
			dataType: "xml",
			dataFields: [
				{ name: 'ProductName', type: 'string' },
				{ name: 'QuantityPerUnit', type: 'int' },
				{ name: 'UnitPrice', type: 'float' },
				{ name: 'UnitsInStock', type: 'float' },
				{ name: 'Discontinued', type: 'bool' }
			],
			root: "Products",
			record: "Product",
			id: 'ProductID',
			url: "../sampledata/products.xml"
		});

		var columns = [
                  { text: 'Product Name', datafield: 'ProductName', width: 250 },
                  { text: 'Quantity per Unit', datafield: 'QuantityPerUnit', cellsalign: 'right', align: 'right', width: 200 },
                  { text: 'Unit Price', datafield: 'UnitPrice', align: 'right', cellsalign: 'right', cellsformat: 'c2', width: 200 },
                  { text: 'Units In Stock', datafield: 'UnitsInStock', cellsalign: 'right', width: 100 },
                  { text: 'Discontinued', columntype: 'checkbox', datafield: 'Discontinued' }
                ];

        JQXElements.settings["gridSettings"] =
        {
			 source:adapter, columns:columns, theme:"light", ready:"ready"            
        }

    </script>
</head>
<body>
   <jqx-grid settings="gridSettings"></jqx-grid>
</body>
</html>

rendered function null

Sets or gets the rendered property.

<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>Grid Custom Element</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />
    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />
    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.pager.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.sort.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.edit.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.filter.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.columnsresize.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.aggregates.js"></script>
    <script type="text/javascript">
		var adapter = new jqx.dataAdapter({
			dataType: "xml",
			dataFields: [
				{ name: 'ProductName', type: 'string' },
				{ name: 'QuantityPerUnit', type: 'int' },
				{ name: 'UnitPrice', type: 'float' },
				{ name: 'UnitsInStock', type: 'float' },
				{ name: 'Discontinued', type: 'bool' }
			],
			root: "Products",
			record: "Product",
			id: 'ProductID',
			url: "../sampledata/products.xml"
		});

		var columns = [
                  { text: 'Product Name', datafield: 'ProductName', width: 250 },
                  { text: 'Quantity per Unit', datafield: 'QuantityPerUnit', cellsalign: 'right', align: 'right', width: 200 },
                  { text: 'Unit Price', datafield: 'UnitPrice', align: 'right', cellsalign: 'right', cellsformat: 'c2', width: 200 },
                  { text: 'Units In Stock', datafield: 'UnitsInStock', cellsalign: 'right', width: 100 },
                  { text: 'Discontinued', columntype: 'checkbox', datafield: 'Discontinued' }
                ];

        JQXElements.settings["gridSettings"] =
        {
			 source:adapter, columns:columns, theme:"light", rendered:"rendered"            
        }

    </script>
</head>
<body>
   <jqx-grid settings="gridSettings"></jqx-grid>
</body>
</html>

renderstatusbar function null

Sets or gets the renderstatusbar property.

<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>Grid Custom Element</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />
    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />
    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.pager.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.sort.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.edit.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.filter.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.columnsresize.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.aggregates.js"></script>
    <script type="text/javascript">
		var adapter = new jqx.dataAdapter({
			dataType: "xml",
			dataFields: [
				{ name: 'ProductName', type: 'string' },
				{ name: 'QuantityPerUnit', type: 'int' },
				{ name: 'UnitPrice', type: 'float' },
				{ name: 'UnitsInStock', type: 'float' },
				{ name: 'Discontinued', type: 'bool' }
			],
			root: "Products",
			record: "Product",
			id: 'ProductID',
			url: "../sampledata/products.xml"
		});

		var columns = [
                  { text: 'Product Name', datafield: 'ProductName', width: 250 },
                  { text: 'Quantity per Unit', datafield: 'QuantityPerUnit', cellsalign: 'right', align: 'right', width: 200 },
                  { text: 'Unit Price', datafield: 'UnitPrice', align: 'right', cellsalign: 'right', cellsformat: 'c2', width: 200 },
                  { text: 'Units In Stock', datafield: 'UnitsInStock', cellsalign: 'right', width: 100 },
                  { text: 'Discontinued', columntype: 'checkbox', datafield: 'Discontinued' }
                ];

        JQXElements.settings["gridSettings"] =
        {
			 source:adapter, columns:columns, theme:"light", renderstatusbar:"renderstatusbar"            
        }

    </script>
</head>
<body>
   <jqx-grid settings="gridSettings"></jqx-grid>
</body>
</html>

rendertoolbar function null

Sets or gets the rendertoolbar property.

<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>Grid Custom Element</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />
    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />
    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.pager.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.sort.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.edit.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.filter.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.columnsresize.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.aggregates.js"></script>
    <script type="text/javascript">
		var adapter = new jqx.dataAdapter({
			dataType: "xml",
			dataFields: [
				{ name: 'ProductName', type: 'string' },
				{ name: 'QuantityPerUnit', type: 'int' },
				{ name: 'UnitPrice', type: 'float' },
				{ name: 'UnitsInStock', type: 'float' },
				{ name: 'Discontinued', type: 'bool' }
			],
			root: "Products",
			record: "Product",
			id: 'ProductID',
			url: "../sampledata/products.xml"
		});

		var columns = [
                  { text: 'Product Name', datafield: 'ProductName', width: 250 },
                  { text: 'Quantity per Unit', datafield: 'QuantityPerUnit', cellsalign: 'right', align: 'right', width: 200 },
                  { text: 'Unit Price', datafield: 'UnitPrice', align: 'right', cellsalign: 'right', cellsformat: 'c2', width: 200 },
                  { text: 'Units In Stock', datafield: 'UnitsInStock', cellsalign: 'right', width: 100 },
                  { text: 'Discontinued', columntype: 'checkbox', datafield: 'Discontinued' }
                ];

        JQXElements.settings["gridSettings"] =
        {
			 source:adapter, columns:columns, theme:"light", rendertoolbar:"rendertoolbar"            
        }

    </script>
</head>
<body>
   <jqx-grid settings="gridSettings"></jqx-grid>
</body>
</html>

rendergridrows function null

Sets or gets the rendergridrows property.

<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>Grid Custom Element</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />
    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />
    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.pager.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.sort.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.edit.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.filter.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.columnsresize.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.aggregates.js"></script>
    <script type="text/javascript">
		var adapter = new jqx.dataAdapter({
			dataType: "xml",
			dataFields: [
				{ name: 'ProductName', type: 'string' },
				{ name: 'QuantityPerUnit', type: 'int' },
				{ name: 'UnitPrice', type: 'float' },
				{ name: 'UnitsInStock', type: 'float' },
				{ name: 'Discontinued', type: 'bool' }
			],
			root: "Products",
			record: "Product",
			id: 'ProductID',
			url: "../sampledata/products.xml"
		});

		var columns = [
                  { text: 'Product Name', datafield: 'ProductName', width: 250 },
                  { text: 'Quantity per Unit', datafield: 'QuantityPerUnit', cellsalign: 'right', align: 'right', width: 200 },
                  { text: 'Unit Price', datafield: 'UnitPrice', align: 'right', cellsalign: 'right', cellsformat: 'c2', width: 200 },
                  { text: 'Units In Stock', datafield: 'UnitsInStock', cellsalign: 'right', width: 100 },
                  { text: 'Discontinued', columntype: 'checkbox', datafield: 'Discontinued' }
                ];

        JQXElements.settings["gridSettings"] =
        {
			 source:adapter, columns:columns, theme:"light",virtualmode:true, rendergridrows:"rendergridrows"            
        }

    </script>
</head>
<body>
   <jqx-grid settings="gridSettings"></jqx-grid>
</body>
</html>

sortable boolean false

Sets or gets the sortable property.

<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>Grid Custom Element</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />
    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />
    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.pager.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.sort.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.edit.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.filter.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.columnsresize.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.aggregates.js"></script>
    <script type="text/javascript">
		var adapter = new jqx.dataAdapter({
			dataType: "xml",
			dataFields: [
				{ name: 'ProductName', type: 'string' },
				{ name: 'QuantityPerUnit', type: 'int' },
				{ name: 'UnitPrice', type: 'float' },
				{ name: 'UnitsInStock', type: 'float' },
				{ name: 'Discontinued', type: 'bool' }
			],
			root: "Products",
			record: "Product",
			id: 'ProductID',
			url: "../sampledata/products.xml"
		});

		var columns = [
                  { text: 'Product Name', datafield: 'ProductName', width: 250 },
                  { text: 'Quantity per Unit', datafield: 'QuantityPerUnit', cellsalign: 'right', align: 'right', width: 200 },
                  { text: 'Unit Price', datafield: 'UnitPrice', align: 'right', cellsalign: 'right', cellsformat: 'c2', width: 200 },
                  { text: 'Units In Stock', datafield: 'UnitsInStock', cellsalign: 'right', width: 100 },
                  { text: 'Discontinued', columntype: 'checkbox', datafield: 'Discontinued' }
                ];

        JQXElements.settings["gridSettings"] =
        {
			 source:adapter, columns:columns, theme:"light",sortable:true            
        }

    </script>
</head>
<body>
   <jqx-grid settings="gridSettings"></jqx-grid>
</body>
</html>

selectedrowindex number -1

Sets or gets the selectedrowindex property.

<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>Grid Custom Element</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />
    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />
    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.pager.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.sort.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.edit.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.filter.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.columnsresize.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.aggregates.js"></script>
    <script type="text/javascript">
		var adapter = new jqx.dataAdapter({
			dataType: "xml",
			dataFields: [
				{ name: 'ProductName', type: 'string' },
				{ name: 'QuantityPerUnit', type: 'int' },
				{ name: 'UnitPrice', type: 'float' },
				{ name: 'UnitsInStock', type: 'float' },
				{ name: 'Discontinued', type: 'bool' }
			],
			root: "Products",
			record: "Product",
			id: 'ProductID',
			url: "../sampledata/products.xml"
		});

		var columns = [
                  { text: 'Product Name', datafield: 'ProductName', width: 250 },
                  { text: 'Quantity per Unit', datafield: 'QuantityPerUnit', cellsalign: 'right', align: 'right', width: 200 },
                  { text: 'Unit Price', datafield: 'UnitPrice', align: 'right', cellsalign: 'right', cellsformat: 'c2', width: 200 },
                  { text: 'Units In Stock', datafield: 'UnitsInStock', cellsalign: 'right', width: 100 },
                  { text: 'Discontinued', columntype: 'checkbox', datafield: 'Discontinued' }
                ];

        JQXElements.settings["gridSettings"] =
        {
			 source:adapter, columns:columns, theme:"light",selectedrowindex:3            
        }

    </script>
</head>
<body>
   <jqx-grid settings="gridSettings"></jqx-grid>
</body>
</html>

selectedrowindexes array []

Sets or gets the selectedrowindexes property.

<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>Grid Custom Element</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />
    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />
    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.pager.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.sort.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.edit.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.filter.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.columnsresize.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.aggregates.js"></script>
    <script type="text/javascript">
		var adapter = new jqx.dataAdapter({
			dataType: "xml",
			dataFields: [
				{ name: 'ProductName', type: 'string' },
				{ name: 'QuantityPerUnit', type: 'int' },
				{ name: 'UnitPrice', type: 'float' },
				{ name: 'UnitsInStock', type: 'float' },
				{ name: 'Discontinued', type: 'bool' }
			],
			root: "Products",
			record: "Product",
			id: 'ProductID',
			url: "../sampledata/products.xml"
		});

		var columns = [
                  { text: 'Product Name', datafield: 'ProductName', width: 250 },
                  { text: 'Quantity per Unit', datafield: 'QuantityPerUnit', cellsalign: 'right', align: 'right', width: 200 },
                  { text: 'Unit Price', datafield: 'UnitPrice', align: 'right', cellsalign: 'right', cellsformat: 'c2', width: 200 },
                  { text: 'Units In Stock', datafield: 'UnitsInStock', cellsalign: 'right', width: 100 },
                  { text: 'Discontinued', columntype: 'checkbox', datafield: 'Discontinued' }
                ];

        JQXElements.settings["gridSettings"] =
        {
			 source:adapter, columns:columns, theme:"light", selectedrowindexes:"[3,5,10]"            
        }

    </script>
</head>
<body>
   <jqx-grid settings="gridSettings"></jqx-grid>
</body>
</html>

source object {}

Sets or gets the source property.

<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>Grid Custom Element</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />
    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />
    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.pager.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.sort.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.edit.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.filter.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.columnsresize.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.aggregates.js"></script>
    <script type="text/javascript">
		var adapter = new jqx.dataAdapter({
			dataType: "xml",
			dataFields: [
				{ name: 'ProductName', type: 'string' },
				{ name: 'QuantityPerUnit', type: 'int' },
				{ name: 'UnitPrice', type: 'float' },
				{ name: 'UnitsInStock', type: 'float' },
				{ name: 'Discontinued', type: 'bool' }
			],
			root: "Products",
			record: "Product",
			id: 'ProductID',
			url: "../sampledata/products.xml"
		});

		var columns = [
                  { text: 'Product Name', datafield: 'ProductName', width: 250 },
                  { text: 'Quantity per Unit', datafield: 'QuantityPerUnit', cellsalign: 'right', align: 'right', width: 200 },
                  { text: 'Unit Price', datafield: 'UnitPrice', align: 'right', cellsalign: 'right', cellsformat: 'c2', width: 200 },
                  { text: 'Units In Stock', datafield: 'UnitsInStock', cellsalign: 'right', width: 100 },
                  { text: 'Discontinued', columntype: 'checkbox', datafield: 'Discontinued' }
                ];

        JQXElements.settings["gridSettings"] =
        {
			 source:adapter, columns:columns, theme:"light"            
        }

    </script>
</head>
<body>
   <jqx-grid settings="gridSettings"></jqx-grid>
</body>
</html>

sorttogglestates number 2

Sets or gets the sorttogglestates property.

<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>Grid Custom Element</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />
    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />
    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.pager.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.sort.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.edit.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.filter.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.columnsresize.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.aggregates.js"></script>
    <script type="text/javascript">
		var adapter = new jqx.dataAdapter({
			dataType: "xml",
			dataFields: [
				{ name: 'ProductName', type: 'string' },
				{ name: 'QuantityPerUnit', type: 'int' },
				{ name: 'UnitPrice', type: 'float' },
				{ name: 'UnitsInStock', type: 'float' },
				{ name: 'Discontinued', type: 'bool' }
			],
			root: "Products",
			record: "Product",
			id: 'ProductID',
			url: "../sampledata/products.xml"
		});

		var columns = [
                  { text: 'Product Name', datafield: 'ProductName', width: 250 },
                  { text: 'Quantity per Unit', datafield: 'QuantityPerUnit', cellsalign: 'right', align: 'right', width: 200 },
                  { text: 'Unit Price', datafield: 'UnitPrice', align: 'right', cellsalign: 'right', cellsformat: 'c2', width: 200 },
                  { text: 'Units In Stock', datafield: 'UnitsInStock', cellsalign: 'right', width: 100 },
                  { text: 'Discontinued', columntype: 'checkbox', datafield: 'Discontinued' }
                ];

        JQXElements.settings["gridSettings"] =
        {
			 source:adapter, columns:columns, theme:"light",sortable:true,sorttogglestates:1            
        }

    </script>
</head>
<body>
   <jqx-grid settings="gridSettings"></jqx-grid>
</body>
</html>

updatedelay number 0

Sets or gets the updatedelay property.

<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>Grid Custom Element</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />
    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />
    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.pager.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.sort.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.edit.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.filter.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.columnsresize.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.aggregates.js"></script>
    <script type="text/javascript">
		var adapter = new jqx.dataAdapter({
			dataType: "xml",
			dataFields: [
				{ name: 'ProductName', type: 'string' },
				{ name: 'QuantityPerUnit', type: 'int' },
				{ name: 'UnitPrice', type: 'float' },
				{ name: 'UnitsInStock', type: 'float' },
				{ name: 'Discontinued', type: 'bool' }
			],
			root: "Products",
			record: "Product",
			id: 'ProductID',
			url: "../sampledata/products.xml"
		});

		var columns = [
                  { text: 'Product Name', datafield: 'ProductName', width: 250 },
                  { text: 'Quantity per Unit', datafield: 'QuantityPerUnit', cellsalign: 'right', align: 'right', width: 200 },
                  { text: 'Unit Price', datafield: 'UnitPrice', align: 'right', cellsalign: 'right', cellsformat: 'c2', width: 200 },
                  { text: 'Units In Stock', datafield: 'UnitsInStock', cellsalign: 'right', width: 100 },
                  { text: 'Discontinued', columntype: 'checkbox', datafield: 'Discontinued' }
                ];

        JQXElements.settings["gridSettings"] =
        {
			 source:adapter, columns:columns, theme:"light",updatedelay:20            
        }

    </script>
</head>
<body>
   <jqx-grid settings="gridSettings"></jqx-grid>
</body>
</html>

virtualmode boolean false

Sets or gets the virtualmode property.

<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>Grid Custom Element</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />
    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />
    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.pager.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.sort.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.edit.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.filter.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.columnsresize.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.aggregates.js"></script>
    <script type="text/javascript">
		var adapter = new jqx.dataAdapter({
			dataType: "xml",
			dataFields: [
				{ name: 'ProductName', type: 'string' },
				{ name: 'QuantityPerUnit', type: 'int' },
				{ name: 'UnitPrice', type: 'float' },
				{ name: 'UnitsInStock', type: 'float' },
				{ name: 'Discontinued', type: 'bool' }
			],
			root: "Products",
			record: "Product",
			id: 'ProductID',
			url: "../sampledata/products.xml"
		});

		var columns = [
                  { text: 'Product Name', datafield: 'ProductName', width: 250 },
                  { text: 'Quantity per Unit', datafield: 'QuantityPerUnit', cellsalign: 'right', align: 'right', width: 200 },
                  { text: 'Unit Price', datafield: 'UnitPrice', align: 'right', cellsalign: 'right', cellsformat: 'c2', width: 200 },
                  { text: 'Units In Stock', datafield: 'UnitsInStock', cellsalign: 'right', width: 100 },
                  { text: 'Discontinued', columntype: 'checkbox', datafield: 'Discontinued' }
                ];

        JQXElements.settings["gridSettings"] =
        {
			 source:adapter, columns:columns, theme:"light",virtualmode:true, rendergridrows:"rendergridrows"            
        }

    </script>
</head>
<body>
   <jqx-grid settings="gridSettings"></jqx-grid>
</body>
</html>

verticalscrollbarstep number 5

Sets or gets the verticalscrollbarstep property.

<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>Grid Custom Element</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />
    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />
    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.pager.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.sort.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.edit.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.filter.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.columnsresize.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.aggregates.js"></script>
    <script type="text/javascript">
		var adapter = new jqx.dataAdapter({
			dataType: "xml",
			dataFields: [
				{ name: 'ProductName', type: 'string' },
				{ name: 'QuantityPerUnit', type: 'int' },
				{ name: 'UnitPrice', type: 'float' },
				{ name: 'UnitsInStock', type: 'float' },
				{ name: 'Discontinued', type: 'bool' }
			],
			root: "Products",
			record: "Product",
			id: 'ProductID',
			url: "../sampledata/products.xml"
		});

		var columns = [
                  { text: 'Product Name', datafield: 'ProductName', width: 250 },
                  { text: 'Quantity per Unit', datafield: 'QuantityPerUnit', cellsalign: 'right', align: 'right', width: 200 },
                  { text: 'Unit Price', datafield: 'UnitPrice', align: 'right', cellsalign: 'right', cellsformat: 'c2', width: 200 },
                  { text: 'Units In Stock', datafield: 'UnitsInStock', cellsalign: 'right', width: 100 },
                  { text: 'Discontinued', columntype: 'checkbox', datafield: 'Discontinued' }
                ];

        JQXElements.settings["gridSettings"] =
        {
			 source:adapter, columns:columns, theme:"light",verticalscrollbarstep:200            
        }

    </script>
</head>
<body>
   <jqx-grid settings="gridSettings"></jqx-grid>
</body>
</html>

verticalscrollbarlargestep number 400

Sets or gets the verticalscrollbarlargestep property.

<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>Grid Custom Element</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />
    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />
    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.pager.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.sort.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.edit.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.filter.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.columnsresize.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.aggregates.js"></script>
    <script type="text/javascript">
		var adapter = new jqx.dataAdapter({
			dataType: "xml",
			dataFields: [
				{ name: 'ProductName', type: 'string' },
				{ name: 'QuantityPerUnit', type: 'int' },
				{ name: 'UnitPrice', type: 'float' },
				{ name: 'UnitsInStock', type: 'float' },
				{ name: 'Discontinued', type: 'bool' }
			],
			root: "Products",
			record: "Product",
			id: 'ProductID',
			url: "../sampledata/products.xml"
		});

		var columns = [
                  { text: 'Product Name', datafield: 'ProductName', width: 250 },
                  { text: 'Quantity per Unit', datafield: 'QuantityPerUnit', cellsalign: 'right', align: 'right', width: 200 },
                  { text: 'Unit Price', datafield: 'UnitPrice', align: 'right', cellsalign: 'right', cellsformat: 'c2', width: 200 },
                  { text: 'Units In Stock', datafield: 'UnitsInStock', cellsalign: 'right', width: 100 },
                  { text: 'Discontinued', columntype: 'checkbox', datafield: 'Discontinued' }
                ];

        JQXElements.settings["gridSettings"] =
        {
			 source:adapter, columns:columns, theme:"light",verticalscrollbarlargestep:2000            
        }

    </script>
</head>
<body>
   <jqx-grid settings="gridSettings"></jqx-grid>
</body>
</html>

bindingcomplete Event

Code examples

Bind to the bindingcomplete event of jqxGrid.

<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>Grid Custom Element</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />
    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />
    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.pager.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.sort.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.edit.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.filter.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.columnsresize.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.aggregates.js"></script>
    <script type="text/javascript">
		var adapter = new jqx.dataAdapter({
			dataType: "xml",
			dataFields: [
				{ name: 'ProductName', type: 'string' },
				{ name: 'QuantityPerUnit', type: 'int' },
				{ name: 'UnitPrice', type: 'float' },
				{ name: 'UnitsInStock', type: 'float' },
				{ name: 'Discontinued', type: 'bool' }
			],
			root: "Products",
			record: "Product",
			id: 'ProductID',
			url: "../sampledata/products.xml"
		});

		var columns = [
                  { text: 'Product Name', datafield: 'ProductName', width: 250 },
                  { text: 'Quantity per Unit', datafield: 'QuantityPerUnit', cellsalign: 'right', align: 'right', width: 200 },
                  { text: 'Unit Price', datafield: 'UnitPrice', align: 'right', cellsalign: 'right', cellsformat: 'c2', width: 200 },
                  { text: 'Units In Stock', datafield: 'UnitsInStock', cellsalign: 'right', width: 100 },
                  { text: 'Discontinued', columntype: 'checkbox', datafield: 'Discontinued' }
                ];

        JQXElements.settings["gridSettings"] =
        {
			 source:adapter, columns:columns, theme:"light"            
        }
	window.onload = function() {
		document.querySelector("jqx-grid").addEventListener("bindingcomplete", function(event) {
			// Your code here.
		});
	};
    </script>
</head>
<body>
   <jqx-grid settings="gridSettings"></jqx-grid>
</body>
</html>

columnresized Event

Code examples

Bind to the columnresized event of jqxGrid.

<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>Grid Custom Element</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />
    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />
    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.pager.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.sort.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.edit.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.filter.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.columnsresize.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.aggregates.js"></script>
    <script type="text/javascript">
		var adapter = new jqx.dataAdapter({
			dataType: "xml",
			dataFields: [
				{ name: 'ProductName', type: 'string' },
				{ name: 'QuantityPerUnit', type: 'int' },
				{ name: 'UnitPrice', type: 'float' },
				{ name: 'UnitsInStock', type: 'float' },
				{ name: 'Discontinued', type: 'bool' }
			],
			root: "Products",
			record: "Product",
			id: 'ProductID',
			url: "../sampledata/products.xml"
		});

		var columns = [
                  { text: 'Product Name', datafield: 'ProductName', width: 250 },
                  { text: 'Quantity per Unit', datafield: 'QuantityPerUnit', cellsalign: 'right', align: 'right', width: 200 },
                  { text: 'Unit Price', datafield: 'UnitPrice', align: 'right', cellsalign: 'right', cellsformat: 'c2', width: 200 },
                  { text: 'Units In Stock', datafield: 'UnitsInStock', cellsalign: 'right', width: 100 },
                  { text: 'Discontinued', columntype: 'checkbox', datafield: 'Discontinued' }
                ];

        JQXElements.settings["gridSettings"] =
        {
			 source:adapter, columns:columns, theme:"light"            
        }
	window.onload = function() {
		document.querySelector("jqx-grid").addEventListener("columnresized", function(event) {
			// Your code here.
		});
	};
    </script>
</head>
<body>
   <jqx-grid settings="gridSettings"></jqx-grid>
</body>
</html>

columnreordered Event

Code examples

Bind to the columnreordered event of jqxGrid.

<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>Grid Custom Element</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />
    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />
    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.pager.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.sort.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.edit.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.filter.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.columnsresize.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.aggregates.js"></script>
    <script type="text/javascript">
		var adapter = new jqx.dataAdapter({
			dataType: "xml",
			dataFields: [
				{ name: 'ProductName', type: 'string' },
				{ name: 'QuantityPerUnit', type: 'int' },
				{ name: 'UnitPrice', type: 'float' },
				{ name: 'UnitsInStock', type: 'float' },
				{ name: 'Discontinued', type: 'bool' }
			],
			root: "Products",
			record: "Product",
			id: 'ProductID',
			url: "../sampledata/products.xml"
		});

		var columns = [
                  { text: 'Product Name', datafield: 'ProductName', width: 250 },
                  { text: 'Quantity per Unit', datafield: 'QuantityPerUnit', cellsalign: 'right', align: 'right', width: 200 },
                  { text: 'Unit Price', datafield: 'UnitPrice', align: 'right', cellsalign: 'right', cellsformat: 'c2', width: 200 },
                  { text: 'Units In Stock', datafield: 'UnitsInStock', cellsalign: 'right', width: 100 },
                  { text: 'Discontinued', columntype: 'checkbox', datafield: 'Discontinued' }
                ];

        JQXElements.settings["gridSettings"] =
        {
			 source:adapter, columns:columns, theme:"light"            
        }
	window.onload = function() {
		document.querySelector("jqx-grid").addEventListener("columnreordered", function(event) {
			// Your code here.
		});
	};
    </script>
</head>
<body>
   <jqx-grid settings="gridSettings"></jqx-grid>
</body>
</html>

columnclick Event

Code examples

Bind to the columnclick event of jqxGrid.

<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>Grid Custom Element</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />
    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />
    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.pager.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.sort.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.edit.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.filter.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.columnsresize.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.aggregates.js"></script>
    <script type="text/javascript">
		var adapter = new jqx.dataAdapter({
			dataType: "xml",
			dataFields: [
				{ name: 'ProductName', type: 'string' },
				{ name: 'QuantityPerUnit', type: 'int' },
				{ name: 'UnitPrice', type: 'float' },
				{ name: 'UnitsInStock', type: 'float' },
				{ name: 'Discontinued', type: 'bool' }
			],
			root: "Products",
			record: "Product",
			id: 'ProductID',
			url: "../sampledata/products.xml"
		});

		var columns = [
                  { text: 'Product Name', datafield: 'ProductName', width: 250 },
                  { text: 'Quantity per Unit', datafield: 'QuantityPerUnit', cellsalign: 'right', align: 'right', width: 200 },
                  { text: 'Unit Price', datafield: 'UnitPrice', align: 'right', cellsalign: 'right', cellsformat: 'c2', width: 200 },
                  { text: 'Units In Stock', datafield: 'UnitsInStock', cellsalign: 'right', width: 100 },
                  { text: 'Discontinued', columntype: 'checkbox', datafield: 'Discontinued' }
                ];

        JQXElements.settings["gridSettings"] =
        {
			 source:adapter, columns:columns, theme:"light"            
        }
	window.onload = function() {
		document.querySelector("jqx-grid").addEventListener("columnclick", function(event) {
			// Your code here.
		});
	};
    </script>
</head>
<body>
   <jqx-grid settings="gridSettings"></jqx-grid>
</body>
</html>

cellclick Event

Code examples

Bind to the cellclick event of jqxGrid.

<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>Grid Custom Element</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />
    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />
    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.pager.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.sort.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.edit.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.filter.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.columnsresize.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.aggregates.js"></script>
    <script type="text/javascript">
		var adapter = new jqx.dataAdapter({
			dataType: "xml",
			dataFields: [
				{ name: 'ProductName', type: 'string' },
				{ name: 'QuantityPerUnit', type: 'int' },
				{ name: 'UnitPrice', type: 'float' },
				{ name: 'UnitsInStock', type: 'float' },
				{ name: 'Discontinued', type: 'bool' }
			],
			root: "Products",
			record: "Product",
			id: 'ProductID',
			url: "../sampledata/products.xml"
		});

		var columns = [
                  { text: 'Product Name', datafield: 'ProductName', width: 250 },
                  { text: 'Quantity per Unit', datafield: 'QuantityPerUnit', cellsalign: 'right', align: 'right', width: 200 },
                  { text: 'Unit Price', datafield: 'UnitPrice', align: 'right', cellsalign: 'right', cellsformat: 'c2', width: 200 },
                  { text: 'Units In Stock', datafield: 'UnitsInStock', cellsalign: 'right', width: 100 },
                  { text: 'Discontinued', columntype: 'checkbox', datafield: 'Discontinued' }
                ];

        JQXElements.settings["gridSettings"] =
        {
			 source:adapter, columns:columns, theme:"light"            
        }
	window.onload = function() {
		document.querySelector("jqx-grid").addEventListener("cellclick", function(event) {
			// Your code here.
		});
	};
    </script>
</head>
<body>
   <jqx-grid settings="gridSettings"></jqx-grid>
</body>
</html>

celldoubleclick Event

Code examples

Bind to the celldoubleclick event of jqxGrid.

<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>Grid Custom Element</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />
    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />
    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.pager.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.sort.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.edit.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.filter.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.columnsresize.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.aggregates.js"></script>
    <script type="text/javascript">
		var adapter = new jqx.dataAdapter({
			dataType: "xml",
			dataFields: [
				{ name: 'ProductName', type: 'string' },
				{ name: 'QuantityPerUnit', type: 'int' },
				{ name: 'UnitPrice', type: 'float' },
				{ name: 'UnitsInStock', type: 'float' },
				{ name: 'Discontinued', type: 'bool' }
			],
			root: "Products",
			record: "Product",
			id: 'ProductID',
			url: "../sampledata/products.xml"
		});

		var columns = [
                  { text: 'Product Name', datafield: 'ProductName', width: 250 },
                  { text: 'Quantity per Unit', datafield: 'QuantityPerUnit', cellsalign: 'right', align: 'right', width: 200 },
                  { text: 'Unit Price', datafield: 'UnitPrice', align: 'right', cellsalign: 'right', cellsformat: 'c2', width: 200 },
                  { text: 'Units In Stock', datafield: 'UnitsInStock', cellsalign: 'right', width: 100 },
                  { text: 'Discontinued', columntype: 'checkbox', datafield: 'Discontinued' }
                ];

        JQXElements.settings["gridSettings"] =
        {
			 source:adapter, columns:columns, theme:"light"            
        }
	window.onload = function() {
		document.querySelector("jqx-grid").addEventListener("celldoubleclick", function(event) {
			// Your code here.
		});
	};
    </script>
</head>
<body>
   <jqx-grid settings="gridSettings"></jqx-grid>
</body>
</html>

cellselect Event

Code examples

Bind to the cellselect event of jqxGrid.

<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>Grid Custom Element</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />
    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />
    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.pager.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.sort.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.edit.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.filter.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.columnsresize.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.aggregates.js"></script>
    <script type="text/javascript">
		var adapter = new jqx.dataAdapter({
			dataType: "xml",
			dataFields: [
				{ name: 'ProductName', type: 'string' },
				{ name: 'QuantityPerUnit', type: 'int' },
				{ name: 'UnitPrice', type: 'float' },
				{ name: 'UnitsInStock', type: 'float' },
				{ name: 'Discontinued', type: 'bool' }
			],
			root: "Products",
			record: "Product",
			id: 'ProductID',
			url: "../sampledata/products.xml"
		});

		var columns = [
                  { text: 'Product Name', datafield: 'ProductName', width: 250 },
                  { text: 'Quantity per Unit', datafield: 'QuantityPerUnit', cellsalign: 'right', align: 'right', width: 200 },
                  { text: 'Unit Price', datafield: 'UnitPrice', align: 'right', cellsalign: 'right', cellsformat: 'c2', width: 200 },
                  { text: 'Units In Stock', datafield: 'UnitsInStock', cellsalign: 'right', width: 100 },
                  { text: 'Discontinued', columntype: 'checkbox', datafield: 'Discontinued' }
                ];

        JQXElements.settings["gridSettings"] =
        {
			 source:adapter, columns:columns, theme:"light"            
        }
	window.onload = function() {
		document.querySelector("jqx-grid").addEventListener("cellselect", function(event) {
			// Your code here.
		});
	};
    </script>
</head>
<body>
   <jqx-grid settings="gridSettings"></jqx-grid>
</body>
</html>

cellunselect Event

Code examples

Bind to the cellunselect event of jqxGrid.

<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>Grid Custom Element</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />
    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />
    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.pager.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.sort.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.edit.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.filter.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.columnsresize.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.aggregates.js"></script>
    <script type="text/javascript">
		var adapter = new jqx.dataAdapter({
			dataType: "xml",
			dataFields: [
				{ name: 'ProductName', type: 'string' },
				{ name: 'QuantityPerUnit', type: 'int' },
				{ name: 'UnitPrice', type: 'float' },
				{ name: 'UnitsInStock', type: 'float' },
				{ name: 'Discontinued', type: 'bool' }
			],
			root: "Products",
			record: "Product",
			id: 'ProductID',
			url: "../sampledata/products.xml"
		});

		var columns = [
                  { text: 'Product Name', datafield: 'ProductName', width: 250 },
                  { text: 'Quantity per Unit', datafield: 'QuantityPerUnit', cellsalign: 'right', align: 'right', width: 200 },
                  { text: 'Unit Price', datafield: 'UnitPrice', align: 'right', cellsalign: 'right', cellsformat: 'c2', width: 200 },
                  { text: 'Units In Stock', datafield: 'UnitsInStock', cellsalign: 'right', width: 100 },
                  { text: 'Discontinued', columntype: 'checkbox', datafield: 'Discontinued' }
                ];

        JQXElements.settings["gridSettings"] =
        {
			 source:adapter, columns:columns, theme:"light"            
        }
	window.onload = function() {
		document.querySelector("jqx-grid").addEventListener("cellunselect", function(event) {
			// Your code here.
		});
	};
    </script>
</head>
<body>
   <jqx-grid settings="gridSettings"></jqx-grid>
</body>
</html>

cellvaluechanged Event

Code examples

Bind to the cellvaluechanged event of jqxGrid.

<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>Grid Custom Element</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />
    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />
    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.pager.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.sort.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.edit.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.filter.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.columnsresize.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.aggregates.js"></script>
    <script type="text/javascript">
		var adapter = new jqx.dataAdapter({
			dataType: "xml",
			dataFields: [
				{ name: 'ProductName', type: 'string' },
				{ name: 'QuantityPerUnit', type: 'int' },
				{ name: 'UnitPrice', type: 'float' },
				{ name: 'UnitsInStock', type: 'float' },
				{ name: 'Discontinued', type: 'bool' }
			],
			root: "Products",
			record: "Product",
			id: 'ProductID',
			url: "../sampledata/products.xml"
		});

		var columns = [
                  { text: 'Product Name', datafield: 'ProductName', width: 250 },
                  { text: 'Quantity per Unit', datafield: 'QuantityPerUnit', cellsalign: 'right', align: 'right', width: 200 },
                  { text: 'Unit Price', datafield: 'UnitPrice', align: 'right', cellsalign: 'right', cellsformat: 'c2', width: 200 },
                  { text: 'Units In Stock', datafield: 'UnitsInStock', cellsalign: 'right', width: 100 },
                  { text: 'Discontinued', columntype: 'checkbox', datafield: 'Discontinued' }
                ];

        JQXElements.settings["gridSettings"] =
        {
			 source:adapter, columns:columns, theme:"light"            
        }
	window.onload = function() {
		document.querySelector("jqx-grid").addEventListener("cellvaluechanged", function(event) {
			// Your code here.
		});
	};
    </script>
</head>
<body>
   <jqx-grid settings="gridSettings"></jqx-grid>
</body>
</html>

cellbeginedit Event

Code examples

Bind to the cellbeginedit event of jqxGrid.

<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>Grid Custom Element</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />
    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />
    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.pager.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.sort.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.edit.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.filter.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.columnsresize.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.aggregates.js"></script>
    <script type="text/javascript">
		var adapter = new jqx.dataAdapter({
			dataType: "xml",
			dataFields: [
				{ name: 'ProductName', type: 'string' },
				{ name: 'QuantityPerUnit', type: 'int' },
				{ name: 'UnitPrice', type: 'float' },
				{ name: 'UnitsInStock', type: 'float' },
				{ name: 'Discontinued', type: 'bool' }
			],
			root: "Products",
			record: "Product",
			id: 'ProductID',
			url: "../sampledata/products.xml"
		});

		var columns = [
                  { text: 'Product Name', datafield: 'ProductName', width: 250 },
                  { text: 'Quantity per Unit', datafield: 'QuantityPerUnit', cellsalign: 'right', align: 'right', width: 200 },
                  { text: 'Unit Price', datafield: 'UnitPrice', align: 'right', cellsalign: 'right', cellsformat: 'c2', width: 200 },
                  { text: 'Units In Stock', datafield: 'UnitsInStock', cellsalign: 'right', width: 100 },
                  { text: 'Discontinued', columntype: 'checkbox', datafield: 'Discontinued' }
                ];

        JQXElements.settings["gridSettings"] =
        {
			 source:adapter, columns:columns, theme:"light"            
        }
	window.onload = function() {
		document.querySelector("jqx-grid").addEventListener("cellbeginedit", function(event) {
			// Your code here.
		});
	};
    </script>
</head>
<body>
   <jqx-grid settings="gridSettings"></jqx-grid>
</body>
</html>

cellendedit Event

Code examples

Bind to the cellendedit event of jqxGrid.

<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>Grid Custom Element</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />
    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />
    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.pager.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.sort.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.edit.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.filter.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.columnsresize.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.aggregates.js"></script>
    <script type="text/javascript">
		var adapter = new jqx.dataAdapter({
			dataType: "xml",
			dataFields: [
				{ name: 'ProductName', type: 'string' },
				{ name: 'QuantityPerUnit', type: 'int' },
				{ name: 'UnitPrice', type: 'float' },
				{ name: 'UnitsInStock', type: 'float' },
				{ name: 'Discontinued', type: 'bool' }
			],
			root: "Products",
			record: "Product",
			id: 'ProductID',
			url: "../sampledata/products.xml"
		});

		var columns = [
                  { text: 'Product Name', datafield: 'ProductName', width: 250 },
                  { text: 'Quantity per Unit', datafield: 'QuantityPerUnit', cellsalign: 'right', align: 'right', width: 200 },
                  { text: 'Unit Price', datafield: 'UnitPrice', align: 'right', cellsalign: 'right', cellsformat: 'c2', width: 200 },
                  { text: 'Units In Stock', datafield: 'UnitsInStock', cellsalign: 'right', width: 100 },
                  { text: 'Discontinued', columntype: 'checkbox', datafield: 'Discontinued' }
                ];

        JQXElements.settings["gridSettings"] =
        {
			 source:adapter, columns:columns, theme:"light"            
        }
	window.onload = function() {
		document.querySelector("jqx-grid").addEventListener("cellendedit", function(event) {
			// Your code here.
		});
	};
    </script>
</head>
<body>
   <jqx-grid settings="gridSettings"></jqx-grid>
</body>
</html>

filter Event

Code examples

Bind to the filter event of jqxGrid.

<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>Grid Custom Element</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />
    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />
    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.pager.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.sort.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.edit.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.filter.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.columnsresize.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.aggregates.js"></script>
    <script type="text/javascript">
		var adapter = new jqx.dataAdapter({
			dataType: "xml",
			dataFields: [
				{ name: 'ProductName', type: 'string' },
				{ name: 'QuantityPerUnit', type: 'int' },
				{ name: 'UnitPrice', type: 'float' },
				{ name: 'UnitsInStock', type: 'float' },
				{ name: 'Discontinued', type: 'bool' }
			],
			root: "Products",
			record: "Product",
			id: 'ProductID',
			url: "../sampledata/products.xml"
		});

		var columns = [
                  { text: 'Product Name', datafield: 'ProductName', width: 250 },
                  { text: 'Quantity per Unit', datafield: 'QuantityPerUnit', cellsalign: 'right', align: 'right', width: 200 },
                  { text: 'Unit Price', datafield: 'UnitPrice', align: 'right', cellsalign: 'right', cellsformat: 'c2', width: 200 },
                  { text: 'Units In Stock', datafield: 'UnitsInStock', cellsalign: 'right', width: 100 },
                  { text: 'Discontinued', columntype: 'checkbox', datafield: 'Discontinued' }
                ];

        JQXElements.settings["gridSettings"] =
        {
			 source:adapter, columns:columns, theme:"light"            
        }
	window.onload = function() {
		document.querySelector("jqx-grid").addEventListener("filter", function(event) {
			// Your code here.
		});
	};
    </script>
</head>
<body>
   <jqx-grid settings="gridSettings"></jqx-grid>
</body>
</html>

groupschanged Event

Code examples

Bind to the groupschanged event of jqxGrid.

<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>Grid Custom Element</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />
    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />
    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.pager.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.sort.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.edit.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.filter.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.columnsresize.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.aggregates.js"></script>
    <script type="text/javascript">
		var adapter = new jqx.dataAdapter({
			dataType: "xml",
			dataFields: [
				{ name: 'ProductName', type: 'string' },
				{ name: 'QuantityPerUnit', type: 'int' },
				{ name: 'UnitPrice', type: 'float' },
				{ name: 'UnitsInStock', type: 'float' },
				{ name: 'Discontinued', type: 'bool' }
			],
			root: "Products",
			record: "Product",
			id: 'ProductID',
			url: "../sampledata/products.xml"
		});

		var columns = [
                  { text: 'Product Name', datafield: 'ProductName', width: 250 },
                  { text: 'Quantity per Unit', datafield: 'QuantityPerUnit', cellsalign: 'right', align: 'right', width: 200 },
                  { text: 'Unit Price', datafield: 'UnitPrice', align: 'right', cellsalign: 'right', cellsformat: 'c2', width: 200 },
                  { text: 'Units In Stock', datafield: 'UnitsInStock', cellsalign: 'right', width: 100 },
                  { text: 'Discontinued', columntype: 'checkbox', datafield: 'Discontinued' }
                ];

        JQXElements.settings["gridSettings"] =
        {
			 source:adapter, columns:columns, theme:"light"            
        }
	window.onload = function() {
		document.querySelector("jqx-grid").addEventListener("groupschanged", function(event) {
			// Your code here.
		});
	};
    </script>
</head>
<body>
   <jqx-grid settings="gridSettings"></jqx-grid>
</body>
</html>

groupexpand Event

Code examples

Bind to the groupexpand event of jqxGrid.

<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>Grid Custom Element</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />
    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />
    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.pager.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.sort.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.edit.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.filter.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.columnsresize.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.aggregates.js"></script>
    <script type="text/javascript">
		var adapter = new jqx.dataAdapter({
			dataType: "xml",
			dataFields: [
				{ name: 'ProductName', type: 'string' },
				{ name: 'QuantityPerUnit', type: 'int' },
				{ name: 'UnitPrice', type: 'float' },
				{ name: 'UnitsInStock', type: 'float' },
				{ name: 'Discontinued', type: 'bool' }
			],
			root: "Products",
			record: "Product",
			id: 'ProductID',
			url: "../sampledata/products.xml"
		});

		var columns = [
                  { text: 'Product Name', datafield: 'ProductName', width: 250 },
                  { text: 'Quantity per Unit', datafield: 'QuantityPerUnit', cellsalign: 'right', align: 'right', width: 200 },
                  { text: 'Unit Price', datafield: 'UnitPrice', align: 'right', cellsalign: 'right', cellsformat: 'c2', width: 200 },
                  { text: 'Units In Stock', datafield: 'UnitsInStock', cellsalign: 'right', width: 100 },
                  { text: 'Discontinued', columntype: 'checkbox', datafield: 'Discontinued' }
                ];

        JQXElements.settings["gridSettings"] =
        {
			 source:adapter, columns:columns, theme:"light"            
        }
	window.onload = function() {
		document.querySelector("jqx-grid").addEventListener("groupexpand", function(event) {
			// Your code here.
		});
	};
    </script>
</head>
<body>
   <jqx-grid settings="gridSettings"></jqx-grid>
</body>
</html>

groupcollapse Event

Code examples

Bind to the groupcollapse event of jqxGrid.

<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>Grid Custom Element</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />
    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />
    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.pager.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.sort.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.edit.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.filter.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.columnsresize.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.aggregates.js"></script>
    <script type="text/javascript">
		var adapter = new jqx.dataAdapter({
			dataType: "xml",
			dataFields: [
				{ name: 'ProductName', type: 'string' },
				{ name: 'QuantityPerUnit', type: 'int' },
				{ name: 'UnitPrice', type: 'float' },
				{ name: 'UnitsInStock', type: 'float' },
				{ name: 'Discontinued', type: 'bool' }
			],
			root: "Products",
			record: "Product",
			id: 'ProductID',
			url: "../sampledata/products.xml"
		});

		var columns = [
                  { text: 'Product Name', datafield: 'ProductName', width: 250 },
                  { text: 'Quantity per Unit', datafield: 'QuantityPerUnit', cellsalign: 'right', align: 'right', width: 200 },
                  { text: 'Unit Price', datafield: 'UnitPrice', align: 'right', cellsalign: 'right', cellsformat: 'c2', width: 200 },
                  { text: 'Units In Stock', datafield: 'UnitsInStock', cellsalign: 'right', width: 100 },
                  { text: 'Discontinued', columntype: 'checkbox', datafield: 'Discontinued' }
                ];

        JQXElements.settings["gridSettings"] =
        {
			 source:adapter, columns:columns, theme:"light"            
        }
	window.onload = function() {
		document.querySelector("jqx-grid").addEventListener("groupcollapse", function(event) {
			// Your code here.
		});
	};
    </script>
</head>
<body>
   <jqx-grid settings="gridSettings"></jqx-grid>
</body>
</html>

pagechanged Event

Code examples

Bind to the pagechanged event of jqxGrid.

<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>Grid Custom Element</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />
    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />
    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.pager.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.sort.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.edit.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.filter.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.columnsresize.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.aggregates.js"></script>
    <script type="text/javascript">
		var adapter = new jqx.dataAdapter({
			dataType: "xml",
			dataFields: [
				{ name: 'ProductName', type: 'string' },
				{ name: 'QuantityPerUnit', type: 'int' },
				{ name: 'UnitPrice', type: 'float' },
				{ name: 'UnitsInStock', type: 'float' },
				{ name: 'Discontinued', type: 'bool' }
			],
			root: "Products",
			record: "Product",
			id: 'ProductID',
			url: "../sampledata/products.xml"
		});

		var columns = [
                  { text: 'Product Name', datafield: 'ProductName', width: 250 },
                  { text: 'Quantity per Unit', datafield: 'QuantityPerUnit', cellsalign: 'right', align: 'right', width: 200 },
                  { text: 'Unit Price', datafield: 'UnitPrice', align: 'right', cellsalign: 'right', cellsformat: 'c2', width: 200 },
                  { text: 'Units In Stock', datafield: 'UnitsInStock', cellsalign: 'right', width: 100 },
                  { text: 'Discontinued', columntype: 'checkbox', datafield: 'Discontinued' }
                ];

        JQXElements.settings["gridSettings"] =
        {
			 source:adapter, columns:columns, theme:"light"            
        }
	window.onload = function() {
		document.querySelector("jqx-grid").addEventListener("pagechanged", function(event) {
			// Your code here.
		});
	};
    </script>
</head>
<body>
   <jqx-grid settings="gridSettings"></jqx-grid>
</body>
</html>

pagesizechanged Event

Code examples

Bind to the pagesizechanged event of jqxGrid.

<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>Grid Custom Element</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />
    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />
    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.pager.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.sort.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.edit.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.filter.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.columnsresize.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.aggregates.js"></script>
    <script type="text/javascript">
		var adapter = new jqx.dataAdapter({
			dataType: "xml",
			dataFields: [
				{ name: 'ProductName', type: 'string' },
				{ name: 'QuantityPerUnit', type: 'int' },
				{ name: 'UnitPrice', type: 'float' },
				{ name: 'UnitsInStock', type: 'float' },
				{ name: 'Discontinued', type: 'bool' }
			],
			root: "Products",
			record: "Product",
			id: 'ProductID',
			url: "../sampledata/products.xml"
		});

		var columns = [
                  { text: 'Product Name', datafield: 'ProductName', width: 250 },
                  { text: 'Quantity per Unit', datafield: 'QuantityPerUnit', cellsalign: 'right', align: 'right', width: 200 },
                  { text: 'Unit Price', datafield: 'UnitPrice', align: 'right', cellsalign: 'right', cellsformat: 'c2', width: 200 },
                  { text: 'Units In Stock', datafield: 'UnitsInStock', cellsalign: 'right', width: 100 },
                  { text: 'Discontinued', columntype: 'checkbox', datafield: 'Discontinued' }
                ];

        JQXElements.settings["gridSettings"] =
        {
			 source:adapter, columns:columns, theme:"light"            
        }
	window.onload = function() {
		document.querySelector("jqx-grid").addEventListener("pagesizechanged", function(event) {
			// Your code here.
		});
	};
    </script>
</head>
<body>
   <jqx-grid settings="gridSettings"></jqx-grid>
</body>
</html>

rowclick Event

Code examples

Bind to the rowclick event of jqxGrid.

<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>Grid Custom Element</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />
    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />
    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.pager.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.sort.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.edit.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.filter.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.columnsresize.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.aggregates.js"></script>
    <script type="text/javascript">
		var adapter = new jqx.dataAdapter({
			dataType: "xml",
			dataFields: [
				{ name: 'ProductName', type: 'string' },
				{ name: 'QuantityPerUnit', type: 'int' },
				{ name: 'UnitPrice', type: 'float' },
				{ name: 'UnitsInStock', type: 'float' },
				{ name: 'Discontinued', type: 'bool' }
			],
			root: "Products",
			record: "Product",
			id: 'ProductID',
			url: "../sampledata/products.xml"
		});

		var columns = [
                  { text: 'Product Name', datafield: 'ProductName', width: 250 },
                  { text: 'Quantity per Unit', datafield: 'QuantityPerUnit', cellsalign: 'right', align: 'right', width: 200 },
                  { text: 'Unit Price', datafield: 'UnitPrice', align: 'right', cellsalign: 'right', cellsformat: 'c2', width: 200 },
                  { text: 'Units In Stock', datafield: 'UnitsInStock', cellsalign: 'right', width: 100 },
                  { text: 'Discontinued', columntype: 'checkbox', datafield: 'Discontinued' }
                ];

        JQXElements.settings["gridSettings"] =
        {
			 source:adapter, columns:columns, theme:"light"            
        }
	window.onload = function() {
		document.querySelector("jqx-grid").addEventListener("rowclick", function(event) {
			// Your code here.
		});
	};
    </script>
</head>
<body>
   <jqx-grid settings="gridSettings"></jqx-grid>
</body>
</html>

rowdoubleclick Event

Code examples

Bind to the rowdoubleclick event of jqxGrid.

<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>Grid Custom Element</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />
    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />
    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.pager.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.sort.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.edit.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.filter.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.columnsresize.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.aggregates.js"></script>
    <script type="text/javascript">
		var adapter = new jqx.dataAdapter({
			dataType: "xml",
			dataFields: [
				{ name: 'ProductName', type: 'string' },
				{ name: 'QuantityPerUnit', type: 'int' },
				{ name: 'UnitPrice', type: 'float' },
				{ name: 'UnitsInStock', type: 'float' },
				{ name: 'Discontinued', type: 'bool' }
			],
			root: "Products",
			record: "Product",
			id: 'ProductID',
			url: "../sampledata/products.xml"
		});

		var columns = [
                  { text: 'Product Name', datafield: 'ProductName', width: 250 },
                  { text: 'Quantity per Unit', datafield: 'QuantityPerUnit', cellsalign: 'right', align: 'right', width: 200 },
                  { text: 'Unit Price', datafield: 'UnitPrice', align: 'right', cellsalign: 'right', cellsformat: 'c2', width: 200 },
                  { text: 'Units In Stock', datafield: 'UnitsInStock', cellsalign: 'right', width: 100 },
                  { text: 'Discontinued', columntype: 'checkbox', datafield: 'Discontinued' }
                ];

        JQXElements.settings["gridSettings"] =
        {
			 source:adapter, columns:columns, theme:"light"            
        }
	window.onload = function() {
		document.querySelector("jqx-grid").addEventListener("rowdoubleclick", function(event) {
			// Your code here.
		});
	};
    </script>
</head>
<body>
   <jqx-grid settings="gridSettings"></jqx-grid>
</body>
</html>

rowselect Event

Code examples

Bind to the rowselect event of jqxGrid.

<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>Grid Custom Element</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />
    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />
    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.pager.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.sort.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.edit.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.filter.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.columnsresize.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.aggregates.js"></script>
    <script type="text/javascript">
		var adapter = new jqx.dataAdapter({
			dataType: "xml",
			dataFields: [
				{ name: 'ProductName', type: 'string' },
				{ name: 'QuantityPerUnit', type: 'int' },
				{ name: 'UnitPrice', type: 'float' },
				{ name: 'UnitsInStock', type: 'float' },
				{ name: 'Discontinued', type: 'bool' }
			],
			root: "Products",
			record: "Product",
			id: 'ProductID',
			url: "../sampledata/products.xml"
		});

		var columns = [
                  { text: 'Product Name', datafield: 'ProductName', width: 250 },
                  { text: 'Quantity per Unit', datafield: 'QuantityPerUnit', cellsalign: 'right', align: 'right', width: 200 },
                  { text: 'Unit Price', datafield: 'UnitPrice', align: 'right', cellsalign: 'right', cellsformat: 'c2', width: 200 },
                  { text: 'Units In Stock', datafield: 'UnitsInStock', cellsalign: 'right', width: 100 },
                  { text: 'Discontinued', columntype: 'checkbox', datafield: 'Discontinued' }
                ];

        JQXElements.settings["gridSettings"] =
        {
			 source:adapter, columns:columns, theme:"light"            
        }
	window.onload = function() {
		document.querySelector("jqx-grid").addEventListener("rowselect", function(event) {
			// Your code here.
		});
	};
    </script>
</head>
<body>
   <jqx-grid settings="gridSettings"></jqx-grid>
</body>
</html>

rowunselect Event

Code examples

Bind to the rowunselect event of jqxGrid.

<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>Grid Custom Element</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />
    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />
    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.pager.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.sort.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.edit.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.filter.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.columnsresize.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.aggregates.js"></script>
    <script type="text/javascript">
		var adapter = new jqx.dataAdapter({
			dataType: "xml",
			dataFields: [
				{ name: 'ProductName', type: 'string' },
				{ name: 'QuantityPerUnit', type: 'int' },
				{ name: 'UnitPrice', type: 'float' },
				{ name: 'UnitsInStock', type: 'float' },
				{ name: 'Discontinued', type: 'bool' }
			],
			root: "Products",
			record: "Product",
			id: 'ProductID',
			url: "../sampledata/products.xml"
		});

		var columns = [
                  { text: 'Product Name', datafield: 'ProductName', width: 250 },
                  { text: 'Quantity per Unit', datafield: 'QuantityPerUnit', cellsalign: 'right', align: 'right', width: 200 },
                  { text: 'Unit Price', datafield: 'UnitPrice', align: 'right', cellsalign: 'right', cellsformat: 'c2', width: 200 },
                  { text: 'Units In Stock', datafield: 'UnitsInStock', cellsalign: 'right', width: 100 },
                  { text: 'Discontinued', columntype: 'checkbox', datafield: 'Discontinued' }
                ];

        JQXElements.settings["gridSettings"] =
        {
			 source:adapter, columns:columns, theme:"light"            
        }
	window.onload = function() {
		document.querySelector("jqx-grid").addEventListener("rowunselect", function(event) {
			// Your code here.
		});
	};
    </script>
</head>
<body>
   <jqx-grid settings="gridSettings"></jqx-grid>
</body>
</html>

rowexpand Event

Code examples

Bind to the rowexpand event of jqxGrid.

<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>Grid Custom Element</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />
    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />
    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.pager.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.sort.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.edit.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.filter.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.columnsresize.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.aggregates.js"></script>
    <script type="text/javascript">
		var adapter = new jqx.dataAdapter({
			dataType: "xml",
			dataFields: [
				{ name: 'ProductName', type: 'string' },
				{ name: 'QuantityPerUnit', type: 'int' },
				{ name: 'UnitPrice', type: 'float' },
				{ name: 'UnitsInStock', type: 'float' },
				{ name: 'Discontinued', type: 'bool' }
			],
			root: "Products",
			record: "Product",
			id: 'ProductID',
			url: "../sampledata/products.xml"
		});

		var columns = [
                  { text: 'Product Name', datafield: 'ProductName', width: 250 },
                  { text: 'Quantity per Unit', datafield: 'QuantityPerUnit', cellsalign: 'right', align: 'right', width: 200 },
                  { text: 'Unit Price', datafield: 'UnitPrice', align: 'right', cellsalign: 'right', cellsformat: 'c2', width: 200 },
                  { text: 'Units In Stock', datafield: 'UnitsInStock', cellsalign: 'right', width: 100 },
                  { text: 'Discontinued', columntype: 'checkbox', datafield: 'Discontinued' }
                ];

        JQXElements.settings["gridSettings"] =
        {
			 source:adapter, columns:columns, theme:"light"            
        }
	window.onload = function() {
		document.querySelector("jqx-grid").addEventListener("rowexpand", function(event) {
			// Your code here.
		});
	};
    </script>
</head>
<body>
   <jqx-grid settings="gridSettings"></jqx-grid>
</body>
</html>

rowcollapse Event

Code examples

Bind to the rowcollapse event of jqxGrid.

<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>Grid Custom Element</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />
    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />
    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.pager.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.sort.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.edit.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.filter.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.columnsresize.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.aggregates.js"></script>
    <script type="text/javascript">
		var adapter = new jqx.dataAdapter({
			dataType: "xml",
			dataFields: [
				{ name: 'ProductName', type: 'string' },
				{ name: 'QuantityPerUnit', type: 'int' },
				{ name: 'UnitPrice', type: 'float' },
				{ name: 'UnitsInStock', type: 'float' },
				{ name: 'Discontinued', type: 'bool' }
			],
			root: "Products",
			record: "Product",
			id: 'ProductID',
			url: "../sampledata/products.xml"
		});

		var columns = [
                  { text: 'Product Name', datafield: 'ProductName', width: 250 },
                  { text: 'Quantity per Unit', datafield: 'QuantityPerUnit', cellsalign: 'right', align: 'right', width: 200 },
                  { text: 'Unit Price', datafield: 'UnitPrice', align: 'right', cellsalign: 'right', cellsformat: 'c2', width: 200 },
                  { text: 'Units In Stock', datafield: 'UnitsInStock', cellsalign: 'right', width: 100 },
                  { text: 'Discontinued', columntype: 'checkbox', datafield: 'Discontinued' }
                ];

        JQXElements.settings["gridSettings"] =
        {
			 source:adapter, columns:columns, theme:"light"            
        }
	window.onload = function() {
		document.querySelector("jqx-grid").addEventListener("rowcollapse", function(event) {
			// Your code here.
		});
	};
    </script>
</head>
<body>
   <jqx-grid settings="gridSettings"></jqx-grid>
</body>
</html>

sort Event

Code examples

Bind to the sort event of jqxGrid.

<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>Grid Custom Element</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />
    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />
    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.pager.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.sort.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.edit.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.filter.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.columnsresize.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.aggregates.js"></script>
    <script type="text/javascript">
		var adapter = new jqx.dataAdapter({
			dataType: "xml",
			dataFields: [
				{ name: 'ProductName', type: 'string' },
				{ name: 'QuantityPerUnit', type: 'int' },
				{ name: 'UnitPrice', type: 'float' },
				{ name: 'UnitsInStock', type: 'float' },
				{ name: 'Discontinued', type: 'bool' }
			],
			root: "Products",
			record: "Product",
			id: 'ProductID',
			url: "../sampledata/products.xml"
		});

		var columns = [
                  { text: 'Product Name', datafield: 'ProductName', width: 250 },
                  { text: 'Quantity per Unit', datafield: 'QuantityPerUnit', cellsalign: 'right', align: 'right', width: 200 },
                  { text: 'Unit Price', datafield: 'UnitPrice', align: 'right', cellsalign: 'right', cellsformat: 'c2', width: 200 },
                  { text: 'Units In Stock', datafield: 'UnitsInStock', cellsalign: 'right', width: 100 },
                  { text: 'Discontinued', columntype: 'checkbox', datafield: 'Discontinued' }
                ];

        JQXElements.settings["gridSettings"] =
        {
			 source:adapter, columns:columns, theme:"light"            
        }
	window.onload = function() {
		document.querySelector("jqx-grid").addEventListener("sort", function(event) {
			// Your code here.
		});
	};
    </script>
</head>
<body>
   <jqx-grid settings="gridSettings"></jqx-grid>
</body>
</html>

autoresizecolumns Method

Parameter	Type	Description
type	string	"all", "cells" or "column"

Return Value
void

<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>Grid Custom Element</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />
    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />
    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.pager.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.sort.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.edit.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.filter.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.columnsresize.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.aggregates.js"></script>
    <script type="text/javascript">
		var adapter = new jqx.dataAdapter({
			dataType: "xml",
			dataFields: [
				{ name: 'ProductName', type: 'string' },
				{ name: 'QuantityPerUnit', type: 'int' },
				{ name: 'UnitPrice', type: 'float' },
				{ name: 'UnitsInStock', type: 'float' },
				{ name: 'Discontinued', type: 'bool' }
			],
			root: "Products",
			record: "Product",
			id: 'ProductID',
			url: "../sampledata/products.xml"
		});

		var columns = [
                  { text: 'Product Name', datafield: 'ProductName', width: 250 },
                  { text: 'Quantity per Unit', datafield: 'QuantityPerUnit', cellsalign: 'right', align: 'right', width: 200 },
                  { text: 'Unit Price', datafield: 'UnitPrice', align: 'right', cellsalign: 'right', cellsformat: 'c2', width: 200 },
                  { text: 'Units In Stock', datafield: 'UnitsInStock', cellsalign: 'right', width: 100 },
                  { text: 'Discontinued', columntype: 'checkbox', datafield: 'Discontinued' }
                ];

        JQXElements.settings["gridSettings"] =
        {
			            
        }
	window.onload = function() {
		document.querySelector("jqx-grid").autoresizecolumns();							
	}
    </script>
</head>
<body>
   <jqx-grid settings="gridSettings"></jqx-grid>
</body>
</html>

autoresizecolumn Method

Parameter	Type	Description
dataField	string
type	string	"all", "cells" or "column"

Return Value
void

<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>Grid Custom Element</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />
    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />
    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.pager.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.sort.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.edit.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.filter.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.columnsresize.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.aggregates.js"></script>
    <script type="text/javascript">
		var adapter = new jqx.dataAdapter({
			dataType: "xml",
			dataFields: [
				{ name: 'ProductName', type: 'string' },
				{ name: 'QuantityPerUnit', type: 'int' },
				{ name: 'UnitPrice', type: 'float' },
				{ name: 'UnitsInStock', type: 'float' },
				{ name: 'Discontinued', type: 'bool' }
			],
			root: "Products",
			record: "Product",
			id: 'ProductID',
			url: "../sampledata/products.xml"
		});

		var columns = [
                  { text: 'Product Name', datafield: 'ProductName', width: 250 },
                  { text: 'Quantity per Unit', datafield: 'QuantityPerUnit', cellsalign: 'right', align: 'right', width: 200 },
                  { text: 'Unit Price', datafield: 'UnitPrice', align: 'right', cellsalign: 'right', cellsformat: 'c2', width: 200 },
                  { text: 'Units In Stock', datafield: 'UnitsInStock', cellsalign: 'right', width: 100 },
                  { text: 'Discontinued', columntype: 'checkbox', datafield: 'Discontinued' }
                ];

        JQXElements.settings["gridSettings"] =
        {
			            
        }
	window.onload = function() {
		document.querySelector("jqx-grid").autoresizecolumn('firstname');							
	}
    </script>
</head>
<body>
   <jqx-grid settings="gridSettings"></jqx-grid>
</body>
</html>

beginupdate Method

Parameter	Type	Description
None

Return Value
void

<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>Grid Custom Element</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />
    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />
    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.pager.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.sort.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.edit.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.filter.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.columnsresize.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.aggregates.js"></script>
    <script type="text/javascript">
		var adapter = new jqx.dataAdapter({
			dataType: "xml",
			dataFields: [
				{ name: 'ProductName', type: 'string' },
				{ name: 'QuantityPerUnit', type: 'int' },
				{ name: 'UnitPrice', type: 'float' },
				{ name: 'UnitsInStock', type: 'float' },
				{ name: 'Discontinued', type: 'bool' }
			],
			root: "Products",
			record: "Product",
			id: 'ProductID',
			url: "../sampledata/products.xml"
		});

		var columns = [
                  { text: 'Product Name', datafield: 'ProductName', width: 250 },
                  { text: 'Quantity per Unit', datafield: 'QuantityPerUnit', cellsalign: 'right', align: 'right', width: 200 },
                  { text: 'Unit Price', datafield: 'UnitPrice', align: 'right', cellsalign: 'right', cellsformat: 'c2', width: 200 },
                  { text: 'Units In Stock', datafield: 'UnitsInStock', cellsalign: 'right', width: 100 },
                  { text: 'Discontinued', columntype: 'checkbox', datafield: 'Discontinued' }
                ];

        JQXElements.settings["gridSettings"] =
        {
			            
        }
	window.onload = function() {
		document.querySelector("jqx-grid").beginupdate();							
	}
    </script>
</head>
<body>
   <jqx-grid settings="gridSettings"></jqx-grid>
</body>
</html>

clear Method

Parameter	Type	Description
None

Return Value
void

<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>Grid Custom Element</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />
    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />
    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.pager.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.sort.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.edit.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.filter.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.columnsresize.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.aggregates.js"></script>
    <script type="text/javascript">
		var adapter = new jqx.dataAdapter({
			dataType: "xml",
			dataFields: [
				{ name: 'ProductName', type: 'string' },
				{ name: 'QuantityPerUnit', type: 'int' },
				{ name: 'UnitPrice', type: 'float' },
				{ name: 'UnitsInStock', type: 'float' },
				{ name: 'Discontinued', type: 'bool' }
			],
			root: "Products",
			record: "Product",
			id: 'ProductID',
			url: "../sampledata/products.xml"
		});

		var columns = [
                  { text: 'Product Name', datafield: 'ProductName', width: 250 },
                  { text: 'Quantity per Unit', datafield: 'QuantityPerUnit', cellsalign: 'right', align: 'right', width: 200 },
                  { text: 'Unit Price', datafield: 'UnitPrice', align: 'right', cellsalign: 'right', cellsformat: 'c2', width: 200 },
                  { text: 'Units In Stock', datafield: 'UnitsInStock', cellsalign: 'right', width: 100 },
                  { text: 'Discontinued', columntype: 'checkbox', datafield: 'Discontinued' }
                ];

        JQXElements.settings["gridSettings"] =
        {
			            
        }
	window.onload = function() {
		document.querySelector("jqx-grid").clear();							
	}
    </script>
</head>
<body>
   <jqx-grid settings="gridSettings"></jqx-grid>
</body>
</html>

destroy Method

Parameter	Type	Description
None

Return Value
void

<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>Grid Custom Element</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />
    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />
    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.pager.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.sort.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.edit.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.filter.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.columnsresize.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.aggregates.js"></script>
    <script type="text/javascript">
		var adapter = new jqx.dataAdapter({
			dataType: "xml",
			dataFields: [
				{ name: 'ProductName', type: 'string' },
				{ name: 'QuantityPerUnit', type: 'int' },
				{ name: 'UnitPrice', type: 'float' },
				{ name: 'UnitsInStock', type: 'float' },
				{ name: 'Discontinued', type: 'bool' }
			],
			root: "Products",
			record: "Product",
			id: 'ProductID',
			url: "../sampledata/products.xml"
		});

		var columns = [
                  { text: 'Product Name', datafield: 'ProductName', width: 250 },
                  { text: 'Quantity per Unit', datafield: 'QuantityPerUnit', cellsalign: 'right', align: 'right', width: 200 },
                  { text: 'Unit Price', datafield: 'UnitPrice', align: 'right', cellsalign: 'right', cellsformat: 'c2', width: 200 },
                  { text: 'Units In Stock', datafield: 'UnitsInStock', cellsalign: 'right', width: 100 },
                  { text: 'Discontinued', columntype: 'checkbox', datafield: 'Discontinued' }
                ];

        JQXElements.settings["gridSettings"] =
        {
			            
        }
	window.onload = function() {
		document.querySelector("jqx-grid").destroy();							
	}
    </script>
</head>
<body>
   <jqx-grid settings="gridSettings"></jqx-grid>
</body>
</html>

endupdate Method

Parameter	Type	Description
None

Return Value
void

<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>Grid Custom Element</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />
    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />
    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.pager.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.sort.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.edit.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.filter.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.columnsresize.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.aggregates.js"></script>
    <script type="text/javascript">
		var adapter = new jqx.dataAdapter({
			dataType: "xml",
			dataFields: [
				{ name: 'ProductName', type: 'string' },
				{ name: 'QuantityPerUnit', type: 'int' },
				{ name: 'UnitPrice', type: 'float' },
				{ name: 'UnitsInStock', type: 'float' },
				{ name: 'Discontinued', type: 'bool' }
			],
			root: "Products",
			record: "Product",
			id: 'ProductID',
			url: "../sampledata/products.xml"
		});

		var columns = [
                  { text: 'Product Name', datafield: 'ProductName', width: 250 },
                  { text: 'Quantity per Unit', datafield: 'QuantityPerUnit', cellsalign: 'right', align: 'right', width: 200 },
                  { text: 'Unit Price', datafield: 'UnitPrice', align: 'right', cellsalign: 'right', cellsformat: 'c2', width: 200 },
                  { text: 'Units In Stock', datafield: 'UnitsInStock', cellsalign: 'right', width: 100 },
                  { text: 'Discontinued', columntype: 'checkbox', datafield: 'Discontinued' }
                ];

        JQXElements.settings["gridSettings"] =
        {
			            
        }
	window.onload = function() {
		document.querySelector("jqx-grid").endupdate();							
	}
    </script>
</head>
<body>
   <jqx-grid settings="gridSettings"></jqx-grid>
</body>
</html>

ensurerowvisible Method

Parameter	Type	Description
rowBoundIndex	number

Return Value
void

<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>Grid Custom Element</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />
    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />
    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.pager.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.sort.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.edit.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.filter.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.columnsresize.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.aggregates.js"></script>
    <script type="text/javascript">
		var adapter = new jqx.dataAdapter({
			dataType: "xml",
			dataFields: [
				{ name: 'ProductName', type: 'string' },
				{ name: 'QuantityPerUnit', type: 'int' },
				{ name: 'UnitPrice', type: 'float' },
				{ name: 'UnitsInStock', type: 'float' },
				{ name: 'Discontinued', type: 'bool' }
			],
			root: "Products",
			record: "Product",
			id: 'ProductID',
			url: "../sampledata/products.xml"
		});

		var columns = [
                  { text: 'Product Name', datafield: 'ProductName', width: 250 },
                  { text: 'Quantity per Unit', datafield: 'QuantityPerUnit', cellsalign: 'right', align: 'right', width: 200 },
                  { text: 'Unit Price', datafield: 'UnitPrice', align: 'right', cellsalign: 'right', cellsformat: 'c2', width: 200 },
                  { text: 'Units In Stock', datafield: 'UnitsInStock', cellsalign: 'right', width: 100 },
                  { text: 'Discontinued', columntype: 'checkbox', datafield: 'Discontinued' }
                ];

        JQXElements.settings["gridSettings"] =
        {
			            
        }
	window.onload = function() {
		document.querySelector("jqx-grid").ensurerowvisible(10);							
	}
    </script>
</head>
<body>
   <jqx-grid settings="gridSettings"></jqx-grid>
</body>
</html>

focus Method

Parameter	Type	Description
None

Return Value
void

<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>Grid Custom Element</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />
    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />
    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.pager.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.sort.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.edit.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.filter.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.columnsresize.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.aggregates.js"></script>
    <script type="text/javascript">
		var adapter = new jqx.dataAdapter({
			dataType: "xml",
			dataFields: [
				{ name: 'ProductName', type: 'string' },
				{ name: 'QuantityPerUnit', type: 'int' },
				{ name: 'UnitPrice', type: 'float' },
				{ name: 'UnitsInStock', type: 'float' },
				{ name: 'Discontinued', type: 'bool' }
			],
			root: "Products",
			record: "Product",
			id: 'ProductID',
			url: "../sampledata/products.xml"
		});

		var columns = [
                  { text: 'Product Name', datafield: 'ProductName', width: 250 },
                  { text: 'Quantity per Unit', datafield: 'QuantityPerUnit', cellsalign: 'right', align: 'right', width: 200 },
                  { text: 'Unit Price', datafield: 'UnitPrice', align: 'right', cellsalign: 'right', cellsformat: 'c2', width: 200 },
                  { text: 'Units In Stock', datafield: 'UnitsInStock', cellsalign: 'right', width: 100 },
                  { text: 'Discontinued', columntype: 'checkbox', datafield: 'Discontinued' }
                ];

        JQXElements.settings["gridSettings"] =
        {
			            
        }
	window.onload = function() {
		document.querySelector("jqx-grid").focus();							
	}
    </script>
</head>
<body>
   <jqx-grid settings="gridSettings"></jqx-grid>
</body>
</html>

getcolumnindex Method

Parameter	Type	Description
dataField	string

Return Value
Number

<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>Grid Custom Element</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />
    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />
    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.pager.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.sort.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.edit.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.filter.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.columnsresize.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.aggregates.js"></script>
    <script type="text/javascript">
		var adapter = new jqx.dataAdapter({
			dataType: "xml",
			dataFields: [
				{ name: 'ProductName', type: 'string' },
				{ name: 'QuantityPerUnit', type: 'int' },
				{ name: 'UnitPrice', type: 'float' },
				{ name: 'UnitsInStock', type: 'float' },
				{ name: 'Discontinued', type: 'bool' }
			],
			root: "Products",
			record: "Product",
			id: 'ProductID',
			url: "../sampledata/products.xml"
		});

		var columns = [
                  { text: 'Product Name', datafield: 'ProductName', width: 250 },
                  { text: 'Quantity per Unit', datafield: 'QuantityPerUnit', cellsalign: 'right', align: 'right', width: 200 },
                  { text: 'Unit Price', datafield: 'UnitPrice', align: 'right', cellsalign: 'right', cellsformat: 'c2', width: 200 },
                  { text: 'Units In Stock', datafield: 'UnitsInStock', cellsalign: 'right', width: 100 },
                  { text: 'Discontinued', columntype: 'checkbox', datafield: 'Discontinued' }
                ];

        JQXElements.settings["gridSettings"] =
        {
			            
        }
	window.onload = function() {
		document.querySelector("jqx-grid").getcolumnindex(0);							
	}
    </script>
</head>
<body>
   <jqx-grid settings="gridSettings"></jqx-grid>
</body>
</html>

getcolumn Method

Parameter	Type	Description
dataField	string

Return Value
Object

<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>Grid Custom Element</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />
    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />
    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.pager.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.sort.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.edit.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.filter.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.columnsresize.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.aggregates.js"></script>
    <script type="text/javascript">
		var adapter = new jqx.dataAdapter({
			dataType: "xml",
			dataFields: [
				{ name: 'ProductName', type: 'string' },
				{ name: 'QuantityPerUnit', type: 'int' },
				{ name: 'UnitPrice', type: 'float' },
				{ name: 'UnitsInStock', type: 'float' },
				{ name: 'Discontinued', type: 'bool' }
			],
			root: "Products",
			record: "Product",
			id: 'ProductID',
			url: "../sampledata/products.xml"
		});

		var columns = [
                  { text: 'Product Name', datafield: 'ProductName', width: 250 },
                  { text: 'Quantity per Unit', datafield: 'QuantityPerUnit', cellsalign: 'right', align: 'right', width: 200 },
                  { text: 'Unit Price', datafield: 'UnitPrice', align: 'right', cellsalign: 'right', cellsformat: 'c2', width: 200 },
                  { text: 'Units In Stock', datafield: 'UnitsInStock', cellsalign: 'right', width: 100 },
                  { text: 'Discontinued', columntype: 'checkbox', datafield: 'Discontinued' }
                ];

        JQXElements.settings["gridSettings"] =
        {
			            
        }
	window.onload = function() {
		document.querySelector("jqx-grid").getcolumn('firstname');							
	}
    </script>
</head>
<body>
   <jqx-grid settings="gridSettings"></jqx-grid>
</body>
</html>

getcolumnproperty Method

Parameter	Type	Description
dataField	string
propertyName	string

Return Value
Object

<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>Grid Custom Element</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />
    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />
    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.pager.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.sort.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.edit.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.filter.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.columnsresize.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.aggregates.js"></script>
    <script type="text/javascript">
		var adapter = new jqx.dataAdapter({
			dataType: "xml",
			dataFields: [
				{ name: 'ProductName', type: 'string' },
				{ name: 'QuantityPerUnit', type: 'int' },
				{ name: 'UnitPrice', type: 'float' },
				{ name: 'UnitsInStock', type: 'float' },
				{ name: 'Discontinued', type: 'bool' }
			],
			root: "Products",
			record: "Product",
			id: 'ProductID',
			url: "../sampledata/products.xml"
		});

		var columns = [
                  { text: 'Product Name', datafield: 'ProductName', width: 250 },
                  { text: 'Quantity per Unit', datafield: 'QuantityPerUnit', cellsalign: 'right', align: 'right', width: 200 },
                  { text: 'Unit Price', datafield: 'UnitPrice', align: 'right', cellsalign: 'right', cellsformat: 'c2', width: 200 },
                  { text: 'Units In Stock', datafield: 'UnitsInStock', cellsalign: 'right', width: 100 },
                  { text: 'Discontinued', columntype: 'checkbox', datafield: 'Discontinued' }
                ];

        JQXElements.settings["gridSettings"] =
        {
			            
        }
	window.onload = function() {
		document.querySelector("jqx-grid").getcolumnproperty('firstname','text');							
	}
    </script>
</head>
<body>
   <jqx-grid settings="gridSettings"></jqx-grid>
</body>
</html>

getrowid Method

Parameter	Type	Description
rowBoundIndex	number

Return Value
String

<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>Grid Custom Element</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />
    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />
    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.pager.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.sort.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.edit.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.filter.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.columnsresize.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.aggregates.js"></script>
    <script type="text/javascript">
		var adapter = new jqx.dataAdapter({
			dataType: "xml",
			dataFields: [
				{ name: 'ProductName', type: 'string' },
				{ name: 'QuantityPerUnit', type: 'int' },
				{ name: 'UnitPrice', type: 'float' },
				{ name: 'UnitsInStock', type: 'float' },
				{ name: 'Discontinued', type: 'bool' }
			],
			root: "Products",
			record: "Product",
			id: 'ProductID',
			url: "../sampledata/products.xml"
		});

		var columns = [
                  { text: 'Product Name', datafield: 'ProductName', width: 250 },
                  { text: 'Quantity per Unit', datafield: 'QuantityPerUnit', cellsalign: 'right', align: 'right', width: 200 },
                  { text: 'Unit Price', datafield: 'UnitPrice', align: 'right', cellsalign: 'right', cellsformat: 'c2', width: 200 },
                  { text: 'Units In Stock', datafield: 'UnitsInStock', cellsalign: 'right', width: 100 },
                  { text: 'Discontinued', columntype: 'checkbox', datafield: 'Discontinued' }
                ];

        JQXElements.settings["gridSettings"] =
        {
			            
        }
	window.onload = function() {
		document.querySelector("jqx-grid").getrowid(0);							
	}
    </script>
</head>
<body>
   <jqx-grid settings="gridSettings"></jqx-grid>
</body>
</html>

getrowdata Method

Parameter	Type	Description
rowBoundIndex	number

Return Value
Object

<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>Grid Custom Element</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />
    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />
    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.pager.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.sort.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.edit.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.filter.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.columnsresize.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.aggregates.js"></script>
    <script type="text/javascript">
		var adapter = new jqx.dataAdapter({
			dataType: "xml",
			dataFields: [
				{ name: 'ProductName', type: 'string' },
				{ name: 'QuantityPerUnit', type: 'int' },
				{ name: 'UnitPrice', type: 'float' },
				{ name: 'UnitsInStock', type: 'float' },
				{ name: 'Discontinued', type: 'bool' }
			],
			root: "Products",
			record: "Product",
			id: 'ProductID',
			url: "../sampledata/products.xml"
		});

		var columns = [
                  { text: 'Product Name', datafield: 'ProductName', width: 250 },
                  { text: 'Quantity per Unit', datafield: 'QuantityPerUnit', cellsalign: 'right', align: 'right', width: 200 },
                  { text: 'Unit Price', datafield: 'UnitPrice', align: 'right', cellsalign: 'right', cellsformat: 'c2', width: 200 },
                  { text: 'Units In Stock', datafield: 'UnitsInStock', cellsalign: 'right', width: 100 },
                  { text: 'Discontinued', columntype: 'checkbox', datafield: 'Discontinued' }
                ];

        JQXElements.settings["gridSettings"] =
        {
			            
        }
	window.onload = function() {
		document.querySelector("jqx-grid").getrowdata(0);							
	}
    </script>
</head>
<body>
   <jqx-grid settings="gridSettings"></jqx-grid>
</body>
</html>

getrowdatabyid Method

Parameter	Type	Description
rowID	string

Return Value
Object

<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>Grid Custom Element</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />
    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />
    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.pager.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.sort.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.edit.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.filter.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.columnsresize.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.aggregates.js"></script>
    <script type="text/javascript">
		var adapter = new jqx.dataAdapter({
			dataType: "xml",
			dataFields: [
				{ name: 'ProductName', type: 'string' },
				{ name: 'QuantityPerUnit', type: 'int' },
				{ name: 'UnitPrice', type: 'float' },
				{ name: 'UnitsInStock', type: 'float' },
				{ name: 'Discontinued', type: 'bool' }
			],
			root: "Products",
			record: "Product",
			id: 'ProductID',
			url: "../sampledata/products.xml"
		});

		var columns = [
                  { text: 'Product Name', datafield: 'ProductName', width: 250 },
                  { text: 'Quantity per Unit', datafield: 'QuantityPerUnit', cellsalign: 'right', align: 'right', width: 200 },
                  { text: 'Unit Price', datafield: 'UnitPrice', align: 'right', cellsalign: 'right', cellsformat: 'c2', width: 200 },
                  { text: 'Units In Stock', datafield: 'UnitsInStock', cellsalign: 'right', width: 100 },
                  { text: 'Discontinued', columntype: 'checkbox', datafield: 'Discontinued' }
                ];

        JQXElements.settings["gridSettings"] =
        {
			            
        }
	window.onload = function() {
		document.querySelector("jqx-grid").getrowdatabyid(0);							
	}
    </script>
</head>
<body>
   <jqx-grid settings="gridSettings"></jqx-grid>
</body>
</html>

getrowboundindexbyid Method

Parameter	Type	Description
rowID	string

Return Value
Number

<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>Grid Custom Element</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />
    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />
    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.pager.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.sort.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.edit.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.filter.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.columnsresize.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.aggregates.js"></script>
    <script type="text/javascript">
		var adapter = new jqx.dataAdapter({
			dataType: "xml",
			dataFields: [
				{ name: 'ProductName', type: 'string' },
				{ name: 'QuantityPerUnit', type: 'int' },
				{ name: 'UnitPrice', type: 'float' },
				{ name: 'UnitsInStock', type: 'float' },
				{ name: 'Discontinued', type: 'bool' }
			],
			root: "Products",
			record: "Product",
			id: 'ProductID',
			url: "../sampledata/products.xml"
		});

		var columns = [
                  { text: 'Product Name', datafield: 'ProductName', width: 250 },
                  { text: 'Quantity per Unit', datafield: 'QuantityPerUnit', cellsalign: 'right', align: 'right', width: 200 },
                  { text: 'Unit Price', datafield: 'UnitPrice', align: 'right', cellsalign: 'right', cellsformat: 'c2', width: 200 },
                  { text: 'Units In Stock', datafield: 'UnitsInStock', cellsalign: 'right', width: 100 },
                  { text: 'Discontinued', columntype: 'checkbox', datafield: 'Discontinued' }
                ];

        JQXElements.settings["gridSettings"] =
        {
			            
        }
	window.onload = function() {
		document.querySelector("jqx-grid").getrowboundindexbyid(0);							
	}
    </script>
</head>
<body>
   <jqx-grid settings="gridSettings"></jqx-grid>
</body>
</html>

getrowboundindex Method

Parameter	Type	Description
rowDisplayIndex	number

Return Value
Number

<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>Grid Custom Element</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />
    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />
    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.pager.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.sort.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.edit.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.filter.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.columnsresize.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.aggregates.js"></script>
    <script type="text/javascript">
		var adapter = new jqx.dataAdapter({
			dataType: "xml",
			dataFields: [
				{ name: 'ProductName', type: 'string' },
				{ name: 'QuantityPerUnit', type: 'int' },
				{ name: 'UnitPrice', type: 'float' },
				{ name: 'UnitsInStock', type: 'float' },
				{ name: 'Discontinued', type: 'bool' }
			],
			root: "Products",
			record: "Product",
			id: 'ProductID',
			url: "../sampledata/products.xml"
		});

		var columns = [
                  { text: 'Product Name', datafield: 'ProductName', width: 250 },
                  { text: 'Quantity per Unit', datafield: 'QuantityPerUnit', cellsalign: 'right', align: 'right', width: 200 },
                  { text: 'Unit Price', datafield: 'UnitPrice', align: 'right', cellsalign: 'right', cellsformat: 'c2', width: 200 },
                  { text: 'Units In Stock', datafield: 'UnitsInStock', cellsalign: 'right', width: 100 },
                  { text: 'Discontinued', columntype: 'checkbox', datafield: 'Discontinued' }
                ];

        JQXElements.settings["gridSettings"] =
        {
			            
        }
	window.onload = function() {
		document.querySelector("jqx-grid").getrowboundindex(0);							
	}
    </script>
</head>
<body>
   <jqx-grid settings="gridSettings"></jqx-grid>
</body>
</html>

getrows Method

Parameter	Type	Description
None

Return Value
Array

<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>Grid Custom Element</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />
    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />
    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.pager.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.sort.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.edit.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.filter.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.columnsresize.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.aggregates.js"></script>
    <script type="text/javascript">
		var adapter = new jqx.dataAdapter({
			dataType: "xml",
			dataFields: [
				{ name: 'ProductName', type: 'string' },
				{ name: 'QuantityPerUnit', type: 'int' },
				{ name: 'UnitPrice', type: 'float' },
				{ name: 'UnitsInStock', type: 'float' },
				{ name: 'Discontinued', type: 'bool' }
			],
			root: "Products",
			record: "Product",
			id: 'ProductID',
			url: "../sampledata/products.xml"
		});

		var columns = [
                  { text: 'Product Name', datafield: 'ProductName', width: 250 },
                  { text: 'Quantity per Unit', datafield: 'QuantityPerUnit', cellsalign: 'right', align: 'right', width: 200 },
                  { text: 'Unit Price', datafield: 'UnitPrice', align: 'right', cellsalign: 'right', cellsformat: 'c2', width: 200 },
                  { text: 'Units In Stock', datafield: 'UnitsInStock', cellsalign: 'right', width: 100 },
                  { text: 'Discontinued', columntype: 'checkbox', datafield: 'Discontinued' }
                ];

        JQXElements.settings["gridSettings"] =
        {
			            
        }
	window.onload = function() {
		var result = document.querySelector("jqx-grid").getrows();							
	}
    </script>
</head>
<body>
   <jqx-grid settings="gridSettings"></jqx-grid>
</body>
</html>

getboundrows Method

Parameter	Type	Description
None

Return Value
Array

<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>Grid Custom Element</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />
    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />
    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.pager.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.sort.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.edit.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.filter.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.columnsresize.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.aggregates.js"></script>
    <script type="text/javascript">
		var adapter = new jqx.dataAdapter({
			dataType: "xml",
			dataFields: [
				{ name: 'ProductName', type: 'string' },
				{ name: 'QuantityPerUnit', type: 'int' },
				{ name: 'UnitPrice', type: 'float' },
				{ name: 'UnitsInStock', type: 'float' },
				{ name: 'Discontinued', type: 'bool' }
			],
			root: "Products",
			record: "Product",
			id: 'ProductID',
			url: "../sampledata/products.xml"
		});

		var columns = [
                  { text: 'Product Name', datafield: 'ProductName', width: 250 },
                  { text: 'Quantity per Unit', datafield: 'QuantityPerUnit', cellsalign: 'right', align: 'right', width: 200 },
                  { text: 'Unit Price', datafield: 'UnitPrice', align: 'right', cellsalign: 'right', cellsformat: 'c2', width: 200 },
                  { text: 'Units In Stock', datafield: 'UnitsInStock', cellsalign: 'right', width: 100 },
                  { text: 'Discontinued', columntype: 'checkbox', datafield: 'Discontinued' }
                ];

        JQXElements.settings["gridSettings"] =
        {
			            
        }
	window.onload = function() {
		var result = document.querySelector("jqx-grid").getboundrows();							
	}
    </script>
</head>
<body>
   <jqx-grid settings="gridSettings"></jqx-grid>
</body>
</html>

getdisplayrows Method

Parameter	Type	Description
None

Return Value
Array

<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>Grid Custom Element</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />
    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />
    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.pager.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.sort.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.edit.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.filter.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.columnsresize.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.aggregates.js"></script>
    <script type="text/javascript">
		var adapter = new jqx.dataAdapter({
			dataType: "xml",
			dataFields: [
				{ name: 'ProductName', type: 'string' },
				{ name: 'QuantityPerUnit', type: 'int' },
				{ name: 'UnitPrice', type: 'float' },
				{ name: 'UnitsInStock', type: 'float' },
				{ name: 'Discontinued', type: 'bool' }
			],
			root: "Products",
			record: "Product",
			id: 'ProductID',
			url: "../sampledata/products.xml"
		});

		var columns = [
                  { text: 'Product Name', datafield: 'ProductName', width: 250 },
                  { text: 'Quantity per Unit', datafield: 'QuantityPerUnit', cellsalign: 'right', align: 'right', width: 200 },
                  { text: 'Unit Price', datafield: 'UnitPrice', align: 'right', cellsalign: 'right', cellsformat: 'c2', width: 200 },
                  { text: 'Units In Stock', datafield: 'UnitsInStock', cellsalign: 'right', width: 100 },
                  { text: 'Discontinued', columntype: 'checkbox', datafield: 'Discontinued' }
                ];

        JQXElements.settings["gridSettings"] =
        {
			            
        }
	window.onload = function() {
		var result = document.querySelector("jqx-grid").getdisplayrows();							
	}
    </script>
</head>
<body>
   <jqx-grid settings="gridSettings"></jqx-grid>
</body>
</html>

getdatainformation Method

Parameter	Type	Description
None

Return Value
Object

<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>Grid Custom Element</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />
    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />
    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.pager.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.sort.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.edit.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.filter.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.columnsresize.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.aggregates.js"></script>
    <script type="text/javascript">
		var adapter = new jqx.dataAdapter({
			dataType: "xml",
			dataFields: [
				{ name: 'ProductName', type: 'string' },
				{ name: 'QuantityPerUnit', type: 'int' },
				{ name: 'UnitPrice', type: 'float' },
				{ name: 'UnitsInStock', type: 'float' },
				{ name: 'Discontinued', type: 'bool' }
			],
			root: "Products",
			record: "Product",
			id: 'ProductID',
			url: "../sampledata/products.xml"
		});

		var columns = [
                  { text: 'Product Name', datafield: 'ProductName', width: 250 },
                  { text: 'Quantity per Unit', datafield: 'QuantityPerUnit', cellsalign: 'right', align: 'right', width: 200 },
                  { text: 'Unit Price', datafield: 'UnitPrice', align: 'right', cellsalign: 'right', cellsformat: 'c2', width: 200 },
                  { text: 'Units In Stock', datafield: 'UnitsInStock', cellsalign: 'right', width: 100 },
                  { text: 'Discontinued', columntype: 'checkbox', datafield: 'Discontinued' }
                ];

        JQXElements.settings["gridSettings"] =
        {
			            
        }
	window.onload = function() {
		var result = document.querySelector("jqx-grid").getdatainformation();							
	}
    </script>
</head>
<body>
   <jqx-grid settings="gridSettings"></jqx-grid>
</body>
</html>

getsortinformation Method

Parameter	Type	Description
None

Return Value
Object

<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>Grid Custom Element</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />
    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />
    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.pager.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.sort.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.edit.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.filter.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.columnsresize.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.aggregates.js"></script>
    <script type="text/javascript">
		var adapter = new jqx.dataAdapter({
			dataType: "xml",
			dataFields: [
				{ name: 'ProductName', type: 'string' },
				{ name: 'QuantityPerUnit', type: 'int' },
				{ name: 'UnitPrice', type: 'float' },
				{ name: 'UnitsInStock', type: 'float' },
				{ name: 'Discontinued', type: 'bool' }
			],
			root: "Products",
			record: "Product",
			id: 'ProductID',
			url: "../sampledata/products.xml"
		});

		var columns = [
                  { text: 'Product Name', datafield: 'ProductName', width: 250 },
                  { text: 'Quantity per Unit', datafield: 'QuantityPerUnit', cellsalign: 'right', align: 'right', width: 200 },
                  { text: 'Unit Price', datafield: 'UnitPrice', align: 'right', cellsalign: 'right', cellsformat: 'c2', width: 200 },
                  { text: 'Units In Stock', datafield: 'UnitsInStock', cellsalign: 'right', width: 100 },
                  { text: 'Discontinued', columntype: 'checkbox', datafield: 'Discontinued' }
                ];

        JQXElements.settings["gridSettings"] =
        {
			            
        }
	window.onload = function() {
		var result = document.querySelector("jqx-grid").getsortinformation();							
	}
    </script>
</head>
<body>
   <jqx-grid settings="gridSettings"></jqx-grid>
</body>
</html>

getpaginginformation Method

Parameter	Type	Description
None

Return Value
Object

<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>Grid Custom Element</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />
    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />
    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.pager.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.sort.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.edit.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.filter.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.columnsresize.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.aggregates.js"></script>
    <script type="text/javascript">
		var adapter = new jqx.dataAdapter({
			dataType: "xml",
			dataFields: [
				{ name: 'ProductName', type: 'string' },
				{ name: 'QuantityPerUnit', type: 'int' },
				{ name: 'UnitPrice', type: 'float' },
				{ name: 'UnitsInStock', type: 'float' },
				{ name: 'Discontinued', type: 'bool' }
			],
			root: "Products",
			record: "Product",
			id: 'ProductID',
			url: "../sampledata/products.xml"
		});

		var columns = [
                  { text: 'Product Name', datafield: 'ProductName', width: 250 },
                  { text: 'Quantity per Unit', datafield: 'QuantityPerUnit', cellsalign: 'right', align: 'right', width: 200 },
                  { text: 'Unit Price', datafield: 'UnitPrice', align: 'right', cellsalign: 'right', cellsformat: 'c2', width: 200 },
                  { text: 'Units In Stock', datafield: 'UnitsInStock', cellsalign: 'right', width: 100 },
                  { text: 'Discontinued', columntype: 'checkbox', datafield: 'Discontinued' }
                ];

        JQXElements.settings["gridSettings"] =
        {
			            
        }
	window.onload = function() {
		var result = document.querySelector("jqx-grid").getpaginginformation();							
	}
    </script>
</head>
<body>
   <jqx-grid settings="gridSettings"></jqx-grid>
</body>
</html>

hidecolumn Method

Parameter	Type	Description
dataField	string

Return Value
void

<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>Grid Custom Element</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />
    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />
    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.pager.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.sort.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.edit.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.filter.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.columnsresize.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.aggregates.js"></script>
    <script type="text/javascript">
		var adapter = new jqx.dataAdapter({
			dataType: "xml",
			dataFields: [
				{ name: 'ProductName', type: 'string' },
				{ name: 'QuantityPerUnit', type: 'int' },
				{ name: 'UnitPrice', type: 'float' },
				{ name: 'UnitsInStock', type: 'float' },
				{ name: 'Discontinued', type: 'bool' }
			],
			root: "Products",
			record: "Product",
			id: 'ProductID',
			url: "../sampledata/products.xml"
		});

		var columns = [
                  { text: 'Product Name', datafield: 'ProductName', width: 250 },
                  { text: 'Quantity per Unit', datafield: 'QuantityPerUnit', cellsalign: 'right', align: 'right', width: 200 },
                  { text: 'Unit Price', datafield: 'UnitPrice', align: 'right', cellsalign: 'right', cellsformat: 'c2', width: 200 },
                  { text: 'Units In Stock', datafield: 'UnitsInStock', cellsalign: 'right', width: 100 },
                  { text: 'Discontinued', columntype: 'checkbox', datafield: 'Discontinued' }
                ];

        JQXElements.settings["gridSettings"] =
        {
			            
        }
	window.onload = function() {
		document.querySelector("jqx-grid").hidecolumn('firstname');							
	}
    </script>
</head>
<body>
   <jqx-grid settings="gridSettings"></jqx-grid>
</body>
</html>

hideloadelement Method

Parameter	Type	Description
None

Return Value
void

<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>Grid Custom Element</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />
    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />
    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.pager.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.sort.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.edit.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.filter.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.columnsresize.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.aggregates.js"></script>
    <script type="text/javascript">
		var adapter = new jqx.dataAdapter({
			dataType: "xml",
			dataFields: [
				{ name: 'ProductName', type: 'string' },
				{ name: 'QuantityPerUnit', type: 'int' },
				{ name: 'UnitPrice', type: 'float' },
				{ name: 'UnitsInStock', type: 'float' },
				{ name: 'Discontinued', type: 'bool' }
			],
			root: "Products",
			record: "Product",
			id: 'ProductID',
			url: "../sampledata/products.xml"
		});

		var columns = [
                  { text: 'Product Name', datafield: 'ProductName', width: 250 },
                  { text: 'Quantity per Unit', datafield: 'QuantityPerUnit', cellsalign: 'right', align: 'right', width: 200 },
                  { text: 'Unit Price', datafield: 'UnitPrice', align: 'right', cellsalign: 'right', cellsformat: 'c2', width: 200 },
                  { text: 'Units In Stock', datafield: 'UnitsInStock', cellsalign: 'right', width: 100 },
                  { text: 'Discontinued', columntype: 'checkbox', datafield: 'Discontinued' }
                ];

        JQXElements.settings["gridSettings"] =
        {
			            
        }
	window.onload = function() {
		document.querySelector("jqx-grid").hideloadelement();							
	}
    </script>
</head>
<body>
   <jqx-grid settings="gridSettings"></jqx-grid>
</body>
</html>

hiderowdetails Method

Parameter	Type	Description
rowBoundIndex	number

Return Value
void

<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>Grid Custom Element</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />
    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />
    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.pager.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.sort.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.edit.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.filter.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.columnsresize.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.aggregates.js"></script>
    <script type="text/javascript">
		var adapter = new jqx.dataAdapter({
			dataType: "xml",
			dataFields: [
				{ name: 'ProductName', type: 'string' },
				{ name: 'QuantityPerUnit', type: 'int' },
				{ name: 'UnitPrice', type: 'float' },
				{ name: 'UnitsInStock', type: 'float' },
				{ name: 'Discontinued', type: 'bool' }
			],
			root: "Products",
			record: "Product",
			id: 'ProductID',
			url: "../sampledata/products.xml"
		});

		var columns = [
                  { text: 'Product Name', datafield: 'ProductName', width: 250 },
                  { text: 'Quantity per Unit', datafield: 'QuantityPerUnit', cellsalign: 'right', align: 'right', width: 200 },
                  { text: 'Unit Price', datafield: 'UnitPrice', align: 'right', cellsalign: 'right', cellsformat: 'c2', width: 200 },
                  { text: 'Units In Stock', datafield: 'UnitsInStock', cellsalign: 'right', width: 100 },
                  { text: 'Discontinued', columntype: 'checkbox', datafield: 'Discontinued' }
                ];

        JQXElements.settings["gridSettings"] =
        {
			            
        }
	window.onload = function() {
		document.querySelector("jqx-grid").hiderowdetails(0);							
	}
    </script>
</head>
<body>
   <jqx-grid settings="gridSettings"></jqx-grid>
</body>
</html>

iscolumnvisible Method

Parameter	Type	Description
dataField	string

Return Value
Boolean

<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>Grid Custom Element</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />
    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />
    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.pager.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.sort.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.edit.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.filter.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.columnsresize.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.aggregates.js"></script>
    <script type="text/javascript">
		var adapter = new jqx.dataAdapter({
			dataType: "xml",
			dataFields: [
				{ name: 'ProductName', type: 'string' },
				{ name: 'QuantityPerUnit', type: 'int' },
				{ name: 'UnitPrice', type: 'float' },
				{ name: 'UnitsInStock', type: 'float' },
				{ name: 'Discontinued', type: 'bool' }
			],
			root: "Products",
			record: "Product",
			id: 'ProductID',
			url: "../sampledata/products.xml"
		});

		var columns = [
                  { text: 'Product Name', datafield: 'ProductName', width: 250 },
                  { text: 'Quantity per Unit', datafield: 'QuantityPerUnit', cellsalign: 'right', align: 'right', width: 200 },
                  { text: 'Unit Price', datafield: 'UnitPrice', align: 'right', cellsalign: 'right', cellsformat: 'c2', width: 200 },
                  { text: 'Units In Stock', datafield: 'UnitsInStock', cellsalign: 'right', width: 100 },
                  { text: 'Discontinued', columntype: 'checkbox', datafield: 'Discontinued' }
                ];

        JQXElements.settings["gridSettings"] =
        {
			            
        }
	window.onload = function() {
		document.querySelector("jqx-grid").iscolumnvisible('firstname');							
	}
    </script>
</head>
<body>
   <jqx-grid settings="gridSettings"></jqx-grid>
</body>
</html>

iscolumnpinned Method

Parameter	Type	Description
dataField	string

Return Value
Boolean

<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>Grid Custom Element</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />
    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />
    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.pager.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.sort.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.edit.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.filter.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.columnsresize.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.aggregates.js"></script>
    <script type="text/javascript">
		var adapter = new jqx.dataAdapter({
			dataType: "xml",
			dataFields: [
				{ name: 'ProductName', type: 'string' },
				{ name: 'QuantityPerUnit', type: 'int' },
				{ name: 'UnitPrice', type: 'float' },
				{ name: 'UnitsInStock', type: 'float' },
				{ name: 'Discontinued', type: 'bool' }
			],
			root: "Products",
			record: "Product",
			id: 'ProductID',
			url: "../sampledata/products.xml"
		});

		var columns = [
                  { text: 'Product Name', datafield: 'ProductName', width: 250 },
                  { text: 'Quantity per Unit', datafield: 'QuantityPerUnit', cellsalign: 'right', align: 'right', width: 200 },
                  { text: 'Unit Price', datafield: 'UnitPrice', align: 'right', cellsalign: 'right', cellsformat: 'c2', width: 200 },
                  { text: 'Units In Stock', datafield: 'UnitsInStock', cellsalign: 'right', width: 100 },
                  { text: 'Discontinued', columntype: 'checkbox', datafield: 'Discontinued' }
                ];

        JQXElements.settings["gridSettings"] =
        {
			            
        }
	window.onload = function() {
		document.querySelector("jqx-grid").iscolumnpinned('firstname');							
	}
    </script>
</head>
<body>
   <jqx-grid settings="gridSettings"></jqx-grid>
</body>
</html>

localizestrings Method

Parameter	Type	Description
localizationObject	object

Return Value
void

<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>Grid Custom Element</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />
    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />
    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.pager.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.sort.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.edit.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.filter.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.columnsresize.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.aggregates.js"></script>
    <script type="text/javascript">
		var adapter = new jqx.dataAdapter({
			dataType: "xml",
			dataFields: [
				{ name: 'ProductName', type: 'string' },
				{ name: 'QuantityPerUnit', type: 'int' },
				{ name: 'UnitPrice', type: 'float' },
				{ name: 'UnitsInStock', type: 'float' },
				{ name: 'Discontinued', type: 'bool' }
			],
			root: "Products",
			record: "Product",
			id: 'ProductID',
			url: "../sampledata/products.xml"
		});

		var columns = [
                  { text: 'Product Name', datafield: 'ProductName', width: 250 },
                  { text: 'Quantity per Unit', datafield: 'QuantityPerUnit', cellsalign: 'right', align: 'right', width: 200 },
                  { text: 'Unit Price', datafield: 'UnitPrice', align: 'right', cellsalign: 'right', cellsformat: 'c2', width: 200 },
                  { text: 'Units In Stock', datafield: 'UnitsInStock', cellsalign: 'right', width: 100 },
                  { text: 'Discontinued', columntype: 'checkbox', datafield: 'Discontinued' }
                ];

        JQXElements.settings["gridSettings"] =
        {
			            
        }
	window.onload = function() {
		document.querySelector("jqx-grid").localizestrings();							
	}
    </script>
</head>
<body>
   <jqx-grid settings="gridSettings"></jqx-grid>
</body>
</html>

pincolumn Method

Parameter	Type	Description
dataField	string

Return Value
void

<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>Grid Custom Element</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />
    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />
    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.pager.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.sort.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.edit.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.filter.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.columnsresize.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.aggregates.js"></script>
    <script type="text/javascript">
		var adapter = new jqx.dataAdapter({
			dataType: "xml",
			dataFields: [
				{ name: 'ProductName', type: 'string' },
				{ name: 'QuantityPerUnit', type: 'int' },
				{ name: 'UnitPrice', type: 'float' },
				{ name: 'UnitsInStock', type: 'float' },
				{ name: 'Discontinued', type: 'bool' }
			],
			root: "Products",
			record: "Product",
			id: 'ProductID',
			url: "../sampledata/products.xml"
		});

		var columns = [
                  { text: 'Product Name', datafield: 'ProductName', width: 250 },
                  { text: 'Quantity per Unit', datafield: 'QuantityPerUnit', cellsalign: 'right', align: 'right', width: 200 },
                  { text: 'Unit Price', datafield: 'UnitPrice', align: 'right', cellsalign: 'right', cellsformat: 'c2', width: 200 },
                  { text: 'Units In Stock', datafield: 'UnitsInStock', cellsalign: 'right', width: 100 },
                  { text: 'Discontinued', columntype: 'checkbox', datafield: 'Discontinued' }
                ];

        JQXElements.settings["gridSettings"] =
        {
			            
        }
	window.onload = function() {
		document.querySelector("jqx-grid").pincolumn('firstname');							
	}
    </script>
</head>
<body>
   <jqx-grid settings="gridSettings"></jqx-grid>
</body>
</html>

refreshdata Method

Parameter	Type	Description
None

Return Value
void

<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>Grid Custom Element</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />
    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />
    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.pager.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.sort.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.edit.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.filter.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.columnsresize.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.aggregates.js"></script>
    <script type="text/javascript">
		var adapter = new jqx.dataAdapter({
			dataType: "xml",
			dataFields: [
				{ name: 'ProductName', type: 'string' },
				{ name: 'QuantityPerUnit', type: 'int' },
				{ name: 'UnitPrice', type: 'float' },
				{ name: 'UnitsInStock', type: 'float' },
				{ name: 'Discontinued', type: 'bool' }
			],
			root: "Products",
			record: "Product",
			id: 'ProductID',
			url: "../sampledata/products.xml"
		});

		var columns = [
                  { text: 'Product Name', datafield: 'ProductName', width: 250 },
                  { text: 'Quantity per Unit', datafield: 'QuantityPerUnit', cellsalign: 'right', align: 'right', width: 200 },
                  { text: 'Unit Price', datafield: 'UnitPrice', align: 'right', cellsalign: 'right', cellsformat: 'c2', width: 200 },
                  { text: 'Units In Stock', datafield: 'UnitsInStock', cellsalign: 'right', width: 100 },
                  { text: 'Discontinued', columntype: 'checkbox', datafield: 'Discontinued' }
                ];

        JQXElements.settings["gridSettings"] =
        {
			            
        }
	window.onload = function() {
		document.querySelector("jqx-grid").refreshdata();							
	}
    </script>
</head>
<body>
   <jqx-grid settings="gridSettings"></jqx-grid>
</body>
</html>

refresh Method

Parameter	Type	Description
None

Return Value
void

<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>Grid Custom Element</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />
    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />
    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.pager.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.sort.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.edit.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.filter.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.columnsresize.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.aggregates.js"></script>
    <script type="text/javascript">
		var adapter = new jqx.dataAdapter({
			dataType: "xml",
			dataFields: [
				{ name: 'ProductName', type: 'string' },
				{ name: 'QuantityPerUnit', type: 'int' },
				{ name: 'UnitPrice', type: 'float' },
				{ name: 'UnitsInStock', type: 'float' },
				{ name: 'Discontinued', type: 'bool' }
			],
			root: "Products",
			record: "Product",
			id: 'ProductID',
			url: "../sampledata/products.xml"
		});

		var columns = [
                  { text: 'Product Name', datafield: 'ProductName', width: 250 },
                  { text: 'Quantity per Unit', datafield: 'QuantityPerUnit', cellsalign: 'right', align: 'right', width: 200 },
                  { text: 'Unit Price', datafield: 'UnitPrice', align: 'right', cellsalign: 'right', cellsformat: 'c2', width: 200 },
                  { text: 'Units In Stock', datafield: 'UnitsInStock', cellsalign: 'right', width: 100 },
                  { text: 'Discontinued', columntype: 'checkbox', datafield: 'Discontinued' }
                ];

        JQXElements.settings["gridSettings"] =
        {
			            
        }
	window.onload = function() {
		document.querySelector("jqx-grid").refresh();							
	}
    </script>
</head>
<body>
   <jqx-grid settings="gridSettings"></jqx-grid>
</body>
</html>

render Method

Parameter	Type	Description
None

Return Value
void

<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>Grid Custom Element</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />
    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />
    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.pager.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.sort.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.edit.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.filter.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.columnsresize.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.aggregates.js"></script>
    <script type="text/javascript">
		var adapter = new jqx.dataAdapter({
			dataType: "xml",
			dataFields: [
				{ name: 'ProductName', type: 'string' },
				{ name: 'QuantityPerUnit', type: 'int' },
				{ name: 'UnitPrice', type: 'float' },
				{ name: 'UnitsInStock', type: 'float' },
				{ name: 'Discontinued', type: 'bool' }
			],
			root: "Products",
			record: "Product",
			id: 'ProductID',
			url: "../sampledata/products.xml"
		});

		var columns = [
                  { text: 'Product Name', datafield: 'ProductName', width: 250 },
                  { text: 'Quantity per Unit', datafield: 'QuantityPerUnit', cellsalign: 'right', align: 'right', width: 200 },
                  { text: 'Unit Price', datafield: 'UnitPrice', align: 'right', cellsalign: 'right', cellsformat: 'c2', width: 200 },
                  { text: 'Units In Stock', datafield: 'UnitsInStock', cellsalign: 'right', width: 100 },
                  { text: 'Discontinued', columntype: 'checkbox', datafield: 'Discontinued' }
                ];

        JQXElements.settings["gridSettings"] =
        {
			            
        }
	window.onload = function() {
		document.querySelector("jqx-grid").render();							
	}
    </script>
</head>
<body>
   <jqx-grid settings="gridSettings"></jqx-grid>
</body>
</html>

scrolloffset Method

Parameter	Type	Description
top	number
left	number

Return Value
void

<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>Grid Custom Element</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />
    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />
    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.pager.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.sort.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.edit.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.filter.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.columnsresize.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.aggregates.js"></script>
    <script type="text/javascript">
		var adapter = new jqx.dataAdapter({
			dataType: "xml",
			dataFields: [
				{ name: 'ProductName', type: 'string' },
				{ name: 'QuantityPerUnit', type: 'int' },
				{ name: 'UnitPrice', type: 'float' },
				{ name: 'UnitsInStock', type: 'float' },
				{ name: 'Discontinued', type: 'bool' }
			],
			root: "Products",
			record: "Product",
			id: 'ProductID',
			url: "../sampledata/products.xml"
		});

		var columns = [
                  { text: 'Product Name', datafield: 'ProductName', width: 250 },
                  { text: 'Quantity per Unit', datafield: 'QuantityPerUnit', cellsalign: 'right', align: 'right', width: 200 },
                  { text: 'Unit Price', datafield: 'UnitPrice', align: 'right', cellsalign: 'right', cellsformat: 'c2', width: 200 },
                  { text: 'Units In Stock', datafield: 'UnitsInStock', cellsalign: 'right', width: 100 },
                  { text: 'Discontinued', columntype: 'checkbox', datafield: 'Discontinued' }
                ];

        JQXElements.settings["gridSettings"] =
        {
			            
        }
	window.onload = function() {
		document.querySelector("jqx-grid").scrolloffset(120,100);							
	}
    </script>
</head>
<body>
   <jqx-grid settings="gridSettings"></jqx-grid>
</body>
</html>

scrollposition Method

Parameter	Type	Description
None

Return Value
Object

<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>Grid Custom Element</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />
    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />
    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.pager.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.sort.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.edit.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.filter.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.columnsresize.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.aggregates.js"></script>
    <script type="text/javascript">
		var adapter = new jqx.dataAdapter({
			dataType: "xml",
			dataFields: [
				{ name: 'ProductName', type: 'string' },
				{ name: 'QuantityPerUnit', type: 'int' },
				{ name: 'UnitPrice', type: 'float' },
				{ name: 'UnitsInStock', type: 'float' },
				{ name: 'Discontinued', type: 'bool' }
			],
			root: "Products",
			record: "Product",
			id: 'ProductID',
			url: "../sampledata/products.xml"
		});

		var columns = [
                  { text: 'Product Name', datafield: 'ProductName', width: 250 },
                  { text: 'Quantity per Unit', datafield: 'QuantityPerUnit', cellsalign: 'right', align: 'right', width: 200 },
                  { text: 'Unit Price', datafield: 'UnitPrice', align: 'right', cellsalign: 'right', cellsformat: 'c2', width: 200 },
                  { text: 'Units In Stock', datafield: 'UnitsInStock', cellsalign: 'right', width: 100 },
                  { text: 'Discontinued', columntype: 'checkbox', datafield: 'Discontinued' }
                ];

        JQXElements.settings["gridSettings"] =
        {
			            
        }
	window.onload = function() {
		var result = document.querySelector("jqx-grid").scrollposition();							
	}
    </script>
</head>
<body>
   <jqx-grid settings="gridSettings"></jqx-grid>
</body>
</html>

showloadelement Method

Parameter	Type	Description
None

Return Value
void

<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>Grid Custom Element</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />
    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />
    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.pager.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.sort.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.edit.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.filter.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.columnsresize.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.aggregates.js"></script>
    <script type="text/javascript">
		var adapter = new jqx.dataAdapter({
			dataType: "xml",
			dataFields: [
				{ name: 'ProductName', type: 'string' },
				{ name: 'QuantityPerUnit', type: 'int' },
				{ name: 'UnitPrice', type: 'float' },
				{ name: 'UnitsInStock', type: 'float' },
				{ name: 'Discontinued', type: 'bool' }
			],
			root: "Products",
			record: "Product",
			id: 'ProductID',
			url: "../sampledata/products.xml"
		});

		var columns = [
                  { text: 'Product Name', datafield: 'ProductName', width: 250 },
                  { text: 'Quantity per Unit', datafield: 'QuantityPerUnit', cellsalign: 'right', align: 'right', width: 200 },
                  { text: 'Unit Price', datafield: 'UnitPrice', align: 'right', cellsalign: 'right', cellsformat: 'c2', width: 200 },
                  { text: 'Units In Stock', datafield: 'UnitsInStock', cellsalign: 'right', width: 100 },
                  { text: 'Discontinued', columntype: 'checkbox', datafield: 'Discontinued' }
                ];

        JQXElements.settings["gridSettings"] =
        {
			            
        }
	window.onload = function() {
		document.querySelector("jqx-grid").showloadelement();							
	}
    </script>
</head>
<body>
   <jqx-grid settings="gridSettings"></jqx-grid>
</body>
</html>

showrowdetails Method

Parameter	Type	Description
rowBoundIndex	number

Return Value
void

<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>Grid Custom Element</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />
    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />
    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.pager.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.sort.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.edit.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.filter.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.columnsresize.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.aggregates.js"></script>
    <script type="text/javascript">
		var adapter = new jqx.dataAdapter({
			dataType: "xml",
			dataFields: [
				{ name: 'ProductName', type: 'string' },
				{ name: 'QuantityPerUnit', type: 'int' },
				{ name: 'UnitPrice', type: 'float' },
				{ name: 'UnitsInStock', type: 'float' },
				{ name: 'Discontinued', type: 'bool' }
			],
			root: "Products",
			record: "Product",
			id: 'ProductID',
			url: "../sampledata/products.xml"
		});

		var columns = [
                  { text: 'Product Name', datafield: 'ProductName', width: 250 },
                  { text: 'Quantity per Unit', datafield: 'QuantityPerUnit', cellsalign: 'right', align: 'right', width: 200 },
                  { text: 'Unit Price', datafield: 'UnitPrice', align: 'right', cellsalign: 'right', cellsformat: 'c2', width: 200 },
                  { text: 'Units In Stock', datafield: 'UnitsInStock', cellsalign: 'right', width: 100 },
                  { text: 'Discontinued', columntype: 'checkbox', datafield: 'Discontinued' }
                ];

        JQXElements.settings["gridSettings"] =
        {
			            
        }
	window.onload = function() {
		document.querySelector("jqx-grid").showrowdetails(0);							
	}
    </script>
</head>
<body>
   <jqx-grid settings="gridSettings"></jqx-grid>
</body>
</html>

setcolumnindex Method

Parameter	Type	Description
dataField	string
index	number

Return Value
void

<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>Grid Custom Element</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />
    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />
    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.pager.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.sort.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.edit.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.filter.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.columnsresize.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.aggregates.js"></script>
    <script type="text/javascript">
		var adapter = new jqx.dataAdapter({
			dataType: "xml",
			dataFields: [
				{ name: 'ProductName', type: 'string' },
				{ name: 'QuantityPerUnit', type: 'int' },
				{ name: 'UnitPrice', type: 'float' },
				{ name: 'UnitsInStock', type: 'float' },
				{ name: 'Discontinued', type: 'bool' }
			],
			root: "Products",
			record: "Product",
			id: 'ProductID',
			url: "../sampledata/products.xml"
		});

		var columns = [
                  { text: 'Product Name', datafield: 'ProductName', width: 250 },
                  { text: 'Quantity per Unit', datafield: 'QuantityPerUnit', cellsalign: 'right', align: 'right', width: 200 },
                  { text: 'Unit Price', datafield: 'UnitPrice', align: 'right', cellsalign: 'right', cellsformat: 'c2', width: 200 },
                  { text: 'Units In Stock', datafield: 'UnitsInStock', cellsalign: 'right', width: 100 },
                  { text: 'Discontinued', columntype: 'checkbox', datafield: 'Discontinued' }
                ];

        JQXElements.settings["gridSettings"] =
        {
			            
        }
	window.onload = function() {
		document.querySelector("jqx-grid").setcolumnindex('firstname',0);							
	}
    </script>
</head>
<body>
   <jqx-grid settings="gridSettings"></jqx-grid>
</body>
</html>

setcolumnproperty Method

Parameter	Type	Description
dataField	string
propertyName	string
propertyValue	object

Return Value
void

<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>Grid Custom Element</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />
    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />
    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.pager.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.sort.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.edit.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.filter.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.columnsresize.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.aggregates.js"></script>
    <script type="text/javascript">
		var adapter = new jqx.dataAdapter({
			dataType: "xml",
			dataFields: [
				{ name: 'ProductName', type: 'string' },
				{ name: 'QuantityPerUnit', type: 'int' },
				{ name: 'UnitPrice', type: 'float' },
				{ name: 'UnitsInStock', type: 'float' },
				{ name: 'Discontinued', type: 'bool' }
			],
			root: "Products",
			record: "Product",
			id: 'ProductID',
			url: "../sampledata/products.xml"
		});

		var columns = [
                  { text: 'Product Name', datafield: 'ProductName', width: 250 },
                  { text: 'Quantity per Unit', datafield: 'QuantityPerUnit', cellsalign: 'right', align: 'right', width: 200 },
                  { text: 'Unit Price', datafield: 'UnitPrice', align: 'right', cellsalign: 'right', cellsformat: 'c2', width: 200 },
                  { text: 'Units In Stock', datafield: 'UnitsInStock', cellsalign: 'right', width: 100 },
                  { text: 'Discontinued', columntype: 'checkbox', datafield: 'Discontinued' }
                ];

        JQXElements.settings["gridSettings"] =
        {
			            
        }
	window.onload = function() {
		document.querySelector("jqx-grid").setcolumnproperty('firstname','text','New Name');							
	}
    </script>
</head>
<body>
   <jqx-grid settings="gridSettings"></jqx-grid>
</body>
</html>

showcolumn Method

Parameter	Type	Description
dataField	string

Return Value
void

<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>Grid Custom Element</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />
    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />
    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.pager.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.sort.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.edit.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.filter.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.columnsresize.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.aggregates.js"></script>
    <script type="text/javascript">
		var adapter = new jqx.dataAdapter({
			dataType: "xml",
			dataFields: [
				{ name: 'ProductName', type: 'string' },
				{ name: 'QuantityPerUnit', type: 'int' },
				{ name: 'UnitPrice', type: 'float' },
				{ name: 'UnitsInStock', type: 'float' },
				{ name: 'Discontinued', type: 'bool' }
			],
			root: "Products",
			record: "Product",
			id: 'ProductID',
			url: "../sampledata/products.xml"
		});

		var columns = [
                  { text: 'Product Name', datafield: 'ProductName', width: 250 },
                  { text: 'Quantity per Unit', datafield: 'QuantityPerUnit', cellsalign: 'right', align: 'right', width: 200 },
                  { text: 'Unit Price', datafield: 'UnitPrice', align: 'right', cellsalign: 'right', cellsformat: 'c2', width: 200 },
                  { text: 'Units In Stock', datafield: 'UnitsInStock', cellsalign: 'right', width: 100 },
                  { text: 'Discontinued', columntype: 'checkbox', datafield: 'Discontinued' }
                ];

        JQXElements.settings["gridSettings"] =
        {
			            
        }
	window.onload = function() {
		document.querySelector("jqx-grid").showcolumn('firstname');							
	}
    </script>
</head>
<body>
   <jqx-grid settings="gridSettings"></jqx-grid>
</body>
</html>

unpincolumn Method

Parameter	Type	Description
dataField	string

Return Value
void

<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>Grid Custom Element</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />
    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />
    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.pager.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.sort.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.edit.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.filter.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.columnsresize.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.aggregates.js"></script>
    <script type="text/javascript">
		var adapter = new jqx.dataAdapter({
			dataType: "xml",
			dataFields: [
				{ name: 'ProductName', type: 'string' },
				{ name: 'QuantityPerUnit', type: 'int' },
				{ name: 'UnitPrice', type: 'float' },
				{ name: 'UnitsInStock', type: 'float' },
				{ name: 'Discontinued', type: 'bool' }
			],
			root: "Products",
			record: "Product",
			id: 'ProductID',
			url: "../sampledata/products.xml"
		});

		var columns = [
                  { text: 'Product Name', datafield: 'ProductName', width: 250 },
                  { text: 'Quantity per Unit', datafield: 'QuantityPerUnit', cellsalign: 'right', align: 'right', width: 200 },
                  { text: 'Unit Price', datafield: 'UnitPrice', align: 'right', cellsalign: 'right', cellsformat: 'c2', width: 200 },
                  { text: 'Units In Stock', datafield: 'UnitsInStock', cellsalign: 'right', width: 100 },
                  { text: 'Discontinued', columntype: 'checkbox', datafield: 'Discontinued' }
                ];

        JQXElements.settings["gridSettings"] =
        {
			            
        }
	window.onload = function() {
		document.querySelector("jqx-grid").unpincolumn('firstname');							
	}
    </script>
</head>
<body>
   <jqx-grid settings="gridSettings"></jqx-grid>
</body>
</html>

updatebounddata Method

Parameter	Type	Description
type	string

Return Value
void

<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>Grid Custom Element</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />
    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />
    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.pager.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.sort.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.edit.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.filter.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.columnsresize.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.aggregates.js"></script>
    <script type="text/javascript">
		var adapter = new jqx.dataAdapter({
			dataType: "xml",
			dataFields: [
				{ name: 'ProductName', type: 'string' },
				{ name: 'QuantityPerUnit', type: 'int' },
				{ name: 'UnitPrice', type: 'float' },
				{ name: 'UnitsInStock', type: 'float' },
				{ name: 'Discontinued', type: 'bool' }
			],
			root: "Products",
			record: "Product",
			id: 'ProductID',
			url: "../sampledata/products.xml"
		});

		var columns = [
                  { text: 'Product Name', datafield: 'ProductName', width: 250 },
                  { text: 'Quantity per Unit', datafield: 'QuantityPerUnit', cellsalign: 'right', align: 'right', width: 200 },
                  { text: 'Unit Price', datafield: 'UnitPrice', align: 'right', cellsalign: 'right', cellsformat: 'c2', width: 200 },
                  { text: 'Units In Stock', datafield: 'UnitsInStock', cellsalign: 'right', width: 100 },
                  { text: 'Discontinued', columntype: 'checkbox', datafield: 'Discontinued' }
                ];

        JQXElements.settings["gridSettings"] =
        {
			            
        }
	window.onload = function() {
		document.querySelector("jqx-grid").updatebounddata();							
	}
    </script>
</head>
<body>
   <jqx-grid settings="gridSettings"></jqx-grid>
</body>
</html>

updating Method

Parameter	Type	Description
None

Return Value
Boolean

<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>Grid Custom Element</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />
    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />
    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.pager.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.sort.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.edit.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.filter.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.columnsresize.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.aggregates.js"></script>
    <script type="text/javascript">
		var adapter = new jqx.dataAdapter({
			dataType: "xml",
			dataFields: [
				{ name: 'ProductName', type: 'string' },
				{ name: 'QuantityPerUnit', type: 'int' },
				{ name: 'UnitPrice', type: 'float' },
				{ name: 'UnitsInStock', type: 'float' },
				{ name: 'Discontinued', type: 'bool' }
			],
			root: "Products",
			record: "Product",
			id: 'ProductID',
			url: "../sampledata/products.xml"
		});

		var columns = [
                  { text: 'Product Name', datafield: 'ProductName', width: 250 },
                  { text: 'Quantity per Unit', datafield: 'QuantityPerUnit', cellsalign: 'right', align: 'right', width: 200 },
                  { text: 'Unit Price', datafield: 'UnitPrice', align: 'right', cellsalign: 'right', cellsformat: 'c2', width: 200 },
                  { text: 'Units In Stock', datafield: 'UnitsInStock', cellsalign: 'right', width: 100 },
                  { text: 'Discontinued', columntype: 'checkbox', datafield: 'Discontinued' }
                ];

        JQXElements.settings["gridSettings"] =
        {
			            
        }
	window.onload = function() {
		var result = document.querySelector("jqx-grid").updating();							
	}
    </script>
</head>
<body>
   <jqx-grid settings="gridSettings"></jqx-grid>
</body>
</html>

getsortcolumn Method

Parameter	Type	Description
None

Return Value
String

<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>Grid Custom Element</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />
    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />
    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.pager.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.sort.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.edit.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.filter.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.columnsresize.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.aggregates.js"></script>
    <script type="text/javascript">
		var adapter = new jqx.dataAdapter({
			dataType: "xml",
			dataFields: [
				{ name: 'ProductName', type: 'string' },
				{ name: 'QuantityPerUnit', type: 'int' },
				{ name: 'UnitPrice', type: 'float' },
				{ name: 'UnitsInStock', type: 'float' },
				{ name: 'Discontinued', type: 'bool' }
			],
			root: "Products",
			record: "Product",
			id: 'ProductID',
			url: "../sampledata/products.xml"
		});

		var columns = [
                  { text: 'Product Name', datafield: 'ProductName', width: 250 },
                  { text: 'Quantity per Unit', datafield: 'QuantityPerUnit', cellsalign: 'right', align: 'right', width: 200 },
                  { text: 'Unit Price', datafield: 'UnitPrice', align: 'right', cellsalign: 'right', cellsformat: 'c2', width: 200 },
                  { text: 'Units In Stock', datafield: 'UnitsInStock', cellsalign: 'right', width: 100 },
                  { text: 'Discontinued', columntype: 'checkbox', datafield: 'Discontinued' }
                ];

        JQXElements.settings["gridSettings"] =
        {
			            
        }
	window.onload = function() {
		var result = document.querySelector("jqx-grid").getsortcolumn();							
	}
    </script>
</head>
<body>
   <jqx-grid settings="gridSettings"></jqx-grid>
</body>
</html>

removesort Method

Parameter	Type	Description
None

Return Value
void

<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>Grid Custom Element</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />
    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />
    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.pager.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.sort.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.edit.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.filter.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.columnsresize.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.aggregates.js"></script>
    <script type="text/javascript">
		var adapter = new jqx.dataAdapter({
			dataType: "xml",
			dataFields: [
				{ name: 'ProductName', type: 'string' },
				{ name: 'QuantityPerUnit', type: 'int' },
				{ name: 'UnitPrice', type: 'float' },
				{ name: 'UnitsInStock', type: 'float' },
				{ name: 'Discontinued', type: 'bool' }
			],
			root: "Products",
			record: "Product",
			id: 'ProductID',
			url: "../sampledata/products.xml"
		});

		var columns = [
                  { text: 'Product Name', datafield: 'ProductName', width: 250 },
                  { text: 'Quantity per Unit', datafield: 'QuantityPerUnit', cellsalign: 'right', align: 'right', width: 200 },
                  { text: 'Unit Price', datafield: 'UnitPrice', align: 'right', cellsalign: 'right', cellsformat: 'c2', width: 200 },
                  { text: 'Units In Stock', datafield: 'UnitsInStock', cellsalign: 'right', width: 100 },
                  { text: 'Discontinued', columntype: 'checkbox', datafield: 'Discontinued' }
                ];

        JQXElements.settings["gridSettings"] =
        {
			            
        }
	window.onload = function() {
		document.querySelector("jqx-grid").removesort();							
	}
    </script>
</head>
<body>
   <jqx-grid settings="gridSettings"></jqx-grid>
</body>
</html>

sortby Method

Parameter	Type	Description
dataField	string
sortOrder	string	"asc", "desc" or null

Return Value
void

<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>Grid Custom Element</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />
    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />
    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.pager.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.sort.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.edit.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.filter.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.columnsresize.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.aggregates.js"></script>
    <script type="text/javascript">
		var adapter = new jqx.dataAdapter({
			dataType: "xml",
			dataFields: [
				{ name: 'ProductName', type: 'string' },
				{ name: 'QuantityPerUnit', type: 'int' },
				{ name: 'UnitPrice', type: 'float' },
				{ name: 'UnitsInStock', type: 'float' },
				{ name: 'Discontinued', type: 'bool' }
			],
			root: "Products",
			record: "Product",
			id: 'ProductID',
			url: "../sampledata/products.xml"
		});

		var columns = [
                  { text: 'Product Name', datafield: 'ProductName', width: 250 },
                  { text: 'Quantity per Unit', datafield: 'QuantityPerUnit', cellsalign: 'right', align: 'right', width: 200 },
                  { text: 'Unit Price', datafield: 'UnitPrice', align: 'right', cellsalign: 'right', cellsformat: 'c2', width: 200 },
                  { text: 'Units In Stock', datafield: 'UnitsInStock', cellsalign: 'right', width: 100 },
                  { text: 'Discontinued', columntype: 'checkbox', datafield: 'Discontinued' }
                ];

        JQXElements.settings["gridSettings"] =
        {
			            
        }
	window.onload = function() {
		document.querySelector("jqx-grid").sortby('firstname','asc');							
	}
    </script>
</head>
<body>
   <jqx-grid settings="gridSettings"></jqx-grid>
</body>
</html>

addgroup Method

Parameter	Type	Description
dataField	string

Return Value
void

<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>Grid Custom Element</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />
    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />
    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.pager.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.sort.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.edit.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.filter.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.columnsresize.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.aggregates.js"></script>
    <script type="text/javascript">
		var adapter = new jqx.dataAdapter({
			dataType: "xml",
			dataFields: [
				{ name: 'ProductName', type: 'string' },
				{ name: 'QuantityPerUnit', type: 'int' },
				{ name: 'UnitPrice', type: 'float' },
				{ name: 'UnitsInStock', type: 'float' },
				{ name: 'Discontinued', type: 'bool' }
			],
			root: "Products",
			record: "Product",
			id: 'ProductID',
			url: "../sampledata/products.xml"
		});

		var columns = [
                  { text: 'Product Name', datafield: 'ProductName', width: 250 },
                  { text: 'Quantity per Unit', datafield: 'QuantityPerUnit', cellsalign: 'right', align: 'right', width: 200 },
                  { text: 'Unit Price', datafield: 'UnitPrice', align: 'right', cellsalign: 'right', cellsformat: 'c2', width: 200 },
                  { text: 'Units In Stock', datafield: 'UnitsInStock', cellsalign: 'right', width: 100 },
                  { text: 'Discontinued', columntype: 'checkbox', datafield: 'Discontinued' }
                ];

        JQXElements.settings["gridSettings"] =
        {
			            
        }
	window.onload = function() {
		document.querySelector("jqx-grid").addgroup('firstname');							
	}
    </script>
</head>
<body>
   <jqx-grid settings="gridSettings"></jqx-grid>
</body>
</html>

cleargroups Method

Parameter	Type	Description
None

Return Value
void

<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>Grid Custom Element</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />
    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />
    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.pager.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.sort.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.edit.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.filter.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.columnsresize.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.aggregates.js"></script>
    <script type="text/javascript">
		var adapter = new jqx.dataAdapter({
			dataType: "xml",
			dataFields: [
				{ name: 'ProductName', type: 'string' },
				{ name: 'QuantityPerUnit', type: 'int' },
				{ name: 'UnitPrice', type: 'float' },
				{ name: 'UnitsInStock', type: 'float' },
				{ name: 'Discontinued', type: 'bool' }
			],
			root: "Products",
			record: "Product",
			id: 'ProductID',
			url: "../sampledata/products.xml"
		});

		var columns = [
                  { text: 'Product Name', datafield: 'ProductName', width: 250 },
                  { text: 'Quantity per Unit', datafield: 'QuantityPerUnit', cellsalign: 'right', align: 'right', width: 200 },
                  { text: 'Unit Price', datafield: 'UnitPrice', align: 'right', cellsalign: 'right', cellsformat: 'c2', width: 200 },
                  { text: 'Units In Stock', datafield: 'UnitsInStock', cellsalign: 'right', width: 100 },
                  { text: 'Discontinued', columntype: 'checkbox', datafield: 'Discontinued' }
                ];

        JQXElements.settings["gridSettings"] =
        {
			            
        }
	window.onload = function() {
		document.querySelector("jqx-grid").cleargroups();							
	}
    </script>
</head>
<body>
   <jqx-grid settings="gridSettings"></jqx-grid>
</body>
</html>

collapsegroup Method

Parameter	Type	Description
group	number/string	Number for root groups or String like "1.1" for sub groups

Return Value
void

<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>Grid Custom Element</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />
    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />
    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.pager.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.sort.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.edit.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.filter.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.columnsresize.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.aggregates.js"></script>
    <script type="text/javascript">
		var adapter = new jqx.dataAdapter({
			dataType: "xml",
			dataFields: [
				{ name: 'ProductName', type: 'string' },
				{ name: 'QuantityPerUnit', type: 'int' },
				{ name: 'UnitPrice', type: 'float' },
				{ name: 'UnitsInStock', type: 'float' },
				{ name: 'Discontinued', type: 'bool' }
			],
			root: "Products",
			record: "Product",
			id: 'ProductID',
			url: "../sampledata/products.xml"
		});

		var columns = [
                  { text: 'Product Name', datafield: 'ProductName', width: 250 },
                  { text: 'Quantity per Unit', datafield: 'QuantityPerUnit', cellsalign: 'right', align: 'right', width: 200 },
                  { text: 'Unit Price', datafield: 'UnitPrice', align: 'right', cellsalign: 'right', cellsformat: 'c2', width: 200 },
                  { text: 'Units In Stock', datafield: 'UnitsInStock', cellsalign: 'right', width: 100 },
                  { text: 'Discontinued', columntype: 'checkbox', datafield: 'Discontinued' }
                ];

        JQXElements.settings["gridSettings"] =
        {
			            
        }
	window.onload = function() {
		document.querySelector("jqx-grid").collapsegroup(0);							
	}
    </script>
</head>
<body>
   <jqx-grid settings="gridSettings"></jqx-grid>
</body>
</html>

collapseallgroups Method

Parameter	Type	Description
None

Return Value
void

<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>Grid Custom Element</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />
    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />
    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.pager.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.sort.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.edit.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.filter.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.columnsresize.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.aggregates.js"></script>
    <script type="text/javascript">
		var adapter = new jqx.dataAdapter({
			dataType: "xml",
			dataFields: [
				{ name: 'ProductName', type: 'string' },
				{ name: 'QuantityPerUnit', type: 'int' },
				{ name: 'UnitPrice', type: 'float' },
				{ name: 'UnitsInStock', type: 'float' },
				{ name: 'Discontinued', type: 'bool' }
			],
			root: "Products",
			record: "Product",
			id: 'ProductID',
			url: "../sampledata/products.xml"
		});

		var columns = [
                  { text: 'Product Name', datafield: 'ProductName', width: 250 },
                  { text: 'Quantity per Unit', datafield: 'QuantityPerUnit', cellsalign: 'right', align: 'right', width: 200 },
                  { text: 'Unit Price', datafield: 'UnitPrice', align: 'right', cellsalign: 'right', cellsformat: 'c2', width: 200 },
                  { text: 'Units In Stock', datafield: 'UnitsInStock', cellsalign: 'right', width: 100 },
                  { text: 'Discontinued', columntype: 'checkbox', datafield: 'Discontinued' }
                ];

        JQXElements.settings["gridSettings"] =
        {
			            
        }
	window.onload = function() {
		document.querySelector("jqx-grid").collapseallgroups();							
	}
    </script>
</head>
<body>
   <jqx-grid settings="gridSettings"></jqx-grid>
</body>
</html>

expandallgroups Method

Parameter	Type	Description
None

Return Value
void

<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>Grid Custom Element</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />
    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />
    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.pager.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.sort.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.edit.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.filter.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.columnsresize.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.aggregates.js"></script>
    <script type="text/javascript">
		var adapter = new jqx.dataAdapter({
			dataType: "xml",
			dataFields: [
				{ name: 'ProductName', type: 'string' },
				{ name: 'QuantityPerUnit', type: 'int' },
				{ name: 'UnitPrice', type: 'float' },
				{ name: 'UnitsInStock', type: 'float' },
				{ name: 'Discontinued', type: 'bool' }
			],
			root: "Products",
			record: "Product",
			id: 'ProductID',
			url: "../sampledata/products.xml"
		});

		var columns = [
                  { text: 'Product Name', datafield: 'ProductName', width: 250 },
                  { text: 'Quantity per Unit', datafield: 'QuantityPerUnit', cellsalign: 'right', align: 'right', width: 200 },
                  { text: 'Unit Price', datafield: 'UnitPrice', align: 'right', cellsalign: 'right', cellsformat: 'c2', width: 200 },
                  { text: 'Units In Stock', datafield: 'UnitsInStock', cellsalign: 'right', width: 100 },
                  { text: 'Discontinued', columntype: 'checkbox', datafield: 'Discontinued' }
                ];

        JQXElements.settings["gridSettings"] =
        {
			            
        }
	window.onload = function() {
		document.querySelector("jqx-grid").expandallgroups();							
	}
    </script>
</head>
<body>
   <jqx-grid settings="gridSettings"></jqx-grid>
</body>
</html>

expandgroup Method

Parameter	Type	Description
group	number/string	Number for root groups or String like "1.1" for sub groups

Return Value
void

<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>Grid Custom Element</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />
    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />
    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.pager.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.sort.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.edit.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.filter.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.columnsresize.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.aggregates.js"></script>
    <script type="text/javascript">
		var adapter = new jqx.dataAdapter({
			dataType: "xml",
			dataFields: [
				{ name: 'ProductName', type: 'string' },
				{ name: 'QuantityPerUnit', type: 'int' },
				{ name: 'UnitPrice', type: 'float' },
				{ name: 'UnitsInStock', type: 'float' },
				{ name: 'Discontinued', type: 'bool' }
			],
			root: "Products",
			record: "Product",
			id: 'ProductID',
			url: "../sampledata/products.xml"
		});

		var columns = [
                  { text: 'Product Name', datafield: 'ProductName', width: 250 },
                  { text: 'Quantity per Unit', datafield: 'QuantityPerUnit', cellsalign: 'right', align: 'right', width: 200 },
                  { text: 'Unit Price', datafield: 'UnitPrice', align: 'right', cellsalign: 'right', cellsformat: 'c2', width: 200 },
                  { text: 'Units In Stock', datafield: 'UnitsInStock', cellsalign: 'right', width: 100 },
                  { text: 'Discontinued', columntype: 'checkbox', datafield: 'Discontinued' }
                ];

        JQXElements.settings["gridSettings"] =
        {
			            
        }
	window.onload = function() {
		document.querySelector("jqx-grid").expandgroup(0);							
	}
    </script>
</head>
<body>
   <jqx-grid settings="gridSettings"></jqx-grid>
</body>
</html>

getrootgroupscount Method

Parameter	Type	Description
None

Return Value
Number

<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>Grid Custom Element</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />
    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />
    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.pager.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.sort.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.edit.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.filter.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.columnsresize.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.aggregates.js"></script>
    <script type="text/javascript">
		var adapter = new jqx.dataAdapter({
			dataType: "xml",
			dataFields: [
				{ name: 'ProductName', type: 'string' },
				{ name: 'QuantityPerUnit', type: 'int' },
				{ name: 'UnitPrice', type: 'float' },
				{ name: 'UnitsInStock', type: 'float' },
				{ name: 'Discontinued', type: 'bool' }
			],
			root: "Products",
			record: "Product",
			id: 'ProductID',
			url: "../sampledata/products.xml"
		});

		var columns = [
                  { text: 'Product Name', datafield: 'ProductName', width: 250 },
                  { text: 'Quantity per Unit', datafield: 'QuantityPerUnit', cellsalign: 'right', align: 'right', width: 200 },
                  { text: 'Unit Price', datafield: 'UnitPrice', align: 'right', cellsalign: 'right', cellsformat: 'c2', width: 200 },
                  { text: 'Units In Stock', datafield: 'UnitsInStock', cellsalign: 'right', width: 100 },
                  { text: 'Discontinued', columntype: 'checkbox', datafield: 'Discontinued' }
                ];

        JQXElements.settings["gridSettings"] =
        {
			            
        }
	window.onload = function() {
		var result = document.querySelector("jqx-grid").getrootgroupscount();							
	}
    </script>
</head>
<body>
   <jqx-grid settings="gridSettings"></jqx-grid>
</body>
</html>

getgroup Method

Parameter	Type	Description
groupIndex	number

Return Value
Object

<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>Grid Custom Element</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />
    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />
    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.pager.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.sort.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.edit.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.filter.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.columnsresize.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.aggregates.js"></script>
    <script type="text/javascript">
		var adapter = new jqx.dataAdapter({
			dataType: "xml",
			dataFields: [
				{ name: 'ProductName', type: 'string' },
				{ name: 'QuantityPerUnit', type: 'int' },
				{ name: 'UnitPrice', type: 'float' },
				{ name: 'UnitsInStock', type: 'float' },
				{ name: 'Discontinued', type: 'bool' }
			],
			root: "Products",
			record: "Product",
			id: 'ProductID',
			url: "../sampledata/products.xml"
		});

		var columns = [
                  { text: 'Product Name', datafield: 'ProductName', width: 250 },
                  { text: 'Quantity per Unit', datafield: 'QuantityPerUnit', cellsalign: 'right', align: 'right', width: 200 },
                  { text: 'Unit Price', datafield: 'UnitPrice', align: 'right', cellsalign: 'right', cellsformat: 'c2', width: 200 },
                  { text: 'Units In Stock', datafield: 'UnitsInStock', cellsalign: 'right', width: 100 },
                  { text: 'Discontinued', columntype: 'checkbox', datafield: 'Discontinued' }
                ];

        JQXElements.settings["gridSettings"] =
        {
			            
        }
	window.onload = function() {
		document.querySelector("jqx-grid").getgroup(0);							
	}
    </script>
</head>
<body>
   <jqx-grid settings="gridSettings"></jqx-grid>
</body>
</html>

insertgroup Method

Parameter	Type	Description
groupIndex	number
dataField	string

Return Value
void

<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>Grid Custom Element</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />
    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />
    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.pager.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.sort.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.edit.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.filter.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.columnsresize.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.aggregates.js"></script>
    <script type="text/javascript">
		var adapter = new jqx.dataAdapter({
			dataType: "xml",
			dataFields: [
				{ name: 'ProductName', type: 'string' },
				{ name: 'QuantityPerUnit', type: 'int' },
				{ name: 'UnitPrice', type: 'float' },
				{ name: 'UnitsInStock', type: 'float' },
				{ name: 'Discontinued', type: 'bool' }
			],
			root: "Products",
			record: "Product",
			id: 'ProductID',
			url: "../sampledata/products.xml"
		});

		var columns = [
                  { text: 'Product Name', datafield: 'ProductName', width: 250 },
                  { text: 'Quantity per Unit', datafield: 'QuantityPerUnit', cellsalign: 'right', align: 'right', width: 200 },
                  { text: 'Unit Price', datafield: 'UnitPrice', align: 'right', cellsalign: 'right', cellsformat: 'c2', width: 200 },
                  { text: 'Units In Stock', datafield: 'UnitsInStock', cellsalign: 'right', width: 100 },
                  { text: 'Discontinued', columntype: 'checkbox', datafield: 'Discontinued' }
                ];

        JQXElements.settings["gridSettings"] =
        {
			            
        }
	window.onload = function() {
		document.querySelector("jqx-grid").insertgroup(0,'firstname');							
	}
    </script>
</head>
<body>
   <jqx-grid settings="gridSettings"></jqx-grid>
</body>
</html>

iscolumngroupable Method

Parameter	Type	Description
None

Return Value
Boolean

<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>Grid Custom Element</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />
    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />
    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.pager.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.sort.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.edit.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.filter.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.columnsresize.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.aggregates.js"></script>
    <script type="text/javascript">
		var adapter = new jqx.dataAdapter({
			dataType: "xml",
			dataFields: [
				{ name: 'ProductName', type: 'string' },
				{ name: 'QuantityPerUnit', type: 'int' },
				{ name: 'UnitPrice', type: 'float' },
				{ name: 'UnitsInStock', type: 'float' },
				{ name: 'Discontinued', type: 'bool' }
			],
			root: "Products",
			record: "Product",
			id: 'ProductID',
			url: "../sampledata/products.xml"
		});

		var columns = [
                  { text: 'Product Name', datafield: 'ProductName', width: 250 },
                  { text: 'Quantity per Unit', datafield: 'QuantityPerUnit', cellsalign: 'right', align: 'right', width: 200 },
                  { text: 'Unit Price', datafield: 'UnitPrice', align: 'right', cellsalign: 'right', cellsformat: 'c2', width: 200 },
                  { text: 'Units In Stock', datafield: 'UnitsInStock', cellsalign: 'right', width: 100 },
                  { text: 'Discontinued', columntype: 'checkbox', datafield: 'Discontinued' }
                ];

        JQXElements.settings["gridSettings"] =
        {
			            
        }
	window.onload = function() {
		document.querySelector("jqx-grid").iscolumngroupable('firstname');							
	}
    </script>
</head>
<body>
   <jqx-grid settings="gridSettings"></jqx-grid>
</body>
</html>

removegroupat Method

Parameter	Type	Description
groupIndex	number

Return Value
void

<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>Grid Custom Element</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />
    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />
    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.pager.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.sort.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.edit.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.filter.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.columnsresize.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.aggregates.js"></script>
    <script type="text/javascript">
		var adapter = new jqx.dataAdapter({
			dataType: "xml",
			dataFields: [
				{ name: 'ProductName', type: 'string' },
				{ name: 'QuantityPerUnit', type: 'int' },
				{ name: 'UnitPrice', type: 'float' },
				{ name: 'UnitsInStock', type: 'float' },
				{ name: 'Discontinued', type: 'bool' }
			],
			root: "Products",
			record: "Product",
			id: 'ProductID',
			url: "../sampledata/products.xml"
		});

		var columns = [
                  { text: 'Product Name', datafield: 'ProductName', width: 250 },
                  { text: 'Quantity per Unit', datafield: 'QuantityPerUnit', cellsalign: 'right', align: 'right', width: 200 },
                  { text: 'Unit Price', datafield: 'UnitPrice', align: 'right', cellsalign: 'right', cellsformat: 'c2', width: 200 },
                  { text: 'Units In Stock', datafield: 'UnitsInStock', cellsalign: 'right', width: 100 },
                  { text: 'Discontinued', columntype: 'checkbox', datafield: 'Discontinued' }
                ];

        JQXElements.settings["gridSettings"] =
        {
			            
        }
	window.onload = function() {
		document.querySelector("jqx-grid").removegroupat(0);							
	}
    </script>
</head>
<body>
   <jqx-grid settings="gridSettings"></jqx-grid>
</body>
</html>

removegroup Method

Parameter	Type	Description
dataField	string

Return Value
void

<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>Grid Custom Element</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />
    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />
    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.pager.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.sort.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.edit.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.filter.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.columnsresize.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.aggregates.js"></script>
    <script type="text/javascript">
		var adapter = new jqx.dataAdapter({
			dataType: "xml",
			dataFields: [
				{ name: 'ProductName', type: 'string' },
				{ name: 'QuantityPerUnit', type: 'int' },
				{ name: 'UnitPrice', type: 'float' },
				{ name: 'UnitsInStock', type: 'float' },
				{ name: 'Discontinued', type: 'bool' }
			],
			root: "Products",
			record: "Product",
			id: 'ProductID',
			url: "../sampledata/products.xml"
		});

		var columns = [
                  { text: 'Product Name', datafield: 'ProductName', width: 250 },
                  { text: 'Quantity per Unit', datafield: 'QuantityPerUnit', cellsalign: 'right', align: 'right', width: 200 },
                  { text: 'Unit Price', datafield: 'UnitPrice', align: 'right', cellsalign: 'right', cellsformat: 'c2', width: 200 },
                  { text: 'Units In Stock', datafield: 'UnitsInStock', cellsalign: 'right', width: 100 },
                  { text: 'Discontinued', columntype: 'checkbox', datafield: 'Discontinued' }
                ];

        JQXElements.settings["gridSettings"] =
        {
			            
        }
	window.onload = function() {
		document.querySelector("jqx-grid").removegroup('firstname');							
	}
    </script>
</head>
<body>
   <jqx-grid settings="gridSettings"></jqx-grid>
</body>
</html>

addfilter Method

Parameter	Type	Description
dataField	string
filterGroup	object
refreshGrid	boolean

Return Value
void

<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>Grid Custom Element</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />
    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />
    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.pager.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.sort.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.edit.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.filter.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.columnsresize.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.aggregates.js"></script>
    <script type="text/javascript">
		var adapter = new jqx.dataAdapter({
			dataType: "xml",
			dataFields: [
				{ name: 'ProductName', type: 'string' },
				{ name: 'QuantityPerUnit', type: 'int' },
				{ name: 'UnitPrice', type: 'float' },
				{ name: 'UnitsInStock', type: 'float' },
				{ name: 'Discontinued', type: 'bool' }
			],
			root: "Products",
			record: "Product",
			id: 'ProductID',
			url: "../sampledata/products.xml"
		});

		var columns = [
                  { text: 'Product Name', datafield: 'ProductName', width: 250 },
                  { text: 'Quantity per Unit', datafield: 'QuantityPerUnit', cellsalign: 'right', align: 'right', width: 200 },
                  { text: 'Unit Price', datafield: 'UnitPrice', align: 'right', cellsalign: 'right', cellsformat: 'c2', width: 200 },
                  { text: 'Units In Stock', datafield: 'UnitsInStock', cellsalign: 'right', width: 100 },
                  { text: 'Discontinued', columntype: 'checkbox', datafield: 'Discontinued' }
                ];

        JQXElements.settings["gridSettings"] =
        {
			            
        }
	window.onload = function() {
		document.querySelector("jqx-grid").addfilter();							
	}
    </script>
</head>
<body>
   <jqx-grid settings="gridSettings"></jqx-grid>
</body>
</html>

applyfilters Method

Parameter	Type	Description
None

Return Value
void

<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>Grid Custom Element</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />
    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />
    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.pager.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.sort.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.edit.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.filter.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.columnsresize.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.aggregates.js"></script>
    <script type="text/javascript">
		var adapter = new jqx.dataAdapter({
			dataType: "xml",
			dataFields: [
				{ name: 'ProductName', type: 'string' },
				{ name: 'QuantityPerUnit', type: 'int' },
				{ name: 'UnitPrice', type: 'float' },
				{ name: 'UnitsInStock', type: 'float' },
				{ name: 'Discontinued', type: 'bool' }
			],
			root: "Products",
			record: "Product",
			id: 'ProductID',
			url: "../sampledata/products.xml"
		});

		var columns = [
                  { text: 'Product Name', datafield: 'ProductName', width: 250 },
                  { text: 'Quantity per Unit', datafield: 'QuantityPerUnit', cellsalign: 'right', align: 'right', width: 200 },
                  { text: 'Unit Price', datafield: 'UnitPrice', align: 'right', cellsalign: 'right', cellsformat: 'c2', width: 200 },
                  { text: 'Units In Stock', datafield: 'UnitsInStock', cellsalign: 'right', width: 100 },
                  { text: 'Discontinued', columntype: 'checkbox', datafield: 'Discontinued' }
                ];

        JQXElements.settings["gridSettings"] =
        {
			            
        }
	window.onload = function() {
		document.querySelector("jqx-grid").applyfilters();							
	}
    </script>
</head>
<body>
   <jqx-grid settings="gridSettings"></jqx-grid>
</body>
</html>

clearfilters Method

Parameter	Type	Description
None

Return Value
void

<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>Grid Custom Element</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />
    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />
    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.pager.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.sort.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.edit.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.filter.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.columnsresize.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.aggregates.js"></script>
    <script type="text/javascript">
		var adapter = new jqx.dataAdapter({
			dataType: "xml",
			dataFields: [
				{ name: 'ProductName', type: 'string' },
				{ name: 'QuantityPerUnit', type: 'int' },
				{ name: 'UnitPrice', type: 'float' },
				{ name: 'UnitsInStock', type: 'float' },
				{ name: 'Discontinued', type: 'bool' }
			],
			root: "Products",
			record: "Product",
			id: 'ProductID',
			url: "../sampledata/products.xml"
		});

		var columns = [
                  { text: 'Product Name', datafield: 'ProductName', width: 250 },
                  { text: 'Quantity per Unit', datafield: 'QuantityPerUnit', cellsalign: 'right', align: 'right', width: 200 },
                  { text: 'Unit Price', datafield: 'UnitPrice', align: 'right', cellsalign: 'right', cellsformat: 'c2', width: 200 },
                  { text: 'Units In Stock', datafield: 'UnitsInStock', cellsalign: 'right', width: 100 },
                  { text: 'Discontinued', columntype: 'checkbox', datafield: 'Discontinued' }
                ];

        JQXElements.settings["gridSettings"] =
        {
			            
        }
	window.onload = function() {
		document.querySelector("jqx-grid").clearfilters();							
	}
    </script>
</head>
<body>
   <jqx-grid settings="gridSettings"></jqx-grid>
</body>
</html>

getfilterinformation Method

Parameter	Type	Description
None

Return Value
void

<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>Grid Custom Element</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />
    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />
    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.pager.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.sort.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.edit.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.filter.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.columnsresize.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.aggregates.js"></script>
    <script type="text/javascript">
		var adapter = new jqx.dataAdapter({
			dataType: "xml",
			dataFields: [
				{ name: 'ProductName', type: 'string' },
				{ name: 'QuantityPerUnit', type: 'int' },
				{ name: 'UnitPrice', type: 'float' },
				{ name: 'UnitsInStock', type: 'float' },
				{ name: 'Discontinued', type: 'bool' }
			],
			root: "Products",
			record: "Product",
			id: 'ProductID',
			url: "../sampledata/products.xml"
		});

		var columns = [
                  { text: 'Product Name', datafield: 'ProductName', width: 250 },
                  { text: 'Quantity per Unit', datafield: 'QuantityPerUnit', cellsalign: 'right', align: 'right', width: 200 },
                  { text: 'Unit Price', datafield: 'UnitPrice', align: 'right', cellsalign: 'right', cellsformat: 'c2', width: 200 },
                  { text: 'Units In Stock', datafield: 'UnitsInStock', cellsalign: 'right', width: 100 },
                  { text: 'Discontinued', columntype: 'checkbox', datafield: 'Discontinued' }
                ];

        JQXElements.settings["gridSettings"] =
        {
			            
        }
	window.onload = function() {
		document.querySelector("jqx-grid").getfilterinformation();							
	}
    </script>
</head>
<body>
   <jqx-grid settings="gridSettings"></jqx-grid>
</body>
</html>

getcolumnat Method

Parameter	Type	Description
index	number

Return Value
Object

<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>Grid Custom Element</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />
    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />
    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.pager.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.sort.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.edit.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.filter.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.columnsresize.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.aggregates.js"></script>
    <script type="text/javascript">
		var adapter = new jqx.dataAdapter({
			dataType: "xml",
			dataFields: [
				{ name: 'ProductName', type: 'string' },
				{ name: 'QuantityPerUnit', type: 'int' },
				{ name: 'UnitPrice', type: 'float' },
				{ name: 'UnitsInStock', type: 'float' },
				{ name: 'Discontinued', type: 'bool' }
			],
			root: "Products",
			record: "Product",
			id: 'ProductID',
			url: "../sampledata/products.xml"
		});

		var columns = [
                  { text: 'Product Name', datafield: 'ProductName', width: 250 },
                  { text: 'Quantity per Unit', datafield: 'QuantityPerUnit', cellsalign: 'right', align: 'right', width: 200 },
                  { text: 'Unit Price', datafield: 'UnitPrice', align: 'right', cellsalign: 'right', cellsformat: 'c2', width: 200 },
                  { text: 'Units In Stock', datafield: 'UnitsInStock', cellsalign: 'right', width: 100 },
                  { text: 'Discontinued', columntype: 'checkbox', datafield: 'Discontinued' }
                ];

        JQXElements.settings["gridSettings"] =
        {
			            
        }
	window.onload = function() {
		document.querySelector("jqx-grid").getcolumnat(5);							
	}
    </script>
</head>
<body>
   <jqx-grid settings="gridSettings"></jqx-grid>
</body>
</html>

removefilter Method

Parameter	Type	Description
dataField	string
refreshGrid	boolean

Return Value
void

<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>Grid Custom Element</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />
    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />
    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.pager.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.sort.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.edit.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.filter.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.columnsresize.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.aggregates.js"></script>
    <script type="text/javascript">
		var adapter = new jqx.dataAdapter({
			dataType: "xml",
			dataFields: [
				{ name: 'ProductName', type: 'string' },
				{ name: 'QuantityPerUnit', type: 'int' },
				{ name: 'UnitPrice', type: 'float' },
				{ name: 'UnitsInStock', type: 'float' },
				{ name: 'Discontinued', type: 'bool' }
			],
			root: "Products",
			record: "Product",
			id: 'ProductID',
			url: "../sampledata/products.xml"
		});

		var columns = [
                  { text: 'Product Name', datafield: 'ProductName', width: 250 },
                  { text: 'Quantity per Unit', datafield: 'QuantityPerUnit', cellsalign: 'right', align: 'right', width: 200 },
                  { text: 'Unit Price', datafield: 'UnitPrice', align: 'right', cellsalign: 'right', cellsformat: 'c2', width: 200 },
                  { text: 'Units In Stock', datafield: 'UnitsInStock', cellsalign: 'right', width: 100 },
                  { text: 'Discontinued', columntype: 'checkbox', datafield: 'Discontinued' }
                ];

        JQXElements.settings["gridSettings"] =
        {
			            
        }
	window.onload = function() {
		document.querySelector("jqx-grid").removefilter('firstname');							
	}
    </script>
</head>
<body>
   <jqx-grid settings="gridSettings"></jqx-grid>
</body>
</html>

refreshfilterrow Method

Parameter	Type	Description
None

Return Value
void

<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>Grid Custom Element</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />
    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />
    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.pager.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.sort.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.edit.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.filter.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.columnsresize.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.aggregates.js"></script>
    <script type="text/javascript">
		var adapter = new jqx.dataAdapter({
			dataType: "xml",
			dataFields: [
				{ name: 'ProductName', type: 'string' },
				{ name: 'QuantityPerUnit', type: 'int' },
				{ name: 'UnitPrice', type: 'float' },
				{ name: 'UnitsInStock', type: 'float' },
				{ name: 'Discontinued', type: 'bool' }
			],
			root: "Products",
			record: "Product",
			id: 'ProductID',
			url: "../sampledata/products.xml"
		});

		var columns = [
                  { text: 'Product Name', datafield: 'ProductName', width: 250 },
                  { text: 'Quantity per Unit', datafield: 'QuantityPerUnit', cellsalign: 'right', align: 'right', width: 200 },
                  { text: 'Unit Price', datafield: 'UnitPrice', align: 'right', cellsalign: 'right', cellsformat: 'c2', width: 200 },
                  { text: 'Units In Stock', datafield: 'UnitsInStock', cellsalign: 'right', width: 100 },
                  { text: 'Discontinued', columntype: 'checkbox', datafield: 'Discontinued' }
                ];

        JQXElements.settings["gridSettings"] =
        {
			            
        }
	window.onload = function() {
		document.querySelector("jqx-grid").refreshfilterrow();							
	}
    </script>
</head>
<body>
   <jqx-grid settings="gridSettings"></jqx-grid>
</body>
</html>

gotopage Method

Parameter	Type	Description
pageNumber	number

Return Value
void

<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>Grid Custom Element</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />
    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />
    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.pager.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.sort.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.edit.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.filter.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.columnsresize.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.aggregates.js"></script>
    <script type="text/javascript">
		var adapter = new jqx.dataAdapter({
			dataType: "xml",
			dataFields: [
				{ name: 'ProductName', type: 'string' },
				{ name: 'QuantityPerUnit', type: 'int' },
				{ name: 'UnitPrice', type: 'float' },
				{ name: 'UnitsInStock', type: 'float' },
				{ name: 'Discontinued', type: 'bool' }
			],
			root: "Products",
			record: "Product",
			id: 'ProductID',
			url: "../sampledata/products.xml"
		});

		var columns = [
                  { text: 'Product Name', datafield: 'ProductName', width: 250 },
                  { text: 'Quantity per Unit', datafield: 'QuantityPerUnit', cellsalign: 'right', align: 'right', width: 200 },
                  { text: 'Unit Price', datafield: 'UnitPrice', align: 'right', cellsalign: 'right', cellsformat: 'c2', width: 200 },
                  { text: 'Units In Stock', datafield: 'UnitsInStock', cellsalign: 'right', width: 100 },
                  { text: 'Discontinued', columntype: 'checkbox', datafield: 'Discontinued' }
                ];

        JQXElements.settings["gridSettings"] =
        {
			            
        }
	window.onload = function() {
		document.querySelector("jqx-grid").gotopage(2);							
	}
    </script>
</head>
<body>
   <jqx-grid settings="gridSettings"></jqx-grid>
</body>
</html>

gotoprevpage Method

Parameter	Type	Description
None

Return Value
void

<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>Grid Custom Element</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />
    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />
    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.pager.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.sort.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.edit.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.filter.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.columnsresize.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.aggregates.js"></script>
    <script type="text/javascript">
		var adapter = new jqx.dataAdapter({
			dataType: "xml",
			dataFields: [
				{ name: 'ProductName', type: 'string' },
				{ name: 'QuantityPerUnit', type: 'int' },
				{ name: 'UnitPrice', type: 'float' },
				{ name: 'UnitsInStock', type: 'float' },
				{ name: 'Discontinued', type: 'bool' }
			],
			root: "Products",
			record: "Product",
			id: 'ProductID',
			url: "../sampledata/products.xml"
		});

		var columns = [
                  { text: 'Product Name', datafield: 'ProductName', width: 250 },
                  { text: 'Quantity per Unit', datafield: 'QuantityPerUnit', cellsalign: 'right', align: 'right', width: 200 },
                  { text: 'Unit Price', datafield: 'UnitPrice', align: 'right', cellsalign: 'right', cellsformat: 'c2', width: 200 },
                  { text: 'Units In Stock', datafield: 'UnitsInStock', cellsalign: 'right', width: 100 },
                  { text: 'Discontinued', columntype: 'checkbox', datafield: 'Discontinued' }
                ];

        JQXElements.settings["gridSettings"] =
        {
			            
        }
	window.onload = function() {
		document.querySelector("jqx-grid").gotoprevpage();							
	}
    </script>
</head>
<body>
   <jqx-grid settings="gridSettings"></jqx-grid>
</body>
</html>

gotonextpage Method

Parameter	Type	Description
None

Return Value
void

<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>Grid Custom Element</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />
    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />
    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.pager.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.sort.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.edit.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.filter.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.columnsresize.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.aggregates.js"></script>
    <script type="text/javascript">
		var adapter = new jqx.dataAdapter({
			dataType: "xml",
			dataFields: [
				{ name: 'ProductName', type: 'string' },
				{ name: 'QuantityPerUnit', type: 'int' },
				{ name: 'UnitPrice', type: 'float' },
				{ name: 'UnitsInStock', type: 'float' },
				{ name: 'Discontinued', type: 'bool' }
			],
			root: "Products",
			record: "Product",
			id: 'ProductID',
			url: "../sampledata/products.xml"
		});

		var columns = [
                  { text: 'Product Name', datafield: 'ProductName', width: 250 },
                  { text: 'Quantity per Unit', datafield: 'QuantityPerUnit', cellsalign: 'right', align: 'right', width: 200 },
                  { text: 'Unit Price', datafield: 'UnitPrice', align: 'right', cellsalign: 'right', cellsformat: 'c2', width: 200 },
                  { text: 'Units In Stock', datafield: 'UnitsInStock', cellsalign: 'right', width: 100 },
                  { text: 'Discontinued', columntype: 'checkbox', datafield: 'Discontinued' }
                ];

        JQXElements.settings["gridSettings"] =
        {
			            
        }
	window.onload = function() {
		document.querySelector("jqx-grid").gotonextpage();							
	}
    </script>
</head>
<body>
   <jqx-grid settings="gridSettings"></jqx-grid>
</body>
</html>

addrow Method

Parameter	Type	Description
rowIds	string/number/array	rowID or rowIds. You can use getrowid method for getting the ID of a row.
data	object/array
rowPosition	string	"first" or "last"

Return Value
void

<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>Grid Custom Element</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />
    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />
    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.pager.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.sort.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.edit.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.filter.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.columnsresize.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.aggregates.js"></script>
    <script type="text/javascript">
		var adapter = new jqx.dataAdapter({
			dataType: "xml",
			dataFields: [
				{ name: 'ProductName', type: 'string' },
				{ name: 'QuantityPerUnit', type: 'int' },
				{ name: 'UnitPrice', type: 'float' },
				{ name: 'UnitsInStock', type: 'float' },
				{ name: 'Discontinued', type: 'bool' }
			],
			root: "Products",
			record: "Product",
			id: 'ProductID',
			url: "../sampledata/products.xml"
		});

		var columns = [
                  { text: 'Product Name', datafield: 'ProductName', width: 250 },
                  { text: 'Quantity per Unit', datafield: 'QuantityPerUnit', cellsalign: 'right', align: 'right', width: 200 },
                  { text: 'Unit Price', datafield: 'UnitPrice', align: 'right', cellsalign: 'right', cellsformat: 'c2', width: 200 },
                  { text: 'Units In Stock', datafield: 'UnitsInStock', cellsalign: 'right', width: 100 },
                  { text: 'Discontinued', columntype: 'checkbox', datafield: 'Discontinued' }
                ];

        JQXElements.settings["gridSettings"] =
        {
			            
        }
	window.onload = function() {
		document.querySelector("jqx-grid").addrow(1,{firstname: 'New Name'});							
	}
    </script>
</head>
<body>
   <jqx-grid settings="gridSettings"></jqx-grid>
</body>
</html>

begincelledit Method

Parameter	Type	Description
rowBoundIndex	number
dataField	string

Return Value
void

<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>Grid Custom Element</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />
    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />
    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.pager.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.sort.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.edit.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.filter.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.columnsresize.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.aggregates.js"></script>
    <script type="text/javascript">
		var adapter = new jqx.dataAdapter({
			dataType: "xml",
			dataFields: [
				{ name: 'ProductName', type: 'string' },
				{ name: 'QuantityPerUnit', type: 'int' },
				{ name: 'UnitPrice', type: 'float' },
				{ name: 'UnitsInStock', type: 'float' },
				{ name: 'Discontinued', type: 'bool' }
			],
			root: "Products",
			record: "Product",
			id: 'ProductID',
			url: "../sampledata/products.xml"
		});

		var columns = [
                  { text: 'Product Name', datafield: 'ProductName', width: 250 },
                  { text: 'Quantity per Unit', datafield: 'QuantityPerUnit', cellsalign: 'right', align: 'right', width: 200 },
                  { text: 'Unit Price', datafield: 'UnitPrice', align: 'right', cellsalign: 'right', cellsformat: 'c2', width: 200 },
                  { text: 'Units In Stock', datafield: 'UnitsInStock', cellsalign: 'right', width: 100 },
                  { text: 'Discontinued', columntype: 'checkbox', datafield: 'Discontinued' }
                ];

        JQXElements.settings["gridSettings"] =
        {
			            
        }
	window.onload = function() {
		document.querySelector("jqx-grid").begincelledit(1,'firstname');							
	}
    </script>
</head>
<body>
   <jqx-grid settings="gridSettings"></jqx-grid>
</body>
</html>

beginrowedit Method

Parameter	Type	Description
rowBoundIndex	number

Return Value
void

<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>Grid Custom Element</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />
    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />
    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.pager.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.sort.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.edit.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.filter.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.columnsresize.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.aggregates.js"></script>
    <script type="text/javascript">
		var adapter = new jqx.dataAdapter({
			dataType: "xml",
			dataFields: [
				{ name: 'ProductName', type: 'string' },
				{ name: 'QuantityPerUnit', type: 'int' },
				{ name: 'UnitPrice', type: 'float' },
				{ name: 'UnitsInStock', type: 'float' },
				{ name: 'Discontinued', type: 'bool' }
			],
			root: "Products",
			record: "Product",
			id: 'ProductID',
			url: "../sampledata/products.xml"
		});

		var columns = [
                  { text: 'Product Name', datafield: 'ProductName', width: 250 },
                  { text: 'Quantity per Unit', datafield: 'QuantityPerUnit', cellsalign: 'right', align: 'right', width: 200 },
                  { text: 'Unit Price', datafield: 'UnitPrice', align: 'right', cellsalign: 'right', cellsformat: 'c2', width: 200 },
                  { text: 'Units In Stock', datafield: 'UnitsInStock', cellsalign: 'right', width: 100 },
                  { text: 'Discontinued', columntype: 'checkbox', datafield: 'Discontinued' }
                ];

        JQXElements.settings["gridSettings"] =
        {
			            
        }
	window.onload = function() {
		document.querySelector("jqx-grid").beginrowedit(1);							
	}
    </script>
</head>
<body>
   <jqx-grid settings="gridSettings"></jqx-grid>
</body>
</html>

closemenu Method

Parameter	Type	Description
None

Return Value
void

<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>Grid Custom Element</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />
    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />
    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.pager.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.sort.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.edit.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.filter.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.columnsresize.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.aggregates.js"></script>
    <script type="text/javascript">
		var adapter = new jqx.dataAdapter({
			dataType: "xml",
			dataFields: [
				{ name: 'ProductName', type: 'string' },
				{ name: 'QuantityPerUnit', type: 'int' },
				{ name: 'UnitPrice', type: 'float' },
				{ name: 'UnitsInStock', type: 'float' },
				{ name: 'Discontinued', type: 'bool' }
			],
			root: "Products",
			record: "Product",
			id: 'ProductID',
			url: "../sampledata/products.xml"
		});

		var columns = [
                  { text: 'Product Name', datafield: 'ProductName', width: 250 },
                  { text: 'Quantity per Unit', datafield: 'QuantityPerUnit', cellsalign: 'right', align: 'right', width: 200 },
                  { text: 'Unit Price', datafield: 'UnitPrice', align: 'right', cellsalign: 'right', cellsformat: 'c2', width: 200 },
                  { text: 'Units In Stock', datafield: 'UnitsInStock', cellsalign: 'right', width: 100 },
                  { text: 'Discontinued', columntype: 'checkbox', datafield: 'Discontinued' }
                ];

        JQXElements.settings["gridSettings"] =
        {
			            
        }
	window.onload = function() {
		document.querySelector("jqx-grid").closemenu();							
	}
    </script>
</head>
<body>
   <jqx-grid settings="gridSettings"></jqx-grid>
</body>
</html>

deleterow Method

Parameter	Type	Description
rowIds	string/number/array	rowID or rowIds. You can use getrowid method for getting the ID of a row.

Return Value
void

<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>Grid Custom Element</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />
    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />
    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.pager.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.sort.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.edit.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.filter.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.columnsresize.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.aggregates.js"></script>
    <script type="text/javascript">
		var adapter = new jqx.dataAdapter({
			dataType: "xml",
			dataFields: [
				{ name: 'ProductName', type: 'string' },
				{ name: 'QuantityPerUnit', type: 'int' },
				{ name: 'UnitPrice', type: 'float' },
				{ name: 'UnitsInStock', type: 'float' },
				{ name: 'Discontinued', type: 'bool' }
			],
			root: "Products",
			record: "Product",
			id: 'ProductID',
			url: "../sampledata/products.xml"
		});

		var columns = [
                  { text: 'Product Name', datafield: 'ProductName', width: 250 },
                  { text: 'Quantity per Unit', datafield: 'QuantityPerUnit', cellsalign: 'right', align: 'right', width: 200 },
                  { text: 'Unit Price', datafield: 'UnitPrice', align: 'right', cellsalign: 'right', cellsformat: 'c2', width: 200 },
                  { text: 'Units In Stock', datafield: 'UnitsInStock', cellsalign: 'right', width: 100 },
                  { text: 'Discontinued', columntype: 'checkbox', datafield: 'Discontinued' }
                ];

        JQXElements.settings["gridSettings"] =
        {
			            
        }
	window.onload = function() {
		document.querySelector("jqx-grid").deleterow(1);							
	}
    </script>
</head>
<body>
   <jqx-grid settings="gridSettings"></jqx-grid>
</body>
</html>

endcelledit Method

Parameter	Type	Description
rowBoundIndex	number
dataField	string
confirmChanges	boolean

Return Value
void

<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>Grid Custom Element</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />
    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />
    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.pager.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.sort.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.edit.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.filter.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.columnsresize.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.aggregates.js"></script>
    <script type="text/javascript">
		var adapter = new jqx.dataAdapter({
			dataType: "xml",
			dataFields: [
				{ name: 'ProductName', type: 'string' },
				{ name: 'QuantityPerUnit', type: 'int' },
				{ name: 'UnitPrice', type: 'float' },
				{ name: 'UnitsInStock', type: 'float' },
				{ name: 'Discontinued', type: 'bool' }
			],
			root: "Products",
			record: "Product",
			id: 'ProductID',
			url: "../sampledata/products.xml"
		});

		var columns = [
                  { text: 'Product Name', datafield: 'ProductName', width: 250 },
                  { text: 'Quantity per Unit', datafield: 'QuantityPerUnit', cellsalign: 'right', align: 'right', width: 200 },
                  { text: 'Unit Price', datafield: 'UnitPrice', align: 'right', cellsalign: 'right', cellsformat: 'c2', width: 200 },
                  { text: 'Units In Stock', datafield: 'UnitsInStock', cellsalign: 'right', width: 100 },
                  { text: 'Discontinued', columntype: 'checkbox', datafield: 'Discontinued' }
                ];

        JQXElements.settings["gridSettings"] =
        {
			            
        }
	window.onload = function() {
		document.querySelector("jqx-grid").endcelledit(1,'firstname',true);							
	}
    </script>
</head>
<body>
   <jqx-grid settings="gridSettings"></jqx-grid>
</body>
</html>

endrowedit Method

Parameter	Type	Description
rowBoundIndex	number
confirmChanges	boolean

Return Value
void

<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>Grid Custom Element</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />
    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />
    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.pager.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.sort.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.edit.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.filter.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.columnsresize.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.aggregates.js"></script>
    <script type="text/javascript">
		var adapter = new jqx.dataAdapter({
			dataType: "xml",
			dataFields: [
				{ name: 'ProductName', type: 'string' },
				{ name: 'QuantityPerUnit', type: 'int' },
				{ name: 'UnitPrice', type: 'float' },
				{ name: 'UnitsInStock', type: 'float' },
				{ name: 'Discontinued', type: 'bool' }
			],
			root: "Products",
			record: "Product",
			id: 'ProductID',
			url: "../sampledata/products.xml"
		});

		var columns = [
                  { text: 'Product Name', datafield: 'ProductName', width: 250 },
                  { text: 'Quantity per Unit', datafield: 'QuantityPerUnit', cellsalign: 'right', align: 'right', width: 200 },
                  { text: 'Unit Price', datafield: 'UnitPrice', align: 'right', cellsalign: 'right', cellsformat: 'c2', width: 200 },
                  { text: 'Units In Stock', datafield: 'UnitsInStock', cellsalign: 'right', width: 100 },
                  { text: 'Discontinued', columntype: 'checkbox', datafield: 'Discontinued' }
                ];

        JQXElements.settings["gridSettings"] =
        {
			            
        }
	window.onload = function() {
		document.querySelector("jqx-grid").endrowedit(1,true);							
	}
    </script>
</head>
<body>
   <jqx-grid settings="gridSettings"></jqx-grid>
</body>
</html>

getcell Method

Parameter	Type	Description
rowBoundIndex	number
datafield	string

Return Value
Object

<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>Grid Custom Element</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />
    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />
    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.pager.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.sort.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.edit.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.filter.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.columnsresize.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.aggregates.js"></script>
    <script type="text/javascript">
		var adapter = new jqx.dataAdapter({
			dataType: "xml",
			dataFields: [
				{ name: 'ProductName', type: 'string' },
				{ name: 'QuantityPerUnit', type: 'int' },
				{ name: 'UnitPrice', type: 'float' },
				{ name: 'UnitsInStock', type: 'float' },
				{ name: 'Discontinued', type: 'bool' }
			],
			root: "Products",
			record: "Product",
			id: 'ProductID',
			url: "../sampledata/products.xml"
		});

		var columns = [
                  { text: 'Product Name', datafield: 'ProductName', width: 250 },
                  { text: 'Quantity per Unit', datafield: 'QuantityPerUnit', cellsalign: 'right', align: 'right', width: 200 },
                  { text: 'Unit Price', datafield: 'UnitPrice', align: 'right', cellsalign: 'right', cellsformat: 'c2', width: 200 },
                  { text: 'Units In Stock', datafield: 'UnitsInStock', cellsalign: 'right', width: 100 },
                  { text: 'Discontinued', columntype: 'checkbox', datafield: 'Discontinued' }
                ];

        JQXElements.settings["gridSettings"] =
        {
			            
        }
	window.onload = function() {
		document.querySelector("jqx-grid").getcell(1,'firstname');							
	}
    </script>
</head>
<body>
   <jqx-grid settings="gridSettings"></jqx-grid>
</body>
</html>

getcellatposition Method

Parameter	Type	Description
left	number
top	number

Return Value
Object

<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>Grid Custom Element</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />
    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />
    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.pager.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.sort.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.edit.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.filter.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.columnsresize.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.aggregates.js"></script>
    <script type="text/javascript">
		var adapter = new jqx.dataAdapter({
			dataType: "xml",
			dataFields: [
				{ name: 'ProductName', type: 'string' },
				{ name: 'QuantityPerUnit', type: 'int' },
				{ name: 'UnitPrice', type: 'float' },
				{ name: 'UnitsInStock', type: 'float' },
				{ name: 'Discontinued', type: 'bool' }
			],
			root: "Products",
			record: "Product",
			id: 'ProductID',
			url: "../sampledata/products.xml"
		});

		var columns = [
                  { text: 'Product Name', datafield: 'ProductName', width: 250 },
                  { text: 'Quantity per Unit', datafield: 'QuantityPerUnit', cellsalign: 'right', align: 'right', width: 200 },
                  { text: 'Unit Price', datafield: 'UnitPrice', align: 'right', cellsalign: 'right', cellsformat: 'c2', width: 200 },
                  { text: 'Units In Stock', datafield: 'UnitsInStock', cellsalign: 'right', width: 100 },
                  { text: 'Discontinued', columntype: 'checkbox', datafield: 'Discontinued' }
                ];

        JQXElements.settings["gridSettings"] =
        {
			            
        }
	window.onload = function() {
		document.querySelector("jqx-grid").getcellatposition(10,100);							
	}
    </script>
</head>
<body>
   <jqx-grid settings="gridSettings"></jqx-grid>
</body>
</html>

getcelltext Method

Parameter	Type	Description
rowBoundIndex	number
dataField	string

Return Value
String

<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>Grid Custom Element</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />
    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />
    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.pager.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.sort.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.edit.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.filter.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.columnsresize.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.aggregates.js"></script>
    <script type="text/javascript">
		var adapter = new jqx.dataAdapter({
			dataType: "xml",
			dataFields: [
				{ name: 'ProductName', type: 'string' },
				{ name: 'QuantityPerUnit', type: 'int' },
				{ name: 'UnitPrice', type: 'float' },
				{ name: 'UnitsInStock', type: 'float' },
				{ name: 'Discontinued', type: 'bool' }
			],
			root: "Products",
			record: "Product",
			id: 'ProductID',
			url: "../sampledata/products.xml"
		});

		var columns = [
                  { text: 'Product Name', datafield: 'ProductName', width: 250 },
                  { text: 'Quantity per Unit', datafield: 'QuantityPerUnit', cellsalign: 'right', align: 'right', width: 200 },
                  { text: 'Unit Price', datafield: 'UnitPrice', align: 'right', cellsalign: 'right', cellsformat: 'c2', width: 200 },
                  { text: 'Units In Stock', datafield: 'UnitsInStock', cellsalign: 'right', width: 100 },
                  { text: 'Discontinued', columntype: 'checkbox', datafield: 'Discontinued' }
                ];

        JQXElements.settings["gridSettings"] =
        {
			            
        }
	window.onload = function() {
		document.querySelector("jqx-grid").getcelltext(1,'firstname');							
	}
    </script>
</head>
<body>
   <jqx-grid settings="gridSettings"></jqx-grid>
</body>
</html>

getcelltextbyid Method

Parameter	Type	Description
rowID	string
dataField	string

Return Value
String

<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>Grid Custom Element</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />
    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />
    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.pager.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.sort.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.edit.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.filter.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.columnsresize.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.aggregates.js"></script>
    <script type="text/javascript">
		var adapter = new jqx.dataAdapter({
			dataType: "xml",
			dataFields: [
				{ name: 'ProductName', type: 'string' },
				{ name: 'QuantityPerUnit', type: 'int' },
				{ name: 'UnitPrice', type: 'float' },
				{ name: 'UnitsInStock', type: 'float' },
				{ name: 'Discontinued', type: 'bool' }
			],
			root: "Products",
			record: "Product",
			id: 'ProductID',
			url: "../sampledata/products.xml"
		});

		var columns = [
                  { text: 'Product Name', datafield: 'ProductName', width: 250 },
                  { text: 'Quantity per Unit', datafield: 'QuantityPerUnit', cellsalign: 'right', align: 'right', width: 200 },
                  { text: 'Unit Price', datafield: 'UnitPrice', align: 'right', cellsalign: 'right', cellsformat: 'c2', width: 200 },
                  { text: 'Units In Stock', datafield: 'UnitsInStock', cellsalign: 'right', width: 100 },
                  { text: 'Discontinued', columntype: 'checkbox', datafield: 'Discontinued' }
                ];

        JQXElements.settings["gridSettings"] =
        {
			            
        }
	window.onload = function() {
		document.querySelector("jqx-grid").getcelltextbyid(1,'firstname');							
	}
    </script>
</head>
<body>
   <jqx-grid settings="gridSettings"></jqx-grid>
</body>
</html>

getcellvaluebyid Method

Parameter	Type	Description
rowID	string
dataField	string

Return Value
Object

<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>Grid Custom Element</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />
    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />
    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.pager.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.sort.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.edit.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.filter.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.columnsresize.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.aggregates.js"></script>
    <script type="text/javascript">
		var adapter = new jqx.dataAdapter({
			dataType: "xml",
			dataFields: [
				{ name: 'ProductName', type: 'string' },
				{ name: 'QuantityPerUnit', type: 'int' },
				{ name: 'UnitPrice', type: 'float' },
				{ name: 'UnitsInStock', type: 'float' },
				{ name: 'Discontinued', type: 'bool' }
			],
			root: "Products",
			record: "Product",
			id: 'ProductID',
			url: "../sampledata/products.xml"
		});

		var columns = [
                  { text: 'Product Name', datafield: 'ProductName', width: 250 },
                  { text: 'Quantity per Unit', datafield: 'QuantityPerUnit', cellsalign: 'right', align: 'right', width: 200 },
                  { text: 'Unit Price', datafield: 'UnitPrice', align: 'right', cellsalign: 'right', cellsformat: 'c2', width: 200 },
                  { text: 'Units In Stock', datafield: 'UnitsInStock', cellsalign: 'right', width: 100 },
                  { text: 'Discontinued', columntype: 'checkbox', datafield: 'Discontinued' }
                ];

        JQXElements.settings["gridSettings"] =
        {
			            
        }
	window.onload = function() {
		document.querySelector("jqx-grid").getcellvaluebyid(1,'firstname');							
	}
    </script>
</head>
<body>
   <jqx-grid settings="gridSettings"></jqx-grid>
</body>
</html>

getcellvalue Method

Parameter	Type	Description
rowBoundIndex	number
dataField	string

Return Value
Object

<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>Grid Custom Element</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />
    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />
    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.pager.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.sort.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.edit.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.filter.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.columnsresize.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.aggregates.js"></script>
    <script type="text/javascript">
		var adapter = new jqx.dataAdapter({
			dataType: "xml",
			dataFields: [
				{ name: 'ProductName', type: 'string' },
				{ name: 'QuantityPerUnit', type: 'int' },
				{ name: 'UnitPrice', type: 'float' },
				{ name: 'UnitsInStock', type: 'float' },
				{ name: 'Discontinued', type: 'bool' }
			],
			root: "Products",
			record: "Product",
			id: 'ProductID',
			url: "../sampledata/products.xml"
		});

		var columns = [
                  { text: 'Product Name', datafield: 'ProductName', width: 250 },
                  { text: 'Quantity per Unit', datafield: 'QuantityPerUnit', cellsalign: 'right', align: 'right', width: 200 },
                  { text: 'Unit Price', datafield: 'UnitPrice', align: 'right', cellsalign: 'right', cellsformat: 'c2', width: 200 },
                  { text: 'Units In Stock', datafield: 'UnitsInStock', cellsalign: 'right', width: 100 },
                  { text: 'Discontinued', columntype: 'checkbox', datafield: 'Discontinued' }
                ];

        JQXElements.settings["gridSettings"] =
        {
			            
        }
	window.onload = function() {
		document.querySelector("jqx-grid").getcellvalue(1,'firstname');							
	}
    </script>
</head>
<body>
   <jqx-grid settings="gridSettings"></jqx-grid>
</body>
</html>

isBindingCompleted Method

Parameter	Type	Description
None

Return Value
Boolean

<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>Grid Custom Element</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />
    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />
    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.pager.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.sort.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.edit.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.filter.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.columnsresize.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.aggregates.js"></script>
    <script type="text/javascript">
		var adapter = new jqx.dataAdapter({
			dataType: "xml",
			dataFields: [
				{ name: 'ProductName', type: 'string' },
				{ name: 'QuantityPerUnit', type: 'int' },
				{ name: 'UnitPrice', type: 'float' },
				{ name: 'UnitsInStock', type: 'float' },
				{ name: 'Discontinued', type: 'bool' }
			],
			root: "Products",
			record: "Product",
			id: 'ProductID',
			url: "../sampledata/products.xml"
		});

		var columns = [
                  { text: 'Product Name', datafield: 'ProductName', width: 250 },
                  { text: 'Quantity per Unit', datafield: 'QuantityPerUnit', cellsalign: 'right', align: 'right', width: 200 },
                  { text: 'Unit Price', datafield: 'UnitPrice', align: 'right', cellsalign: 'right', cellsformat: 'c2', width: 200 },
                  { text: 'Units In Stock', datafield: 'UnitsInStock', cellsalign: 'right', width: 100 },
                  { text: 'Discontinued', columntype: 'checkbox', datafield: 'Discontinued' }
                ];

        JQXElements.settings["gridSettings"] =
        {
			            
        }
	window.onload = function() {
		var result = document.querySelector("jqx-grid").isBindingCompleted();							
	}
    </script>
</head>
<body>
   <jqx-grid settings="gridSettings"></jqx-grid>
</body>
</html>

openmenu Method

Parameter	Type	Description
dataField	string

Return Value
void

<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>Grid Custom Element</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />
    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />
    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.pager.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.sort.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.edit.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.filter.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.columnsresize.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.aggregates.js"></script>
    <script type="text/javascript">
		var adapter = new jqx.dataAdapter({
			dataType: "xml",
			dataFields: [
				{ name: 'ProductName', type: 'string' },
				{ name: 'QuantityPerUnit', type: 'int' },
				{ name: 'UnitPrice', type: 'float' },
				{ name: 'UnitsInStock', type: 'float' },
				{ name: 'Discontinued', type: 'bool' }
			],
			root: "Products",
			record: "Product",
			id: 'ProductID',
			url: "../sampledata/products.xml"
		});

		var columns = [
                  { text: 'Product Name', datafield: 'ProductName', width: 250 },
                  { text: 'Quantity per Unit', datafield: 'QuantityPerUnit', cellsalign: 'right', align: 'right', width: 200 },
                  { text: 'Unit Price', datafield: 'UnitPrice', align: 'right', cellsalign: 'right', cellsformat: 'c2', width: 200 },
                  { text: 'Units In Stock', datafield: 'UnitsInStock', cellsalign: 'right', width: 100 },
                  { text: 'Discontinued', columntype: 'checkbox', datafield: 'Discontinued' }
                ];

        JQXElements.settings["gridSettings"] =
        {
			            
        }
	window.onload = function() {
		document.querySelector("jqx-grid").openmenu('firstname');							
	}
    </script>
</head>
<body>
   <jqx-grid settings="gridSettings"></jqx-grid>
</body>
</html>

setcellvalue Method

Parameter	Type	Description
rowBoundIndex	number
dataField	string
value	object

Return Value
void

<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>Grid Custom Element</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />
    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />
    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.pager.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.sort.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.edit.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.filter.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.columnsresize.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.aggregates.js"></script>
    <script type="text/javascript">
		var adapter = new jqx.dataAdapter({
			dataType: "xml",
			dataFields: [
				{ name: 'ProductName', type: 'string' },
				{ name: 'QuantityPerUnit', type: 'int' },
				{ name: 'UnitPrice', type: 'float' },
				{ name: 'UnitsInStock', type: 'float' },
				{ name: 'Discontinued', type: 'bool' }
			],
			root: "Products",
			record: "Product",
			id: 'ProductID',
			url: "../sampledata/products.xml"
		});

		var columns = [
                  { text: 'Product Name', datafield: 'ProductName', width: 250 },
                  { text: 'Quantity per Unit', datafield: 'QuantityPerUnit', cellsalign: 'right', align: 'right', width: 200 },
                  { text: 'Unit Price', datafield: 'UnitPrice', align: 'right', cellsalign: 'right', cellsformat: 'c2', width: 200 },
                  { text: 'Units In Stock', datafield: 'UnitsInStock', cellsalign: 'right', width: 100 },
                  { text: 'Discontinued', columntype: 'checkbox', datafield: 'Discontinued' }
                ];

        JQXElements.settings["gridSettings"] =
        {
			            
        }
	window.onload = function() {
		document.querySelector("jqx-grid").setcellvalue(1,'firstname','New Name');							
	}
    </script>
</head>
<body>
   <jqx-grid settings="gridSettings"></jqx-grid>
</body>
</html>

setcellvaluebyid Method

Parameter	Type	Description
rowID	string
dataField	string
value	object

Return Value
void

<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>Grid Custom Element</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />
    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />
    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.pager.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.sort.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.edit.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.filter.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.columnsresize.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.aggregates.js"></script>
    <script type="text/javascript">
		var adapter = new jqx.dataAdapter({
			dataType: "xml",
			dataFields: [
				{ name: 'ProductName', type: 'string' },
				{ name: 'QuantityPerUnit', type: 'int' },
				{ name: 'UnitPrice', type: 'float' },
				{ name: 'UnitsInStock', type: 'float' },
				{ name: 'Discontinued', type: 'bool' }
			],
			root: "Products",
			record: "Product",
			id: 'ProductID',
			url: "../sampledata/products.xml"
		});

		var columns = [
                  { text: 'Product Name', datafield: 'ProductName', width: 250 },
                  { text: 'Quantity per Unit', datafield: 'QuantityPerUnit', cellsalign: 'right', align: 'right', width: 200 },
                  { text: 'Unit Price', datafield: 'UnitPrice', align: 'right', cellsalign: 'right', cellsformat: 'c2', width: 200 },
                  { text: 'Units In Stock', datafield: 'UnitsInStock', cellsalign: 'right', width: 100 },
                  { text: 'Discontinued', columntype: 'checkbox', datafield: 'Discontinued' }
                ];

        JQXElements.settings["gridSettings"] =
        {
			            
        }
	window.onload = function() {
		document.querySelector("jqx-grid").setcellvaluebyid(1,'firstname','New Name');							
	}
    </script>
</head>
<body>
   <jqx-grid settings="gridSettings"></jqx-grid>
</body>
</html>

showvalidationpopup Method

Parameter	Type	Description
rowBoundIndex	number
dataField	string
validationMessage	string

Return Value
void

<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>Grid Custom Element</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />
    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />
    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.pager.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.sort.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.edit.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.filter.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.columnsresize.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.aggregates.js"></script>
    <script type="text/javascript">
		var adapter = new jqx.dataAdapter({
			dataType: "xml",
			dataFields: [
				{ name: 'ProductName', type: 'string' },
				{ name: 'QuantityPerUnit', type: 'int' },
				{ name: 'UnitPrice', type: 'float' },
				{ name: 'UnitsInStock', type: 'float' },
				{ name: 'Discontinued', type: 'bool' }
			],
			root: "Products",
			record: "Product",
			id: 'ProductID',
			url: "../sampledata/products.xml"
		});

		var columns = [
                  { text: 'Product Name', datafield: 'ProductName', width: 250 },
                  { text: 'Quantity per Unit', datafield: 'QuantityPerUnit', cellsalign: 'right', align: 'right', width: 200 },
                  { text: 'Unit Price', datafield: 'UnitPrice', align: 'right', cellsalign: 'right', cellsformat: 'c2', width: 200 },
                  { text: 'Units In Stock', datafield: 'UnitsInStock', cellsalign: 'right', width: 100 },
                  { text: 'Discontinued', columntype: 'checkbox', datafield: 'Discontinued' }
                ];

        JQXElements.settings["gridSettings"] =
        {
			            
        }
	window.onload = function() {
		document.querySelector("jqx-grid").showvalidationpopup(1,'firstname','Error message');							
	}
    </script>
</head>
<body>
   <jqx-grid settings="gridSettings"></jqx-grid>
</body>
</html>

updaterow Method

Parameter	Type	Description
rowIds	string/number/array	rowID or rowIds. You can use getrowid method for getting the ID of a row.
data	object/array

Return Value
void

<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>Grid Custom Element</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />
    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />
    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.pager.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.sort.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.edit.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.filter.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.columnsresize.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.aggregates.js"></script>
    <script type="text/javascript">
		var adapter = new jqx.dataAdapter({
			dataType: "xml",
			dataFields: [
				{ name: 'ProductName', type: 'string' },
				{ name: 'QuantityPerUnit', type: 'int' },
				{ name: 'UnitPrice', type: 'float' },
				{ name: 'UnitsInStock', type: 'float' },
				{ name: 'Discontinued', type: 'bool' }
			],
			root: "Products",
			record: "Product",
			id: 'ProductID',
			url: "../sampledata/products.xml"
		});

		var columns = [
                  { text: 'Product Name', datafield: 'ProductName', width: 250 },
                  { text: 'Quantity per Unit', datafield: 'QuantityPerUnit', cellsalign: 'right', align: 'right', width: 200 },
                  { text: 'Unit Price', datafield: 'UnitPrice', align: 'right', cellsalign: 'right', cellsformat: 'c2', width: 200 },
                  { text: 'Units In Stock', datafield: 'UnitsInStock', cellsalign: 'right', width: 100 },
                  { text: 'Discontinued', columntype: 'checkbox', datafield: 'Discontinued' }
                ];

        JQXElements.settings["gridSettings"] =
        {
			            
        }
	window.onload = function() {
		document.querySelector("jqx-grid").updaterow(1,{firstname: 'New Name'});							
	}
    </script>
</head>
<body>
   <jqx-grid settings="gridSettings"></jqx-grid>
</body>
</html>

clearselection Method

Parameter	Type	Description
None

Return Value
void

<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>Grid Custom Element</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />
    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />
    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.pager.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.sort.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.edit.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.filter.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.columnsresize.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.aggregates.js"></script>
    <script type="text/javascript">
		var adapter = new jqx.dataAdapter({
			dataType: "xml",
			dataFields: [
				{ name: 'ProductName', type: 'string' },
				{ name: 'QuantityPerUnit', type: 'int' },
				{ name: 'UnitPrice', type: 'float' },
				{ name: 'UnitsInStock', type: 'float' },
				{ name: 'Discontinued', type: 'bool' }
			],
			root: "Products",
			record: "Product",
			id: 'ProductID',
			url: "../sampledata/products.xml"
		});

		var columns = [
                  { text: 'Product Name', datafield: 'ProductName', width: 250 },
                  { text: 'Quantity per Unit', datafield: 'QuantityPerUnit', cellsalign: 'right', align: 'right', width: 200 },
                  { text: 'Unit Price', datafield: 'UnitPrice', align: 'right', cellsalign: 'right', cellsformat: 'c2', width: 200 },
                  { text: 'Units In Stock', datafield: 'UnitsInStock', cellsalign: 'right', width: 100 },
                  { text: 'Discontinued', columntype: 'checkbox', datafield: 'Discontinued' }
                ];

        JQXElements.settings["gridSettings"] =
        {
			            
        }
	window.onload = function() {
		document.querySelector("jqx-grid").clearselection();							
	}
    </script>
</head>
<body>
   <jqx-grid settings="gridSettings"></jqx-grid>
</body>
</html>

getselectedrowindex Method

Parameter	Type	Description
None

Return Value
Number

<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>Grid Custom Element</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />
    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />
    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.pager.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.sort.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.edit.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.filter.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.columnsresize.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.aggregates.js"></script>
    <script type="text/javascript">
		var adapter = new jqx.dataAdapter({
			dataType: "xml",
			dataFields: [
				{ name: 'ProductName', type: 'string' },
				{ name: 'QuantityPerUnit', type: 'int' },
				{ name: 'UnitPrice', type: 'float' },
				{ name: 'UnitsInStock', type: 'float' },
				{ name: 'Discontinued', type: 'bool' }
			],
			root: "Products",
			record: "Product",
			id: 'ProductID',
			url: "../sampledata/products.xml"
		});

		var columns = [
                  { text: 'Product Name', datafield: 'ProductName', width: 250 },
                  { text: 'Quantity per Unit', datafield: 'QuantityPerUnit', cellsalign: 'right', align: 'right', width: 200 },
                  { text: 'Unit Price', datafield: 'UnitPrice', align: 'right', cellsalign: 'right', cellsformat: 'c2', width: 200 },
                  { text: 'Units In Stock', datafield: 'UnitsInStock', cellsalign: 'right', width: 100 },
                  { text: 'Discontinued', columntype: 'checkbox', datafield: 'Discontinued' }
                ];

        JQXElements.settings["gridSettings"] =
        {
			            
        }
	window.onload = function() {
		var result = document.querySelector("jqx-grid").getselectedrowindex();							
	}
    </script>
</head>
<body>
   <jqx-grid settings="gridSettings"></jqx-grid>
</body>
</html>

getselectedrowindexes Method

Parameter	Type	Description
None

Return Value
Array

<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>Grid Custom Element</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />
    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />
    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.pager.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.sort.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.edit.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.filter.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.columnsresize.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.aggregates.js"></script>
    <script type="text/javascript">
		var adapter = new jqx.dataAdapter({
			dataType: "xml",
			dataFields: [
				{ name: 'ProductName', type: 'string' },
				{ name: 'QuantityPerUnit', type: 'int' },
				{ name: 'UnitPrice', type: 'float' },
				{ name: 'UnitsInStock', type: 'float' },
				{ name: 'Discontinued', type: 'bool' }
			],
			root: "Products",
			record: "Product",
			id: 'ProductID',
			url: "../sampledata/products.xml"
		});

		var columns = [
                  { text: 'Product Name', datafield: 'ProductName', width: 250 },
                  { text: 'Quantity per Unit', datafield: 'QuantityPerUnit', cellsalign: 'right', align: 'right', width: 200 },
                  { text: 'Unit Price', datafield: 'UnitPrice', align: 'right', cellsalign: 'right', cellsformat: 'c2', width: 200 },
                  { text: 'Units In Stock', datafield: 'UnitsInStock', cellsalign: 'right', width: 100 },
                  { text: 'Discontinued', columntype: 'checkbox', datafield: 'Discontinued' }
                ];

        JQXElements.settings["gridSettings"] =
        {
			            
        }
	window.onload = function() {
		var result = document.querySelector("jqx-grid").getselectedrowindexes();							
	}
    </script>
</head>
<body>
   <jqx-grid settings="gridSettings"></jqx-grid>
</body>
</html>

getselectedcell Method

Parameter	Type	Description
None

Return Value
Object

<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>Grid Custom Element</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />
    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />
    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.pager.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.sort.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.edit.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.filter.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.columnsresize.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.aggregates.js"></script>
    <script type="text/javascript">
		var adapter = new jqx.dataAdapter({
			dataType: "xml",
			dataFields: [
				{ name: 'ProductName', type: 'string' },
				{ name: 'QuantityPerUnit', type: 'int' },
				{ name: 'UnitPrice', type: 'float' },
				{ name: 'UnitsInStock', type: 'float' },
				{ name: 'Discontinued', type: 'bool' }
			],
			root: "Products",
			record: "Product",
			id: 'ProductID',
			url: "../sampledata/products.xml"
		});

		var columns = [
                  { text: 'Product Name', datafield: 'ProductName', width: 250 },
                  { text: 'Quantity per Unit', datafield: 'QuantityPerUnit', cellsalign: 'right', align: 'right', width: 200 },
                  { text: 'Unit Price', datafield: 'UnitPrice', align: 'right', cellsalign: 'right', cellsformat: 'c2', width: 200 },
                  { text: 'Units In Stock', datafield: 'UnitsInStock', cellsalign: 'right', width: 100 },
                  { text: 'Discontinued', columntype: 'checkbox', datafield: 'Discontinued' }
                ];

        JQXElements.settings["gridSettings"] =
        {
			            
        }
	window.onload = function() {
		var result = document.querySelector("jqx-grid").getselectedcell();							
	}
    </script>
</head>
<body>
   <jqx-grid settings="gridSettings"></jqx-grid>
</body>
</html>

getselectedcells Method

Parameter	Type	Description
None

Return Value
Array

<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>Grid Custom Element</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />
    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />
    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.pager.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.sort.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.edit.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.filter.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.columnsresize.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.aggregates.js"></script>
    <script type="text/javascript">
		var adapter = new jqx.dataAdapter({
			dataType: "xml",
			dataFields: [
				{ name: 'ProductName', type: 'string' },
				{ name: 'QuantityPerUnit', type: 'int' },
				{ name: 'UnitPrice', type: 'float' },
				{ name: 'UnitsInStock', type: 'float' },
				{ name: 'Discontinued', type: 'bool' }
			],
			root: "Products",
			record: "Product",
			id: 'ProductID',
			url: "../sampledata/products.xml"
		});

		var columns = [
                  { text: 'Product Name', datafield: 'ProductName', width: 250 },
                  { text: 'Quantity per Unit', datafield: 'QuantityPerUnit', cellsalign: 'right', align: 'right', width: 200 },
                  { text: 'Unit Price', datafield: 'UnitPrice', align: 'right', cellsalign: 'right', cellsformat: 'c2', width: 200 },
                  { text: 'Units In Stock', datafield: 'UnitsInStock', cellsalign: 'right', width: 100 },
                  { text: 'Discontinued', columntype: 'checkbox', datafield: 'Discontinued' }
                ];

        JQXElements.settings["gridSettings"] =
        {
			            
        }
	window.onload = function() {
		var result = document.querySelector("jqx-grid").getselectedcells();							
	}
    </script>
</head>
<body>
   <jqx-grid settings="gridSettings"></jqx-grid>
</body>
</html>

selectcell Method

Parameter	Type	Description
rowBoundIndex	number
dataField	string

Return Value
void

<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>Grid Custom Element</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />
    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />
    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.pager.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.sort.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.edit.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.filter.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.columnsresize.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.aggregates.js"></script>
    <script type="text/javascript">
		var adapter = new jqx.dataAdapter({
			dataType: "xml",
			dataFields: [
				{ name: 'ProductName', type: 'string' },
				{ name: 'QuantityPerUnit', type: 'int' },
				{ name: 'UnitPrice', type: 'float' },
				{ name: 'UnitsInStock', type: 'float' },
				{ name: 'Discontinued', type: 'bool' }
			],
			root: "Products",
			record: "Product",
			id: 'ProductID',
			url: "../sampledata/products.xml"
		});

		var columns = [
                  { text: 'Product Name', datafield: 'ProductName', width: 250 },
                  { text: 'Quantity per Unit', datafield: 'QuantityPerUnit', cellsalign: 'right', align: 'right', width: 200 },
                  { text: 'Unit Price', datafield: 'UnitPrice', align: 'right', cellsalign: 'right', cellsformat: 'c2', width: 200 },
                  { text: 'Units In Stock', datafield: 'UnitsInStock', cellsalign: 'right', width: 100 },
                  { text: 'Discontinued', columntype: 'checkbox', datafield: 'Discontinued' }
                ];

        JQXElements.settings["gridSettings"] =
        {
			            
        }
	window.onload = function() {
		document.querySelector("jqx-grid").selectcell(1,'firstname');							
	}
    </script>
</head>
<body>
   <jqx-grid settings="gridSettings"></jqx-grid>
</body>
</html>

selectallrows Method

Parameter	Type	Description
None

Return Value
void

<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>Grid Custom Element</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />
    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />
    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.pager.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.sort.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.edit.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.filter.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.columnsresize.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.aggregates.js"></script>
    <script type="text/javascript">
		var adapter = new jqx.dataAdapter({
			dataType: "xml",
			dataFields: [
				{ name: 'ProductName', type: 'string' },
				{ name: 'QuantityPerUnit', type: 'int' },
				{ name: 'UnitPrice', type: 'float' },
				{ name: 'UnitsInStock', type: 'float' },
				{ name: 'Discontinued', type: 'bool' }
			],
			root: "Products",
			record: "Product",
			id: 'ProductID',
			url: "../sampledata/products.xml"
		});

		var columns = [
                  { text: 'Product Name', datafield: 'ProductName', width: 250 },
                  { text: 'Quantity per Unit', datafield: 'QuantityPerUnit', cellsalign: 'right', align: 'right', width: 200 },
                  { text: 'Unit Price', datafield: 'UnitPrice', align: 'right', cellsalign: 'right', cellsformat: 'c2', width: 200 },
                  { text: 'Units In Stock', datafield: 'UnitsInStock', cellsalign: 'right', width: 100 },
                  { text: 'Discontinued', columntype: 'checkbox', datafield: 'Discontinued' }
                ];

        JQXElements.settings["gridSettings"] =
        {
			            
        }
	window.onload = function() {
		document.querySelector("jqx-grid").selectallrows();							
	}
    </script>
</head>
<body>
   <jqx-grid settings="gridSettings"></jqx-grid>
</body>
</html>

selectrow Method

Parameter	Type	Description
rowBoundIndex	number

Return Value
void

<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>Grid Custom Element</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />
    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />
    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.pager.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.sort.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.edit.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.filter.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.columnsresize.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.aggregates.js"></script>
    <script type="text/javascript">
		var adapter = new jqx.dataAdapter({
			dataType: "xml",
			dataFields: [
				{ name: 'ProductName', type: 'string' },
				{ name: 'QuantityPerUnit', type: 'int' },
				{ name: 'UnitPrice', type: 'float' },
				{ name: 'UnitsInStock', type: 'float' },
				{ name: 'Discontinued', type: 'bool' }
			],
			root: "Products",
			record: "Product",
			id: 'ProductID',
			url: "../sampledata/products.xml"
		});

		var columns = [
                  { text: 'Product Name', datafield: 'ProductName', width: 250 },
                  { text: 'Quantity per Unit', datafield: 'QuantityPerUnit', cellsalign: 'right', align: 'right', width: 200 },
                  { text: 'Unit Price', datafield: 'UnitPrice', align: 'right', cellsalign: 'right', cellsformat: 'c2', width: 200 },
                  { text: 'Units In Stock', datafield: 'UnitsInStock', cellsalign: 'right', width: 100 },
                  { text: 'Discontinued', columntype: 'checkbox', datafield: 'Discontinued' }
                ];

        JQXElements.settings["gridSettings"] =
        {
			            
        }
	window.onload = function() {
		document.querySelector("jqx-grid").selectrow(1);							
	}
    </script>
</head>
<body>
   <jqx-grid settings="gridSettings"></jqx-grid>
</body>
</html>

unselectrow Method

Parameter	Type	Description
rowBoundIndex	number

Return Value
void

<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>Grid Custom Element</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />
    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />
    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.pager.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.sort.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.edit.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.filter.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.columnsresize.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.aggregates.js"></script>
    <script type="text/javascript">
		var adapter = new jqx.dataAdapter({
			dataType: "xml",
			dataFields: [
				{ name: 'ProductName', type: 'string' },
				{ name: 'QuantityPerUnit', type: 'int' },
				{ name: 'UnitPrice', type: 'float' },
				{ name: 'UnitsInStock', type: 'float' },
				{ name: 'Discontinued', type: 'bool' }
			],
			root: "Products",
			record: "Product",
			id: 'ProductID',
			url: "../sampledata/products.xml"
		});

		var columns = [
                  { text: 'Product Name', datafield: 'ProductName', width: 250 },
                  { text: 'Quantity per Unit', datafield: 'QuantityPerUnit', cellsalign: 'right', align: 'right', width: 200 },
                  { text: 'Unit Price', datafield: 'UnitPrice', align: 'right', cellsalign: 'right', cellsformat: 'c2', width: 200 },
                  { text: 'Units In Stock', datafield: 'UnitsInStock', cellsalign: 'right', width: 100 },
                  { text: 'Discontinued', columntype: 'checkbox', datafield: 'Discontinued' }
                ];

        JQXElements.settings["gridSettings"] =
        {
			            
        }
	window.onload = function() {
		document.querySelector("jqx-grid").unselectrow(1);							
	}
    </script>
</head>
<body>
   <jqx-grid settings="gridSettings"></jqx-grid>
</body>
</html>

unselectcell Method

Parameter	Type	Description
rowBoundIndex	number
dataField	string

Return Value
void

<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>Grid Custom Element</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />
    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />
    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.pager.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.sort.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.edit.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.filter.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.columnsresize.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.aggregates.js"></script>
    <script type="text/javascript">
		var adapter = new jqx.dataAdapter({
			dataType: "xml",
			dataFields: [
				{ name: 'ProductName', type: 'string' },
				{ name: 'QuantityPerUnit', type: 'int' },
				{ name: 'UnitPrice', type: 'float' },
				{ name: 'UnitsInStock', type: 'float' },
				{ name: 'Discontinued', type: 'bool' }
			],
			root: "Products",
			record: "Product",
			id: 'ProductID',
			url: "../sampledata/products.xml"
		});

		var columns = [
                  { text: 'Product Name', datafield: 'ProductName', width: 250 },
                  { text: 'Quantity per Unit', datafield: 'QuantityPerUnit', cellsalign: 'right', align: 'right', width: 200 },
                  { text: 'Unit Price', datafield: 'UnitPrice', align: 'right', cellsalign: 'right', cellsformat: 'c2', width: 200 },
                  { text: 'Units In Stock', datafield: 'UnitsInStock', cellsalign: 'right', width: 100 },
                  { text: 'Discontinued', columntype: 'checkbox', datafield: 'Discontinued' }
                ];

        JQXElements.settings["gridSettings"] =
        {
			            
        }
	window.onload = function() {
		document.querySelector("jqx-grid").unselectcell(1,'firstname');							
	}
    </script>
</head>
<body>
   <jqx-grid settings="gridSettings"></jqx-grid>
</body>
</html>

getcolumnaggregateddata Method

Parameter	Type	Description
dataField	string	column's data field
aggregates	array	Array of aggregates 'min', 'max', 'sum', etc.

Return Value
String

<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>Grid Custom Element</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />
    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />
    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.pager.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.sort.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.edit.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.filter.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.columnsresize.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.aggregates.js"></script>
    <script type="text/javascript">
		var adapter = new jqx.dataAdapter({
			dataType: "xml",
			dataFields: [
				{ name: 'ProductName', type: 'string' },
				{ name: 'QuantityPerUnit', type: 'int' },
				{ name: 'UnitPrice', type: 'float' },
				{ name: 'UnitsInStock', type: 'float' },
				{ name: 'Discontinued', type: 'bool' }
			],
			root: "Products",
			record: "Product",
			id: 'ProductID',
			url: "../sampledata/products.xml"
		});

		var columns = [
                  { text: 'Product Name', datafield: 'ProductName', width: 250 },
                  { text: 'Quantity per Unit', datafield: 'QuantityPerUnit', cellsalign: 'right', align: 'right', width: 200 },
                  { text: 'Unit Price', datafield: 'UnitPrice', align: 'right', cellsalign: 'right', cellsformat: 'c2', width: 200 },
                  { text: 'Units In Stock', datafield: 'UnitsInStock', cellsalign: 'right', width: 100 },
                  { text: 'Discontinued', columntype: 'checkbox', datafield: 'Discontinued' }
                ];

        JQXElements.settings["gridSettings"] =
        {
			            
        }
	window.onload = function() {
		var result = document.querySelector("jqx-grid").getcolumnaggregateddata();							
	}
    </script>
</head>
<body>
   <jqx-grid settings="gridSettings"></jqx-grid>
</body>
</html>

refreshaggregates Method

Parameter	Type	Description
None

Return Value
void

<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>Grid Custom Element</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />
    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />
    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.pager.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.sort.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.edit.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.filter.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.columnsresize.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.aggregates.js"></script>
    <script type="text/javascript">
		var adapter = new jqx.dataAdapter({
			dataType: "xml",
			dataFields: [
				{ name: 'ProductName', type: 'string' },
				{ name: 'QuantityPerUnit', type: 'int' },
				{ name: 'UnitPrice', type: 'float' },
				{ name: 'UnitsInStock', type: 'float' },
				{ name: 'Discontinued', type: 'bool' }
			],
			root: "Products",
			record: "Product",
			id: 'ProductID',
			url: "../sampledata/products.xml"
		});

		var columns = [
                  { text: 'Product Name', datafield: 'ProductName', width: 250 },
                  { text: 'Quantity per Unit', datafield: 'QuantityPerUnit', cellsalign: 'right', align: 'right', width: 200 },
                  { text: 'Unit Price', datafield: 'UnitPrice', align: 'right', cellsalign: 'right', cellsformat: 'c2', width: 200 },
                  { text: 'Units In Stock', datafield: 'UnitsInStock', cellsalign: 'right', width: 100 },
                  { text: 'Discontinued', columntype: 'checkbox', datafield: 'Discontinued' }
                ];

        JQXElements.settings["gridSettings"] =
        {
			            
        }
	window.onload = function() {
		document.querySelector("jqx-grid").refreshaggregates();							
	}
    </script>
</head>
<body>
   <jqx-grid settings="gridSettings"></jqx-grid>
</body>
</html>

renderaggregates Method

Parameter	Type	Description
None

Return Value
void

<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>Grid Custom Element</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />
    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />
    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.pager.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.sort.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.edit.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.filter.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.columnsresize.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.aggregates.js"></script>
    <script type="text/javascript">
		var adapter = new jqx.dataAdapter({
			dataType: "xml",
			dataFields: [
				{ name: 'ProductName', type: 'string' },
				{ name: 'QuantityPerUnit', type: 'int' },
				{ name: 'UnitPrice', type: 'float' },
				{ name: 'UnitsInStock', type: 'float' },
				{ name: 'Discontinued', type: 'bool' }
			],
			root: "Products",
			record: "Product",
			id: 'ProductID',
			url: "../sampledata/products.xml"
		});

		var columns = [
                  { text: 'Product Name', datafield: 'ProductName', width: 250 },
                  { text: 'Quantity per Unit', datafield: 'QuantityPerUnit', cellsalign: 'right', align: 'right', width: 200 },
                  { text: 'Unit Price', datafield: 'UnitPrice', align: 'right', cellsalign: 'right', cellsformat: 'c2', width: 200 },
                  { text: 'Units In Stock', datafield: 'UnitsInStock', cellsalign: 'right', width: 100 },
                  { text: 'Discontinued', columntype: 'checkbox', datafield: 'Discontinued' }
                ];

        JQXElements.settings["gridSettings"] =
        {
			            
        }
	window.onload = function() {
		document.querySelector("jqx-grid").renderaggregates();							
	}
    </script>
</head>
<body>
   <jqx-grid settings="gridSettings"></jqx-grid>
</body>
</html>

exportdata Method

Parameter	Type	Description
dataType	string
fileName	string
exportHeader	boolean
rows	array
exportHiddenColumns	boolean
serverURL	string
charSet	string

Return Value
any

<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>Grid Custom Element</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />
    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />
    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.pager.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.sort.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.edit.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.filter.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.columnsresize.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.aggregates.js"></script>
    <script type="text/javascript">
		var adapter = new jqx.dataAdapter({
			dataType: "xml",
			dataFields: [
				{ name: 'ProductName', type: 'string' },
				{ name: 'QuantityPerUnit', type: 'int' },
				{ name: 'UnitPrice', type: 'float' },
				{ name: 'UnitsInStock', type: 'float' },
				{ name: 'Discontinued', type: 'bool' }
			],
			root: "Products",
			record: "Product",
			id: 'ProductID',
			url: "../sampledata/products.xml"
		});

		var columns = [
                  { text: 'Product Name', datafield: 'ProductName', width: 250 },
                  { text: 'Quantity per Unit', datafield: 'QuantityPerUnit', cellsalign: 'right', align: 'right', width: 200 },
                  { text: 'Unit Price', datafield: 'UnitPrice', align: 'right', cellsalign: 'right', cellsformat: 'c2', width: 200 },
                  { text: 'Units In Stock', datafield: 'UnitsInStock', cellsalign: 'right', width: 100 },
                  { text: 'Discontinued', columntype: 'checkbox', datafield: 'Discontinued' }
                ];

        JQXElements.settings["gridSettings"] =
        {
			            
        }
	window.onload = function() {
		document.querySelector("jqx-grid").exportdata('xls,'grid.xls');							
	}
    </script>
</head>
<body>
   <jqx-grid settings="gridSettings"></jqx-grid>
</body>
</html>

getstate Method

Parameter	Type	Description
None

Return Value
Object

<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>Grid Custom Element</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />
    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />
    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.pager.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.sort.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.edit.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.filter.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.columnsresize.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.aggregates.js"></script>
    <script type="text/javascript">
		var adapter = new jqx.dataAdapter({
			dataType: "xml",
			dataFields: [
				{ name: 'ProductName', type: 'string' },
				{ name: 'QuantityPerUnit', type: 'int' },
				{ name: 'UnitPrice', type: 'float' },
				{ name: 'UnitsInStock', type: 'float' },
				{ name: 'Discontinued', type: 'bool' }
			],
			root: "Products",
			record: "Product",
			id: 'ProductID',
			url: "../sampledata/products.xml"
		});

		var columns = [
                  { text: 'Product Name', datafield: 'ProductName', width: 250 },
                  { text: 'Quantity per Unit', datafield: 'QuantityPerUnit', cellsalign: 'right', align: 'right', width: 200 },
                  { text: 'Unit Price', datafield: 'UnitPrice', align: 'right', cellsalign: 'right', cellsformat: 'c2', width: 200 },
                  { text: 'Units In Stock', datafield: 'UnitsInStock', cellsalign: 'right', width: 100 },
                  { text: 'Discontinued', columntype: 'checkbox', datafield: 'Discontinued' }
                ];

        JQXElements.settings["gridSettings"] =
        {
			            
        }
	window.onload = function() {
		var result = document.querySelector("jqx-grid").getstate();							
	}
    </script>
</head>
<body>
   <jqx-grid settings="gridSettings"></jqx-grid>
</body>
</html>

loadstate Method

Parameter	Type	Description
stateObject	object	The state object returned by saveState method call.

Return Value
void

<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>Grid Custom Element</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />
    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />
    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.pager.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.sort.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.edit.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.filter.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.columnsresize.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.aggregates.js"></script>
    <script type="text/javascript">
		var adapter = new jqx.dataAdapter({
			dataType: "xml",
			dataFields: [
				{ name: 'ProductName', type: 'string' },
				{ name: 'QuantityPerUnit', type: 'int' },
				{ name: 'UnitPrice', type: 'float' },
				{ name: 'UnitsInStock', type: 'float' },
				{ name: 'Discontinued', type: 'bool' }
			],
			root: "Products",
			record: "Product",
			id: 'ProductID',
			url: "../sampledata/products.xml"
		});

		var columns = [
                  { text: 'Product Name', datafield: 'ProductName', width: 250 },
                  { text: 'Quantity per Unit', datafield: 'QuantityPerUnit', cellsalign: 'right', align: 'right', width: 200 },
                  { text: 'Unit Price', datafield: 'UnitPrice', align: 'right', cellsalign: 'right', cellsformat: 'c2', width: 200 },
                  { text: 'Units In Stock', datafield: 'UnitsInStock', cellsalign: 'right', width: 100 },
                  { text: 'Discontinued', columntype: 'checkbox', datafield: 'Discontinued' }
                ];

        JQXElements.settings["gridSettings"] =
        {
			            
        }
	window.onload = function() {
		document.querySelector("jqx-grid").loadstate();							
	}
    </script>
</head>
<body>
   <jqx-grid settings="gridSettings"></jqx-grid>
</body>
</html>

savestate Method

Parameter	Type	Description
None

Return Value
void

<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>Grid Custom Element</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />
    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />
    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.pager.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.sort.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.edit.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.filter.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.columnsresize.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.aggregates.js"></script>
    <script type="text/javascript">
		var adapter = new jqx.dataAdapter({
			dataType: "xml",
			dataFields: [
				{ name: 'ProductName', type: 'string' },
				{ name: 'QuantityPerUnit', type: 'int' },
				{ name: 'UnitPrice', type: 'float' },
				{ name: 'UnitsInStock', type: 'float' },
				{ name: 'Discontinued', type: 'bool' }
			],
			root: "Products",
			record: "Product",
			id: 'ProductID',
			url: "../sampledata/products.xml"
		});

		var columns = [
                  { text: 'Product Name', datafield: 'ProductName', width: 250 },
                  { text: 'Quantity per Unit', datafield: 'QuantityPerUnit', cellsalign: 'right', align: 'right', width: 200 },
                  { text: 'Unit Price', datafield: 'UnitPrice', align: 'right', cellsalign: 'right', cellsformat: 'c2', width: 200 },
                  { text: 'Units In Stock', datafield: 'UnitsInStock', cellsalign: 'right', width: 100 },
                  { text: 'Discontinued', columntype: 'checkbox', datafield: 'Discontinued' }
                ];

        JQXElements.settings["gridSettings"] =
        {
			            
        }
	window.onload = function() {
		document.querySelector("jqx-grid").savestate();							
	}
    </script>
</head>
<body>
   <jqx-grid settings="gridSettings"></jqx-grid>
</body>
</html>

ï»¿

Custom Elements Documentation

Properties

Events

Code examples

Code examples

Code examples

Code examples

Code examples

Code examples

Code examples

Code examples

Code examples

Code examples

Code examples

Code examples

Code examples

Code examples

Code examples

Code examples

Code examples

Code examples

Code examples

Code examples

Code examples

Code examples

Code examples

Code examples

Methods