|
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>
|
|
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>
|
|
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>
|
|
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>
|
|
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>
|
|
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>
|
|
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>
|
|
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>
|
|
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>
|
|
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>
|
|
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>
|
|
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>
|
|
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>
|
|
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>
|
|
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>
|
|
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>
|
|
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>
|
|
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>
|
|
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>
|
|
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>
|
|
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>
|
|
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>
|
|
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>
|
|
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>
|
|
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>
|
|
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>
|
|
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>
|
|
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>
|
|
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>
|
|
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>
|
|
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>
|
|
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>
|
|
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>
|
|
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>
|
|
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>
|
|
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>
|
|
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>
|
|
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>
|
|
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>
|
|
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>
|
|
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>
|
|
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>
|
|
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>
|
|
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>
|
|
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>
|
|
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>
|
|
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>
|
|
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>
|
|
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>
|
|
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>
|
|
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>
|
|
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>
|
|
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>
|
|
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>
|
|
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>
|
|
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>
|
|
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>
|
|
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>
|
|
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>
|
|
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>
|
|
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>
|
|
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>
|
|
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>
|
|
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>
|
|
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>
|
|
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>
|
|
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>
|
|
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>
|
|
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>
|
|
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>
|
|
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>
|
|
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>
|
|
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>
|
|
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>
|
|
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>
|
|
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>
|
|
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>
|
|
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>
|
|
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>
|
|
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>
|
|
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>
|
|
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>
|
|
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>
|
|
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>
|
|
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>
|
|
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>
|
|
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>
|
|
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>
|
|
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>
|
|
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>
|
|
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>
|
|
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>
|
|
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>
|
|
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>
|
|
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>
|
|
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>
|
|
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>
|
|
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>
|
|
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>
|
|
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>
|
|
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>
|
|
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>
|
|
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>
|
|
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>
|
|
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>
|
|
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>
|
|
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>
|
|
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>
|
|
|
|
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>
|
|
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>
|
|
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>
|
|
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>
|
|
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>
|
|
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>
|
|
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>
|
|
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>
|
|
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>
|
|
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>
|
|
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>
|
|
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>
|
|
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>
|
|
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>
|
|
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>
|
|
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>
|
|
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>
|
|
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>
|
|
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>
|
|
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>
|
|
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>
|
|
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>
|
|
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>
|
|
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>
|
|
|
|
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>
|
|
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>
|
|
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>
|
|
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>
|
|
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>
|
|
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>
|
|
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>
|
|
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>
|
|
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>
|
|
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>
|
|
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>
|
|
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>
|
|
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>
|
|
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>
|
|
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>
|
|
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>
|
|
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>
|
|
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>
|
|
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>
|
|
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>
|
|
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>
|
|
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>
|
|
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>
|
|
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>
|
|
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>
|
|
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>
|
|
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>
|
|
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>
|
|
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>
|
|
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>
|
|
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>
|
|
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>
|
|
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>
|
|
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>
|
|
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>
|
|
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>
|
|
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>
|
|
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>
|
|
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>
|
|
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>
|
|
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>
|
|
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>
|
|
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>
|
|
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>
|
|
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>
|
|
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>
|
|
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>
|
|
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>
|
|
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>
|
|
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>
|
|
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>
|
|
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>
|
|
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>
|
|
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>
|
|
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>
|
|
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>
|
|
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>
|
|
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>
|
|
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>
|
|
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>
|
|
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>
|
|
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>
|
|
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>
|
|
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>
|
|
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>
|
|
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>
|
|
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>
|
|
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>
|
|
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>
|
|
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>
|
|
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>
|
|
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>
|
|
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>
|
|
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>
|
|
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>
|
|
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>
|
|
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>
|
|
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>
|
|
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>
|
|
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>
|
|
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>
|
|
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>
|
|
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>
|
|
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>
|
|
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>
|
|
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>
|
|
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>
|
|
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>
|
|
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>
|
|
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>
|
|
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>
|
|
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>
|
|
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>
|
|
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>
|
|
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>
|
|
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>
|
|
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>
|
|
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>
|
|
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>
|
|
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>
|
|
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>
|
|
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>
|
|
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>
|
