altRows
|
boolean
|
false
|
Sets or gets the altRows property.
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>DataTable Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script> <script type="text/javascript"> var adapter = new jqx.dataAdapter({ dataType: "json", dataFields: [ { name: 'name', type: 'string' }, { name: 'type', type: 'string' }, { name: 'calories', type: 'int' }, { name: 'totalfat', type: 'string' }, { name: 'protein', type: 'string' } ], id: 'id', url: "../sampledata/beverages.txt" }); var columns = [ { text: 'Name', dataField: 'name', width: 300 }, { text: 'Beverage Type', dataField: 'type', width: 300 }, { text: 'Calories', dataField: 'calories', width: 180 }, { text: 'Total Fat', dataField: 'totalfat', width: 120 }, { text: 'Protein', dataField: 'protein' } ]; JQXElements.settings[ "dataTableSettings"] = { pageable:true,pagerButtonsCount:10, source:adapter,columnsResize:true, columns:columns,altRows:true, theme: "light" } </script></head><body> <jqx-data-table settings="dataTableSettings"></jqx-data-table>
|
autoRowHeight
|
boolean
|
true
|
Sets or gets the autoRowHeight property.
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>DataTable Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script> <script type="text/javascript"> var adapter = new jqx.dataAdapter({ dataType: "json", dataFields: [ { name: 'name', type: 'string' }, { name: 'type', type: 'string' }, { name: 'calories', type: 'int' }, { name: 'totalfat', type: 'string' }, { name: 'protein', type: 'string' } ], id: 'id', url: "../sampledata/beverages.txt" }); var columns = [ { text: 'Name', dataField: 'name', width: 300 }, { text: 'Beverage Type', dataField: 'type', width: 300 }, { text: 'Calories', dataField: 'calories', width: 180 }, { text: 'Total Fat', dataField: 'totalfat', width: 120 }, { text: 'Protein', dataField: 'protein' } ]; JQXElements.settings[ "dataTableSettings"] = { pageable:true,pagerButtonsCount:10, source:adapter,columnsResize:true, columns:columns,autoRowHeight:false, theme: "light" } </script></head><body> <jqx-data-table settings="dataTableSettings"></jqx-data-table>
|
aggregatesHeight
|
number
|
34
|
Sets or gets the aggregatesHeight property.
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>DataTable Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script> <script type="text/javascript"> var adapter = new jqx.dataAdapter({ dataType: "json", dataFields: [ { name: 'name', type: 'string' }, { name: 'type', type: 'string' }, { name: 'calories', type: 'int' }, { name: 'totalfat', type: 'string' }, { name: 'protein', type: 'string' } ], id: 'id', url: "../sampledata/beverages.txt" }); var columns = [ { text: 'Name', dataField: 'name', width: 300 }, { text: 'Beverage Type', dataField: 'type', width: 300 }, { text: 'Calories', dataField: 'calories', width: 180 }, { text: 'Total Fat', dataField: 'totalfat', width: 120 }, { text: 'Protein', dataField: 'protein' } ]; JQXElements.settings[ "dataTableSettings"] = { pageable:true,pagerButtonsCount:10, source:adapter,columnsResize:true, columns:columns,aggregatesHeight:40, theme: "light" } </script></head><body> <jqx-data-table settings="dataTableSettings"></jqx-data-table>
|
autoShowLoadElement
|
boolean
|
true
|
Sets or gets the autoShowLoadElement property.
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>DataTable Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script> <script type="text/javascript"> var adapter = new jqx.dataAdapter({ dataType: "json", dataFields: [ { name: 'name', type: 'string' }, { name: 'type', type: 'string' }, { name: 'calories', type: 'int' }, { name: 'totalfat', type: 'string' }, { name: 'protein', type: 'string' } ], id: 'id', url: "../sampledata/beverages.txt" }); var columns = [ { text: 'Name', dataField: 'name', width: 300 }, { text: 'Beverage Type', dataField: 'type', width: 300 }, { text: 'Calories', dataField: 'calories', width: 180 }, { text: 'Total Fat', dataField: 'totalfat', width: 120 }, { text: 'Protein', dataField: 'protein' } ]; JQXElements.settings[ "dataTableSettings"] = { pageable:true,pagerButtonsCount:10, source:adapter,columnsResize:true, columns:columns,autoShowLoadElement:false, theme: "light" } </script></head><body> <jqx-data-table settings="dataTableSettings"></jqx-data-table>
|
columnsHeight
|
number
|
30
|
Sets or gets the columnsHeight property.
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>DataTable Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script> <script type="text/javascript"> var adapter = new jqx.dataAdapter({ dataType: "json", dataFields: [ { name: 'name', type: 'string' }, { name: 'type', type: 'string' }, { name: 'calories', type: 'int' }, { name: 'totalfat', type: 'string' }, { name: 'protein', type: 'string' } ], id: 'id', url: "../sampledata/beverages.txt" }); var columns = [ { text: 'Name', dataField: 'name', width: 300 }, { text: 'Beverage Type', dataField: 'type', width: 300 }, { text: 'Calories', dataField: 'calories', width: 180 }, { text: 'Total Fat', dataField: 'totalfat', width: 120 }, { text: 'Protein', dataField: 'protein' } ]; JQXElements.settings[ "dataTableSettings"] = { pageable:true,pagerButtonsCount:10, source:adapter,columnsResize:true, columns:columns,columnsHeight:20, theme: "light" } </script></head><body> <jqx-data-table settings="dataTableSettings"></jqx-data-table>
|
columns
|
array
|
[]
|
Sets or gets the columns property.
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>DataTable Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script> <script type="text/javascript"> var adapter = new jqx.dataAdapter({ dataType: "json", dataFields: [ { name: 'name', type: 'string' }, { name: 'type', type: 'string' }, { name: 'calories', type: 'int' }, { name: 'totalfat', type: 'string' }, { name: 'protein', type: 'string' } ], id: 'id', url: "../sampledata/beverages.txt" }); var columns = [ { text: 'Name', dataField: 'name', width: 300 }, { text: 'Beverage Type', dataField: 'type', width: 300 }, { text: 'Calories', dataField: 'calories', width: 180 }, { text: 'Total Fat', dataField: 'totalfat', width: 120 }, { text: 'Protein', dataField: 'protein' } ]; JQXElements.settings[ "dataTableSettings"] = { pageable:true,pagerButtonsCount:10, source:adapter,columnsResize:true, columns:columns, theme: "light" } </script></head><body> <jqx-data-table settings="dataTableSettings"></jqx-data-table>
|
columnGroups
|
array
|
[]
|
Sets or gets the columnGroups property.
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>DataTable Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script> <script type="text/javascript"> var adapter = new jqx.dataAdapter({ dataType: "json", dataFields: [ { name: 'name', type: 'string' }, { name: 'type', type: 'string' }, { name: 'calories', type: 'int' }, { name: 'totalfat', type: 'string' }, { name: 'protein', type: 'string' } ], id: 'id', url: "../sampledata/beverages.txt" }); var columns = [ { text: 'Name', dataField: 'name', width: 300 }, { text: 'Beverage Type', dataField: 'type', width: 300 }, { text: 'Calories', dataField: 'calories', width: 180 }, { text: 'Total Fat', dataField: 'totalfat', width: 120 }, { text: 'Protein', dataField: 'protein' } ]; JQXElements.settings[ "dataTableSettings"] = { pageable:true,pagerButtonsCount:10, source:adapter,columnsResize:true, columns:columns, theme: "light", columnGroups:columnGroups } </script></head><body> <jqx-data-table settings="dataTableSettings"></jqx-data-table>
|
columnsResize
|
boolean
|
false
|
Sets or gets the columnsResize property.
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>DataTable Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script> <script type="text/javascript"> var adapter = new jqx.dataAdapter({ dataType: "json", dataFields: [ { name: 'name', type: 'string' }, { name: 'type', type: 'string' }, { name: 'calories', type: 'int' }, { name: 'totalfat', type: 'string' }, { name: 'protein', type: 'string' } ], id: 'id', url: "../sampledata/beverages.txt" }); var columns = [ { text: 'Name', dataField: 'name', width: 300 }, { text: 'Beverage Type', dataField: 'type', width: 300 }, { text: 'Calories', dataField: 'calories', width: 180 }, { text: 'Total Fat', dataField: 'totalfat', width: 120 }, { text: 'Protein', dataField: 'protein' } ]; JQXElements.settings[ "dataTableSettings"] = { pageable:true,pagerButtonsCount:10, source:adapter,columnsResize:true, columns:columns, theme: "light" } </script></head><body> <jqx-data-table settings="dataTableSettings"></jqx-data-table>
|
columnsReorder
|
boolean
|
false
|
Sets or gets the columnsReorder property.
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>DataTable Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script> <script type="text/javascript"> var adapter = new jqx.dataAdapter({ dataType: "json", dataFields: [ { name: 'name', type: 'string' }, { name: 'type', type: 'string' }, { name: 'calories', type: 'int' }, { name: 'totalfat', type: 'string' }, { name: 'protein', type: 'string' } ], id: 'id', url: "../sampledata/beverages.txt" }); var columns = [ { text: 'Name', dataField: 'name', width: 300 }, { text: 'Beverage Type', dataField: 'type', width: 300 }, { text: 'Calories', dataField: 'calories', width: 180 }, { text: 'Total Fat', dataField: 'totalfat', width: 120 }, { text: 'Protein', dataField: 'protein' } ]; JQXElements.settings[ "dataTableSettings"] = { pageable:true,pagerButtonsCount:10, source:adapter,columnsResize:true, columns:columns, theme: "light",columnsReorder:true } </script></head><body> <jqx-data-table settings="dataTableSettings"></jqx-data-table>
|
disabled
|
boolean
|
false
|
Sets or gets the disabled property.
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>DataTable Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script> <script type="text/javascript"> var adapter = new jqx.dataAdapter({ dataType: "json", dataFields: [ { name: 'name', type: 'string' }, { name: 'type', type: 'string' }, { name: 'calories', type: 'int' }, { name: 'totalfat', type: 'string' }, { name: 'protein', type: 'string' } ], id: 'id', url: "../sampledata/beverages.txt" }); var columns = [ { text: 'Name', dataField: 'name', width: 300 }, { text: 'Beverage Type', dataField: 'type', width: 300 }, { text: 'Calories', dataField: 'calories', width: 180 }, { text: 'Total Fat', dataField: 'totalfat', width: 120 }, { text: 'Protein', dataField: 'protein' } ]; JQXElements.settings[ "dataTableSettings"] = { pageable:true,pagerButtonsCount:10, source:adapter,columnsResize:true, columns:columns, theme: "light",disabled:true } </script></head><body> <jqx-data-table settings="dataTableSettings"></jqx-data-table>
|
editable
|
boolean
|
false
|
Sets or gets the editable property.
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>DataTable Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script> <script type="text/javascript"> var adapter = new jqx.dataAdapter({ dataType: "json", dataFields: [ { name: 'name', type: 'string' }, { name: 'type', type: 'string' }, { name: 'calories', type: 'int' }, { name: 'totalfat', type: 'string' }, { name: 'protein', type: 'string' } ], id: 'id', url: "../sampledata/beverages.txt" }); var columns = [ { text: 'Name', dataField: 'name', width: 300 }, { text: 'Beverage Type', dataField: 'type', width: 300 }, { text: 'Calories', dataField: 'calories', width: 180 }, { text: 'Total Fat', dataField: 'totalfat', width: 120 }, { text: 'Protein', dataField: 'protein' } ]; JQXElements.settings[ "dataTableSettings"] = { pageable:true,pagerButtonsCount:10, source:adapter,columnsResize:true, columns:columns, theme: "light",editable:true } </script></head><body> <jqx-data-table settings="dataTableSettings"></jqx-data-table>
|
editSettings
|
object
|
{ saveOnPageChange: true, saveOnBlur: true, saveOnSelectionChange: true, cancelOnEsc: true, saveOnEnter: true, editSingleCell: false, editOnDoubleClick: true, editOnF2: true }
|
Sets or gets the editSettings property.
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>DataTable Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script> <script type="text/javascript"> var adapter = new jqx.dataAdapter({ dataType: "json", dataFields: [ { name: 'name', type: 'string' }, { name: 'type', type: 'string' }, { name: 'calories', type: 'int' }, { name: 'totalfat', type: 'string' }, { name: 'protein', type: 'string' } ], id: 'id', url: "../sampledata/beverages.txt" }); var columns = [ { text: 'Name', dataField: 'name', width: 300 }, { text: 'Beverage Type', dataField: 'type', width: 300 }, { text: 'Calories', dataField: 'calories', width: 180 }, { text: 'Total Fat', dataField: 'totalfat', width: 120 }, { text: 'Protein', dataField: 'protein' } ]; JQXElements.settings[ "dataTableSettings"] = { pageable:true,pagerButtonsCount:10, source:adapter,columnsResize:true, columns:columns, theme: "light", editSettings:"editSettings" } </script></head><body> <jqx-data-table settings="dataTableSettings"></jqx-data-table>
|
exportSettings
|
object
|
{ columnsHeader: true, hiddenColumns: false, serverURL: null, characterSet: null, recordsInView: true, fileName: "jqxDataTable"}
|
Sets or gets the exportSettings property.
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>DataTable Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script> <script type="text/javascript"> var adapter = new jqx.dataAdapter({ dataType: "json", dataFields: [ { name: 'name', type: 'string' }, { name: 'type', type: 'string' }, { name: 'calories', type: 'int' }, { name: 'totalfat', type: 'string' }, { name: 'protein', type: 'string' } ], id: 'id', url: "../sampledata/beverages.txt" }); var columns = [ { text: 'Name', dataField: 'name', width: 300 }, { text: 'Beverage Type', dataField: 'type', width: 300 }, { text: 'Calories', dataField: 'calories', width: 180 }, { text: 'Total Fat', dataField: 'totalfat', width: 120 }, { text: 'Protein', dataField: 'protein' } ]; JQXElements.settings[ "dataTableSettings"] = { pageable:true,pagerButtonsCount:10, source:adapter,columnsResize:true, columns:columns, theme: "light", exportSettings:"exportSettings" } </script></head><body> <jqx-data-table settings="dataTableSettings"></jqx-data-table>
|
enableHover
|
boolean
|
true
|
Sets or gets the enableHover property.
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>DataTable Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script> <script type="text/javascript"> var adapter = new jqx.dataAdapter({ dataType: "json", dataFields: [ { name: 'name', type: 'string' }, { name: 'type', type: 'string' }, { name: 'calories', type: 'int' }, { name: 'totalfat', type: 'string' }, { name: 'protein', type: 'string' } ], id: 'id', url: "../sampledata/beverages.txt" }); var columns = [ { text: 'Name', dataField: 'name', width: 300 }, { text: 'Beverage Type', dataField: 'type', width: 300 }, { text: 'Calories', dataField: 'calories', width: 180 }, { text: 'Total Fat', dataField: 'totalfat', width: 120 }, { text: 'Protein', dataField: 'protein' } ]; JQXElements.settings[ "dataTableSettings"] = { pageable:true,pagerButtonsCount:10, source:adapter,columnsResize:true, columns:columns, theme: "light",enableHover:true } </script></head><body> <jqx-data-table settings="dataTableSettings"></jqx-data-table>
|
enableBrowserSelection
|
boolean
|
false
|
Sets or gets the enableBrowserSelection property.
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>DataTable Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script> <script type="text/javascript"> var adapter = new jqx.dataAdapter({ dataType: "json", dataFields: [ { name: 'name', type: 'string' }, { name: 'type', type: 'string' }, { name: 'calories', type: 'int' }, { name: 'totalfat', type: 'string' }, { name: 'protein', type: 'string' } ], id: 'id', url: "../sampledata/beverages.txt" }); var columns = [ { text: 'Name', dataField: 'name', width: 300 }, { text: 'Beverage Type', dataField: 'type', width: 300 }, { text: 'Calories', dataField: 'calories', width: 180 }, { text: 'Total Fat', dataField: 'totalfat', width: 120 }, { text: 'Protein', dataField: 'protein' } ]; JQXElements.settings[ "dataTableSettings"] = { pageable:true,pagerButtonsCount:10, source:adapter,columnsResize:true, columns:columns, theme: "light",enableBrowserSelection:true } </script></head><body> <jqx-data-table settings="dataTableSettings"></jqx-data-table>
|
filterable
|
boolean
|
false
|
Sets or gets the filterable property.
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>DataTable Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script> <script type="text/javascript"> var adapter = new jqx.dataAdapter({ dataType: "json", dataFields: [ { name: 'name', type: 'string' }, { name: 'type', type: 'string' }, { name: 'calories', type: 'int' }, { name: 'totalfat', type: 'string' }, { name: 'protein', type: 'string' } ], id: 'id', url: "../sampledata/beverages.txt" }); var columns = [ { text: 'Name', dataField: 'name', width: 300 }, { text: 'Beverage Type', dataField: 'type', width: 300 }, { text: 'Calories', dataField: 'calories', width: 180 }, { text: 'Total Fat', dataField: 'totalfat', width: 120 }, { text: 'Protein', dataField: 'protein' } ]; JQXElements.settings[ "dataTableSettings"] = { pageable:true,pagerButtonsCount:10, source:adapter,columnsResize:true, columns:columns, theme: "light",filterable:true } </script></head><body> <jqx-data-table settings="dataTableSettings"></jqx-data-table>
|
filterHeight
|
number
|
30
|
Sets or gets the filterHeight property.
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>DataTable Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script> <script type="text/javascript"> var adapter = new jqx.dataAdapter({ dataType: "json", dataFields: [ { name: 'name', type: 'string' }, { name: 'type', type: 'string' }, { name: 'calories', type: 'int' }, { name: 'totalfat', type: 'string' }, { name: 'protein', type: 'string' } ], id: 'id', url: "../sampledata/beverages.txt" }); var columns = [ { text: 'Name', dataField: 'name', width: 300 }, { text: 'Beverage Type', dataField: 'type', width: 300 }, { text: 'Calories', dataField: 'calories', width: 180 }, { text: 'Total Fat', dataField: 'totalfat', width: 120 }, { text: 'Protein', dataField: 'protein' } ]; JQXElements.settings[ "dataTableSettings"] = { pageable:true,pagerButtonsCount:10, source:adapter,columnsResize:true, columns:columns, theme: "light",filterHeight:35,filterable:true } </script></head><body> <jqx-data-table settings="dataTableSettings"></jqx-data-table>
|
filterMode
|
string
|
"default"
|
Sets or gets the filterMode property.
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>DataTable Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script> <script type="text/javascript"> var adapter = new jqx.dataAdapter({ dataType: "json", dataFields: [ { name: 'name', type: 'string' }, { name: 'type', type: 'string' }, { name: 'calories', type: 'int' }, { name: 'totalfat', type: 'string' }, { name: 'protein', type: 'string' } ], id: 'id', url: "../sampledata/beverages.txt" }); var columns = [ { text: 'Name', dataField: 'name', width: 300 }, { text: 'Beverage Type', dataField: 'type', width: 300 }, { text: 'Calories', dataField: 'calories', width: 180 }, { text: 'Total Fat', dataField: 'totalfat', width: 120 }, { text: 'Protein', dataField: 'protein' } ]; JQXElements.settings[ "dataTableSettings"] = { pageable:true,pagerButtonsCount:10, source:adapter,columnsResize:true, columns:columns, theme: "light",filterable:true, filterMode:"advanced" } </script></head><body> <jqx-data-table settings="dataTableSettings"></jqx-data-table>
|
groups
|
array
|
[]
|
Sets or gets the groups property.
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>DataTable Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script> <script type="text/javascript"> var adapter = new jqx.dataAdapter({ dataType: "json", dataFields: [ { name: 'name', type: 'string' }, { name: 'type', type: 'string' }, { name: 'calories', type: 'int' }, { name: 'totalfat', type: 'string' }, { name: 'protein', type: 'string' } ], id: 'id', url: "../sampledata/beverages.txt" }); var columns = [ { text: 'Name', dataField: 'name', width: 300 }, { text: 'Beverage Type', dataField: 'type', width: 300 }, { text: 'Calories', dataField: 'calories', width: 180 }, { text: 'Total Fat', dataField: 'totalfat', width: 120 }, { text: 'Protein', dataField: 'protein' } ]; JQXElements.settings[ "dataTableSettings"] = { pageable:true,pagerButtonsCount:10, source:adapter,columnsResize:true, columns:columns, theme: "light", groups:'['firstname']' } </script></head><body> <jqx-data-table settings="dataTableSettings"></jqx-data-table>
|
groupsRenderer
|
function
|
null
|
Sets or gets the groupsRenderer property.
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>DataTable Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script> <script type="text/javascript"> var adapter = new jqx.dataAdapter({ dataType: "json", dataFields: [ { name: 'name', type: 'string' }, { name: 'type', type: 'string' }, { name: 'calories', type: 'int' }, { name: 'totalfat', type: 'string' }, { name: 'protein', type: 'string' } ], id: 'id', url: "../sampledata/beverages.txt" }); var columns = [ { text: 'Name', dataField: 'name', width: 300 }, { text: 'Beverage Type', dataField: 'type', width: 300 }, { text: 'Calories', dataField: 'calories', width: 180 }, { text: 'Total Fat', dataField: 'totalfat', width: 120 }, { text: 'Protein', dataField: 'protein' } ]; JQXElements.settings[ "dataTableSettings"] = { pageable:true,pagerButtonsCount:10, source:adapter,columnsResize:true, columns:columns, theme: "light", groupsRenderer:"groupsRenderer" } </script></head><body> <jqx-data-table settings="dataTableSettings"></jqx-data-table>
|
height
|
number
|
null
|
Sets or gets the height property.
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>DataTable Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script> <script type="text/javascript"> var adapter = new jqx.dataAdapter({ dataType: "json", dataFields: [ { name: 'name', type: 'string' }, { name: 'type', type: 'string' }, { name: 'calories', type: 'int' }, { name: 'totalfat', type: 'string' }, { name: 'protein', type: 'string' } ], id: 'id', url: "../sampledata/beverages.txt" }); var columns = [ { text: 'Name', dataField: 'name', width: 300 }, { text: 'Beverage Type', dataField: 'type', width: 300 }, { text: 'Calories', dataField: 'calories', width: 180 }, { text: 'Total Fat', dataField: 'totalfat', width: 120 }, { text: 'Protein', dataField: 'protein' } ]; JQXElements.settings[ "dataTableSettings"] = { pageable:true,pagerButtonsCount:10, source:adapter,columnsResize:true, columns:columns, theme: "light",height:350 } </script></head><body> <jqx-data-table settings="dataTableSettings"></jqx-data-table>
|
initRowDetails
|
function
|
null
|
Sets or gets the initRowDetails property.
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>DataTable Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script> <script type="text/javascript"> var adapter = new jqx.dataAdapter({ dataType: "json", dataFields: [ { name: 'name', type: 'string' }, { name: 'type', type: 'string' }, { name: 'calories', type: 'int' }, { name: 'totalfat', type: 'string' }, { name: 'protein', type: 'string' } ], id: 'id', url: "../sampledata/beverages.txt" }); var columns = [ { text: 'Name', dataField: 'name', width: 300 }, { text: 'Beverage Type', dataField: 'type', width: 300 }, { text: 'Calories', dataField: 'calories', width: 180 }, { text: 'Total Fat', dataField: 'totalfat', width: 120 }, { text: 'Protein', dataField: 'protein' } ]; JQXElements.settings[ "dataTableSettings"] = { pageable:true,pagerButtonsCount:10, source:adapter,columnsResize:true, columns:columns, theme: "light", initRowDetails:"initRowDetails" } </script></head><body> <jqx-data-table settings="dataTableSettings"></jqx-data-table>
|
incrementalSearch
|
boolean
|
true
|
Sets or gets the incrementalSearch property.
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>DataTable Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script> <script type="text/javascript"> var adapter = new jqx.dataAdapter({ dataType: "json", dataFields: [ { name: 'name', type: 'string' }, { name: 'type', type: 'string' }, { name: 'calories', type: 'int' }, { name: 'totalfat', type: 'string' }, { name: 'protein', type: 'string' } ], id: 'id', url: "../sampledata/beverages.txt" }); var columns = [ { text: 'Name', dataField: 'name', width: 300 }, { text: 'Beverage Type', dataField: 'type', width: 300 }, { text: 'Calories', dataField: 'calories', width: 180 }, { text: 'Total Fat', dataField: 'totalfat', width: 120 }, { text: 'Protein', dataField: 'protein' } ]; JQXElements.settings[ "dataTableSettings"] = { pageable:true,pagerButtonsCount:10, source:adapter,columnsResize:true, columns:columns, theme: "light",incrementalSearch:true } </script></head><body> <jqx-data-table settings="dataTableSettings"></jqx-data-table>
|
localization
|
object
|
default localization strings.
|
Sets or gets the localization property.
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>DataTable Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script> <script type="text/javascript"> var adapter = new jqx.dataAdapter({ dataType: "json", dataFields: [ { name: 'name', type: 'string' }, { name: 'type', type: 'string' }, { name: 'calories', type: 'int' }, { name: 'totalfat', type: 'string' }, { name: 'protein', type: 'string' } ], id: 'id', url: "../sampledata/beverages.txt" }); var columns = [ { text: 'Name', dataField: 'name', width: 300 }, { text: 'Beverage Type', dataField: 'type', width: 300 }, { text: 'Calories', dataField: 'calories', width: 180 }, { text: 'Total Fat', dataField: 'totalfat', width: 120 }, { text: 'Protein', dataField: 'protein' } ]; JQXElements.settings[ "dataTableSettings"] = { pageable:true,pagerButtonsCount:10, source:adapter,columnsResize:true, columns:columns, theme: "light", localization:"localization" } </script></head><body> <jqx-data-table settings="dataTableSettings"></jqx-data-table>
|
pagerHeight
|
number
|
28
|
Sets or gets the pagerHeight property.
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>DataTable Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script> <script type="text/javascript"> var adapter = new jqx.dataAdapter({ dataType: "json", dataFields: [ { name: 'name', type: 'string' }, { name: 'type', type: 'string' }, { name: 'calories', type: 'int' }, { name: 'totalfat', type: 'string' }, { name: 'protein', type: 'string' } ], id: 'id', url: "../sampledata/beverages.txt" }); var columns = [ { text: 'Name', dataField: 'name', width: 300 }, { text: 'Beverage Type', dataField: 'type', width: 300 }, { text: 'Calories', dataField: 'calories', width: 180 }, { text: 'Total Fat', dataField: 'totalfat', width: 120 }, { text: 'Protein', dataField: 'protein' } ]; JQXElements.settings[ "dataTableSettings"] = { pageable:true,pagerButtonsCount:10, source:adapter,columnsResize:true, columns:columns, theme: "light",pagerHeight:35 } </script></head><body> <jqx-data-table settings="dataTableSettings"></jqx-data-table>
|
pageSize
|
number
|
10
|
Sets or gets the pageSize property.
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>DataTable Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script> <script type="text/javascript"> var adapter = new jqx.dataAdapter({ dataType: "json", dataFields: [ { name: 'name', type: 'string' }, { name: 'type', type: 'string' }, { name: 'calories', type: 'int' }, { name: 'totalfat', type: 'string' }, { name: 'protein', type: 'string' } ], id: 'id', url: "../sampledata/beverages.txt" }); var columns = [ { text: 'Name', dataField: 'name', width: 300 }, { text: 'Beverage Type', dataField: 'type', width: 300 }, { text: 'Calories', dataField: 'calories', width: 180 }, { text: 'Total Fat', dataField: 'totalfat', width: 120 }, { text: 'Protein', dataField: 'protein' } ]; JQXElements.settings[ "dataTableSettings"] = { pageable:true,pagerButtonsCount:10, source:adapter,columnsResize:true, columns:columns, theme: "light",pageSize:15 } </script></head><body> <jqx-data-table settings="dataTableSettings"></jqx-data-table>
|
pageSizeOptions
|
array
|
['5', '10', '20']
|
Sets or gets the pageSizeOptions property.
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>DataTable Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script> <script type="text/javascript"> var adapter = new jqx.dataAdapter({ dataType: "json", dataFields: [ { name: 'name', type: 'string' }, { name: 'type', type: 'string' }, { name: 'calories', type: 'int' }, { name: 'totalfat', type: 'string' }, { name: 'protein', type: 'string' } ], id: 'id', url: "../sampledata/beverages.txt" }); var columns = [ { text: 'Name', dataField: 'name', width: 300 }, { text: 'Beverage Type', dataField: 'type', width: 300 }, { text: 'Calories', dataField: 'calories', width: 180 }, { text: 'Total Fat', dataField: 'totalfat', width: 120 }, { text: 'Protein', dataField: 'protein' } ]; JQXElements.settings[ "dataTableSettings"] = { pageable:true,pagerButtonsCount:10, source:adapter,columnsResize:true, columns:columns, theme: "light", pageSizeOptions:'[15, 25, 35]' } </script></head><body> <jqx-data-table settings="dataTableSettings"></jqx-data-table>
|
pageable
|
boolean
|
false
|
Sets or gets the pageable property.
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>DataTable Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script> <script type="text/javascript"> var adapter = new jqx.dataAdapter({ dataType: "json", dataFields: [ { name: 'name', type: 'string' }, { name: 'type', type: 'string' }, { name: 'calories', type: 'int' }, { name: 'totalfat', type: 'string' }, { name: 'protein', type: 'string' } ], id: 'id', url: "../sampledata/beverages.txt" }); var columns = [ { text: 'Name', dataField: 'name', width: 300 }, { text: 'Beverage Type', dataField: 'type', width: 300 }, { text: 'Calories', dataField: 'calories', width: 180 }, { text: 'Total Fat', dataField: 'totalfat', width: 120 }, { text: 'Protein', dataField: 'protein' } ]; JQXElements.settings[ "dataTableSettings"] = { pageable:true,pagerButtonsCount:10, source:adapter,columnsResize:true, columns:columns, theme: "light" } </script></head><body> <jqx-data-table settings="dataTableSettings"></jqx-data-table>
|
pagerPosition
|
string
|
"bottom"
|
Sets or gets the pagerPosition property.
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>DataTable Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script> <script type="text/javascript"> var adapter = new jqx.dataAdapter({ dataType: "json", dataFields: [ { name: 'name', type: 'string' }, { name: 'type', type: 'string' }, { name: 'calories', type: 'int' }, { name: 'totalfat', type: 'string' }, { name: 'protein', type: 'string' } ], id: 'id', url: "../sampledata/beverages.txt" }); var columns = [ { text: 'Name', dataField: 'name', width: 300 }, { text: 'Beverage Type', dataField: 'type', width: 300 }, { text: 'Calories', dataField: 'calories', width: 180 }, { text: 'Total Fat', dataField: 'totalfat', width: 120 }, { text: 'Protein', dataField: 'protein' } ]; JQXElements.settings[ "dataTableSettings"] = { pageable:true,pagerButtonsCount:10, source:adapter,columnsResize:true, columns:columns, theme: "light", pagerPosition:"top" } </script></head><body> <jqx-data-table settings="dataTableSettings"></jqx-data-table>
|
pagerMode
|
string
|
"default"
|
Sets or gets the pagerMode property.
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>DataTable Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script> <script type="text/javascript"> var adapter = new jqx.dataAdapter({ dataType: "json", dataFields: [ { name: 'name', type: 'string' }, { name: 'type', type: 'string' }, { name: 'calories', type: 'int' }, { name: 'totalfat', type: 'string' }, { name: 'protein', type: 'string' } ], id: 'id', url: "../sampledata/beverages.txt" }); var columns = [ { text: 'Name', dataField: 'name', width: 300 }, { text: 'Beverage Type', dataField: 'type', width: 300 }, { text: 'Calories', dataField: 'calories', width: 180 }, { text: 'Total Fat', dataField: 'totalfat', width: 120 }, { text: 'Protein', dataField: 'protein' } ]; JQXElements.settings[ "dataTableSettings"] = { pageable:true,pagerButtonsCount:10, source:adapter,columnsResize:true, columns:columns, theme: "light", pagerMode:"advanced" } </script></head><body> <jqx-data-table settings="dataTableSettings"></jqx-data-table>
|
pagerButtonsCount
|
number
|
5
|
Sets or gets the pagerButtonsCount property.
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>DataTable Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script> <script type="text/javascript"> var adapter = new jqx.dataAdapter({ dataType: "json", dataFields: [ { name: 'name', type: 'string' }, { name: 'type', type: 'string' }, { name: 'calories', type: 'int' }, { name: 'totalfat', type: 'string' }, { name: 'protein', type: 'string' } ], id: 'id', url: "../sampledata/beverages.txt" }); var columns = [ { text: 'Name', dataField: 'name', width: 300 }, { text: 'Beverage Type', dataField: 'type', width: 300 }, { text: 'Calories', dataField: 'calories', width: 180 }, { text: 'Total Fat', dataField: 'totalfat', width: 120 }, { text: 'Protein', dataField: 'protein' } ]; JQXElements.settings[ "dataTableSettings"] = { pageable:true,pagerButtonsCount:10, source:adapter,columnsResize:true, columns:columns, theme: "light" } </script></head><body> <jqx-data-table settings="dataTableSettings"></jqx-data-table>
|
pagerRenderer
|
function
|
null
|
Sets or gets the pagerRenderer property.
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>DataTable Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script> <script type="text/javascript"> var adapter = new jqx.dataAdapter({ dataType: "json", dataFields: [ { name: 'name', type: 'string' }, { name: 'type', type: 'string' }, { name: 'calories', type: 'int' }, { name: 'totalfat', type: 'string' }, { name: 'protein', type: 'string' } ], id: 'id', url: "../sampledata/beverages.txt" }); var columns = [ { text: 'Name', dataField: 'name', width: 300 }, { text: 'Beverage Type', dataField: 'type', width: 300 }, { text: 'Calories', dataField: 'calories', width: 180 }, { text: 'Total Fat', dataField: 'totalfat', width: 120 }, { text: 'Protein', dataField: 'protein' } ]; JQXElements.settings[ "dataTableSettings"] = { pageable:true,pagerButtonsCount:10, source:adapter,columnsResize:true, columns:columns, theme: "light", pagerRenderer:"pagerRenderer" } </script></head><body> <jqx-data-table settings="dataTableSettings"></jqx-data-table>
|
ready
|
function
|
null
|
Sets or gets the ready property.
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>DataTable Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script> <script type="text/javascript"> var adapter = new jqx.dataAdapter({ dataType: "json", dataFields: [ { name: 'name', type: 'string' }, { name: 'type', type: 'string' }, { name: 'calories', type: 'int' }, { name: 'totalfat', type: 'string' }, { name: 'protein', type: 'string' } ], id: 'id', url: "../sampledata/beverages.txt" }); var columns = [ { text: 'Name', dataField: 'name', width: 300 }, { text: 'Beverage Type', dataField: 'type', width: 300 }, { text: 'Calories', dataField: 'calories', width: 180 }, { text: 'Total Fat', dataField: 'totalfat', width: 120 }, { text: 'Protein', dataField: 'protein' } ]; JQXElements.settings[ "dataTableSettings"] = { pageable:true,pagerButtonsCount:10, source:adapter,columnsResize:true, columns:columns, theme: "light", ready:"ready" } </script></head><body> <jqx-data-table settings="dataTableSettings"></jqx-data-table>
|
rowDetails
|
boolean
|
false
|
Sets or gets the rowDetails property.
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>DataTable Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script> <script type="text/javascript"> var adapter = new jqx.dataAdapter({ dataType: "json", dataFields: [ { name: 'name', type: 'string' }, { name: 'type', type: 'string' }, { name: 'calories', type: 'int' }, { name: 'totalfat', type: 'string' }, { name: 'protein', type: 'string' } ], id: 'id', url: "../sampledata/beverages.txt" }); var columns = [ { text: 'Name', dataField: 'name', width: 300 }, { text: 'Beverage Type', dataField: 'type', width: 300 }, { text: 'Calories', dataField: 'calories', width: 180 }, { text: 'Total Fat', dataField: 'totalfat', width: 120 }, { text: 'Protein', dataField: 'protein' } ]; JQXElements.settings[ "dataTableSettings"] = { pageable:true,pagerButtonsCount:10, source:adapter,columnsResize:true, columns:columns, theme: "light",rowDetails:true } </script></head><body> <jqx-data-table settings="dataTableSettings"></jqx-data-table>
|
renderToolbar
|
function
|
null
|
Sets or gets the renderToolbar property.
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>DataTable Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script> <script type="text/javascript"> var adapter = new jqx.dataAdapter({ dataType: "json", dataFields: [ { name: 'name', type: 'string' }, { name: 'type', type: 'string' }, { name: 'calories', type: 'int' }, { name: 'totalfat', type: 'string' }, { name: 'protein', type: 'string' } ], id: 'id', url: "../sampledata/beverages.txt" }); var columns = [ { text: 'Name', dataField: 'name', width: 300 }, { text: 'Beverage Type', dataField: 'type', width: 300 }, { text: 'Calories', dataField: 'calories', width: 180 }, { text: 'Total Fat', dataField: 'totalfat', width: 120 }, { text: 'Protein', dataField: 'protein' } ]; JQXElements.settings[ "dataTableSettings"] = { pageable:true,pagerButtonsCount:10, source:adapter,columnsResize:true, columns:columns, theme: "light", renderToolbar:"renderToolbar" } </script></head><body> <jqx-data-table settings="dataTableSettings"></jqx-data-table>
|
renderStatusbar
|
function
|
null
|
Sets or gets the renderStatusbar property.
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>DataTable Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script> <script type="text/javascript"> var adapter = new jqx.dataAdapter({ dataType: "json", dataFields: [ { name: 'name', type: 'string' }, { name: 'type', type: 'string' }, { name: 'calories', type: 'int' }, { name: 'totalfat', type: 'string' }, { name: 'protein', type: 'string' } ], id: 'id', url: "../sampledata/beverages.txt" }); var columns = [ { text: 'Name', dataField: 'name', width: 300 }, { text: 'Beverage Type', dataField: 'type', width: 300 }, { text: 'Calories', dataField: 'calories', width: 180 }, { text: 'Total Fat', dataField: 'totalfat', width: 120 }, { text: 'Protein', dataField: 'protein' } ]; JQXElements.settings[ "dataTableSettings"] = { pageable:true,pagerButtonsCount:10, source:adapter,columnsResize:true, columns:columns, theme: "light", renderStatusbar:"renderStatusbar" } </script></head><body> <jqx-data-table settings="dataTableSettings"></jqx-data-table>
|
rendering
|
function
|
null
|
Sets or gets the rendering property.
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>DataTable Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script> <script type="text/javascript"> var adapter = new jqx.dataAdapter({ dataType: "json", dataFields: [ { name: 'name', type: 'string' }, { name: 'type', type: 'string' }, { name: 'calories', type: 'int' }, { name: 'totalfat', type: 'string' }, { name: 'protein', type: 'string' } ], id: 'id', url: "../sampledata/beverages.txt" }); var columns = [ { text: 'Name', dataField: 'name', width: 300 }, { text: 'Beverage Type', dataField: 'type', width: 300 }, { text: 'Calories', dataField: 'calories', width: 180 }, { text: 'Total Fat', dataField: 'totalfat', width: 120 }, { text: 'Protein', dataField: 'protein' } ]; JQXElements.settings[ "dataTableSettings"] = { pageable:true,pagerButtonsCount:10, source:adapter,columnsResize:true, columns:columns, theme: "light", rendering:"rendering" } </script></head><body> <jqx-data-table settings="dataTableSettings"></jqx-data-table>
|
rendered
|
function
|
null
|
Sets or gets the rendered property.
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>DataTable Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script> <script type="text/javascript"> var adapter = new jqx.dataAdapter({ dataType: "json", dataFields: [ { name: 'name', type: 'string' }, { name: 'type', type: 'string' }, { name: 'calories', type: 'int' }, { name: 'totalfat', type: 'string' }, { name: 'protein', type: 'string' } ], id: 'id', url: "../sampledata/beverages.txt" }); var columns = [ { text: 'Name', dataField: 'name', width: 300 }, { text: 'Beverage Type', dataField: 'type', width: 300 }, { text: 'Calories', dataField: 'calories', width: 180 }, { text: 'Total Fat', dataField: 'totalfat', width: 120 }, { text: 'Protein', dataField: 'protein' } ]; JQXElements.settings[ "dataTableSettings"] = { pageable:true,pagerButtonsCount:10, source:adapter,columnsResize:true, columns:columns, theme: "light", rendered:"rendered" } </script></head><body> <jqx-data-table settings="dataTableSettings"></jqx-data-table>
|
rtl
|
boolean
|
false
|
Sets or gets the rtl property.
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>DataTable Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script> <script type="text/javascript"> var adapter = new jqx.dataAdapter({ dataType: "json", dataFields: [ { name: 'name', type: 'string' }, { name: 'type', type: 'string' }, { name: 'calories', type: 'int' }, { name: 'totalfat', type: 'string' }, { name: 'protein', type: 'string' } ], id: 'id', url: "../sampledata/beverages.txt" }); var columns = [ { text: 'Name', dataField: 'name', width: 300 }, { text: 'Beverage Type', dataField: 'type', width: 300 }, { text: 'Calories', dataField: 'calories', width: 180 }, { text: 'Total Fat', dataField: 'totalfat', width: 120 }, { text: 'Protein', dataField: 'protein' } ]; JQXElements.settings[ "dataTableSettings"] = { pageable:true,pagerButtonsCount:10, source:adapter,columnsResize:true, columns:columns, theme: "light",rtl:true } </script></head><body> <jqx-data-table settings="dataTableSettings"></jqx-data-table>
|
source
|
object
|
null
|
Sets or gets the source property.
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>DataTable Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script> <script type="text/javascript"> var adapter = new jqx.dataAdapter({ dataType: "json", dataFields: [ { name: 'name', type: 'string' }, { name: 'type', type: 'string' }, { name: 'calories', type: 'int' }, { name: 'totalfat', type: 'string' }, { name: 'protein', type: 'string' } ], id: 'id', url: "../sampledata/beverages.txt" }); var columns = [ { text: 'Name', dataField: 'name', width: 300 }, { text: 'Beverage Type', dataField: 'type', width: 300 }, { text: 'Calories', dataField: 'calories', width: 180 }, { text: 'Total Fat', dataField: 'totalfat', width: 120 }, { text: 'Protein', dataField: 'protein' } ]; JQXElements.settings[ "dataTableSettings"] = { pageable:true,pagerButtonsCount:10, source:adapter,columnsResize:true, columns:columns, theme: "light" } </script></head><body> <jqx-data-table settings="dataTableSettings"></jqx-data-table>
|
sortable
|
boolean
|
false
|
Sets or gets the sortable property.
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>DataTable Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script> <script type="text/javascript"> var adapter = new jqx.dataAdapter({ dataType: "json", dataFields: [ { name: 'name', type: 'string' }, { name: 'type', type: 'string' }, { name: 'calories', type: 'int' }, { name: 'totalfat', type: 'string' }, { name: 'protein', type: 'string' } ], id: 'id', url: "../sampledata/beverages.txt" }); var columns = [ { text: 'Name', dataField: 'name', width: 300 }, { text: 'Beverage Type', dataField: 'type', width: 300 }, { text: 'Calories', dataField: 'calories', width: 180 }, { text: 'Total Fat', dataField: 'totalfat', width: 120 }, { text: 'Protein', dataField: 'protein' } ]; JQXElements.settings[ "dataTableSettings"] = { pageable:true,pagerButtonsCount:10, source:adapter,columnsResize:true, columns:columns, theme: "light",sortable:true } </script></head><body> <jqx-data-table settings="dataTableSettings"></jqx-data-table>
|
showAggregates
|
boolean
|
false
|
Sets or gets the showAggregates property.
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>DataTable Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script> <script type="text/javascript"> var adapter = new jqx.dataAdapter({ dataType: "json", dataFields: [ { name: 'name', type: 'string' }, { name: 'type', type: 'string' }, { name: 'calories', type: 'int' }, { name: 'totalfat', type: 'string' }, { name: 'protein', type: 'string' } ], id: 'id', url: "../sampledata/beverages.txt" }); var columns = [ { text: 'Name', dataField: 'name', width: 300 }, { text: 'Beverage Type', dataField: 'type', width: 300 }, { text: 'Calories', dataField: 'calories', width: 180 }, { text: 'Total Fat', dataField: 'totalfat', width: 120 }, { text: 'Protein', dataField: 'protein' } ]; JQXElements.settings[ "dataTableSettings"] = { pageable:true,pagerButtonsCount:10, source:adapter,columnsResize:true, columns:columns, theme: "light",showAggregates:true } </script></head><body> <jqx-data-table settings="dataTableSettings"></jqx-data-table>
|
showToolbar
|
boolean
|
false
|
Sets or gets the showToolbar property.
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>DataTable Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script> <script type="text/javascript"> var adapter = new jqx.dataAdapter({ dataType: "json", dataFields: [ { name: 'name', type: 'string' }, { name: 'type', type: 'string' }, { name: 'calories', type: 'int' }, { name: 'totalfat', type: 'string' }, { name: 'protein', type: 'string' } ], id: 'id', url: "../sampledata/beverages.txt" }); var columns = [ { text: 'Name', dataField: 'name', width: 300 }, { text: 'Beverage Type', dataField: 'type', width: 300 }, { text: 'Calories', dataField: 'calories', width: 180 }, { text: 'Total Fat', dataField: 'totalfat', width: 120 }, { text: 'Protein', dataField: 'protein' } ]; JQXElements.settings[ "dataTableSettings"] = { pageable:true,pagerButtonsCount:10, source:adapter,columnsResize:true, columns:columns, theme: "light",showToolbar:true } </script></head><body> <jqx-data-table settings="dataTableSettings"></jqx-data-table>
|
showStatusbar
|
boolean
|
false
|
Sets or gets the showStatusbar property.
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>DataTable Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script> <script type="text/javascript"> var adapter = new jqx.dataAdapter({ dataType: "json", dataFields: [ { name: 'name', type: 'string' }, { name: 'type', type: 'string' }, { name: 'calories', type: 'int' }, { name: 'totalfat', type: 'string' }, { name: 'protein', type: 'string' } ], id: 'id', url: "../sampledata/beverages.txt" }); var columns = [ { text: 'Name', dataField: 'name', width: 300 }, { text: 'Beverage Type', dataField: 'type', width: 300 }, { text: 'Calories', dataField: 'calories', width: 180 }, { text: 'Total Fat', dataField: 'totalfat', width: 120 }, { text: 'Protein', dataField: 'protein' } ]; JQXElements.settings[ "dataTableSettings"] = { pageable:true,pagerButtonsCount:10, source:adapter,columnsResize:true, columns:columns, theme: "light",showStatusbar:true } </script></head><body> <jqx-data-table settings="dataTableSettings"></jqx-data-table>
|
statusBarHeight
|
number
|
34
|
Sets or gets the statusBarHeight property.
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>DataTable Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script> <script type="text/javascript"> var adapter = new jqx.dataAdapter({ dataType: "json", dataFields: [ { name: 'name', type: 'string' }, { name: 'type', type: 'string' }, { name: 'calories', type: 'int' }, { name: 'totalfat', type: 'string' }, { name: 'protein', type: 'string' } ], id: 'id', url: "../sampledata/beverages.txt" }); var columns = [ { text: 'Name', dataField: 'name', width: 300 }, { text: 'Beverage Type', dataField: 'type', width: 300 }, { text: 'Calories', dataField: 'calories', width: 180 }, { text: 'Total Fat', dataField: 'totalfat', width: 120 }, { text: 'Protein', dataField: 'protein' } ]; JQXElements.settings[ "dataTableSettings"] = { pageable:true,pagerButtonsCount:10, source:adapter,columnsResize:true, columns:columns, theme: "light",statusBarHeight:40 } </script></head><body> <jqx-data-table settings="dataTableSettings"></jqx-data-table>
|
scrollBarSize
|
number
|
17
|
Sets or gets the scrollBarSize property.
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>DataTable Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script> <script type="text/javascript"> var adapter = new jqx.dataAdapter({ dataType: "json", dataFields: [ { name: 'name', type: 'string' }, { name: 'type', type: 'string' }, { name: 'calories', type: 'int' }, { name: 'totalfat', type: 'string' }, { name: 'protein', type: 'string' } ], id: 'id', url: "../sampledata/beverages.txt" }); var columns = [ { text: 'Name', dataField: 'name', width: 300 }, { text: 'Beverage Type', dataField: 'type', width: 300 }, { text: 'Calories', dataField: 'calories', width: 180 }, { text: 'Total Fat', dataField: 'totalfat', width: 120 }, { text: 'Protein', dataField: 'protein' } ]; JQXElements.settings[ "dataTableSettings"] = { pageable:true,pagerButtonsCount:10, source:adapter,columnsResize:true, columns:columns, theme: "light",scrollBarSize:20 } </script></head><body> <jqx-data-table settings="dataTableSettings"></jqx-data-table>
|
selectionMode
|
string
|
"multipleRows"
|
Sets or gets the selectionMode property.
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>DataTable Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script> <script type="text/javascript"> var adapter = new jqx.dataAdapter({ dataType: "json", dataFields: [ { name: 'name', type: 'string' }, { name: 'type', type: 'string' }, { name: 'calories', type: 'int' }, { name: 'totalfat', type: 'string' }, { name: 'protein', type: 'string' } ], id: 'id', url: "../sampledata/beverages.txt" }); var columns = [ { text: 'Name', dataField: 'name', width: 300 }, { text: 'Beverage Type', dataField: 'type', width: 300 }, { text: 'Calories', dataField: 'calories', width: 180 }, { text: 'Total Fat', dataField: 'totalfat', width: 120 }, { text: 'Protein', dataField: 'protein' } ]; JQXElements.settings[ "dataTableSettings"] = { pageable:true,pagerButtonsCount:10, source:adapter,columnsResize:true, columns:columns, theme: "light", selectionMode:"singleRow" } </script></head><body> <jqx-data-table settings="dataTableSettings"></jqx-data-table>
|
serverProcessing
|
boolean
|
false
|
Sets or gets the serverProcessing property.
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>DataTable Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script> <script type="text/javascript"> var adapter = new jqx.dataAdapter({ dataType: "json", dataFields: [ { name: 'name', type: 'string' }, { name: 'type', type: 'string' }, { name: 'calories', type: 'int' }, { name: 'totalfat', type: 'string' }, { name: 'protein', type: 'string' } ], id: 'id', url: "../sampledata/beverages.txt" }); var columns = [ { text: 'Name', dataField: 'name', width: 300 }, { text: 'Beverage Type', dataField: 'type', width: 300 }, { text: 'Calories', dataField: 'calories', width: 180 }, { text: 'Total Fat', dataField: 'totalfat', width: 120 }, { text: 'Protein', dataField: 'protein' } ]; JQXElements.settings[ "dataTableSettings"] = { pageable:true,pagerButtonsCount:10, source:adapter,columnsResize:true, columns:columns, theme: "light",serverProcessing:true } </script></head><body> <jqx-data-table settings="dataTableSettings"></jqx-data-table>
|
showHeader
|
boolean
|
true
|
Sets or gets the showHeader property.
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>DataTable Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script> <script type="text/javascript"> var adapter = new jqx.dataAdapter({ dataType: "json", dataFields: [ { name: 'name', type: 'string' }, { name: 'type', type: 'string' }, { name: 'calories', type: 'int' }, { name: 'totalfat', type: 'string' }, { name: 'protein', type: 'string' } ], id: 'id', url: "../sampledata/beverages.txt" }); var columns = [ { text: 'Name', dataField: 'name', width: 300 }, { text: 'Beverage Type', dataField: 'type', width: 300 }, { text: 'Calories', dataField: 'calories', width: 180 }, { text: 'Total Fat', dataField: 'totalfat', width: 120 }, { text: 'Protein', dataField: 'protein' } ]; JQXElements.settings[ "dataTableSettings"] = { pageable:true,pagerButtonsCount:10, source:adapter,columnsResize:true, columns:columns, theme: "light",showHeader:false } </script></head><body> <jqx-data-table settings="dataTableSettings"></jqx-data-table>
|
theme
|
string
|
''
|
Sets or gets the theme property.
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>DataTable Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script> <script type="text/javascript"> var adapter = new jqx.dataAdapter({ dataType: "json", dataFields: [ { name: 'name', type: 'string' }, { name: 'type', type: 'string' }, { name: 'calories', type: 'int' }, { name: 'totalfat', type: 'string' }, { name: 'protein', type: 'string' } ], id: 'id', url: "../sampledata/beverages.txt" }); var columns = [ { text: 'Name', dataField: 'name', width: 300 }, { text: 'Beverage Type', dataField: 'type', width: 300 }, { text: 'Calories', dataField: 'calories', width: 180 }, { text: 'Total Fat', dataField: 'totalfat', width: 120 }, { text: 'Protein', dataField: 'protein' } ]; JQXElements.settings[ "dataTableSettings"] = { pageable:true,pagerButtonsCount:10, source:adapter,columnsResize:true, columns:columns, theme: "light" } </script></head><body> <jqx-data-table settings="dataTableSettings"></jqx-data-table>
|
toolbarHeight
|
number
|
34
|
Sets or gets the toolbarHeight property.
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>DataTable Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script> <script type="text/javascript"> var adapter = new jqx.dataAdapter({ dataType: "json", dataFields: [ { name: 'name', type: 'string' }, { name: 'type', type: 'string' }, { name: 'calories', type: 'int' }, { name: 'totalfat', type: 'string' }, { name: 'protein', type: 'string' } ], id: 'id', url: "../sampledata/beverages.txt" }); var columns = [ { text: 'Name', dataField: 'name', width: 300 }, { text: 'Beverage Type', dataField: 'type', width: 300 }, { text: 'Calories', dataField: 'calories', width: 180 }, { text: 'Total Fat', dataField: 'totalfat', width: 120 }, { text: 'Protein', dataField: 'protein' } ]; JQXElements.settings[ "dataTableSettings"] = { pageable:true,pagerButtonsCount:10, source:adapter,columnsResize:true, columns:columns, theme: "light",toolbarHeight:40 } </script></head><body> <jqx-data-table settings="dataTableSettings"></jqx-data-table>
|
width
|
number
|
null
|
Sets or gets the width property.
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>DataTable Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script> <script type="text/javascript"> var adapter = new jqx.dataAdapter({ dataType: "json", dataFields: [ { name: 'name', type: 'string' }, { name: 'type', type: 'string' }, { name: 'calories', type: 'int' }, { name: 'totalfat', type: 'string' }, { name: 'protein', type: 'string' } ], id: 'id', url: "../sampledata/beverages.txt" }); var columns = [ { text: 'Name', dataField: 'name', width: 300 }, { text: 'Beverage Type', dataField: 'type', width: 300 }, { text: 'Calories', dataField: 'calories', width: 180 }, { text: 'Total Fat', dataField: 'totalfat', width: 120 }, { text: 'Protein', dataField: 'protein' } ]; JQXElements.settings[ "dataTableSettings"] = { pageable:true,pagerButtonsCount:10, source:adapter,columnsResize:true, columns:columns, theme: "light" } </script></head><body> <jqx-data-table settings="dataTableSettings"></jqx-data-table>
|
|
bindingComplete
|
Event
|
|
Code examples
Bind to the bindingComplete event of jqxDataTable.
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>DataTable Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script> <script type="text/javascript"> var adapter = new jqx.dataAdapter({ dataType: "json", dataFields: [ { name: 'name', type: 'string' }, { name: 'type', type: 'string' }, { name: 'calories', type: 'int' }, { name: 'totalfat', type: 'string' }, { name: 'protein', type: 'string' } ], id: 'id', url: "../sampledata/beverages.txt" }); var columns = [ { text: 'Name', dataField: 'name', width: 300 }, { text: 'Beverage Type', dataField: 'type', width: 300 }, { text: 'Calories', dataField: 'calories', width: 180 }, { text: 'Total Fat', dataField: 'totalfat', width: 120 }, { text: 'Protein', dataField: 'protein' } ]; JQXElements.settings[ "dataTableSettings"] = { pageable:true,pagerButtonsCount:10, source:adapter,columnsResize:true, columns:columns, theme: "light" } window.onload = function() { document.querySelector( "jqx-data-table").addEventListener("bindingComplete", function(event) { // Your code here. }); }; </script></head><body> <jqx-data-table settings="dataTableSettings"></jqx-data-table>
|
cellBeginEdit
|
Event
|
|
Code examples
Bind to the cellBeginEdit event of jqxDataTable.
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>DataTable Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script> <script type="text/javascript"> var adapter = new jqx.dataAdapter({ dataType: "json", dataFields: [ { name: 'name', type: 'string' }, { name: 'type', type: 'string' }, { name: 'calories', type: 'int' }, { name: 'totalfat', type: 'string' }, { name: 'protein', type: 'string' } ], id: 'id', url: "../sampledata/beverages.txt" }); var columns = [ { text: 'Name', dataField: 'name', width: 300 }, { text: 'Beverage Type', dataField: 'type', width: 300 }, { text: 'Calories', dataField: 'calories', width: 180 }, { text: 'Total Fat', dataField: 'totalfat', width: 120 }, { text: 'Protein', dataField: 'protein' } ]; JQXElements.settings[ "dataTableSettings"] = { pageable:true,pagerButtonsCount:10, source:adapter,columnsResize:true, columns:columns, theme: "light" } window.onload = function() { document.querySelector( "jqx-data-table").addEventListener("cellBeginEdit", function(event) { // Your code here. }); }; </script></head><body> <jqx-data-table settings="dataTableSettings"></jqx-data-table>
|
cellEndEdit
|
Event
|
|
Code examples
Bind to the cellEndEdit event of jqxDataTable.
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>DataTable Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script> <script type="text/javascript"> var adapter = new jqx.dataAdapter({ dataType: "json", dataFields: [ { name: 'name', type: 'string' }, { name: 'type', type: 'string' }, { name: 'calories', type: 'int' }, { name: 'totalfat', type: 'string' }, { name: 'protein', type: 'string' } ], id: 'id', url: "../sampledata/beverages.txt" }); var columns = [ { text: 'Name', dataField: 'name', width: 300 }, { text: 'Beverage Type', dataField: 'type', width: 300 }, { text: 'Calories', dataField: 'calories', width: 180 }, { text: 'Total Fat', dataField: 'totalfat', width: 120 }, { text: 'Protein', dataField: 'protein' } ]; JQXElements.settings[ "dataTableSettings"] = { pageable:true,pagerButtonsCount:10, source:adapter,columnsResize:true, columns:columns, theme: "light" } window.onload = function() { document.querySelector( "jqx-data-table").addEventListener("cellEndEdit", function(event) { // Your code here. }); }; </script></head><body> <jqx-data-table settings="dataTableSettings"></jqx-data-table>
|
cellValueChanged
|
Event
|
|
Code examples
Bind to the cellValueChanged event of jqxDataTable.
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>DataTable Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script> <script type="text/javascript"> var adapter = new jqx.dataAdapter({ dataType: "json", dataFields: [ { name: 'name', type: 'string' }, { name: 'type', type: 'string' }, { name: 'calories', type: 'int' }, { name: 'totalfat', type: 'string' }, { name: 'protein', type: 'string' } ], id: 'id', url: "../sampledata/beverages.txt" }); var columns = [ { text: 'Name', dataField: 'name', width: 300 }, { text: 'Beverage Type', dataField: 'type', width: 300 }, { text: 'Calories', dataField: 'calories', width: 180 }, { text: 'Total Fat', dataField: 'totalfat', width: 120 }, { text: 'Protein', dataField: 'protein' } ]; JQXElements.settings[ "dataTableSettings"] = { pageable:true,pagerButtonsCount:10, source:adapter,columnsResize:true, columns:columns, theme: "light" } window.onload = function() { document.querySelector( "jqx-data-table").addEventListener("cellValueChanged", function(event) { // Your code here. }); }; </script></head><body> <jqx-data-table settings="dataTableSettings"></jqx-data-table>
|
columnResized
|
Event
|
|
Code examples
Bind to the columnResized event of jqxDataTable.
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>DataTable Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script> <script type="text/javascript"> var adapter = new jqx.dataAdapter({ dataType: "json", dataFields: [ { name: 'name', type: 'string' }, { name: 'type', type: 'string' }, { name: 'calories', type: 'int' }, { name: 'totalfat', type: 'string' }, { name: 'protein', type: 'string' } ], id: 'id', url: "../sampledata/beverages.txt" }); var columns = [ { text: 'Name', dataField: 'name', width: 300 }, { text: 'Beverage Type', dataField: 'type', width: 300 }, { text: 'Calories', dataField: 'calories', width: 180 }, { text: 'Total Fat', dataField: 'totalfat', width: 120 }, { text: 'Protein', dataField: 'protein' } ]; JQXElements.settings[ "dataTableSettings"] = { pageable:true,pagerButtonsCount:10, source:adapter,columnsResize:true, columns:columns, theme: "light" } window.onload = function() { document.querySelector( "jqx-data-table").addEventListener("columnResized", function(event) { // Your code here. }); }; </script></head><body> <jqx-data-table settings="dataTableSettings"></jqx-data-table>
|
columnReordered
|
Event
|
|
Code examples
Bind to the columnReordered event of jqxDataTable.
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>DataTable Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script> <script type="text/javascript"> var adapter = new jqx.dataAdapter({ dataType: "json", dataFields: [ { name: 'name', type: 'string' }, { name: 'type', type: 'string' }, { name: 'calories', type: 'int' }, { name: 'totalfat', type: 'string' }, { name: 'protein', type: 'string' } ], id: 'id', url: "../sampledata/beverages.txt" }); var columns = [ { text: 'Name', dataField: 'name', width: 300 }, { text: 'Beverage Type', dataField: 'type', width: 300 }, { text: 'Calories', dataField: 'calories', width: 180 }, { text: 'Total Fat', dataField: 'totalfat', width: 120 }, { text: 'Protein', dataField: 'protein' } ]; JQXElements.settings[ "dataTableSettings"] = { pageable:true,pagerButtonsCount:10, source:adapter,columnsResize:true, columns:columns, theme: "light" } window.onload = function() { document.querySelector( "jqx-data-table").addEventListener("columnReordered", function(event) { // Your code here. }); }; </script></head><body> <jqx-data-table settings="dataTableSettings"></jqx-data-table>
|
sort
|
Event
|
|
Code examples
Bind to the sort event of jqxDataTable.
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>DataTable Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script> <script type="text/javascript"> var adapter = new jqx.dataAdapter({ dataType: "json", dataFields: [ { name: 'name', type: 'string' }, { name: 'type', type: 'string' }, { name: 'calories', type: 'int' }, { name: 'totalfat', type: 'string' }, { name: 'protein', type: 'string' } ], id: 'id', url: "../sampledata/beverages.txt" }); var columns = [ { text: 'Name', dataField: 'name', width: 300 }, { text: 'Beverage Type', dataField: 'type', width: 300 }, { text: 'Calories', dataField: 'calories', width: 180 }, { text: 'Total Fat', dataField: 'totalfat', width: 120 }, { text: 'Protein', dataField: 'protein' } ]; JQXElements.settings[ "dataTableSettings"] = { pageable:true,pagerButtonsCount:10, source:adapter,columnsResize:true, columns:columns, theme: "light" } window.onload = function() { document.querySelector( "jqx-data-table").addEventListener("sort", function(event) { // Your code here. }); }; </script></head><body> <jqx-data-table settings="dataTableSettings"></jqx-data-table>
|
filter
|
Event
|
|
Code examples
Bind to the filter event of jqxDataTable.
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>DataTable Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script> <script type="text/javascript"> var adapter = new jqx.dataAdapter({ dataType: "json", dataFields: [ { name: 'name', type: 'string' }, { name: 'type', type: 'string' }, { name: 'calories', type: 'int' }, { name: 'totalfat', type: 'string' }, { name: 'protein', type: 'string' } ], id: 'id', url: "../sampledata/beverages.txt" }); var columns = [ { text: 'Name', dataField: 'name', width: 300 }, { text: 'Beverage Type', dataField: 'type', width: 300 }, { text: 'Calories', dataField: 'calories', width: 180 }, { text: 'Total Fat', dataField: 'totalfat', width: 120 }, { text: 'Protein', dataField: 'protein' } ]; JQXElements.settings[ "dataTableSettings"] = { pageable:true,pagerButtonsCount:10, source:adapter,columnsResize:true, columns:columns, theme: "light" } window.onload = function() { document.querySelector( "jqx-data-table").addEventListener("filter", function(event) { // Your code here. }); }; </script></head><body> <jqx-data-table settings="dataTableSettings"></jqx-data-table>
|
pageChanged
|
Event
|
|
Code examples
Bind to the pageChanged event of jqxDataTable.
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>DataTable Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script> <script type="text/javascript"> var adapter = new jqx.dataAdapter({ dataType: "json", dataFields: [ { name: 'name', type: 'string' }, { name: 'type', type: 'string' }, { name: 'calories', type: 'int' }, { name: 'totalfat', type: 'string' }, { name: 'protein', type: 'string' } ], id: 'id', url: "../sampledata/beverages.txt" }); var columns = [ { text: 'Name', dataField: 'name', width: 300 }, { text: 'Beverage Type', dataField: 'type', width: 300 }, { text: 'Calories', dataField: 'calories', width: 180 }, { text: 'Total Fat', dataField: 'totalfat', width: 120 }, { text: 'Protein', dataField: 'protein' } ]; JQXElements.settings[ "dataTableSettings"] = { pageable:true,pagerButtonsCount:10, source:adapter,columnsResize:true, columns:columns, theme: "light" } window.onload = function() { document.querySelector( "jqx-data-table").addEventListener("pageChanged", function(event) { // Your code here. }); }; </script></head><body> <jqx-data-table settings="dataTableSettings"></jqx-data-table>
|
pageSizeChanged
|
Event
|
|
Code examples
Bind to the pageSizeChanged event of jqxDataTable.
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>DataTable Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script> <script type="text/javascript"> var adapter = new jqx.dataAdapter({ dataType: "json", dataFields: [ { name: 'name', type: 'string' }, { name: 'type', type: 'string' }, { name: 'calories', type: 'int' }, { name: 'totalfat', type: 'string' }, { name: 'protein', type: 'string' } ], id: 'id', url: "../sampledata/beverages.txt" }); var columns = [ { text: 'Name', dataField: 'name', width: 300 }, { text: 'Beverage Type', dataField: 'type', width: 300 }, { text: 'Calories', dataField: 'calories', width: 180 }, { text: 'Total Fat', dataField: 'totalfat', width: 120 }, { text: 'Protein', dataField: 'protein' } ]; JQXElements.settings[ "dataTableSettings"] = { pageable:true,pagerButtonsCount:10, source:adapter,columnsResize:true, columns:columns, theme: "light" } window.onload = function() { document.querySelector( "jqx-data-table").addEventListener("pageSizeChanged", function(event) { // Your code here. }); }; </script></head><body> <jqx-data-table settings="dataTableSettings"></jqx-data-table>
|
rowClick
|
Event
|
|
Code examples
Bind to the rowClick event of jqxDataTable.
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>DataTable Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script> <script type="text/javascript"> var adapter = new jqx.dataAdapter({ dataType: "json", dataFields: [ { name: 'name', type: 'string' }, { name: 'type', type: 'string' }, { name: 'calories', type: 'int' }, { name: 'totalfat', type: 'string' }, { name: 'protein', type: 'string' } ], id: 'id', url: "../sampledata/beverages.txt" }); var columns = [ { text: 'Name', dataField: 'name', width: 300 }, { text: 'Beverage Type', dataField: 'type', width: 300 }, { text: 'Calories', dataField: 'calories', width: 180 }, { text: 'Total Fat', dataField: 'totalfat', width: 120 }, { text: 'Protein', dataField: 'protein' } ]; JQXElements.settings[ "dataTableSettings"] = { pageable:true,pagerButtonsCount:10, source:adapter,columnsResize:true, columns:columns, theme: "light" } window.onload = function() { document.querySelector( "jqx-data-table").addEventListener("rowClick", function(event) { // Your code here. }); }; </script></head><body> <jqx-data-table settings="dataTableSettings"></jqx-data-table>
|
rowDoubleClick
|
Event
|
|
Code examples
Bind to the rowDoubleClick event of jqxDataTable.
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>DataTable Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script> <script type="text/javascript"> var adapter = new jqx.dataAdapter({ dataType: "json", dataFields: [ { name: 'name', type: 'string' }, { name: 'type', type: 'string' }, { name: 'calories', type: 'int' }, { name: 'totalfat', type: 'string' }, { name: 'protein', type: 'string' } ], id: 'id', url: "../sampledata/beverages.txt" }); var columns = [ { text: 'Name', dataField: 'name', width: 300 }, { text: 'Beverage Type', dataField: 'type', width: 300 }, { text: 'Calories', dataField: 'calories', width: 180 }, { text: 'Total Fat', dataField: 'totalfat', width: 120 }, { text: 'Protein', dataField: 'protein' } ]; JQXElements.settings[ "dataTableSettings"] = { pageable:true,pagerButtonsCount:10, source:adapter,columnsResize:true, columns:columns, theme: "light" } window.onload = function() { document.querySelector( "jqx-data-table").addEventListener("rowDoubleClick", function(event) { // Your code here. }); }; </script></head><body> <jqx-data-table settings="dataTableSettings"></jqx-data-table>
|
rowSelect
|
Event
|
|
Code examples
Bind to the rowSelect event of jqxDataTable.
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>DataTable Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script> <script type="text/javascript"> var adapter = new jqx.dataAdapter({ dataType: "json", dataFields: [ { name: 'name', type: 'string' }, { name: 'type', type: 'string' }, { name: 'calories', type: 'int' }, { name: 'totalfat', type: 'string' }, { name: 'protein', type: 'string' } ], id: 'id', url: "../sampledata/beverages.txt" }); var columns = [ { text: 'Name', dataField: 'name', width: 300 }, { text: 'Beverage Type', dataField: 'type', width: 300 }, { text: 'Calories', dataField: 'calories', width: 180 }, { text: 'Total Fat', dataField: 'totalfat', width: 120 }, { text: 'Protein', dataField: 'protein' } ]; JQXElements.settings[ "dataTableSettings"] = { pageable:true,pagerButtonsCount:10, source:adapter,columnsResize:true, columns:columns, theme: "light" } window.onload = function() { document.querySelector( "jqx-data-table").addEventListener("rowSelect", function(event) { // Your code here. }); }; </script></head><body> <jqx-data-table settings="dataTableSettings"></jqx-data-table>
|
rowUnselect
|
Event
|
|
Code examples
Bind to the rowUnselect event of jqxDataTable.
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>DataTable Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script> <script type="text/javascript"> var adapter = new jqx.dataAdapter({ dataType: "json", dataFields: [ { name: 'name', type: 'string' }, { name: 'type', type: 'string' }, { name: 'calories', type: 'int' }, { name: 'totalfat', type: 'string' }, { name: 'protein', type: 'string' } ], id: 'id', url: "../sampledata/beverages.txt" }); var columns = [ { text: 'Name', dataField: 'name', width: 300 }, { text: 'Beverage Type', dataField: 'type', width: 300 }, { text: 'Calories', dataField: 'calories', width: 180 }, { text: 'Total Fat', dataField: 'totalfat', width: 120 }, { text: 'Protein', dataField: 'protein' } ]; JQXElements.settings[ "dataTableSettings"] = { pageable:true,pagerButtonsCount:10, source:adapter,columnsResize:true, columns:columns, theme: "light" } window.onload = function() { document.querySelector( "jqx-data-table").addEventListener("rowUnselect", function(event) { // Your code here. }); }; </script></head><body> <jqx-data-table settings="dataTableSettings"></jqx-data-table>
|
rowBeginEdit
|
Event
|
|
Code examples
Bind to the rowBeginEdit event of jqxDataTable.
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>DataTable Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script> <script type="text/javascript"> var adapter = new jqx.dataAdapter({ dataType: "json", dataFields: [ { name: 'name', type: 'string' }, { name: 'type', type: 'string' }, { name: 'calories', type: 'int' }, { name: 'totalfat', type: 'string' }, { name: 'protein', type: 'string' } ], id: 'id', url: "../sampledata/beverages.txt" }); var columns = [ { text: 'Name', dataField: 'name', width: 300 }, { text: 'Beverage Type', dataField: 'type', width: 300 }, { text: 'Calories', dataField: 'calories', width: 180 }, { text: 'Total Fat', dataField: 'totalfat', width: 120 }, { text: 'Protein', dataField: 'protein' } ]; JQXElements.settings[ "dataTableSettings"] = { pageable:true,pagerButtonsCount:10, source:adapter,columnsResize:true, columns:columns, theme: "light" } window.onload = function() { document.querySelector( "jqx-data-table").addEventListener("rowBeginEdit", function(event) { // Your code here. }); }; </script></head><body> <jqx-data-table settings="dataTableSettings"></jqx-data-table>
|
rowEndEdit
|
Event
|
|
Code examples
Bind to the rowEndEdit event of jqxDataTable.
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>DataTable Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script> <script type="text/javascript"> var adapter = new jqx.dataAdapter({ dataType: "json", dataFields: [ { name: 'name', type: 'string' }, { name: 'type', type: 'string' }, { name: 'calories', type: 'int' }, { name: 'totalfat', type: 'string' }, { name: 'protein', type: 'string' } ], id: 'id', url: "../sampledata/beverages.txt" }); var columns = [ { text: 'Name', dataField: 'name', width: 300 }, { text: 'Beverage Type', dataField: 'type', width: 300 }, { text: 'Calories', dataField: 'calories', width: 180 }, { text: 'Total Fat', dataField: 'totalfat', width: 120 }, { text: 'Protein', dataField: 'protein' } ]; JQXElements.settings[ "dataTableSettings"] = { pageable:true,pagerButtonsCount:10, source:adapter,columnsResize:true, columns:columns, theme: "light" } window.onload = function() { document.querySelector( "jqx-data-table").addEventListener("rowEndEdit", function(event) { // Your code here. }); }; </script></head><body> <jqx-data-table settings="dataTableSettings"></jqx-data-table>
|
rowExpand
|
Event
|
|
Code examples
Bind to the rowExpand event of jqxDataTable.
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>DataTable Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script> <script type="text/javascript"> var adapter = new jqx.dataAdapter({ dataType: "json", dataFields: [ { name: 'name', type: 'string' }, { name: 'type', type: 'string' }, { name: 'calories', type: 'int' }, { name: 'totalfat', type: 'string' }, { name: 'protein', type: 'string' } ], id: 'id', url: "../sampledata/beverages.txt" }); var columns = [ { text: 'Name', dataField: 'name', width: 300 }, { text: 'Beverage Type', dataField: 'type', width: 300 }, { text: 'Calories', dataField: 'calories', width: 180 }, { text: 'Total Fat', dataField: 'totalfat', width: 120 }, { text: 'Protein', dataField: 'protein' } ]; JQXElements.settings[ "dataTableSettings"] = { pageable:true,pagerButtonsCount:10, source:adapter,columnsResize:true, columns:columns, theme: "light" } window.onload = function() { document.querySelector( "jqx-data-table").addEventListener("rowExpand", function(event) { // Your code here. }); }; </script></head><body> <jqx-data-table settings="dataTableSettings"></jqx-data-table>
|
rowCollapse
|
Event
|
|
Code examples
Bind to the rowCollapse event of jqxDataTable.
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>DataTable Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script> <script type="text/javascript"> var adapter = new jqx.dataAdapter({ dataType: "json", dataFields: [ { name: 'name', type: 'string' }, { name: 'type', type: 'string' }, { name: 'calories', type: 'int' }, { name: 'totalfat', type: 'string' }, { name: 'protein', type: 'string' } ], id: 'id', url: "../sampledata/beverages.txt" }); var columns = [ { text: 'Name', dataField: 'name', width: 300 }, { text: 'Beverage Type', dataField: 'type', width: 300 }, { text: 'Calories', dataField: 'calories', width: 180 }, { text: 'Total Fat', dataField: 'totalfat', width: 120 }, { text: 'Protein', dataField: 'protein' } ]; JQXElements.settings[ "dataTableSettings"] = { pageable:true,pagerButtonsCount:10, source:adapter,columnsResize:true, columns:columns, theme: "light" } window.onload = function() { document.querySelector( "jqx-data-table").addEventListener("rowCollapse", function(event) { // Your code here. }); }; </script></head><body> <jqx-data-table settings="dataTableSettings"></jqx-data-table>
|
|
addRow
|
Method
|
|
Parameter |
Type |
Description |
rowIndex |
number |
|
rowData |
object |
|
rowPosition |
string |
"last" and "first". By default "last" is used |
Return Value
void
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>DataTable Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script> <script type="text/javascript"> var adapter = new jqx.dataAdapter({ dataType: "json", dataFields: [ { name: 'name', type: 'string' }, { name: 'type', type: 'string' }, { name: 'calories', type: 'int' }, { name: 'totalfat', type: 'string' }, { name: 'protein', type: 'string' } ], id: 'id', url: "../sampledata/beverages.txt" }); var columns = [ { text: 'Name', dataField: 'name', width: 300 }, { text: 'Beverage Type', dataField: 'type', width: 300 }, { text: 'Calories', dataField: 'calories', width: 180 }, { text: 'Total Fat', dataField: 'totalfat', width: 120 }, { text: 'Protein', dataField: 'protein' } ]; JQXElements.settings[ "dataTableSettings"] = { width:850 } window.onload = function() { document.querySelector( "jqx-data-table").addRow(10,{}, 'first'); } </script></head><body> <jqx-data-table settings="dataTableSettings"></jqx-data-table>
|
addFilter
|
Method
|
|
Parameter |
Type |
Description |
dataField |
string |
|
filerGroup |
object |
|
Return Value
void
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>DataTable Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script> <script type="text/javascript"> var adapter = new jqx.dataAdapter({ dataType: "json", dataFields: [ { name: 'name', type: 'string' }, { name: 'type', type: 'string' }, { name: 'calories', type: 'int' }, { name: 'totalfat', type: 'string' }, { name: 'protein', type: 'string' } ], id: 'id', url: "../sampledata/beverages.txt" }); var columns = [ { text: 'Name', dataField: 'name', width: 300 }, { text: 'Beverage Type', dataField: 'type', width: 300 }, { text: 'Calories', dataField: 'calories', width: 180 }, { text: 'Total Fat', dataField: 'totalfat', width: 120 }, { text: 'Protein', dataField: 'protein' } ]; JQXElements.settings[ "dataTableSettings"] = { width:850 } window.onload = function() { document.querySelector( "jqx-data-table").addFilter( 'firstName',new $.jqx.filtergroup()); } </script></head><body> <jqx-data-table settings="dataTableSettings"></jqx-data-table>
|
applyFilters
|
Method
|
|
Parameter |
Type |
Description |
None |
|
|
Return Value
void
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>DataTable Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script> <script type="text/javascript"> var adapter = new jqx.dataAdapter({ dataType: "json", dataFields: [ { name: 'name', type: 'string' }, { name: 'type', type: 'string' }, { name: 'calories', type: 'int' }, { name: 'totalfat', type: 'string' }, { name: 'protein', type: 'string' } ], id: 'id', url: "../sampledata/beverages.txt" }); var columns = [ { text: 'Name', dataField: 'name', width: 300 }, { text: 'Beverage Type', dataField: 'type', width: 300 }, { text: 'Calories', dataField: 'calories', width: 180 }, { text: 'Total Fat', dataField: 'totalfat', width: 120 }, { text: 'Protein', dataField: 'protein' } ]; JQXElements.settings[ "dataTableSettings"] = { width:850 } window.onload = function() { document.querySelector( "jqx-data-table").applyFilters(); } </script></head><body> <jqx-data-table settings="dataTableSettings"></jqx-data-table>
|
beginUpdate
|
Method
|
|
Parameter |
Type |
Description |
None |
|
|
Return Value
void
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>DataTable Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script> <script type="text/javascript"> var adapter = new jqx.dataAdapter({ dataType: "json", dataFields: [ { name: 'name', type: 'string' }, { name: 'type', type: 'string' }, { name: 'calories', type: 'int' }, { name: 'totalfat', type: 'string' }, { name: 'protein', type: 'string' } ], id: 'id', url: "../sampledata/beverages.txt" }); var columns = [ { text: 'Name', dataField: 'name', width: 300 }, { text: 'Beverage Type', dataField: 'type', width: 300 }, { text: 'Calories', dataField: 'calories', width: 180 }, { text: 'Total Fat', dataField: 'totalfat', width: 120 }, { text: 'Protein', dataField: 'protein' } ]; JQXElements.settings[ "dataTableSettings"] = { width:850 } window.onload = function() { document.querySelector( "jqx-data-table").beginUpdate(); } </script></head><body> <jqx-data-table settings="dataTableSettings"></jqx-data-table>
|
beginRowEdit
|
Method
|
|
Parameter |
Type |
Description |
rowIndex |
number |
|
Return Value
void
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>DataTable Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script> <script type="text/javascript"> var adapter = new jqx.dataAdapter({ dataType: "json", dataFields: [ { name: 'name', type: 'string' }, { name: 'type', type: 'string' }, { name: 'calories', type: 'int' }, { name: 'totalfat', type: 'string' }, { name: 'protein', type: 'string' } ], id: 'id', url: "../sampledata/beverages.txt" }); var columns = [ { text: 'Name', dataField: 'name', width: 300 }, { text: 'Beverage Type', dataField: 'type', width: 300 }, { text: 'Calories', dataField: 'calories', width: 180 }, { text: 'Total Fat', dataField: 'totalfat', width: 120 }, { text: 'Protein', dataField: 'protein' } ]; JQXElements.settings[ "dataTableSettings"] = { width:850 } window.onload = function() { document.querySelector( "jqx-data-table").beginRowEdit(10); } </script></head><body> <jqx-data-table settings="dataTableSettings"></jqx-data-table>
|
beginCellEdit
|
Method
|
|
Parameter |
Type |
Description |
rowIndex |
number |
|
dataField |
string |
|
Return Value
void
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>DataTable Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script> <script type="text/javascript"> var adapter = new jqx.dataAdapter({ dataType: "json", dataFields: [ { name: 'name', type: 'string' }, { name: 'type', type: 'string' }, { name: 'calories', type: 'int' }, { name: 'totalfat', type: 'string' }, { name: 'protein', type: 'string' } ], id: 'id', url: "../sampledata/beverages.txt" }); var columns = [ { text: 'Name', dataField: 'name', width: 300 }, { text: 'Beverage Type', dataField: 'type', width: 300 }, { text: 'Calories', dataField: 'calories', width: 180 }, { text: 'Total Fat', dataField: 'totalfat', width: 120 }, { text: 'Protein', dataField: 'protein' } ]; JQXElements.settings[ "dataTableSettings"] = { width:850 } window.onload = function() { document.querySelector( "jqx-data-table").beginCellEdit(10, 'firstName'); } </script></head><body> <jqx-data-table settings="dataTableSettings"></jqx-data-table>
|
clearSelection
|
Method
|
|
Parameter |
Type |
Description |
None |
|
|
Return Value
void
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>DataTable Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script> <script type="text/javascript"> var adapter = new jqx.dataAdapter({ dataType: "json", dataFields: [ { name: 'name', type: 'string' }, { name: 'type', type: 'string' }, { name: 'calories', type: 'int' }, { name: 'totalfat', type: 'string' }, { name: 'protein', type: 'string' } ], id: 'id', url: "../sampledata/beverages.txt" }); var columns = [ { text: 'Name', dataField: 'name', width: 300 }, { text: 'Beverage Type', dataField: 'type', width: 300 }, { text: 'Calories', dataField: 'calories', width: 180 }, { text: 'Total Fat', dataField: 'totalfat', width: 120 }, { text: 'Protein', dataField: 'protein' } ]; JQXElements.settings[ "dataTableSettings"] = { width:850 } window.onload = function() { document.querySelector( "jqx-data-table").clearSelection(); } </script></head><body> <jqx-data-table settings="dataTableSettings"></jqx-data-table>
|
clearFilters
|
Method
|
|
Parameter |
Type |
Description |
None |
|
|
Return Value
void
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>DataTable Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script> <script type="text/javascript"> var adapter = new jqx.dataAdapter({ dataType: "json", dataFields: [ { name: 'name', type: 'string' }, { name: 'type', type: 'string' }, { name: 'calories', type: 'int' }, { name: 'totalfat', type: 'string' }, { name: 'protein', type: 'string' } ], id: 'id', url: "../sampledata/beverages.txt" }); var columns = [ { text: 'Name', dataField: 'name', width: 300 }, { text: 'Beverage Type', dataField: 'type', width: 300 }, { text: 'Calories', dataField: 'calories', width: 180 }, { text: 'Total Fat', dataField: 'totalfat', width: 120 }, { text: 'Protein', dataField: 'protein' } ]; JQXElements.settings[ "dataTableSettings"] = { width:850 } window.onload = function() { document.querySelector( "jqx-data-table").clearFilters(); } </script></head><body> <jqx-data-table settings="dataTableSettings"></jqx-data-table>
|
clear
|
Method
|
|
Parameter |
Type |
Description |
None |
|
|
Return Value
void
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>DataTable Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script> <script type="text/javascript"> var adapter = new jqx.dataAdapter({ dataType: "json", dataFields: [ { name: 'name', type: 'string' }, { name: 'type', type: 'string' }, { name: 'calories', type: 'int' }, { name: 'totalfat', type: 'string' }, { name: 'protein', type: 'string' } ], id: 'id', url: "../sampledata/beverages.txt" }); var columns = [ { text: 'Name', dataField: 'name', width: 300 }, { text: 'Beverage Type', dataField: 'type', width: 300 }, { text: 'Calories', dataField: 'calories', width: 180 }, { text: 'Total Fat', dataField: 'totalfat', width: 120 }, { text: 'Protein', dataField: 'protein' } ]; JQXElements.settings[ "dataTableSettings"] = { width:850 } window.onload = function() { document.querySelector( "jqx-data-table").clear(); } </script></head><body> <jqx-data-table settings="dataTableSettings"></jqx-data-table>
|
destroy
|
Method
|
|
Parameter |
Type |
Description |
None |
|
|
Return Value
void
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>DataTable Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script> <script type="text/javascript"> var adapter = new jqx.dataAdapter({ dataType: "json", dataFields: [ { name: 'name', type: 'string' }, { name: 'type', type: 'string' }, { name: 'calories', type: 'int' }, { name: 'totalfat', type: 'string' }, { name: 'protein', type: 'string' } ], id: 'id', url: "../sampledata/beverages.txt" }); var columns = [ { text: 'Name', dataField: 'name', width: 300 }, { text: 'Beverage Type', dataField: 'type', width: 300 }, { text: 'Calories', dataField: 'calories', width: 180 }, { text: 'Total Fat', dataField: 'totalfat', width: 120 }, { text: 'Protein', dataField: 'protein' } ]; JQXElements.settings[ "dataTableSettings"] = { width:850 } window.onload = function() { document.querySelector( "jqx-data-table").destroy(); } </script></head><body> <jqx-data-table settings="dataTableSettings"></jqx-data-table>
|
deleteRow
|
Method
|
|
Parameter |
Type |
Description |
rowIndex |
number |
|
Return Value
void
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>DataTable Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script> <script type="text/javascript"> var adapter = new jqx.dataAdapter({ dataType: "json", dataFields: [ { name: 'name', type: 'string' }, { name: 'type', type: 'string' }, { name: 'calories', type: 'int' }, { name: 'totalfat', type: 'string' }, { name: 'protein', type: 'string' } ], id: 'id', url: "../sampledata/beverages.txt" }); var columns = [ { text: 'Name', dataField: 'name', width: 300 }, { text: 'Beverage Type', dataField: 'type', width: 300 }, { text: 'Calories', dataField: 'calories', width: 180 }, { text: 'Total Fat', dataField: 'totalfat', width: 120 }, { text: 'Protein', dataField: 'protein' } ]; JQXElements.settings[ "dataTableSettings"] = { width:850 } window.onload = function() { document.querySelector( "jqx-data-table").deleteRow(0); } </script></head><body> <jqx-data-table settings="dataTableSettings"></jqx-data-table>
|
endUpdate
|
Method
|
|
Parameter |
Type |
Description |
None |
|
|
Return Value
void
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>DataTable Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script> <script type="text/javascript"> var adapter = new jqx.dataAdapter({ dataType: "json", dataFields: [ { name: 'name', type: 'string' }, { name: 'type', type: 'string' }, { name: 'calories', type: 'int' }, { name: 'totalfat', type: 'string' }, { name: 'protein', type: 'string' } ], id: 'id', url: "../sampledata/beverages.txt" }); var columns = [ { text: 'Name', dataField: 'name', width: 300 }, { text: 'Beverage Type', dataField: 'type', width: 300 }, { text: 'Calories', dataField: 'calories', width: 180 }, { text: 'Total Fat', dataField: 'totalfat', width: 120 }, { text: 'Protein', dataField: 'protein' } ]; JQXElements.settings[ "dataTableSettings"] = { width:850 } window.onload = function() { document.querySelector( "jqx-data-table").endUpdate(); } </script></head><body> <jqx-data-table settings="dataTableSettings"></jqx-data-table>
|
ensureRowVisible
|
Method
|
|
Parameter |
Type |
Description |
rowIndex |
number |
|
Return Value
void
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>DataTable Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script> <script type="text/javascript"> var adapter = new jqx.dataAdapter({ dataType: "json", dataFields: [ { name: 'name', type: 'string' }, { name: 'type', type: 'string' }, { name: 'calories', type: 'int' }, { name: 'totalfat', type: 'string' }, { name: 'protein', type: 'string' } ], id: 'id', url: "../sampledata/beverages.txt" }); var columns = [ { text: 'Name', dataField: 'name', width: 300 }, { text: 'Beverage Type', dataField: 'type', width: 300 }, { text: 'Calories', dataField: 'calories', width: 180 }, { text: 'Total Fat', dataField: 'totalfat', width: 120 }, { text: 'Protein', dataField: 'protein' } ]; JQXElements.settings[ "dataTableSettings"] = { width:850 } window.onload = function() { document.querySelector( "jqx-data-table").ensureRowVisible(10); } </script></head><body> <jqx-data-table settings="dataTableSettings"></jqx-data-table>
|
endRowEdit
|
Method
|
|
Parameter |
Type |
Description |
rowIndex |
number |
|
cancelChanges |
boolean |
|
Return Value
void
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>DataTable Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script> <script type="text/javascript"> var adapter = new jqx.dataAdapter({ dataType: "json", dataFields: [ { name: 'name', type: 'string' }, { name: 'type', type: 'string' }, { name: 'calories', type: 'int' }, { name: 'totalfat', type: 'string' }, { name: 'protein', type: 'string' } ], id: 'id', url: "../sampledata/beverages.txt" }); var columns = [ { text: 'Name', dataField: 'name', width: 300 }, { text: 'Beverage Type', dataField: 'type', width: 300 }, { text: 'Calories', dataField: 'calories', width: 180 }, { text: 'Total Fat', dataField: 'totalfat', width: 120 }, { text: 'Protein', dataField: 'protein' } ]; JQXElements.settings[ "dataTableSettings"] = { width:850 } window.onload = function() { document.querySelector( "jqx-data-table").endRowEdit(10,true); } </script></head><body> <jqx-data-table settings="dataTableSettings"></jqx-data-table>
|
endCellEdit
|
Method
|
|
Parameter |
Type |
Description |
rowIndex |
number |
|
dataField |
string |
|
Return Value
void
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>DataTable Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script> <script type="text/javascript"> var adapter = new jqx.dataAdapter({ dataType: "json", dataFields: [ { name: 'name', type: 'string' }, { name: 'type', type: 'string' }, { name: 'calories', type: 'int' }, { name: 'totalfat', type: 'string' }, { name: 'protein', type: 'string' } ], id: 'id', url: "../sampledata/beverages.txt" }); var columns = [ { text: 'Name', dataField: 'name', width: 300 }, { text: 'Beverage Type', dataField: 'type', width: 300 }, { text: 'Calories', dataField: 'calories', width: 180 }, { text: 'Total Fat', dataField: 'totalfat', width: 120 }, { text: 'Protein', dataField: 'protein' } ]; JQXElements.settings[ "dataTableSettings"] = { width:850 } window.onload = function() { document.querySelector( "jqx-data-table").endCellEdit(10, 'firstName'); } </script></head><body> <jqx-data-table settings="dataTableSettings"></jqx-data-table>
|
exportData
|
Method
|
|
Parameter |
Type |
Description |
exportDataType |
string |
'xls', 'html', 'xml', 'json', 'csv', 'tsv' or 'pdf' |
Return Value
Object(optional)
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>DataTable Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script> <script type="text/javascript"> var adapter = new jqx.dataAdapter({ dataType: "json", dataFields: [ { name: 'name', type: 'string' }, { name: 'type', type: 'string' }, { name: 'calories', type: 'int' }, { name: 'totalfat', type: 'string' }, { name: 'protein', type: 'string' } ], id: 'id', url: "../sampledata/beverages.txt" }); var columns = [ { text: 'Name', dataField: 'name', width: 300 }, { text: 'Beverage Type', dataField: 'type', width: 300 }, { text: 'Calories', dataField: 'calories', width: 180 }, { text: 'Total Fat', dataField: 'totalfat', width: 120 }, { text: 'Protein', dataField: 'protein' } ]; JQXElements.settings[ "dataTableSettings"] = { width:850 } window.onload = function() { document.querySelector( "jqx-data-table").exportData( 'xls'); } </script></head><body> <jqx-data-table settings="dataTableSettings"></jqx-data-table>
|
focus
|
Method
|
|
Parameter |
Type |
Description |
None |
|
|
Return Value
void
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>DataTable Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script> <script type="text/javascript"> var adapter = new jqx.dataAdapter({ dataType: "json", dataFields: [ { name: 'name', type: 'string' }, { name: 'type', type: 'string' }, { name: 'calories', type: 'int' }, { name: 'totalfat', type: 'string' }, { name: 'protein', type: 'string' } ], id: 'id', url: "../sampledata/beverages.txt" }); var columns = [ { text: 'Name', dataField: 'name', width: 300 }, { text: 'Beverage Type', dataField: 'type', width: 300 }, { text: 'Calories', dataField: 'calories', width: 180 }, { text: 'Total Fat', dataField: 'totalfat', width: 120 }, { text: 'Protein', dataField: 'protein' } ]; JQXElements.settings[ "dataTableSettings"] = { width:850 } window.onload = function() { document.querySelector( "jqx-data-table").focus(); } </script></head><body> <jqx-data-table settings="dataTableSettings"></jqx-data-table>
|
getColumnProperty
|
Method
|
|
Parameter |
Type |
Description |
dataField |
string |
|
propertyName |
string |
|
Return Value
Object
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>DataTable Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script> <script type="text/javascript"> var adapter = new jqx.dataAdapter({ dataType: "json", dataFields: [ { name: 'name', type: 'string' }, { name: 'type', type: 'string' }, { name: 'calories', type: 'int' }, { name: 'totalfat', type: 'string' }, { name: 'protein', type: 'string' } ], id: 'id', url: "../sampledata/beverages.txt" }); var columns = [ { text: 'Name', dataField: 'name', width: 300 }, { text: 'Beverage Type', dataField: 'type', width: 300 }, { text: 'Calories', dataField: 'calories', width: 180 }, { text: 'Total Fat', dataField: 'totalfat', width: 120 }, { text: 'Protein', dataField: 'protein' } ]; JQXElements.settings[ "dataTableSettings"] = { width:850 } window.onload = function() { document.querySelector( "jqx-data-table").getColumnProperty( 'firstName'); } </script></head><body> <jqx-data-table settings="dataTableSettings"></jqx-data-table>
|
goToPage
|
Method
|
|
Parameter |
Type |
Description |
pageIndex |
number |
|
Return Value
void
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>DataTable Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script> <script type="text/javascript"> var adapter = new jqx.dataAdapter({ dataType: "json", dataFields: [ { name: 'name', type: 'string' }, { name: 'type', type: 'string' }, { name: 'calories', type: 'int' }, { name: 'totalfat', type: 'string' }, { name: 'protein', type: 'string' } ], id: 'id', url: "../sampledata/beverages.txt" }); var columns = [ { text: 'Name', dataField: 'name', width: 300 }, { text: 'Beverage Type', dataField: 'type', width: 300 }, { text: 'Calories', dataField: 'calories', width: 180 }, { text: 'Total Fat', dataField: 'totalfat', width: 120 }, { text: 'Protein', dataField: 'protein' } ]; JQXElements.settings[ "dataTableSettings"] = { width:850 } window.onload = function() { document.querySelector( "jqx-data-table").goToPage(10); } </script></head><body> <jqx-data-table settings="dataTableSettings"></jqx-data-table>
|
goToPrevPage
|
Method
|
|
Parameter |
Type |
Description |
None |
|
|
Return Value
void
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>DataTable Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script> <script type="text/javascript"> var adapter = new jqx.dataAdapter({ dataType: "json", dataFields: [ { name: 'name', type: 'string' }, { name: 'type', type: 'string' }, { name: 'calories', type: 'int' }, { name: 'totalfat', type: 'string' }, { name: 'protein', type: 'string' } ], id: 'id', url: "../sampledata/beverages.txt" }); var columns = [ { text: 'Name', dataField: 'name', width: 300 }, { text: 'Beverage Type', dataField: 'type', width: 300 }, { text: 'Calories', dataField: 'calories', width: 180 }, { text: 'Total Fat', dataField: 'totalfat', width: 120 }, { text: 'Protein', dataField: 'protein' } ]; JQXElements.settings[ "dataTableSettings"] = { width:850 } window.onload = function() { document.querySelector( "jqx-data-table").goToPrevPage(); } </script></head><body> <jqx-data-table settings="dataTableSettings"></jqx-data-table>
|
goToNextPage
|
Method
|
|
Parameter |
Type |
Description |
None |
|
|
Return Value
void
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>DataTable Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script> <script type="text/javascript"> var adapter = new jqx.dataAdapter({ dataType: "json", dataFields: [ { name: 'name', type: 'string' }, { name: 'type', type: 'string' }, { name: 'calories', type: 'int' }, { name: 'totalfat', type: 'string' }, { name: 'protein', type: 'string' } ], id: 'id', url: "../sampledata/beverages.txt" }); var columns = [ { text: 'Name', dataField: 'name', width: 300 }, { text: 'Beverage Type', dataField: 'type', width: 300 }, { text: 'Calories', dataField: 'calories', width: 180 }, { text: 'Total Fat', dataField: 'totalfat', width: 120 }, { text: 'Protein', dataField: 'protein' } ]; JQXElements.settings[ "dataTableSettings"] = { width:850 } window.onload = function() { document.querySelector( "jqx-data-table").goToNextPage(); } </script></head><body> <jqx-data-table settings="dataTableSettings"></jqx-data-table>
|
getSelection
|
Method
|
|
Parameter |
Type |
Description |
None |
|
|
Return Value
Array
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>DataTable Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script> <script type="text/javascript"> var adapter = new jqx.dataAdapter({ dataType: "json", dataFields: [ { name: 'name', type: 'string' }, { name: 'type', type: 'string' }, { name: 'calories', type: 'int' }, { name: 'totalfat', type: 'string' }, { name: 'protein', type: 'string' } ], id: 'id', url: "../sampledata/beverages.txt" }); var columns = [ { text: 'Name', dataField: 'name', width: 300 }, { text: 'Beverage Type', dataField: 'type', width: 300 }, { text: 'Calories', dataField: 'calories', width: 180 }, { text: 'Total Fat', dataField: 'totalfat', width: 120 }, { text: 'Protein', dataField: 'protein' } ]; JQXElements.settings[ "dataTableSettings"] = { width:850 } window.onload = function() { var result = document.querySelector( "jqx-data-table").getSelection(); } </script></head><body> <jqx-data-table settings="dataTableSettings"></jqx-data-table>
|
getRows
|
Method
|
|
Parameter |
Type |
Description |
None |
|
|
Return Value
Array
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>DataTable Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script> <script type="text/javascript"> var adapter = new jqx.dataAdapter({ dataType: "json", dataFields: [ { name: 'name', type: 'string' }, { name: 'type', type: 'string' }, { name: 'calories', type: 'int' }, { name: 'totalfat', type: 'string' }, { name: 'protein', type: 'string' } ], id: 'id', url: "../sampledata/beverages.txt" }); var columns = [ { text: 'Name', dataField: 'name', width: 300 }, { text: 'Beverage Type', dataField: 'type', width: 300 }, { text: 'Calories', dataField: 'calories', width: 180 }, { text: 'Total Fat', dataField: 'totalfat', width: 120 }, { text: 'Protein', dataField: 'protein' } ]; JQXElements.settings[ "dataTableSettings"] = { width:850 } window.onload = function() { var result = document.querySelector( "jqx-data-table").getRows(); } </script></head><body> <jqx-data-table settings="dataTableSettings"></jqx-data-table>
|
getView
|
Method
|
|
Parameter |
Type |
Description |
None |
|
|
Return Value
Array
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>DataTable Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script> <script type="text/javascript"> var adapter = new jqx.dataAdapter({ dataType: "json", dataFields: [ { name: 'name', type: 'string' }, { name: 'type', type: 'string' }, { name: 'calories', type: 'int' }, { name: 'totalfat', type: 'string' }, { name: 'protein', type: 'string' } ], id: 'id', url: "../sampledata/beverages.txt" }); var columns = [ { text: 'Name', dataField: 'name', width: 300 }, { text: 'Beverage Type', dataField: 'type', width: 300 }, { text: 'Calories', dataField: 'calories', width: 180 }, { text: 'Total Fat', dataField: 'totalfat', width: 120 }, { text: 'Protein', dataField: 'protein' } ]; JQXElements.settings[ "dataTableSettings"] = { width:850 } window.onload = function() { var result = document.querySelector( "jqx-data-table").getView(); } </script></head><body> <jqx-data-table settings="dataTableSettings"></jqx-data-table>
|
getCellValue
|
Method
|
|
Parameter |
Type |
Description |
rowIndex |
number |
|
dataField |
string |
|
Return Value
Object
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>DataTable Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script> <script type="text/javascript"> var adapter = new jqx.dataAdapter({ dataType: "json", dataFields: [ { name: 'name', type: 'string' }, { name: 'type', type: 'string' }, { name: 'calories', type: 'int' }, { name: 'totalfat', type: 'string' }, { name: 'protein', type: 'string' } ], id: 'id', url: "../sampledata/beverages.txt" }); var columns = [ { text: 'Name', dataField: 'name', width: 300 }, { text: 'Beverage Type', dataField: 'type', width: 300 }, { text: 'Calories', dataField: 'calories', width: 180 }, { text: 'Total Fat', dataField: 'totalfat', width: 120 }, { text: 'Protein', dataField: 'protein' } ]; JQXElements.settings[ "dataTableSettings"] = { width:850 } window.onload = function() { document.querySelector( "jqx-data-table").getCellValue(1, 'firstName'); } </script></head><body> <jqx-data-table settings="dataTableSettings"></jqx-data-table>
|
hideColumn
|
Method
|
|
Parameter |
Type |
Description |
dataField |
string |
|
Return Value
void
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>DataTable Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script> <script type="text/javascript"> var adapter = new jqx.dataAdapter({ dataType: "json", dataFields: [ { name: 'name', type: 'string' }, { name: 'type', type: 'string' }, { name: 'calories', type: 'int' }, { name: 'totalfat', type: 'string' }, { name: 'protein', type: 'string' } ], id: 'id', url: "../sampledata/beverages.txt" }); var columns = [ { text: 'Name', dataField: 'name', width: 300 }, { text: 'Beverage Type', dataField: 'type', width: 300 }, { text: 'Calories', dataField: 'calories', width: 180 }, { text: 'Total Fat', dataField: 'totalfat', width: 120 }, { text: 'Protein', dataField: 'protein' } ]; JQXElements.settings[ "dataTableSettings"] = { width:850 } window.onload = function() { document.querySelector( "jqx-data-table").hideColumn( 'firstName'); } </script></head><body> <jqx-data-table settings="dataTableSettings"></jqx-data-table>
|
hideDetails
|
Method
|
|
Parameter |
Type |
Description |
rowIndex |
boolean |
|
Return Value
void
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>DataTable Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script> <script type="text/javascript"> var adapter = new jqx.dataAdapter({ dataType: "json", dataFields: [ { name: 'name', type: 'string' }, { name: 'type', type: 'string' }, { name: 'calories', type: 'int' }, { name: 'totalfat', type: 'string' }, { name: 'protein', type: 'string' } ], id: 'id', url: "../sampledata/beverages.txt" }); var columns = [ { text: 'Name', dataField: 'name', width: 300 }, { text: 'Beverage Type', dataField: 'type', width: 300 }, { text: 'Calories', dataField: 'calories', width: 180 }, { text: 'Total Fat', dataField: 'totalfat', width: 120 }, { text: 'Protein', dataField: 'protein' } ]; JQXElements.settings[ "dataTableSettings"] = { width:850 } window.onload = function() { document.querySelector( "jqx-data-table").hideDetails(1); } </script></head><body> <jqx-data-table settings="dataTableSettings"></jqx-data-table>
|
isBindingCompleted
|
Method
|
|
Parameter |
Type |
Description |
None |
|
|
Return Value
Boolean
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>DataTable Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script> <script type="text/javascript"> var adapter = new jqx.dataAdapter({ dataType: "json", dataFields: [ { name: 'name', type: 'string' }, { name: 'type', type: 'string' }, { name: 'calories', type: 'int' }, { name: 'totalfat', type: 'string' }, { name: 'protein', type: 'string' } ], id: 'id', url: "../sampledata/beverages.txt" }); var columns = [ { text: 'Name', dataField: 'name', width: 300 }, { text: 'Beverage Type', dataField: 'type', width: 300 }, { text: 'Calories', dataField: 'calories', width: 180 }, { text: 'Total Fat', dataField: 'totalfat', width: 120 }, { text: 'Protein', dataField: 'protein' } ]; JQXElements.settings[ "dataTableSettings"] = { width:850 } window.onload = function() { var result = document.querySelector( "jqx-data-table").isBindingCompleted(); } </script></head><body> <jqx-data-table settings="dataTableSettings"></jqx-data-table>
|
lockRow
|
Method
|
|
Parameter |
Type |
Description |
rowIndex |
number |
|
Return Value
void
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>DataTable Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script> <script type="text/javascript"> var adapter = new jqx.dataAdapter({ dataType: "json", dataFields: [ { name: 'name', type: 'string' }, { name: 'type', type: 'string' }, { name: 'calories', type: 'int' }, { name: 'totalfat', type: 'string' }, { name: 'protein', type: 'string' } ], id: 'id', url: "../sampledata/beverages.txt" }); var columns = [ { text: 'Name', dataField: 'name', width: 300 }, { text: 'Beverage Type', dataField: 'type', width: 300 }, { text: 'Calories', dataField: 'calories', width: 180 }, { text: 'Total Fat', dataField: 'totalfat', width: 120 }, { text: 'Protein', dataField: 'protein' } ]; JQXElements.settings[ "dataTableSettings"] = { width:850 } window.onload = function() { document.querySelector( "jqx-data-table").lockRow(10); } </script></head><body> <jqx-data-table settings="dataTableSettings"></jqx-data-table>
|
refresh
|
Method
|
|
Parameter |
Type |
Description |
None |
|
|
Return Value
void
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>DataTable Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script> <script type="text/javascript"> var adapter = new jqx.dataAdapter({ dataType: "json", dataFields: [ { name: 'name', type: 'string' }, { name: 'type', type: 'string' }, { name: 'calories', type: 'int' }, { name: 'totalfat', type: 'string' }, { name: 'protein', type: 'string' } ], id: 'id', url: "../sampledata/beverages.txt" }); var columns = [ { text: 'Name', dataField: 'name', width: 300 }, { text: 'Beverage Type', dataField: 'type', width: 300 }, { text: 'Calories', dataField: 'calories', width: 180 }, { text: 'Total Fat', dataField: 'totalfat', width: 120 }, { text: 'Protein', dataField: 'protein' } ]; JQXElements.settings[ "dataTableSettings"] = { width:850 } window.onload = function() { document.querySelector( "jqx-data-table").refresh(); } </script></head><body> <jqx-data-table settings="dataTableSettings"></jqx-data-table>
|
render
|
Method
|
|
Parameter |
Type |
Description |
None |
|
|
Return Value
void
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>DataTable Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script> <script type="text/javascript"> var adapter = new jqx.dataAdapter({ dataType: "json", dataFields: [ { name: 'name', type: 'string' }, { name: 'type', type: 'string' }, { name: 'calories', type: 'int' }, { name: 'totalfat', type: 'string' }, { name: 'protein', type: 'string' } ], id: 'id', url: "../sampledata/beverages.txt" }); var columns = [ { text: 'Name', dataField: 'name', width: 300 }, { text: 'Beverage Type', dataField: 'type', width: 300 }, { text: 'Calories', dataField: 'calories', width: 180 }, { text: 'Total Fat', dataField: 'totalfat', width: 120 }, { text: 'Protein', dataField: 'protein' } ]; JQXElements.settings[ "dataTableSettings"] = { width:850 } window.onload = function() { document.querySelector( "jqx-data-table").render(); } </script></head><body> <jqx-data-table settings="dataTableSettings"></jqx-data-table>
|
removeFilter
|
Method
|
|
Parameter |
Type |
Description |
dataField |
string |
|
Return Value
void
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>DataTable Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script> <script type="text/javascript"> var adapter = new jqx.dataAdapter({ dataType: "json", dataFields: [ { name: 'name', type: 'string' }, { name: 'type', type: 'string' }, { name: 'calories', type: 'int' }, { name: 'totalfat', type: 'string' }, { name: 'protein', type: 'string' } ], id: 'id', url: "../sampledata/beverages.txt" }); var columns = [ { text: 'Name', dataField: 'name', width: 300 }, { text: 'Beverage Type', dataField: 'type', width: 300 }, { text: 'Calories', dataField: 'calories', width: 180 }, { text: 'Total Fat', dataField: 'totalfat', width: 120 }, { text: 'Protein', dataField: 'protein' } ]; JQXElements.settings[ "dataTableSettings"] = { width:850 } window.onload = function() { document.querySelector( "jqx-data-table").removeFilter(firstName); } </script></head><body> <jqx-data-table settings="dataTableSettings"></jqx-data-table>
|
scrollOffset
|
Method
|
|
Parameter |
Type |
Description |
top |
number |
|
left |
number |
|
Return Value
Object
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>DataTable Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script> <script type="text/javascript"> var adapter = new jqx.dataAdapter({ dataType: "json", dataFields: [ { name: 'name', type: 'string' }, { name: 'type', type: 'string' }, { name: 'calories', type: 'int' }, { name: 'totalfat', type: 'string' }, { name: 'protein', type: 'string' } ], id: 'id', url: "../sampledata/beverages.txt" }); var columns = [ { text: 'Name', dataField: 'name', width: 300 }, { text: 'Beverage Type', dataField: 'type', width: 300 }, { text: 'Calories', dataField: 'calories', width: 180 }, { text: 'Total Fat', dataField: 'totalfat', width: 120 }, { text: 'Protein', dataField: 'protein' } ]; JQXElements.settings[ "dataTableSettings"] = { width:850 } window.onload = function() { document.querySelector( "jqx-data-table").scrollOffset(10,0); } </script></head><body> <jqx-data-table settings="dataTableSettings"></jqx-data-table>
|
setColumnProperty
|
Method
|
|
Parameter |
Type |
Description |
dataField |
string |
|
propertyName |
string |
|
propertyValue |
object |
|
Return Value
void
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>DataTable Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script> <script type="text/javascript"> var adapter = new jqx.dataAdapter({ dataType: "json", dataFields: [ { name: 'name', type: 'string' }, { name: 'type', type: 'string' }, { name: 'calories', type: 'int' }, { name: 'totalfat', type: 'string' }, { name: 'protein', type: 'string' } ], id: 'id', url: "../sampledata/beverages.txt" }); var columns = [ { text: 'Name', dataField: 'name', width: 300 }, { text: 'Beverage Type', dataField: 'type', width: 300 }, { text: 'Calories', dataField: 'calories', width: 180 }, { text: 'Total Fat', dataField: 'totalfat', width: 120 }, { text: 'Protein', dataField: 'protein' } ]; JQXElements.settings[ "dataTableSettings"] = { width:850 } window.onload = function() { document.querySelector( "jqx-data-table").setColumnProperty( 'firstName','text','New Text'); } </script></head><body> <jqx-data-table settings="dataTableSettings"></jqx-data-table>
|
showColumn
|
Method
|
|
Parameter |
Type |
Description |
dataField |
string |
|
Return Value
void
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>DataTable Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script> <script type="text/javascript"> var adapter = new jqx.dataAdapter({ dataType: "json", dataFields: [ { name: 'name', type: 'string' }, { name: 'type', type: 'string' }, { name: 'calories', type: 'int' }, { name: 'totalfat', type: 'string' }, { name: 'protein', type: 'string' } ], id: 'id', url: "../sampledata/beverages.txt" }); var columns = [ { text: 'Name', dataField: 'name', width: 300 }, { text: 'Beverage Type', dataField: 'type', width: 300 }, { text: 'Calories', dataField: 'calories', width: 180 }, { text: 'Total Fat', dataField: 'totalfat', width: 120 }, { text: 'Protein', dataField: 'protein' } ]; JQXElements.settings[ "dataTableSettings"] = { width:850 } window.onload = function() { document.querySelector( "jqx-data-table").showColumn( 'firstName'); } </script></head><body> <jqx-data-table settings="dataTableSettings"></jqx-data-table>
|
selectRow
|
Method
|
|
Parameter |
Type |
Description |
rowIndex |
number |
|
Return Value
void
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>DataTable Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script> <script type="text/javascript"> var adapter = new jqx.dataAdapter({ dataType: "json", dataFields: [ { name: 'name', type: 'string' }, { name: 'type', type: 'string' }, { name: 'calories', type: 'int' }, { name: 'totalfat', type: 'string' }, { name: 'protein', type: 'string' } ], id: 'id', url: "../sampledata/beverages.txt" }); var columns = [ { text: 'Name', dataField: 'name', width: 300 }, { text: 'Beverage Type', dataField: 'type', width: 300 }, { text: 'Calories', dataField: 'calories', width: 180 }, { text: 'Total Fat', dataField: 'totalfat', width: 120 }, { text: 'Protein', dataField: 'protein' } ]; JQXElements.settings[ "dataTableSettings"] = { width:850 } window.onload = function() { document.querySelector( "jqx-data-table").selectRow(1); } </script></head><body> <jqx-data-table settings="dataTableSettings"></jqx-data-table>
|
showDetails
|
Method
|
|
Parameter |
Type |
Description |
rowIndex |
number |
|
Return Value
void
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>DataTable Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script> <script type="text/javascript"> var adapter = new jqx.dataAdapter({ dataType: "json", dataFields: [ { name: 'name', type: 'string' }, { name: 'type', type: 'string' }, { name: 'calories', type: 'int' }, { name: 'totalfat', type: 'string' }, { name: 'protein', type: 'string' } ], id: 'id', url: "../sampledata/beverages.txt" }); var columns = [ { text: 'Name', dataField: 'name', width: 300 }, { text: 'Beverage Type', dataField: 'type', width: 300 }, { text: 'Calories', dataField: 'calories', width: 180 }, { text: 'Total Fat', dataField: 'totalfat', width: 120 }, { text: 'Protein', dataField: 'protein' } ]; JQXElements.settings[ "dataTableSettings"] = { width:850 } window.onload = function() { document.querySelector( "jqx-data-table").showDetails(1); } </script></head><body> <jqx-data-table settings="dataTableSettings"></jqx-data-table>
|
setCellValue
|
Method
|
|
Parameter |
Type |
Description |
rowIndex |
number |
|
dataField |
string |
|
value |
object |
|
Return Value
void
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>DataTable Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script> <script type="text/javascript"> var adapter = new jqx.dataAdapter({ dataType: "json", dataFields: [ { name: 'name', type: 'string' }, { name: 'type', type: 'string' }, { name: 'calories', type: 'int' }, { name: 'totalfat', type: 'string' }, { name: 'protein', type: 'string' } ], id: 'id', url: "../sampledata/beverages.txt" }); var columns = [ { text: 'Name', dataField: 'name', width: 300 }, { text: 'Beverage Type', dataField: 'type', width: 300 }, { text: 'Calories', dataField: 'calories', width: 180 }, { text: 'Total Fat', dataField: 'totalfat', width: 120 }, { text: 'Protein', dataField: 'protein' } ]; JQXElements.settings[ "dataTableSettings"] = { width:850 } window.onload = function() { document.querySelector( "jqx-data-table").setCellValue(1, 'firstName','New Value'); } </script></head><body> <jqx-data-table settings="dataTableSettings"></jqx-data-table>
|
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'>DataTable Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script> <script type="text/javascript"> var adapter = new jqx.dataAdapter({ dataType: "json", dataFields: [ { name: 'name', type: 'string' }, { name: 'type', type: 'string' }, { name: 'calories', type: 'int' }, { name: 'totalfat', type: 'string' }, { name: 'protein', type: 'string' } ], id: 'id', url: "../sampledata/beverages.txt" }); var columns = [ { text: 'Name', dataField: 'name', width: 300 }, { text: 'Beverage Type', dataField: 'type', width: 300 }, { text: 'Calories', dataField: 'calories', width: 180 }, { text: 'Total Fat', dataField: 'totalfat', width: 120 }, { text: 'Protein', dataField: 'protein' } ]; JQXElements.settings[ "dataTableSettings"] = { width:850 } window.onload = function() { document.querySelector( "jqx-data-table").sortBy( 'firstNmae','asc'); } </script></head><body> <jqx-data-table settings="dataTableSettings"></jqx-data-table>
|
updating
|
Method
|
|
Parameter |
Type |
Description |
None |
|
|
Return Value
Boolean
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>DataTable Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script> <script type="text/javascript"> var adapter = new jqx.dataAdapter({ dataType: "json", dataFields: [ { name: 'name', type: 'string' }, { name: 'type', type: 'string' }, { name: 'calories', type: 'int' }, { name: 'totalfat', type: 'string' }, { name: 'protein', type: 'string' } ], id: 'id', url: "../sampledata/beverages.txt" }); var columns = [ { text: 'Name', dataField: 'name', width: 300 }, { text: 'Beverage Type', dataField: 'type', width: 300 }, { text: 'Calories', dataField: 'calories', width: 180 }, { text: 'Total Fat', dataField: 'totalfat', width: 120 }, { text: 'Protein', dataField: 'protein' } ]; JQXElements.settings[ "dataTableSettings"] = { width:850 } window.onload = function() { var result = document.querySelector( "jqx-data-table").updating(); } </script></head><body> <jqx-data-table settings="dataTableSettings"></jqx-data-table>
|
updateBoundData
|
Method
|
|
Parameter |
Type |
Description |
None |
|
|
Return Value
void
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>DataTable Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script> <script type="text/javascript"> var adapter = new jqx.dataAdapter({ dataType: "json", dataFields: [ { name: 'name', type: 'string' }, { name: 'type', type: 'string' }, { name: 'calories', type: 'int' }, { name: 'totalfat', type: 'string' }, { name: 'protein', type: 'string' } ], id: 'id', url: "../sampledata/beverages.txt" }); var columns = [ { text: 'Name', dataField: 'name', width: 300 }, { text: 'Beverage Type', dataField: 'type', width: 300 }, { text: 'Calories', dataField: 'calories', width: 180 }, { text: 'Total Fat', dataField: 'totalfat', width: 120 }, { text: 'Protein', dataField: 'protein' } ]; JQXElements.settings[ "dataTableSettings"] = { width:850 } window.onload = function() { document.querySelector( "jqx-data-table").updateBoundData(); } </script></head><body> <jqx-data-table settings="dataTableSettings"></jqx-data-table>
|
unselectRow
|
Method
|
|
Parameter |
Type |
Description |
rowIndex |
number |
|
Return Value
void
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>DataTable Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script> <script type="text/javascript"> var adapter = new jqx.dataAdapter({ dataType: "json", dataFields: [ { name: 'name', type: 'string' }, { name: 'type', type: 'string' }, { name: 'calories', type: 'int' }, { name: 'totalfat', type: 'string' }, { name: 'protein', type: 'string' } ], id: 'id', url: "../sampledata/beverages.txt" }); var columns = [ { text: 'Name', dataField: 'name', width: 300 }, { text: 'Beverage Type', dataField: 'type', width: 300 }, { text: 'Calories', dataField: 'calories', width: 180 }, { text: 'Total Fat', dataField: 'totalfat', width: 120 }, { text: 'Protein', dataField: 'protein' } ]; JQXElements.settings[ "dataTableSettings"] = { width:850 } window.onload = function() { document.querySelector( "jqx-data-table").unselectRow(1); } </script></head><body> <jqx-data-table settings="dataTableSettings"></jqx-data-table>
|
updateRow
|
Method
|
|
Parameter |
Type |
Description |
rowIndex |
number |
|
rowData |
object |
|
Return Value
void
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>DataTable Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script> <script type="text/javascript"> var adapter = new jqx.dataAdapter({ dataType: "json", dataFields: [ { name: 'name', type: 'string' }, { name: 'type', type: 'string' }, { name: 'calories', type: 'int' }, { name: 'totalfat', type: 'string' }, { name: 'protein', type: 'string' } ], id: 'id', url: "../sampledata/beverages.txt" }); var columns = [ { text: 'Name', dataField: 'name', width: 300 }, { text: 'Beverage Type', dataField: 'type', width: 300 }, { text: 'Calories', dataField: 'calories', width: 180 }, { text: 'Total Fat', dataField: 'totalfat', width: 120 }, { text: 'Protein', dataField: 'protein' } ]; JQXElements.settings[ "dataTableSettings"] = { width:850 } window.onload = function() { document.querySelector( "jqx-data-table").updateRow(1,{}); } </script></head><body> <jqx-data-table settings="dataTableSettings"></jqx-data-table>
|
unlockRow
|
Method
|
|
Parameter |
Type |
Description |
rowIndex |
number |
|
Return Value
void
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>DataTable Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script> <script type="text/javascript"> var adapter = new jqx.dataAdapter({ dataType: "json", dataFields: [ { name: 'name', type: 'string' }, { name: 'type', type: 'string' }, { name: 'calories', type: 'int' }, { name: 'totalfat', type: 'string' }, { name: 'protein', type: 'string' } ], id: 'id', url: "../sampledata/beverages.txt" }); var columns = [ { text: 'Name', dataField: 'name', width: 300 }, { text: 'Beverage Type', dataField: 'type', width: 300 }, { text: 'Calories', dataField: 'calories', width: 180 }, { text: 'Total Fat', dataField: 'totalfat', width: 120 }, { text: 'Protein', dataField: 'protein' } ]; JQXElements.settings[ "dataTableSettings"] = { width:850 } window.onload = function() { document.querySelector( "jqx-data-table").unlockRow(1); } </script></head><body> <jqx-data-table settings="dataTableSettings"></jqx-data-table>
|