altRows
|
boolean
|
false
|
Sets or gets the altRows property.
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>TreeGrid Custom Element Filtering and Sorting</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,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/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtreegrid.js"></script> <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script> <script type="text/javascript"> var source = new jqx.dataAdapter({ dataType: "json", dataFields: [ { name: 'EmployeeID', type: 'number' }, { name: 'ReportsTo', type: 'number' }, { name: 'FirstName', type: 'string' }, { name: 'LastName', type: 'string' }, { name: 'Country', type: 'string' }, { name: 'City', type: 'string' }, { name: 'Address', type: 'string' }, { name: 'Title', type: 'string' }, { name: 'HireDate', type: 'date' }, { name: 'BirthDate', type: 'date' } ], hierarchy: { keyDataField: { name: 'EmployeeID' }, parentDataField: { name: 'ReportsTo' } }, id: 'EmployeeID', localData: [ { "EmployeeID": 1, "FirstName": "Nancy", "LastName": "Davolio", "ReportsTo": 2, "Country": "USA", "Title": "Sales Representative", "HireDate": "1992-05-01 00:00:00", "BirthDate": "1948-12-08 00:00:00", "City": "Seattle", "Address": "507 - 20th Ave. E.Apt. 2A" }, { "EmployeeID": 2, "FirstName": "Andrew", "LastName": "Fuller", "ReportsTo": null, "Country": "USA", "Title": "Vice President, Sales", "HireDate": "1992-08-14 00:00:00", "BirthDate": "1952-02-19 00:00:00", "City": "Tacoma", "Address": "908 W. Capital Way" }, { "EmployeeID": 3, "FirstName": "Janet", "LastName": "Leverling", "ReportsTo": 2, "Country": "USA", "Title": "Sales Representative", "HireDate": "1992-04-01 00:00:00", "BirthDate": "1963-08-30 00:00:00", "City": "Kirkland", "Address": "722 Moss Bay Blvd." }, { "EmployeeID": 4, "FirstName": "Margaret", "LastName": "Peacock", "ReportsTo": 2, "Country": "USA", "Title": "Sales Representative", "HireDate": "1993-05-03 00:00:00", "BirthDate": "1937-09-19 00:00:00", "City": "Redmond", "Address": "4110 Old Redmond Rd." }, { "EmployeeID": 5, "FirstName": "Steven", "LastName": "Buchanan", "ReportsTo": 2, "Country": "UK", "Title": "Sales Manager", "HireDate": "1993-10-17 00:00:00", "BirthDate": "1955-03-04 00:00:00", "City": "London", "Address": "14 Garrett Hill" }, { "EmployeeID": 6, "FirstName": "Michael", "LastName": "Suyama", "ReportsTo": 5, "Country": "UK", "Title": "Sales Representative", "HireDate": "1993-10-17 00:00:00", "BirthDate": "1963-07-02 00:00:00", "City": "London", "Address": "Coventry House Miner Rd." }, { "EmployeeID": 7, "FirstName": "Robert", "LastName": "King", "ReportsTo": 5, "Country": "UK", "Title": "Sales Representative", "HireDate": "1994-01-02 00:00:00", "BirthDate": "1960-05-29 00:00:00", "City": "London", "Address": "Edgeham Hollow Winchester Way" }, { "EmployeeID": 8, "FirstName": "Laura", "LastName": "Callahan", "ReportsTo": 2, "Country": "USA", "Title": "Inside Sales Coordinator", "HireDate": "1994-03-05 00:00:00", "BirthDate": "1958-01-09 00:00:00", "City": "Seattle", "Address": "4726 - 11th Ave. N.E." }, { "EmployeeID": 9, "FirstName": "Anne", "LastName": "Dodsworth", "ReportsTo": 5, "Country": "UK", "Title": "Sales Representative", "HireDate": "1994-11-15 00:00:00", "BirthDate": "1966-01-27 00:00:00", "City": "London", "Address": "7 Houndstooth Rd." } ]}); var columns = [ { text: 'FirstName', columnGroup: 'Name', dataField: 'FirstName', width: 200 }, { text: 'LastName', columnGroup: 'Name', dataField: 'LastName', width: 200 }, { text: 'Title', dataField: 'Title', width: 160 }, { text: 'Birth Date', dataField: 'BirthDate', cellsFormat: 'd', width: 120 }, { text: 'Hire Date', dataField: 'HireDate', cellsFormat: 'd', width: 120 }, { text: 'Address', dataField: 'Address', width: 250 }, { text: 'City', dataField: 'City', width: 120 }, { text: 'Country', dataField: 'Country' } ]; var columnGroups = [ { text: 'Name', name: 'Name' } ]; JQXElements.settings[ "treeGridSettings"] = { sortable:true,filterable:true, columns:columns, columnGroups:columnGroups, source:source,altRows:true, theme: "light" } </script></head><body> <jqx-tree-grid settings="treeGridSettings"></jqx-tree-grid>
|
autoRowHeight
|
boolean
|
true
|
Sets or gets the autoRowHeight property.
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>TreeGrid Custom Element Filtering and Sorting</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,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/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtreegrid.js"></script> <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script> <script type="text/javascript"> var source = new jqx.dataAdapter({ dataType: "json", dataFields: [ { name: 'EmployeeID', type: 'number' }, { name: 'ReportsTo', type: 'number' }, { name: 'FirstName', type: 'string' }, { name: 'LastName', type: 'string' }, { name: 'Country', type: 'string' }, { name: 'City', type: 'string' }, { name: 'Address', type: 'string' }, { name: 'Title', type: 'string' }, { name: 'HireDate', type: 'date' }, { name: 'BirthDate', type: 'date' } ], hierarchy: { keyDataField: { name: 'EmployeeID' }, parentDataField: { name: 'ReportsTo' } }, id: 'EmployeeID', localData: [ { "EmployeeID": 1, "FirstName": "Nancy", "LastName": "Davolio", "ReportsTo": 2, "Country": "USA", "Title": "Sales Representative", "HireDate": "1992-05-01 00:00:00", "BirthDate": "1948-12-08 00:00:00", "City": "Seattle", "Address": "507 - 20th Ave. E.Apt. 2A" }, { "EmployeeID": 2, "FirstName": "Andrew", "LastName": "Fuller", "ReportsTo": null, "Country": "USA", "Title": "Vice President, Sales", "HireDate": "1992-08-14 00:00:00", "BirthDate": "1952-02-19 00:00:00", "City": "Tacoma", "Address": "908 W. Capital Way" }, { "EmployeeID": 3, "FirstName": "Janet", "LastName": "Leverling", "ReportsTo": 2, "Country": "USA", "Title": "Sales Representative", "HireDate": "1992-04-01 00:00:00", "BirthDate": "1963-08-30 00:00:00", "City": "Kirkland", "Address": "722 Moss Bay Blvd." }, { "EmployeeID": 4, "FirstName": "Margaret", "LastName": "Peacock", "ReportsTo": 2, "Country": "USA", "Title": "Sales Representative", "HireDate": "1993-05-03 00:00:00", "BirthDate": "1937-09-19 00:00:00", "City": "Redmond", "Address": "4110 Old Redmond Rd." }, { "EmployeeID": 5, "FirstName": "Steven", "LastName": "Buchanan", "ReportsTo": 2, "Country": "UK", "Title": "Sales Manager", "HireDate": "1993-10-17 00:00:00", "BirthDate": "1955-03-04 00:00:00", "City": "London", "Address": "14 Garrett Hill" }, { "EmployeeID": 6, "FirstName": "Michael", "LastName": "Suyama", "ReportsTo": 5, "Country": "UK", "Title": "Sales Representative", "HireDate": "1993-10-17 00:00:00", "BirthDate": "1963-07-02 00:00:00", "City": "London", "Address": "Coventry House Miner Rd." }, { "EmployeeID": 7, "FirstName": "Robert", "LastName": "King", "ReportsTo": 5, "Country": "UK", "Title": "Sales Representative", "HireDate": "1994-01-02 00:00:00", "BirthDate": "1960-05-29 00:00:00", "City": "London", "Address": "Edgeham Hollow Winchester Way" }, { "EmployeeID": 8, "FirstName": "Laura", "LastName": "Callahan", "ReportsTo": 2, "Country": "USA", "Title": "Inside Sales Coordinator", "HireDate": "1994-03-05 00:00:00", "BirthDate": "1958-01-09 00:00:00", "City": "Seattle", "Address": "4726 - 11th Ave. N.E." }, { "EmployeeID": 9, "FirstName": "Anne", "LastName": "Dodsworth", "ReportsTo": 5, "Country": "UK", "Title": "Sales Representative", "HireDate": "1994-11-15 00:00:00", "BirthDate": "1966-01-27 00:00:00", "City": "London", "Address": "7 Houndstooth Rd." } ]}); var columns = [ { text: 'FirstName', columnGroup: 'Name', dataField: 'FirstName', width: 200 }, { text: 'LastName', columnGroup: 'Name', dataField: 'LastName', width: 200 }, { text: 'Title', dataField: 'Title', width: 160 }, { text: 'Birth Date', dataField: 'BirthDate', cellsFormat: 'd', width: 120 }, { text: 'Hire Date', dataField: 'HireDate', cellsFormat: 'd', width: 120 }, { text: 'Address', dataField: 'Address', width: 250 }, { text: 'City', dataField: 'City', width: 120 }, { text: 'Country', dataField: 'Country' } ]; var columnGroups = [ { text: 'Name', name: 'Name' } ]; JQXElements.settings[ "treeGridSettings"] = { sortable:true,filterable:true, columns:columns, columnGroups:columnGroups, source:source,autoRowHeight:true, theme: "light" } </script></head><body> <jqx-tree-grid settings="treeGridSettings"></jqx-tree-grid>
|
aggregatesHeight
|
number
|
34
|
Sets or gets the aggregatesHeight property.
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>TreeGrid Custom Element Filtering and Sorting</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,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/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtreegrid.js"></script> <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script> <script type="text/javascript"> var source = new jqx.dataAdapter({ dataType: "json", dataFields: [ { name: 'EmployeeID', type: 'number' }, { name: 'ReportsTo', type: 'number' }, { name: 'FirstName', type: 'string' }, { name: 'LastName', type: 'string' }, { name: 'Country', type: 'string' }, { name: 'City', type: 'string' }, { name: 'Address', type: 'string' }, { name: 'Title', type: 'string' }, { name: 'HireDate', type: 'date' }, { name: 'BirthDate', type: 'date' } ], hierarchy: { keyDataField: { name: 'EmployeeID' }, parentDataField: { name: 'ReportsTo' } }, id: 'EmployeeID', localData: [ { "EmployeeID": 1, "FirstName": "Nancy", "LastName": "Davolio", "ReportsTo": 2, "Country": "USA", "Title": "Sales Representative", "HireDate": "1992-05-01 00:00:00", "BirthDate": "1948-12-08 00:00:00", "City": "Seattle", "Address": "507 - 20th Ave. E.Apt. 2A" }, { "EmployeeID": 2, "FirstName": "Andrew", "LastName": "Fuller", "ReportsTo": null, "Country": "USA", "Title": "Vice President, Sales", "HireDate": "1992-08-14 00:00:00", "BirthDate": "1952-02-19 00:00:00", "City": "Tacoma", "Address": "908 W. Capital Way" }, { "EmployeeID": 3, "FirstName": "Janet", "LastName": "Leverling", "ReportsTo": 2, "Country": "USA", "Title": "Sales Representative", "HireDate": "1992-04-01 00:00:00", "BirthDate": "1963-08-30 00:00:00", "City": "Kirkland", "Address": "722 Moss Bay Blvd." }, { "EmployeeID": 4, "FirstName": "Margaret", "LastName": "Peacock", "ReportsTo": 2, "Country": "USA", "Title": "Sales Representative", "HireDate": "1993-05-03 00:00:00", "BirthDate": "1937-09-19 00:00:00", "City": "Redmond", "Address": "4110 Old Redmond Rd." }, { "EmployeeID": 5, "FirstName": "Steven", "LastName": "Buchanan", "ReportsTo": 2, "Country": "UK", "Title": "Sales Manager", "HireDate": "1993-10-17 00:00:00", "BirthDate": "1955-03-04 00:00:00", "City": "London", "Address": "14 Garrett Hill" }, { "EmployeeID": 6, "FirstName": "Michael", "LastName": "Suyama", "ReportsTo": 5, "Country": "UK", "Title": "Sales Representative", "HireDate": "1993-10-17 00:00:00", "BirthDate": "1963-07-02 00:00:00", "City": "London", "Address": "Coventry House Miner Rd." }, { "EmployeeID": 7, "FirstName": "Robert", "LastName": "King", "ReportsTo": 5, "Country": "UK", "Title": "Sales Representative", "HireDate": "1994-01-02 00:00:00", "BirthDate": "1960-05-29 00:00:00", "City": "London", "Address": "Edgeham Hollow Winchester Way" }, { "EmployeeID": 8, "FirstName": "Laura", "LastName": "Callahan", "ReportsTo": 2, "Country": "USA", "Title": "Inside Sales Coordinator", "HireDate": "1994-03-05 00:00:00", "BirthDate": "1958-01-09 00:00:00", "City": "Seattle", "Address": "4726 - 11th Ave. N.E." }, { "EmployeeID": 9, "FirstName": "Anne", "LastName": "Dodsworth", "ReportsTo": 5, "Country": "UK", "Title": "Sales Representative", "HireDate": "1994-11-15 00:00:00", "BirthDate": "1966-01-27 00:00:00", "City": "London", "Address": "7 Houndstooth Rd." } ]}); var columns = [ { text: 'FirstName', columnGroup: 'Name', dataField: 'FirstName', width: 200 }, { text: 'LastName', columnGroup: 'Name', dataField: 'LastName', width: 200 }, { text: 'Title', dataField: 'Title', width: 160 }, { text: 'Birth Date', dataField: 'BirthDate', cellsFormat: 'd', width: 120 }, { text: 'Hire Date', dataField: 'HireDate', cellsFormat: 'd', width: 120 }, { text: 'Address', dataField: 'Address', width: 250 }, { text: 'City', dataField: 'City', width: 120 }, { text: 'Country', dataField: 'Country' } ]; var columnGroups = [ { text: 'Name', name: 'Name' } ]; JQXElements.settings[ "treeGridSettings"] = { sortable:true,filterable:true, columns:columns, columnGroups:columnGroups, source:source,aggregatesHeight:40, theme: "light" } </script></head><body> <jqx-tree-grid settings="treeGridSettings"></jqx-tree-grid>
|
autoShowLoadElement
|
boolean
|
true
|
Sets or gets the autoShowLoadElement property.
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>TreeGrid Custom Element Filtering and Sorting</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,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/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtreegrid.js"></script> <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script> <script type="text/javascript"> var source = new jqx.dataAdapter({ dataType: "json", dataFields: [ { name: 'EmployeeID', type: 'number' }, { name: 'ReportsTo', type: 'number' }, { name: 'FirstName', type: 'string' }, { name: 'LastName', type: 'string' }, { name: 'Country', type: 'string' }, { name: 'City', type: 'string' }, { name: 'Address', type: 'string' }, { name: 'Title', type: 'string' }, { name: 'HireDate', type: 'date' }, { name: 'BirthDate', type: 'date' } ], hierarchy: { keyDataField: { name: 'EmployeeID' }, parentDataField: { name: 'ReportsTo' } }, id: 'EmployeeID', localData: [ { "EmployeeID": 1, "FirstName": "Nancy", "LastName": "Davolio", "ReportsTo": 2, "Country": "USA", "Title": "Sales Representative", "HireDate": "1992-05-01 00:00:00", "BirthDate": "1948-12-08 00:00:00", "City": "Seattle", "Address": "507 - 20th Ave. E.Apt. 2A" }, { "EmployeeID": 2, "FirstName": "Andrew", "LastName": "Fuller", "ReportsTo": null, "Country": "USA", "Title": "Vice President, Sales", "HireDate": "1992-08-14 00:00:00", "BirthDate": "1952-02-19 00:00:00", "City": "Tacoma", "Address": "908 W. Capital Way" }, { "EmployeeID": 3, "FirstName": "Janet", "LastName": "Leverling", "ReportsTo": 2, "Country": "USA", "Title": "Sales Representative", "HireDate": "1992-04-01 00:00:00", "BirthDate": "1963-08-30 00:00:00", "City": "Kirkland", "Address": "722 Moss Bay Blvd." }, { "EmployeeID": 4, "FirstName": "Margaret", "LastName": "Peacock", "ReportsTo": 2, "Country": "USA", "Title": "Sales Representative", "HireDate": "1993-05-03 00:00:00", "BirthDate": "1937-09-19 00:00:00", "City": "Redmond", "Address": "4110 Old Redmond Rd." }, { "EmployeeID": 5, "FirstName": "Steven", "LastName": "Buchanan", "ReportsTo": 2, "Country": "UK", "Title": "Sales Manager", "HireDate": "1993-10-17 00:00:00", "BirthDate": "1955-03-04 00:00:00", "City": "London", "Address": "14 Garrett Hill" }, { "EmployeeID": 6, "FirstName": "Michael", "LastName": "Suyama", "ReportsTo": 5, "Country": "UK", "Title": "Sales Representative", "HireDate": "1993-10-17 00:00:00", "BirthDate": "1963-07-02 00:00:00", "City": "London", "Address": "Coventry House Miner Rd." }, { "EmployeeID": 7, "FirstName": "Robert", "LastName": "King", "ReportsTo": 5, "Country": "UK", "Title": "Sales Representative", "HireDate": "1994-01-02 00:00:00", "BirthDate": "1960-05-29 00:00:00", "City": "London", "Address": "Edgeham Hollow Winchester Way" }, { "EmployeeID": 8, "FirstName": "Laura", "LastName": "Callahan", "ReportsTo": 2, "Country": "USA", "Title": "Inside Sales Coordinator", "HireDate": "1994-03-05 00:00:00", "BirthDate": "1958-01-09 00:00:00", "City": "Seattle", "Address": "4726 - 11th Ave. N.E." }, { "EmployeeID": 9, "FirstName": "Anne", "LastName": "Dodsworth", "ReportsTo": 5, "Country": "UK", "Title": "Sales Representative", "HireDate": "1994-11-15 00:00:00", "BirthDate": "1966-01-27 00:00:00", "City": "London", "Address": "7 Houndstooth Rd." } ]}); var columns = [ { text: 'FirstName', columnGroup: 'Name', dataField: 'FirstName', width: 200 }, { text: 'LastName', columnGroup: 'Name', dataField: 'LastName', width: 200 }, { text: 'Title', dataField: 'Title', width: 160 }, { text: 'Birth Date', dataField: 'BirthDate', cellsFormat: 'd', width: 120 }, { text: 'Hire Date', dataField: 'HireDate', cellsFormat: 'd', width: 120 }, { text: 'Address', dataField: 'Address', width: 250 }, { text: 'City', dataField: 'City', width: 120 }, { text: 'Country', dataField: 'Country' } ]; var columnGroups = [ { text: 'Name', name: 'Name' } ]; JQXElements.settings[ "treeGridSettings"] = { sortable:true,filterable:true, columns:columns, columnGroups:columnGroups, source:source,autoShowLoadElement:true, theme: "light" } </script></head><body> <jqx-tree-grid settings="treeGridSettings"></jqx-tree-grid>
|
checkboxes
|
boolean
|
false
|
Sets or gets the checkboxes property.
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>TreeGrid Custom Element Filtering and Sorting</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,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/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtreegrid.js"></script> <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script> <script type="text/javascript"> var source = new jqx.dataAdapter({ dataType: "json", dataFields: [ { name: 'EmployeeID', type: 'number' }, { name: 'ReportsTo', type: 'number' }, { name: 'FirstName', type: 'string' }, { name: 'LastName', type: 'string' }, { name: 'Country', type: 'string' }, { name: 'City', type: 'string' }, { name: 'Address', type: 'string' }, { name: 'Title', type: 'string' }, { name: 'HireDate', type: 'date' }, { name: 'BirthDate', type: 'date' } ], hierarchy: { keyDataField: { name: 'EmployeeID' }, parentDataField: { name: 'ReportsTo' } }, id: 'EmployeeID', localData: [ { "EmployeeID": 1, "FirstName": "Nancy", "LastName": "Davolio", "ReportsTo": 2, "Country": "USA", "Title": "Sales Representative", "HireDate": "1992-05-01 00:00:00", "BirthDate": "1948-12-08 00:00:00", "City": "Seattle", "Address": "507 - 20th Ave. E.Apt. 2A" }, { "EmployeeID": 2, "FirstName": "Andrew", "LastName": "Fuller", "ReportsTo": null, "Country": "USA", "Title": "Vice President, Sales", "HireDate": "1992-08-14 00:00:00", "BirthDate": "1952-02-19 00:00:00", "City": "Tacoma", "Address": "908 W. Capital Way" }, { "EmployeeID": 3, "FirstName": "Janet", "LastName": "Leverling", "ReportsTo": 2, "Country": "USA", "Title": "Sales Representative", "HireDate": "1992-04-01 00:00:00", "BirthDate": "1963-08-30 00:00:00", "City": "Kirkland", "Address": "722 Moss Bay Blvd." }, { "EmployeeID": 4, "FirstName": "Margaret", "LastName": "Peacock", "ReportsTo": 2, "Country": "USA", "Title": "Sales Representative", "HireDate": "1993-05-03 00:00:00", "BirthDate": "1937-09-19 00:00:00", "City": "Redmond", "Address": "4110 Old Redmond Rd." }, { "EmployeeID": 5, "FirstName": "Steven", "LastName": "Buchanan", "ReportsTo": 2, "Country": "UK", "Title": "Sales Manager", "HireDate": "1993-10-17 00:00:00", "BirthDate": "1955-03-04 00:00:00", "City": "London", "Address": "14 Garrett Hill" }, { "EmployeeID": 6, "FirstName": "Michael", "LastName": "Suyama", "ReportsTo": 5, "Country": "UK", "Title": "Sales Representative", "HireDate": "1993-10-17 00:00:00", "BirthDate": "1963-07-02 00:00:00", "City": "London", "Address": "Coventry House Miner Rd." }, { "EmployeeID": 7, "FirstName": "Robert", "LastName": "King", "ReportsTo": 5, "Country": "UK", "Title": "Sales Representative", "HireDate": "1994-01-02 00:00:00", "BirthDate": "1960-05-29 00:00:00", "City": "London", "Address": "Edgeham Hollow Winchester Way" }, { "EmployeeID": 8, "FirstName": "Laura", "LastName": "Callahan", "ReportsTo": 2, "Country": "USA", "Title": "Inside Sales Coordinator", "HireDate": "1994-03-05 00:00:00", "BirthDate": "1958-01-09 00:00:00", "City": "Seattle", "Address": "4726 - 11th Ave. N.E." }, { "EmployeeID": 9, "FirstName": "Anne", "LastName": "Dodsworth", "ReportsTo": 5, "Country": "UK", "Title": "Sales Representative", "HireDate": "1994-11-15 00:00:00", "BirthDate": "1966-01-27 00:00:00", "City": "London", "Address": "7 Houndstooth Rd." } ]}); var columns = [ { text: 'FirstName', columnGroup: 'Name', dataField: 'FirstName', width: 200 }, { text: 'LastName', columnGroup: 'Name', dataField: 'LastName', width: 200 }, { text: 'Title', dataField: 'Title', width: 160 }, { text: 'Birth Date', dataField: 'BirthDate', cellsFormat: 'd', width: 120 }, { text: 'Hire Date', dataField: 'HireDate', cellsFormat: 'd', width: 120 }, { text: 'Address', dataField: 'Address', width: 250 }, { text: 'City', dataField: 'City', width: 120 }, { text: 'Country', dataField: 'Country' } ]; var columnGroups = [ { text: 'Name', name: 'Name' } ]; JQXElements.settings[ "treeGridSettings"] = { sortable:true,filterable:true, columns:columns, columnGroups:columnGroups, source:source,checkboxes:true, theme: "light" } </script></head><body> <jqx-tree-grid settings="treeGridSettings"></jqx-tree-grid>
|
columnsHeight
|
number
|
30
|
Sets or gets the columnsHeight property.
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>TreeGrid Custom Element Filtering and Sorting</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,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/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtreegrid.js"></script> <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script> <script type="text/javascript"> var source = new jqx.dataAdapter({ dataType: "json", dataFields: [ { name: 'EmployeeID', type: 'number' }, { name: 'ReportsTo', type: 'number' }, { name: 'FirstName', type: 'string' }, { name: 'LastName', type: 'string' }, { name: 'Country', type: 'string' }, { name: 'City', type: 'string' }, { name: 'Address', type: 'string' }, { name: 'Title', type: 'string' }, { name: 'HireDate', type: 'date' }, { name: 'BirthDate', type: 'date' } ], hierarchy: { keyDataField: { name: 'EmployeeID' }, parentDataField: { name: 'ReportsTo' } }, id: 'EmployeeID', localData: [ { "EmployeeID": 1, "FirstName": "Nancy", "LastName": "Davolio", "ReportsTo": 2, "Country": "USA", "Title": "Sales Representative", "HireDate": "1992-05-01 00:00:00", "BirthDate": "1948-12-08 00:00:00", "City": "Seattle", "Address": "507 - 20th Ave. E.Apt. 2A" }, { "EmployeeID": 2, "FirstName": "Andrew", "LastName": "Fuller", "ReportsTo": null, "Country": "USA", "Title": "Vice President, Sales", "HireDate": "1992-08-14 00:00:00", "BirthDate": "1952-02-19 00:00:00", "City": "Tacoma", "Address": "908 W. Capital Way" }, { "EmployeeID": 3, "FirstName": "Janet", "LastName": "Leverling", "ReportsTo": 2, "Country": "USA", "Title": "Sales Representative", "HireDate": "1992-04-01 00:00:00", "BirthDate": "1963-08-30 00:00:00", "City": "Kirkland", "Address": "722 Moss Bay Blvd." }, { "EmployeeID": 4, "FirstName": "Margaret", "LastName": "Peacock", "ReportsTo": 2, "Country": "USA", "Title": "Sales Representative", "HireDate": "1993-05-03 00:00:00", "BirthDate": "1937-09-19 00:00:00", "City": "Redmond", "Address": "4110 Old Redmond Rd." }, { "EmployeeID": 5, "FirstName": "Steven", "LastName": "Buchanan", "ReportsTo": 2, "Country": "UK", "Title": "Sales Manager", "HireDate": "1993-10-17 00:00:00", "BirthDate": "1955-03-04 00:00:00", "City": "London", "Address": "14 Garrett Hill" }, { "EmployeeID": 6, "FirstName": "Michael", "LastName": "Suyama", "ReportsTo": 5, "Country": "UK", "Title": "Sales Representative", "HireDate": "1993-10-17 00:00:00", "BirthDate": "1963-07-02 00:00:00", "City": "London", "Address": "Coventry House Miner Rd." }, { "EmployeeID": 7, "FirstName": "Robert", "LastName": "King", "ReportsTo": 5, "Country": "UK", "Title": "Sales Representative", "HireDate": "1994-01-02 00:00:00", "BirthDate": "1960-05-29 00:00:00", "City": "London", "Address": "Edgeham Hollow Winchester Way" }, { "EmployeeID": 8, "FirstName": "Laura", "LastName": "Callahan", "ReportsTo": 2, "Country": "USA", "Title": "Inside Sales Coordinator", "HireDate": "1994-03-05 00:00:00", "BirthDate": "1958-01-09 00:00:00", "City": "Seattle", "Address": "4726 - 11th Ave. N.E." }, { "EmployeeID": 9, "FirstName": "Anne", "LastName": "Dodsworth", "ReportsTo": 5, "Country": "UK", "Title": "Sales Representative", "HireDate": "1994-11-15 00:00:00", "BirthDate": "1966-01-27 00:00:00", "City": "London", "Address": "7 Houndstooth Rd." } ]}); var columns = [ { text: 'FirstName', columnGroup: 'Name', dataField: 'FirstName', width: 200 }, { text: 'LastName', columnGroup: 'Name', dataField: 'LastName', width: 200 }, { text: 'Title', dataField: 'Title', width: 160 }, { text: 'Birth Date', dataField: 'BirthDate', cellsFormat: 'd', width: 120 }, { text: 'Hire Date', dataField: 'HireDate', cellsFormat: 'd', width: 120 }, { text: 'Address', dataField: 'Address', width: 250 }, { text: 'City', dataField: 'City', width: 120 }, { text: 'Country', dataField: 'Country' } ]; var columnGroups = [ { text: 'Name', name: 'Name' } ]; JQXElements.settings[ "treeGridSettings"] = { sortable:true,filterable:true, columns:columns, columnGroups:columnGroups, source:source,columnsHeight:40, theme: "light" } </script></head><body> <jqx-tree-grid settings="treeGridSettings"></jqx-tree-grid>
|
columns
|
array
|
[]
|
Sets or gets the columns property.
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>TreeGrid Custom Element Filtering and Sorting</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,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/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtreegrid.js"></script> <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script> <script type="text/javascript"> var source = new jqx.dataAdapter({ dataType: "json", dataFields: [ { name: 'EmployeeID', type: 'number' }, { name: 'ReportsTo', type: 'number' }, { name: 'FirstName', type: 'string' }, { name: 'LastName', type: 'string' }, { name: 'Country', type: 'string' }, { name: 'City', type: 'string' }, { name: 'Address', type: 'string' }, { name: 'Title', type: 'string' }, { name: 'HireDate', type: 'date' }, { name: 'BirthDate', type: 'date' } ], hierarchy: { keyDataField: { name: 'EmployeeID' }, parentDataField: { name: 'ReportsTo' } }, id: 'EmployeeID', localData: [ { "EmployeeID": 1, "FirstName": "Nancy", "LastName": "Davolio", "ReportsTo": 2, "Country": "USA", "Title": "Sales Representative", "HireDate": "1992-05-01 00:00:00", "BirthDate": "1948-12-08 00:00:00", "City": "Seattle", "Address": "507 - 20th Ave. E.Apt. 2A" }, { "EmployeeID": 2, "FirstName": "Andrew", "LastName": "Fuller", "ReportsTo": null, "Country": "USA", "Title": "Vice President, Sales", "HireDate": "1992-08-14 00:00:00", "BirthDate": "1952-02-19 00:00:00", "City": "Tacoma", "Address": "908 W. Capital Way" }, { "EmployeeID": 3, "FirstName": "Janet", "LastName": "Leverling", "ReportsTo": 2, "Country": "USA", "Title": "Sales Representative", "HireDate": "1992-04-01 00:00:00", "BirthDate": "1963-08-30 00:00:00", "City": "Kirkland", "Address": "722 Moss Bay Blvd." }, { "EmployeeID": 4, "FirstName": "Margaret", "LastName": "Peacock", "ReportsTo": 2, "Country": "USA", "Title": "Sales Representative", "HireDate": "1993-05-03 00:00:00", "BirthDate": "1937-09-19 00:00:00", "City": "Redmond", "Address": "4110 Old Redmond Rd." }, { "EmployeeID": 5, "FirstName": "Steven", "LastName": "Buchanan", "ReportsTo": 2, "Country": "UK", "Title": "Sales Manager", "HireDate": "1993-10-17 00:00:00", "BirthDate": "1955-03-04 00:00:00", "City": "London", "Address": "14 Garrett Hill" }, { "EmployeeID": 6, "FirstName": "Michael", "LastName": "Suyama", "ReportsTo": 5, "Country": "UK", "Title": "Sales Representative", "HireDate": "1993-10-17 00:00:00", "BirthDate": "1963-07-02 00:00:00", "City": "London", "Address": "Coventry House Miner Rd." }, { "EmployeeID": 7, "FirstName": "Robert", "LastName": "King", "ReportsTo": 5, "Country": "UK", "Title": "Sales Representative", "HireDate": "1994-01-02 00:00:00", "BirthDate": "1960-05-29 00:00:00", "City": "London", "Address": "Edgeham Hollow Winchester Way" }, { "EmployeeID": 8, "FirstName": "Laura", "LastName": "Callahan", "ReportsTo": 2, "Country": "USA", "Title": "Inside Sales Coordinator", "HireDate": "1994-03-05 00:00:00", "BirthDate": "1958-01-09 00:00:00", "City": "Seattle", "Address": "4726 - 11th Ave. N.E." }, { "EmployeeID": 9, "FirstName": "Anne", "LastName": "Dodsworth", "ReportsTo": 5, "Country": "UK", "Title": "Sales Representative", "HireDate": "1994-11-15 00:00:00", "BirthDate": "1966-01-27 00:00:00", "City": "London", "Address": "7 Houndstooth Rd." } ]}); var columns = [ { text: 'FirstName', columnGroup: 'Name', dataField: 'FirstName', width: 200 }, { text: 'LastName', columnGroup: 'Name', dataField: 'LastName', width: 200 }, { text: 'Title', dataField: 'Title', width: 160 }, { text: 'Birth Date', dataField: 'BirthDate', cellsFormat: 'd', width: 120 }, { text: 'Hire Date', dataField: 'HireDate', cellsFormat: 'd', width: 120 }, { text: 'Address', dataField: 'Address', width: 250 }, { text: 'City', dataField: 'City', width: 120 }, { text: 'Country', dataField: 'Country' } ]; var columnGroups = [ { text: 'Name', name: 'Name' } ]; JQXElements.settings[ "treeGridSettings"] = { sortable:true,filterable:true, columns:columns, columnGroups:columnGroups, source:source, theme: "light" } </script></head><body> <jqx-tree-grid settings="treeGridSettings"></jqx-tree-grid>
|
columnGroups
|
array
|
[]
|
Sets or gets the columnGroups property.
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>TreeGrid Custom Element Filtering and Sorting</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,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/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtreegrid.js"></script> <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script> <script type="text/javascript"> var source = new jqx.dataAdapter({ dataType: "json", dataFields: [ { name: 'EmployeeID', type: 'number' }, { name: 'ReportsTo', type: 'number' }, { name: 'FirstName', type: 'string' }, { name: 'LastName', type: 'string' }, { name: 'Country', type: 'string' }, { name: 'City', type: 'string' }, { name: 'Address', type: 'string' }, { name: 'Title', type: 'string' }, { name: 'HireDate', type: 'date' }, { name: 'BirthDate', type: 'date' } ], hierarchy: { keyDataField: { name: 'EmployeeID' }, parentDataField: { name: 'ReportsTo' } }, id: 'EmployeeID', localData: [ { "EmployeeID": 1, "FirstName": "Nancy", "LastName": "Davolio", "ReportsTo": 2, "Country": "USA", "Title": "Sales Representative", "HireDate": "1992-05-01 00:00:00", "BirthDate": "1948-12-08 00:00:00", "City": "Seattle", "Address": "507 - 20th Ave. E.Apt. 2A" }, { "EmployeeID": 2, "FirstName": "Andrew", "LastName": "Fuller", "ReportsTo": null, "Country": "USA", "Title": "Vice President, Sales", "HireDate": "1992-08-14 00:00:00", "BirthDate": "1952-02-19 00:00:00", "City": "Tacoma", "Address": "908 W. Capital Way" }, { "EmployeeID": 3, "FirstName": "Janet", "LastName": "Leverling", "ReportsTo": 2, "Country": "USA", "Title": "Sales Representative", "HireDate": "1992-04-01 00:00:00", "BirthDate": "1963-08-30 00:00:00", "City": "Kirkland", "Address": "722 Moss Bay Blvd." }, { "EmployeeID": 4, "FirstName": "Margaret", "LastName": "Peacock", "ReportsTo": 2, "Country": "USA", "Title": "Sales Representative", "HireDate": "1993-05-03 00:00:00", "BirthDate": "1937-09-19 00:00:00", "City": "Redmond", "Address": "4110 Old Redmond Rd." }, { "EmployeeID": 5, "FirstName": "Steven", "LastName": "Buchanan", "ReportsTo": 2, "Country": "UK", "Title": "Sales Manager", "HireDate": "1993-10-17 00:00:00", "BirthDate": "1955-03-04 00:00:00", "City": "London", "Address": "14 Garrett Hill" }, { "EmployeeID": 6, "FirstName": "Michael", "LastName": "Suyama", "ReportsTo": 5, "Country": "UK", "Title": "Sales Representative", "HireDate": "1993-10-17 00:00:00", "BirthDate": "1963-07-02 00:00:00", "City": "London", "Address": "Coventry House Miner Rd." }, { "EmployeeID": 7, "FirstName": "Robert", "LastName": "King", "ReportsTo": 5, "Country": "UK", "Title": "Sales Representative", "HireDate": "1994-01-02 00:00:00", "BirthDate": "1960-05-29 00:00:00", "City": "London", "Address": "Edgeham Hollow Winchester Way" }, { "EmployeeID": 8, "FirstName": "Laura", "LastName": "Callahan", "ReportsTo": 2, "Country": "USA", "Title": "Inside Sales Coordinator", "HireDate": "1994-03-05 00:00:00", "BirthDate": "1958-01-09 00:00:00", "City": "Seattle", "Address": "4726 - 11th Ave. N.E." }, { "EmployeeID": 9, "FirstName": "Anne", "LastName": "Dodsworth", "ReportsTo": 5, "Country": "UK", "Title": "Sales Representative", "HireDate": "1994-11-15 00:00:00", "BirthDate": "1966-01-27 00:00:00", "City": "London", "Address": "7 Houndstooth Rd." } ]}); var columns = [ { text: 'FirstName', columnGroup: 'Name', dataField: 'FirstName', width: 200 }, { text: 'LastName', columnGroup: 'Name', dataField: 'LastName', width: 200 }, { text: 'Title', dataField: 'Title', width: 160 }, { text: 'Birth Date', dataField: 'BirthDate', cellsFormat: 'd', width: 120 }, { text: 'Hire Date', dataField: 'HireDate', cellsFormat: 'd', width: 120 }, { text: 'Address', dataField: 'Address', width: 250 }, { text: 'City', dataField: 'City', width: 120 }, { text: 'Country', dataField: 'Country' } ]; var columnGroups = [ { text: 'Name', name: 'Name' } ]; JQXElements.settings[ "treeGridSettings"] = { sortable:true,filterable:true, columns:columns, columnGroups:columnGroups, source:source, theme: "light" } </script></head><body> <jqx-tree-grid settings="treeGridSettings"></jqx-tree-grid>
|
columnsResize
|
boolean
|
false
|
Sets or gets the columnsResize property.
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>TreeGrid Custom Element Filtering and Sorting</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,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/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtreegrid.js"></script> <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script> <script type="text/javascript"> var source = new jqx.dataAdapter({ dataType: "json", dataFields: [ { name: 'EmployeeID', type: 'number' }, { name: 'ReportsTo', type: 'number' }, { name: 'FirstName', type: 'string' }, { name: 'LastName', type: 'string' }, { name: 'Country', type: 'string' }, { name: 'City', type: 'string' }, { name: 'Address', type: 'string' }, { name: 'Title', type: 'string' }, { name: 'HireDate', type: 'date' }, { name: 'BirthDate', type: 'date' } ], hierarchy: { keyDataField: { name: 'EmployeeID' }, parentDataField: { name: 'ReportsTo' } }, id: 'EmployeeID', localData: [ { "EmployeeID": 1, "FirstName": "Nancy", "LastName": "Davolio", "ReportsTo": 2, "Country": "USA", "Title": "Sales Representative", "HireDate": "1992-05-01 00:00:00", "BirthDate": "1948-12-08 00:00:00", "City": "Seattle", "Address": "507 - 20th Ave. E.Apt. 2A" }, { "EmployeeID": 2, "FirstName": "Andrew", "LastName": "Fuller", "ReportsTo": null, "Country": "USA", "Title": "Vice President, Sales", "HireDate": "1992-08-14 00:00:00", "BirthDate": "1952-02-19 00:00:00", "City": "Tacoma", "Address": "908 W. Capital Way" }, { "EmployeeID": 3, "FirstName": "Janet", "LastName": "Leverling", "ReportsTo": 2, "Country": "USA", "Title": "Sales Representative", "HireDate": "1992-04-01 00:00:00", "BirthDate": "1963-08-30 00:00:00", "City": "Kirkland", "Address": "722 Moss Bay Blvd." }, { "EmployeeID": 4, "FirstName": "Margaret", "LastName": "Peacock", "ReportsTo": 2, "Country": "USA", "Title": "Sales Representative", "HireDate": "1993-05-03 00:00:00", "BirthDate": "1937-09-19 00:00:00", "City": "Redmond", "Address": "4110 Old Redmond Rd." }, { "EmployeeID": 5, "FirstName": "Steven", "LastName": "Buchanan", "ReportsTo": 2, "Country": "UK", "Title": "Sales Manager", "HireDate": "1993-10-17 00:00:00", "BirthDate": "1955-03-04 00:00:00", "City": "London", "Address": "14 Garrett Hill" }, { "EmployeeID": 6, "FirstName": "Michael", "LastName": "Suyama", "ReportsTo": 5, "Country": "UK", "Title": "Sales Representative", "HireDate": "1993-10-17 00:00:00", "BirthDate": "1963-07-02 00:00:00", "City": "London", "Address": "Coventry House Miner Rd." }, { "EmployeeID": 7, "FirstName": "Robert", "LastName": "King", "ReportsTo": 5, "Country": "UK", "Title": "Sales Representative", "HireDate": "1994-01-02 00:00:00", "BirthDate": "1960-05-29 00:00:00", "City": "London", "Address": "Edgeham Hollow Winchester Way" }, { "EmployeeID": 8, "FirstName": "Laura", "LastName": "Callahan", "ReportsTo": 2, "Country": "USA", "Title": "Inside Sales Coordinator", "HireDate": "1994-03-05 00:00:00", "BirthDate": "1958-01-09 00:00:00", "City": "Seattle", "Address": "4726 - 11th Ave. N.E." }, { "EmployeeID": 9, "FirstName": "Anne", "LastName": "Dodsworth", "ReportsTo": 5, "Country": "UK", "Title": "Sales Representative", "HireDate": "1994-11-15 00:00:00", "BirthDate": "1966-01-27 00:00:00", "City": "London", "Address": "7 Houndstooth Rd." } ]}); var columns = [ { text: 'FirstName', columnGroup: 'Name', dataField: 'FirstName', width: 200 }, { text: 'LastName', columnGroup: 'Name', dataField: 'LastName', width: 200 }, { text: 'Title', dataField: 'Title', width: 160 }, { text: 'Birth Date', dataField: 'BirthDate', cellsFormat: 'd', width: 120 }, { text: 'Hire Date', dataField: 'HireDate', cellsFormat: 'd', width: 120 }, { text: 'Address', dataField: 'Address', width: 250 }, { text: 'City', dataField: 'City', width: 120 }, { text: 'Country', dataField: 'Country' } ]; var columnGroups = [ { text: 'Name', name: 'Name' } ]; JQXElements.settings[ "treeGridSettings"] = { sortable:true,filterable:true, columns:columns, columnGroups:columnGroups, source:source, theme: "light",columnsResize:true } </script></head><body> <jqx-tree-grid settings="treeGridSettings"></jqx-tree-grid>
|
columnsReorder
|
boolean
|
false
|
Sets or gets the columnsReorder property.
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>TreeGrid Custom Element Filtering and Sorting</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,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/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtreegrid.js"></script> <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script> <script type="text/javascript"> var source = new jqx.dataAdapter({ dataType: "json", dataFields: [ { name: 'EmployeeID', type: 'number' }, { name: 'ReportsTo', type: 'number' }, { name: 'FirstName', type: 'string' }, { name: 'LastName', type: 'string' }, { name: 'Country', type: 'string' }, { name: 'City', type: 'string' }, { name: 'Address', type: 'string' }, { name: 'Title', type: 'string' }, { name: 'HireDate', type: 'date' }, { name: 'BirthDate', type: 'date' } ], hierarchy: { keyDataField: { name: 'EmployeeID' }, parentDataField: { name: 'ReportsTo' } }, id: 'EmployeeID', localData: [ { "EmployeeID": 1, "FirstName": "Nancy", "LastName": "Davolio", "ReportsTo": 2, "Country": "USA", "Title": "Sales Representative", "HireDate": "1992-05-01 00:00:00", "BirthDate": "1948-12-08 00:00:00", "City": "Seattle", "Address": "507 - 20th Ave. E.Apt. 2A" }, { "EmployeeID": 2, "FirstName": "Andrew", "LastName": "Fuller", "ReportsTo": null, "Country": "USA", "Title": "Vice President, Sales", "HireDate": "1992-08-14 00:00:00", "BirthDate": "1952-02-19 00:00:00", "City": "Tacoma", "Address": "908 W. Capital Way" }, { "EmployeeID": 3, "FirstName": "Janet", "LastName": "Leverling", "ReportsTo": 2, "Country": "USA", "Title": "Sales Representative", "HireDate": "1992-04-01 00:00:00", "BirthDate": "1963-08-30 00:00:00", "City": "Kirkland", "Address": "722 Moss Bay Blvd." }, { "EmployeeID": 4, "FirstName": "Margaret", "LastName": "Peacock", "ReportsTo": 2, "Country": "USA", "Title": "Sales Representative", "HireDate": "1993-05-03 00:00:00", "BirthDate": "1937-09-19 00:00:00", "City": "Redmond", "Address": "4110 Old Redmond Rd." }, { "EmployeeID": 5, "FirstName": "Steven", "LastName": "Buchanan", "ReportsTo": 2, "Country": "UK", "Title": "Sales Manager", "HireDate": "1993-10-17 00:00:00", "BirthDate": "1955-03-04 00:00:00", "City": "London", "Address": "14 Garrett Hill" }, { "EmployeeID": 6, "FirstName": "Michael", "LastName": "Suyama", "ReportsTo": 5, "Country": "UK", "Title": "Sales Representative", "HireDate": "1993-10-17 00:00:00", "BirthDate": "1963-07-02 00:00:00", "City": "London", "Address": "Coventry House Miner Rd." }, { "EmployeeID": 7, "FirstName": "Robert", "LastName": "King", "ReportsTo": 5, "Country": "UK", "Title": "Sales Representative", "HireDate": "1994-01-02 00:00:00", "BirthDate": "1960-05-29 00:00:00", "City": "London", "Address": "Edgeham Hollow Winchester Way" }, { "EmployeeID": 8, "FirstName": "Laura", "LastName": "Callahan", "ReportsTo": 2, "Country": "USA", "Title": "Inside Sales Coordinator", "HireDate": "1994-03-05 00:00:00", "BirthDate": "1958-01-09 00:00:00", "City": "Seattle", "Address": "4726 - 11th Ave. N.E." }, { "EmployeeID": 9, "FirstName": "Anne", "LastName": "Dodsworth", "ReportsTo": 5, "Country": "UK", "Title": "Sales Representative", "HireDate": "1994-11-15 00:00:00", "BirthDate": "1966-01-27 00:00:00", "City": "London", "Address": "7 Houndstooth Rd." } ]}); var columns = [ { text: 'FirstName', columnGroup: 'Name', dataField: 'FirstName', width: 200 }, { text: 'LastName', columnGroup: 'Name', dataField: 'LastName', width: 200 }, { text: 'Title', dataField: 'Title', width: 160 }, { text: 'Birth Date', dataField: 'BirthDate', cellsFormat: 'd', width: 120 }, { text: 'Hire Date', dataField: 'HireDate', cellsFormat: 'd', width: 120 }, { text: 'Address', dataField: 'Address', width: 250 }, { text: 'City', dataField: 'City', width: 120 }, { text: 'Country', dataField: 'Country' } ]; var columnGroups = [ { text: 'Name', name: 'Name' } ]; JQXElements.settings[ "treeGridSettings"] = { sortable:true,filterable:true, columns:columns, columnGroups:columnGroups, source:source, theme: "light",columnsReorder:true } </script></head><body> <jqx-tree-grid settings="treeGridSettings"></jqx-tree-grid>
|
disabled
|
boolean
|
false
|
Sets or gets the disabled property.
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>TreeGrid Custom Element Filtering and Sorting</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,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/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtreegrid.js"></script> <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script> <script type="text/javascript"> var source = new jqx.dataAdapter({ dataType: "json", dataFields: [ { name: 'EmployeeID', type: 'number' }, { name: 'ReportsTo', type: 'number' }, { name: 'FirstName', type: 'string' }, { name: 'LastName', type: 'string' }, { name: 'Country', type: 'string' }, { name: 'City', type: 'string' }, { name: 'Address', type: 'string' }, { name: 'Title', type: 'string' }, { name: 'HireDate', type: 'date' }, { name: 'BirthDate', type: 'date' } ], hierarchy: { keyDataField: { name: 'EmployeeID' }, parentDataField: { name: 'ReportsTo' } }, id: 'EmployeeID', localData: [ { "EmployeeID": 1, "FirstName": "Nancy", "LastName": "Davolio", "ReportsTo": 2, "Country": "USA", "Title": "Sales Representative", "HireDate": "1992-05-01 00:00:00", "BirthDate": "1948-12-08 00:00:00", "City": "Seattle", "Address": "507 - 20th Ave. E.Apt. 2A" }, { "EmployeeID": 2, "FirstName": "Andrew", "LastName": "Fuller", "ReportsTo": null, "Country": "USA", "Title": "Vice President, Sales", "HireDate": "1992-08-14 00:00:00", "BirthDate": "1952-02-19 00:00:00", "City": "Tacoma", "Address": "908 W. Capital Way" }, { "EmployeeID": 3, "FirstName": "Janet", "LastName": "Leverling", "ReportsTo": 2, "Country": "USA", "Title": "Sales Representative", "HireDate": "1992-04-01 00:00:00", "BirthDate": "1963-08-30 00:00:00", "City": "Kirkland", "Address": "722 Moss Bay Blvd." }, { "EmployeeID": 4, "FirstName": "Margaret", "LastName": "Peacock", "ReportsTo": 2, "Country": "USA", "Title": "Sales Representative", "HireDate": "1993-05-03 00:00:00", "BirthDate": "1937-09-19 00:00:00", "City": "Redmond", "Address": "4110 Old Redmond Rd." }, { "EmployeeID": 5, "FirstName": "Steven", "LastName": "Buchanan", "ReportsTo": 2, "Country": "UK", "Title": "Sales Manager", "HireDate": "1993-10-17 00:00:00", "BirthDate": "1955-03-04 00:00:00", "City": "London", "Address": "14 Garrett Hill" }, { "EmployeeID": 6, "FirstName": "Michael", "LastName": "Suyama", "ReportsTo": 5, "Country": "UK", "Title": "Sales Representative", "HireDate": "1993-10-17 00:00:00", "BirthDate": "1963-07-02 00:00:00", "City": "London", "Address": "Coventry House Miner Rd." }, { "EmployeeID": 7, "FirstName": "Robert", "LastName": "King", "ReportsTo": 5, "Country": "UK", "Title": "Sales Representative", "HireDate": "1994-01-02 00:00:00", "BirthDate": "1960-05-29 00:00:00", "City": "London", "Address": "Edgeham Hollow Winchester Way" }, { "EmployeeID": 8, "FirstName": "Laura", "LastName": "Callahan", "ReportsTo": 2, "Country": "USA", "Title": "Inside Sales Coordinator", "HireDate": "1994-03-05 00:00:00", "BirthDate": "1958-01-09 00:00:00", "City": "Seattle", "Address": "4726 - 11th Ave. N.E." }, { "EmployeeID": 9, "FirstName": "Anne", "LastName": "Dodsworth", "ReportsTo": 5, "Country": "UK", "Title": "Sales Representative", "HireDate": "1994-11-15 00:00:00", "BirthDate": "1966-01-27 00:00:00", "City": "London", "Address": "7 Houndstooth Rd." } ]}); var columns = [ { text: 'FirstName', columnGroup: 'Name', dataField: 'FirstName', width: 200 }, { text: 'LastName', columnGroup: 'Name', dataField: 'LastName', width: 200 }, { text: 'Title', dataField: 'Title', width: 160 }, { text: 'Birth Date', dataField: 'BirthDate', cellsFormat: 'd', width: 120 }, { text: 'Hire Date', dataField: 'HireDate', cellsFormat: 'd', width: 120 }, { text: 'Address', dataField: 'Address', width: 250 }, { text: 'City', dataField: 'City', width: 120 }, { text: 'Country', dataField: 'Country' } ]; var columnGroups = [ { text: 'Name', name: 'Name' } ]; JQXElements.settings[ "treeGridSettings"] = { sortable:true,filterable:true, columns:columns, columnGroups:columnGroups, source:source, theme: "light",disabled:true } </script></head><body> <jqx-tree-grid settings="treeGridSettings"></jqx-tree-grid>
|
editable
|
boolean
|
false
|
Sets or gets the editable property.
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>TreeGrid Custom Element Filtering and Sorting</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,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/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtreegrid.js"></script> <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script> <script type="text/javascript"> var source = new jqx.dataAdapter({ dataType: "json", dataFields: [ { name: 'EmployeeID', type: 'number' }, { name: 'ReportsTo', type: 'number' }, { name: 'FirstName', type: 'string' }, { name: 'LastName', type: 'string' }, { name: 'Country', type: 'string' }, { name: 'City', type: 'string' }, { name: 'Address', type: 'string' }, { name: 'Title', type: 'string' }, { name: 'HireDate', type: 'date' }, { name: 'BirthDate', type: 'date' } ], hierarchy: { keyDataField: { name: 'EmployeeID' }, parentDataField: { name: 'ReportsTo' } }, id: 'EmployeeID', localData: [ { "EmployeeID": 1, "FirstName": "Nancy", "LastName": "Davolio", "ReportsTo": 2, "Country": "USA", "Title": "Sales Representative", "HireDate": "1992-05-01 00:00:00", "BirthDate": "1948-12-08 00:00:00", "City": "Seattle", "Address": "507 - 20th Ave. E.Apt. 2A" }, { "EmployeeID": 2, "FirstName": "Andrew", "LastName": "Fuller", "ReportsTo": null, "Country": "USA", "Title": "Vice President, Sales", "HireDate": "1992-08-14 00:00:00", "BirthDate": "1952-02-19 00:00:00", "City": "Tacoma", "Address": "908 W. Capital Way" }, { "EmployeeID": 3, "FirstName": "Janet", "LastName": "Leverling", "ReportsTo": 2, "Country": "USA", "Title": "Sales Representative", "HireDate": "1992-04-01 00:00:00", "BirthDate": "1963-08-30 00:00:00", "City": "Kirkland", "Address": "722 Moss Bay Blvd." }, { "EmployeeID": 4, "FirstName": "Margaret", "LastName": "Peacock", "ReportsTo": 2, "Country": "USA", "Title": "Sales Representative", "HireDate": "1993-05-03 00:00:00", "BirthDate": "1937-09-19 00:00:00", "City": "Redmond", "Address": "4110 Old Redmond Rd." }, { "EmployeeID": 5, "FirstName": "Steven", "LastName": "Buchanan", "ReportsTo": 2, "Country": "UK", "Title": "Sales Manager", "HireDate": "1993-10-17 00:00:00", "BirthDate": "1955-03-04 00:00:00", "City": "London", "Address": "14 Garrett Hill" }, { "EmployeeID": 6, "FirstName": "Michael", "LastName": "Suyama", "ReportsTo": 5, "Country": "UK", "Title": "Sales Representative", "HireDate": "1993-10-17 00:00:00", "BirthDate": "1963-07-02 00:00:00", "City": "London", "Address": "Coventry House Miner Rd." }, { "EmployeeID": 7, "FirstName": "Robert", "LastName": "King", "ReportsTo": 5, "Country": "UK", "Title": "Sales Representative", "HireDate": "1994-01-02 00:00:00", "BirthDate": "1960-05-29 00:00:00", "City": "London", "Address": "Edgeham Hollow Winchester Way" }, { "EmployeeID": 8, "FirstName": "Laura", "LastName": "Callahan", "ReportsTo": 2, "Country": "USA", "Title": "Inside Sales Coordinator", "HireDate": "1994-03-05 00:00:00", "BirthDate": "1958-01-09 00:00:00", "City": "Seattle", "Address": "4726 - 11th Ave. N.E." }, { "EmployeeID": 9, "FirstName": "Anne", "LastName": "Dodsworth", "ReportsTo": 5, "Country": "UK", "Title": "Sales Representative", "HireDate": "1994-11-15 00:00:00", "BirthDate": "1966-01-27 00:00:00", "City": "London", "Address": "7 Houndstooth Rd." } ]}); var columns = [ { text: 'FirstName', columnGroup: 'Name', dataField: 'FirstName', width: 200 }, { text: 'LastName', columnGroup: 'Name', dataField: 'LastName', width: 200 }, { text: 'Title', dataField: 'Title', width: 160 }, { text: 'Birth Date', dataField: 'BirthDate', cellsFormat: 'd', width: 120 }, { text: 'Hire Date', dataField: 'HireDate', cellsFormat: 'd', width: 120 }, { text: 'Address', dataField: 'Address', width: 250 }, { text: 'City', dataField: 'City', width: 120 }, { text: 'Country', dataField: 'Country' } ]; var columnGroups = [ { text: 'Name', name: 'Name' } ]; JQXElements.settings[ "treeGridSettings"] = { sortable:true,filterable:true, columns:columns, columnGroups:columnGroups, source:source, theme: "light",editable:true } </script></head><body> <jqx-tree-grid settings="treeGridSettings"></jqx-tree-grid>
|
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'>TreeGrid Custom Element Filtering and Sorting</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,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/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtreegrid.js"></script> <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script> <script type="text/javascript"> var source = new jqx.dataAdapter({ dataType: "json", dataFields: [ { name: 'EmployeeID', type: 'number' }, { name: 'ReportsTo', type: 'number' }, { name: 'FirstName', type: 'string' }, { name: 'LastName', type: 'string' }, { name: 'Country', type: 'string' }, { name: 'City', type: 'string' }, { name: 'Address', type: 'string' }, { name: 'Title', type: 'string' }, { name: 'HireDate', type: 'date' }, { name: 'BirthDate', type: 'date' } ], hierarchy: { keyDataField: { name: 'EmployeeID' }, parentDataField: { name: 'ReportsTo' } }, id: 'EmployeeID', localData: [ { "EmployeeID": 1, "FirstName": "Nancy", "LastName": "Davolio", "ReportsTo": 2, "Country": "USA", "Title": "Sales Representative", "HireDate": "1992-05-01 00:00:00", "BirthDate": "1948-12-08 00:00:00", "City": "Seattle", "Address": "507 - 20th Ave. E.Apt. 2A" }, { "EmployeeID": 2, "FirstName": "Andrew", "LastName": "Fuller", "ReportsTo": null, "Country": "USA", "Title": "Vice President, Sales", "HireDate": "1992-08-14 00:00:00", "BirthDate": "1952-02-19 00:00:00", "City": "Tacoma", "Address": "908 W. Capital Way" }, { "EmployeeID": 3, "FirstName": "Janet", "LastName": "Leverling", "ReportsTo": 2, "Country": "USA", "Title": "Sales Representative", "HireDate": "1992-04-01 00:00:00", "BirthDate": "1963-08-30 00:00:00", "City": "Kirkland", "Address": "722 Moss Bay Blvd." }, { "EmployeeID": 4, "FirstName": "Margaret", "LastName": "Peacock", "ReportsTo": 2, "Country": "USA", "Title": "Sales Representative", "HireDate": "1993-05-03 00:00:00", "BirthDate": "1937-09-19 00:00:00", "City": "Redmond", "Address": "4110 Old Redmond Rd." }, { "EmployeeID": 5, "FirstName": "Steven", "LastName": "Buchanan", "ReportsTo": 2, "Country": "UK", "Title": "Sales Manager", "HireDate": "1993-10-17 00:00:00", "BirthDate": "1955-03-04 00:00:00", "City": "London", "Address": "14 Garrett Hill" }, { "EmployeeID": 6, "FirstName": "Michael", "LastName": "Suyama", "ReportsTo": 5, "Country": "UK", "Title": "Sales Representative", "HireDate": "1993-10-17 00:00:00", "BirthDate": "1963-07-02 00:00:00", "City": "London", "Address": "Coventry House Miner Rd." }, { "EmployeeID": 7, "FirstName": "Robert", "LastName": "King", "ReportsTo": 5, "Country": "UK", "Title": "Sales Representative", "HireDate": "1994-01-02 00:00:00", "BirthDate": "1960-05-29 00:00:00", "City": "London", "Address": "Edgeham Hollow Winchester Way" }, { "EmployeeID": 8, "FirstName": "Laura", "LastName": "Callahan", "ReportsTo": 2, "Country": "USA", "Title": "Inside Sales Coordinator", "HireDate": "1994-03-05 00:00:00", "BirthDate": "1958-01-09 00:00:00", "City": "Seattle", "Address": "4726 - 11th Ave. N.E." }, { "EmployeeID": 9, "FirstName": "Anne", "LastName": "Dodsworth", "ReportsTo": 5, "Country": "UK", "Title": "Sales Representative", "HireDate": "1994-11-15 00:00:00", "BirthDate": "1966-01-27 00:00:00", "City": "London", "Address": "7 Houndstooth Rd." } ]}); var columns = [ { text: 'FirstName', columnGroup: 'Name', dataField: 'FirstName', width: 200 }, { text: 'LastName', columnGroup: 'Name', dataField: 'LastName', width: 200 }, { text: 'Title', dataField: 'Title', width: 160 }, { text: 'Birth Date', dataField: 'BirthDate', cellsFormat: 'd', width: 120 }, { text: 'Hire Date', dataField: 'HireDate', cellsFormat: 'd', width: 120 }, { text: 'Address', dataField: 'Address', width: 250 }, { text: 'City', dataField: 'City', width: 120 }, { text: 'Country', dataField: 'Country' } ]; var columnGroups = [ { text: 'Name', name: 'Name' } ]; JQXElements.settings[ "treeGridSettings"] = { sortable:true,filterable:true, columns:columns, columnGroups:columnGroups, source:source, theme: "light", editSettings:"editSettings" } </script></head><body> <jqx-tree-grid settings="treeGridSettings"></jqx-tree-grid>
|
exportSettings
|
object
|
{columnsHeader: true, hiddenColumns: false, serverURL: null, characterSet: null, collapsedRecords: false, recordsInView: true,fileName: "jqxTreeGrid"}
|
Sets or gets the exportSettings property.
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>TreeGrid Custom Element Filtering and Sorting</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,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/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtreegrid.js"></script> <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script> <script type="text/javascript"> var source = new jqx.dataAdapter({ dataType: "json", dataFields: [ { name: 'EmployeeID', type: 'number' }, { name: 'ReportsTo', type: 'number' }, { name: 'FirstName', type: 'string' }, { name: 'LastName', type: 'string' }, { name: 'Country', type: 'string' }, { name: 'City', type: 'string' }, { name: 'Address', type: 'string' }, { name: 'Title', type: 'string' }, { name: 'HireDate', type: 'date' }, { name: 'BirthDate', type: 'date' } ], hierarchy: { keyDataField: { name: 'EmployeeID' }, parentDataField: { name: 'ReportsTo' } }, id: 'EmployeeID', localData: [ { "EmployeeID": 1, "FirstName": "Nancy", "LastName": "Davolio", "ReportsTo": 2, "Country": "USA", "Title": "Sales Representative", "HireDate": "1992-05-01 00:00:00", "BirthDate": "1948-12-08 00:00:00", "City": "Seattle", "Address": "507 - 20th Ave. E.Apt. 2A" }, { "EmployeeID": 2, "FirstName": "Andrew", "LastName": "Fuller", "ReportsTo": null, "Country": "USA", "Title": "Vice President, Sales", "HireDate": "1992-08-14 00:00:00", "BirthDate": "1952-02-19 00:00:00", "City": "Tacoma", "Address": "908 W. Capital Way" }, { "EmployeeID": 3, "FirstName": "Janet", "LastName": "Leverling", "ReportsTo": 2, "Country": "USA", "Title": "Sales Representative", "HireDate": "1992-04-01 00:00:00", "BirthDate": "1963-08-30 00:00:00", "City": "Kirkland", "Address": "722 Moss Bay Blvd." }, { "EmployeeID": 4, "FirstName": "Margaret", "LastName": "Peacock", "ReportsTo": 2, "Country": "USA", "Title": "Sales Representative", "HireDate": "1993-05-03 00:00:00", "BirthDate": "1937-09-19 00:00:00", "City": "Redmond", "Address": "4110 Old Redmond Rd." }, { "EmployeeID": 5, "FirstName": "Steven", "LastName": "Buchanan", "ReportsTo": 2, "Country": "UK", "Title": "Sales Manager", "HireDate": "1993-10-17 00:00:00", "BirthDate": "1955-03-04 00:00:00", "City": "London", "Address": "14 Garrett Hill" }, { "EmployeeID": 6, "FirstName": "Michael", "LastName": "Suyama", "ReportsTo": 5, "Country": "UK", "Title": "Sales Representative", "HireDate": "1993-10-17 00:00:00", "BirthDate": "1963-07-02 00:00:00", "City": "London", "Address": "Coventry House Miner Rd." }, { "EmployeeID": 7, "FirstName": "Robert", "LastName": "King", "ReportsTo": 5, "Country": "UK", "Title": "Sales Representative", "HireDate": "1994-01-02 00:00:00", "BirthDate": "1960-05-29 00:00:00", "City": "London", "Address": "Edgeham Hollow Winchester Way" }, { "EmployeeID": 8, "FirstName": "Laura", "LastName": "Callahan", "ReportsTo": 2, "Country": "USA", "Title": "Inside Sales Coordinator", "HireDate": "1994-03-05 00:00:00", "BirthDate": "1958-01-09 00:00:00", "City": "Seattle", "Address": "4726 - 11th Ave. N.E." }, { "EmployeeID": 9, "FirstName": "Anne", "LastName": "Dodsworth", "ReportsTo": 5, "Country": "UK", "Title": "Sales Representative", "HireDate": "1994-11-15 00:00:00", "BirthDate": "1966-01-27 00:00:00", "City": "London", "Address": "7 Houndstooth Rd." } ]}); var columns = [ { text: 'FirstName', columnGroup: 'Name', dataField: 'FirstName', width: 200 }, { text: 'LastName', columnGroup: 'Name', dataField: 'LastName', width: 200 }, { text: 'Title', dataField: 'Title', width: 160 }, { text: 'Birth Date', dataField: 'BirthDate', cellsFormat: 'd', width: 120 }, { text: 'Hire Date', dataField: 'HireDate', cellsFormat: 'd', width: 120 }, { text: 'Address', dataField: 'Address', width: 250 }, { text: 'City', dataField: 'City', width: 120 }, { text: 'Country', dataField: 'Country' } ]; var columnGroups = [ { text: 'Name', name: 'Name' } ]; JQXElements.settings[ "treeGridSettings"] = { sortable:true,filterable:true, columns:columns, columnGroups:columnGroups, source:source, theme: "light", exportSettings:"exportSettings" } </script></head><body> <jqx-tree-grid settings="treeGridSettings"></jqx-tree-grid>
|
enableHover
|
boolean
|
true
|
Sets or gets the enableHover property.
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>TreeGrid Custom Element Filtering and Sorting</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,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/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtreegrid.js"></script> <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script> <script type="text/javascript"> var source = new jqx.dataAdapter({ dataType: "json", dataFields: [ { name: 'EmployeeID', type: 'number' }, { name: 'ReportsTo', type: 'number' }, { name: 'FirstName', type: 'string' }, { name: 'LastName', type: 'string' }, { name: 'Country', type: 'string' }, { name: 'City', type: 'string' }, { name: 'Address', type: 'string' }, { name: 'Title', type: 'string' }, { name: 'HireDate', type: 'date' }, { name: 'BirthDate', type: 'date' } ], hierarchy: { keyDataField: { name: 'EmployeeID' }, parentDataField: { name: 'ReportsTo' } }, id: 'EmployeeID', localData: [ { "EmployeeID": 1, "FirstName": "Nancy", "LastName": "Davolio", "ReportsTo": 2, "Country": "USA", "Title": "Sales Representative", "HireDate": "1992-05-01 00:00:00", "BirthDate": "1948-12-08 00:00:00", "City": "Seattle", "Address": "507 - 20th Ave. E.Apt. 2A" }, { "EmployeeID": 2, "FirstName": "Andrew", "LastName": "Fuller", "ReportsTo": null, "Country": "USA", "Title": "Vice President, Sales", "HireDate": "1992-08-14 00:00:00", "BirthDate": "1952-02-19 00:00:00", "City": "Tacoma", "Address": "908 W. Capital Way" }, { "EmployeeID": 3, "FirstName": "Janet", "LastName": "Leverling", "ReportsTo": 2, "Country": "USA", "Title": "Sales Representative", "HireDate": "1992-04-01 00:00:00", "BirthDate": "1963-08-30 00:00:00", "City": "Kirkland", "Address": "722 Moss Bay Blvd." }, { "EmployeeID": 4, "FirstName": "Margaret", "LastName": "Peacock", "ReportsTo": 2, "Country": "USA", "Title": "Sales Representative", "HireDate": "1993-05-03 00:00:00", "BirthDate": "1937-09-19 00:00:00", "City": "Redmond", "Address": "4110 Old Redmond Rd." }, { "EmployeeID": 5, "FirstName": "Steven", "LastName": "Buchanan", "ReportsTo": 2, "Country": "UK", "Title": "Sales Manager", "HireDate": "1993-10-17 00:00:00", "BirthDate": "1955-03-04 00:00:00", "City": "London", "Address": "14 Garrett Hill" }, { "EmployeeID": 6, "FirstName": "Michael", "LastName": "Suyama", "ReportsTo": 5, "Country": "UK", "Title": "Sales Representative", "HireDate": "1993-10-17 00:00:00", "BirthDate": "1963-07-02 00:00:00", "City": "London", "Address": "Coventry House Miner Rd." }, { "EmployeeID": 7, "FirstName": "Robert", "LastName": "King", "ReportsTo": 5, "Country": "UK", "Title": "Sales Representative", "HireDate": "1994-01-02 00:00:00", "BirthDate": "1960-05-29 00:00:00", "City": "London", "Address": "Edgeham Hollow Winchester Way" }, { "EmployeeID": 8, "FirstName": "Laura", "LastName": "Callahan", "ReportsTo": 2, "Country": "USA", "Title": "Inside Sales Coordinator", "HireDate": "1994-03-05 00:00:00", "BirthDate": "1958-01-09 00:00:00", "City": "Seattle", "Address": "4726 - 11th Ave. N.E." }, { "EmployeeID": 9, "FirstName": "Anne", "LastName": "Dodsworth", "ReportsTo": 5, "Country": "UK", "Title": "Sales Representative", "HireDate": "1994-11-15 00:00:00", "BirthDate": "1966-01-27 00:00:00", "City": "London", "Address": "7 Houndstooth Rd." } ]}); var columns = [ { text: 'FirstName', columnGroup: 'Name', dataField: 'FirstName', width: 200 }, { text: 'LastName', columnGroup: 'Name', dataField: 'LastName', width: 200 }, { text: 'Title', dataField: 'Title', width: 160 }, { text: 'Birth Date', dataField: 'BirthDate', cellsFormat: 'd', width: 120 }, { text: 'Hire Date', dataField: 'HireDate', cellsFormat: 'd', width: 120 }, { text: 'Address', dataField: 'Address', width: 250 }, { text: 'City', dataField: 'City', width: 120 }, { text: 'Country', dataField: 'Country' } ]; var columnGroups = [ { text: 'Name', name: 'Name' } ]; JQXElements.settings[ "treeGridSettings"] = { sortable:true,filterable:true, columns:columns, columnGroups:columnGroups, source:source, theme: "light",enableHover:true } </script></head><body> <jqx-tree-grid settings="treeGridSettings"></jqx-tree-grid>
|
enableBrowserSelection
|
boolean
|
false
|
Sets or gets the enableBrowserSelection property.
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>TreeGrid Custom Element Filtering and Sorting</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,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/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtreegrid.js"></script> <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script> <script type="text/javascript"> var source = new jqx.dataAdapter({ dataType: "json", dataFields: [ { name: 'EmployeeID', type: 'number' }, { name: 'ReportsTo', type: 'number' }, { name: 'FirstName', type: 'string' }, { name: 'LastName', type: 'string' }, { name: 'Country', type: 'string' }, { name: 'City', type: 'string' }, { name: 'Address', type: 'string' }, { name: 'Title', type: 'string' }, { name: 'HireDate', type: 'date' }, { name: 'BirthDate', type: 'date' } ], hierarchy: { keyDataField: { name: 'EmployeeID' }, parentDataField: { name: 'ReportsTo' } }, id: 'EmployeeID', localData: [ { "EmployeeID": 1, "FirstName": "Nancy", "LastName": "Davolio", "ReportsTo": 2, "Country": "USA", "Title": "Sales Representative", "HireDate": "1992-05-01 00:00:00", "BirthDate": "1948-12-08 00:00:00", "City": "Seattle", "Address": "507 - 20th Ave. E.Apt. 2A" }, { "EmployeeID": 2, "FirstName": "Andrew", "LastName": "Fuller", "ReportsTo": null, "Country": "USA", "Title": "Vice President, Sales", "HireDate": "1992-08-14 00:00:00", "BirthDate": "1952-02-19 00:00:00", "City": "Tacoma", "Address": "908 W. Capital Way" }, { "EmployeeID": 3, "FirstName": "Janet", "LastName": "Leverling", "ReportsTo": 2, "Country": "USA", "Title": "Sales Representative", "HireDate": "1992-04-01 00:00:00", "BirthDate": "1963-08-30 00:00:00", "City": "Kirkland", "Address": "722 Moss Bay Blvd." }, { "EmployeeID": 4, "FirstName": "Margaret", "LastName": "Peacock", "ReportsTo": 2, "Country": "USA", "Title": "Sales Representative", "HireDate": "1993-05-03 00:00:00", "BirthDate": "1937-09-19 00:00:00", "City": "Redmond", "Address": "4110 Old Redmond Rd." }, { "EmployeeID": 5, "FirstName": "Steven", "LastName": "Buchanan", "ReportsTo": 2, "Country": "UK", "Title": "Sales Manager", "HireDate": "1993-10-17 00:00:00", "BirthDate": "1955-03-04 00:00:00", "City": "London", "Address": "14 Garrett Hill" }, { "EmployeeID": 6, "FirstName": "Michael", "LastName": "Suyama", "ReportsTo": 5, "Country": "UK", "Title": "Sales Representative", "HireDate": "1993-10-17 00:00:00", "BirthDate": "1963-07-02 00:00:00", "City": "London", "Address": "Coventry House Miner Rd." }, { "EmployeeID": 7, "FirstName": "Robert", "LastName": "King", "ReportsTo": 5, "Country": "UK", "Title": "Sales Representative", "HireDate": "1994-01-02 00:00:00", "BirthDate": "1960-05-29 00:00:00", "City": "London", "Address": "Edgeham Hollow Winchester Way" }, { "EmployeeID": 8, "FirstName": "Laura", "LastName": "Callahan", "ReportsTo": 2, "Country": "USA", "Title": "Inside Sales Coordinator", "HireDate": "1994-03-05 00:00:00", "BirthDate": "1958-01-09 00:00:00", "City": "Seattle", "Address": "4726 - 11th Ave. N.E." }, { "EmployeeID": 9, "FirstName": "Anne", "LastName": "Dodsworth", "ReportsTo": 5, "Country": "UK", "Title": "Sales Representative", "HireDate": "1994-11-15 00:00:00", "BirthDate": "1966-01-27 00:00:00", "City": "London", "Address": "7 Houndstooth Rd." } ]}); var columns = [ { text: 'FirstName', columnGroup: 'Name', dataField: 'FirstName', width: 200 }, { text: 'LastName', columnGroup: 'Name', dataField: 'LastName', width: 200 }, { text: 'Title', dataField: 'Title', width: 160 }, { text: 'Birth Date', dataField: 'BirthDate', cellsFormat: 'd', width: 120 }, { text: 'Hire Date', dataField: 'HireDate', cellsFormat: 'd', width: 120 }, { text: 'Address', dataField: 'Address', width: 250 }, { text: 'City', dataField: 'City', width: 120 }, { text: 'Country', dataField: 'Country' } ]; var columnGroups = [ { text: 'Name', name: 'Name' } ]; JQXElements.settings[ "treeGridSettings"] = { sortable:true,filterable:true, columns:columns, columnGroups:columnGroups, source:source, theme: "light",enableBrowserSelection:true } </script></head><body> <jqx-tree-grid settings="treeGridSettings"></jqx-tree-grid>
|
filterable
|
boolean
|
false
|
Sets or gets the filterable property.
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>TreeGrid Custom Element Filtering and Sorting</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,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/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtreegrid.js"></script> <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script> <script type="text/javascript"> var source = new jqx.dataAdapter({ dataType: "json", dataFields: [ { name: 'EmployeeID', type: 'number' }, { name: 'ReportsTo', type: 'number' }, { name: 'FirstName', type: 'string' }, { name: 'LastName', type: 'string' }, { name: 'Country', type: 'string' }, { name: 'City', type: 'string' }, { name: 'Address', type: 'string' }, { name: 'Title', type: 'string' }, { name: 'HireDate', type: 'date' }, { name: 'BirthDate', type: 'date' } ], hierarchy: { keyDataField: { name: 'EmployeeID' }, parentDataField: { name: 'ReportsTo' } }, id: 'EmployeeID', localData: [ { "EmployeeID": 1, "FirstName": "Nancy", "LastName": "Davolio", "ReportsTo": 2, "Country": "USA", "Title": "Sales Representative", "HireDate": "1992-05-01 00:00:00", "BirthDate": "1948-12-08 00:00:00", "City": "Seattle", "Address": "507 - 20th Ave. E.Apt. 2A" }, { "EmployeeID": 2, "FirstName": "Andrew", "LastName": "Fuller", "ReportsTo": null, "Country": "USA", "Title": "Vice President, Sales", "HireDate": "1992-08-14 00:00:00", "BirthDate": "1952-02-19 00:00:00", "City": "Tacoma", "Address": "908 W. Capital Way" }, { "EmployeeID": 3, "FirstName": "Janet", "LastName": "Leverling", "ReportsTo": 2, "Country": "USA", "Title": "Sales Representative", "HireDate": "1992-04-01 00:00:00", "BirthDate": "1963-08-30 00:00:00", "City": "Kirkland", "Address": "722 Moss Bay Blvd." }, { "EmployeeID": 4, "FirstName": "Margaret", "LastName": "Peacock", "ReportsTo": 2, "Country": "USA", "Title": "Sales Representative", "HireDate": "1993-05-03 00:00:00", "BirthDate": "1937-09-19 00:00:00", "City": "Redmond", "Address": "4110 Old Redmond Rd." }, { "EmployeeID": 5, "FirstName": "Steven", "LastName": "Buchanan", "ReportsTo": 2, "Country": "UK", "Title": "Sales Manager", "HireDate": "1993-10-17 00:00:00", "BirthDate": "1955-03-04 00:00:00", "City": "London", "Address": "14 Garrett Hill" }, { "EmployeeID": 6, "FirstName": "Michael", "LastName": "Suyama", "ReportsTo": 5, "Country": "UK", "Title": "Sales Representative", "HireDate": "1993-10-17 00:00:00", "BirthDate": "1963-07-02 00:00:00", "City": "London", "Address": "Coventry House Miner Rd." }, { "EmployeeID": 7, "FirstName": "Robert", "LastName": "King", "ReportsTo": 5, "Country": "UK", "Title": "Sales Representative", "HireDate": "1994-01-02 00:00:00", "BirthDate": "1960-05-29 00:00:00", "City": "London", "Address": "Edgeham Hollow Winchester Way" }, { "EmployeeID": 8, "FirstName": "Laura", "LastName": "Callahan", "ReportsTo": 2, "Country": "USA", "Title": "Inside Sales Coordinator", "HireDate": "1994-03-05 00:00:00", "BirthDate": "1958-01-09 00:00:00", "City": "Seattle", "Address": "4726 - 11th Ave. N.E." }, { "EmployeeID": 9, "FirstName": "Anne", "LastName": "Dodsworth", "ReportsTo": 5, "Country": "UK", "Title": "Sales Representative", "HireDate": "1994-11-15 00:00:00", "BirthDate": "1966-01-27 00:00:00", "City": "London", "Address": "7 Houndstooth Rd." } ]}); var columns = [ { text: 'FirstName', columnGroup: 'Name', dataField: 'FirstName', width: 200 }, { text: 'LastName', columnGroup: 'Name', dataField: 'LastName', width: 200 }, { text: 'Title', dataField: 'Title', width: 160 }, { text: 'Birth Date', dataField: 'BirthDate', cellsFormat: 'd', width: 120 }, { text: 'Hire Date', dataField: 'HireDate', cellsFormat: 'd', width: 120 }, { text: 'Address', dataField: 'Address', width: 250 }, { text: 'City', dataField: 'City', width: 120 }, { text: 'Country', dataField: 'Country' } ]; var columnGroups = [ { text: 'Name', name: 'Name' } ]; JQXElements.settings[ "treeGridSettings"] = { sortable:true,filterable:true, columns:columns, columnGroups:columnGroups, source:source, theme: "light" } </script></head><body> <jqx-tree-grid settings="treeGridSettings"></jqx-tree-grid>
|
filterHeight
|
number
|
30
|
Sets or gets the filterHeight property.
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>TreeGrid Custom Element Filtering and Sorting</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,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/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtreegrid.js"></script> <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script> <script type="text/javascript"> var source = new jqx.dataAdapter({ dataType: "json", dataFields: [ { name: 'EmployeeID', type: 'number' }, { name: 'ReportsTo', type: 'number' }, { name: 'FirstName', type: 'string' }, { name: 'LastName', type: 'string' }, { name: 'Country', type: 'string' }, { name: 'City', type: 'string' }, { name: 'Address', type: 'string' }, { name: 'Title', type: 'string' }, { name: 'HireDate', type: 'date' }, { name: 'BirthDate', type: 'date' } ], hierarchy: { keyDataField: { name: 'EmployeeID' }, parentDataField: { name: 'ReportsTo' } }, id: 'EmployeeID', localData: [ { "EmployeeID": 1, "FirstName": "Nancy", "LastName": "Davolio", "ReportsTo": 2, "Country": "USA", "Title": "Sales Representative", "HireDate": "1992-05-01 00:00:00", "BirthDate": "1948-12-08 00:00:00", "City": "Seattle", "Address": "507 - 20th Ave. E.Apt. 2A" }, { "EmployeeID": 2, "FirstName": "Andrew", "LastName": "Fuller", "ReportsTo": null, "Country": "USA", "Title": "Vice President, Sales", "HireDate": "1992-08-14 00:00:00", "BirthDate": "1952-02-19 00:00:00", "City": "Tacoma", "Address": "908 W. Capital Way" }, { "EmployeeID": 3, "FirstName": "Janet", "LastName": "Leverling", "ReportsTo": 2, "Country": "USA", "Title": "Sales Representative", "HireDate": "1992-04-01 00:00:00", "BirthDate": "1963-08-30 00:00:00", "City": "Kirkland", "Address": "722 Moss Bay Blvd." }, { "EmployeeID": 4, "FirstName": "Margaret", "LastName": "Peacock", "ReportsTo": 2, "Country": "USA", "Title": "Sales Representative", "HireDate": "1993-05-03 00:00:00", "BirthDate": "1937-09-19 00:00:00", "City": "Redmond", "Address": "4110 Old Redmond Rd." }, { "EmployeeID": 5, "FirstName": "Steven", "LastName": "Buchanan", "ReportsTo": 2, "Country": "UK", "Title": "Sales Manager", "HireDate": "1993-10-17 00:00:00", "BirthDate": "1955-03-04 00:00:00", "City": "London", "Address": "14 Garrett Hill" }, { "EmployeeID": 6, "FirstName": "Michael", "LastName": "Suyama", "ReportsTo": 5, "Country": "UK", "Title": "Sales Representative", "HireDate": "1993-10-17 00:00:00", "BirthDate": "1963-07-02 00:00:00", "City": "London", "Address": "Coventry House Miner Rd." }, { "EmployeeID": 7, "FirstName": "Robert", "LastName": "King", "ReportsTo": 5, "Country": "UK", "Title": "Sales Representative", "HireDate": "1994-01-02 00:00:00", "BirthDate": "1960-05-29 00:00:00", "City": "London", "Address": "Edgeham Hollow Winchester Way" }, { "EmployeeID": 8, "FirstName": "Laura", "LastName": "Callahan", "ReportsTo": 2, "Country": "USA", "Title": "Inside Sales Coordinator", "HireDate": "1994-03-05 00:00:00", "BirthDate": "1958-01-09 00:00:00", "City": "Seattle", "Address": "4726 - 11th Ave. N.E." }, { "EmployeeID": 9, "FirstName": "Anne", "LastName": "Dodsworth", "ReportsTo": 5, "Country": "UK", "Title": "Sales Representative", "HireDate": "1994-11-15 00:00:00", "BirthDate": "1966-01-27 00:00:00", "City": "London", "Address": "7 Houndstooth Rd." } ]}); var columns = [ { text: 'FirstName', columnGroup: 'Name', dataField: 'FirstName', width: 200 }, { text: 'LastName', columnGroup: 'Name', dataField: 'LastName', width: 200 }, { text: 'Title', dataField: 'Title', width: 160 }, { text: 'Birth Date', dataField: 'BirthDate', cellsFormat: 'd', width: 120 }, { text: 'Hire Date', dataField: 'HireDate', cellsFormat: 'd', width: 120 }, { text: 'Address', dataField: 'Address', width: 250 }, { text: 'City', dataField: 'City', width: 120 }, { text: 'Country', dataField: 'Country' } ]; var columnGroups = [ { text: 'Name', name: 'Name' } ]; JQXElements.settings[ "treeGridSettings"] = { sortable:true,filterable:true, columns:columns, columnGroups:columnGroups, source:source, theme: "light",filterHeight:40 } </script></head><body> <jqx-tree-grid settings="treeGridSettings"></jqx-tree-grid>
|
filterMode
|
string
|
"default"
|
Sets or gets the filterMode property.
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>TreeGrid Custom Element Filtering and Sorting</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,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/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtreegrid.js"></script> <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script> <script type="text/javascript"> var source = new jqx.dataAdapter({ dataType: "json", dataFields: [ { name: 'EmployeeID', type: 'number' }, { name: 'ReportsTo', type: 'number' }, { name: 'FirstName', type: 'string' }, { name: 'LastName', type: 'string' }, { name: 'Country', type: 'string' }, { name: 'City', type: 'string' }, { name: 'Address', type: 'string' }, { name: 'Title', type: 'string' }, { name: 'HireDate', type: 'date' }, { name: 'BirthDate', type: 'date' } ], hierarchy: { keyDataField: { name: 'EmployeeID' }, parentDataField: { name: 'ReportsTo' } }, id: 'EmployeeID', localData: [ { "EmployeeID": 1, "FirstName": "Nancy", "LastName": "Davolio", "ReportsTo": 2, "Country": "USA", "Title": "Sales Representative", "HireDate": "1992-05-01 00:00:00", "BirthDate": "1948-12-08 00:00:00", "City": "Seattle", "Address": "507 - 20th Ave. E.Apt. 2A" }, { "EmployeeID": 2, "FirstName": "Andrew", "LastName": "Fuller", "ReportsTo": null, "Country": "USA", "Title": "Vice President, Sales", "HireDate": "1992-08-14 00:00:00", "BirthDate": "1952-02-19 00:00:00", "City": "Tacoma", "Address": "908 W. Capital Way" }, { "EmployeeID": 3, "FirstName": "Janet", "LastName": "Leverling", "ReportsTo": 2, "Country": "USA", "Title": "Sales Representative", "HireDate": "1992-04-01 00:00:00", "BirthDate": "1963-08-30 00:00:00", "City": "Kirkland", "Address": "722 Moss Bay Blvd." }, { "EmployeeID": 4, "FirstName": "Margaret", "LastName": "Peacock", "ReportsTo": 2, "Country": "USA", "Title": "Sales Representative", "HireDate": "1993-05-03 00:00:00", "BirthDate": "1937-09-19 00:00:00", "City": "Redmond", "Address": "4110 Old Redmond Rd." }, { "EmployeeID": 5, "FirstName": "Steven", "LastName": "Buchanan", "ReportsTo": 2, "Country": "UK", "Title": "Sales Manager", "HireDate": "1993-10-17 00:00:00", "BirthDate": "1955-03-04 00:00:00", "City": "London", "Address": "14 Garrett Hill" }, { "EmployeeID": 6, "FirstName": "Michael", "LastName": "Suyama", "ReportsTo": 5, "Country": "UK", "Title": "Sales Representative", "HireDate": "1993-10-17 00:00:00", "BirthDate": "1963-07-02 00:00:00", "City": "London", "Address": "Coventry House Miner Rd." }, { "EmployeeID": 7, "FirstName": "Robert", "LastName": "King", "ReportsTo": 5, "Country": "UK", "Title": "Sales Representative", "HireDate": "1994-01-02 00:00:00", "BirthDate": "1960-05-29 00:00:00", "City": "London", "Address": "Edgeham Hollow Winchester Way" }, { "EmployeeID": 8, "FirstName": "Laura", "LastName": "Callahan", "ReportsTo": 2, "Country": "USA", "Title": "Inside Sales Coordinator", "HireDate": "1994-03-05 00:00:00", "BirthDate": "1958-01-09 00:00:00", "City": "Seattle", "Address": "4726 - 11th Ave. N.E." }, { "EmployeeID": 9, "FirstName": "Anne", "LastName": "Dodsworth", "ReportsTo": 5, "Country": "UK", "Title": "Sales Representative", "HireDate": "1994-11-15 00:00:00", "BirthDate": "1966-01-27 00:00:00", "City": "London", "Address": "7 Houndstooth Rd." } ]}); var columns = [ { text: 'FirstName', columnGroup: 'Name', dataField: 'FirstName', width: 200 }, { text: 'LastName', columnGroup: 'Name', dataField: 'LastName', width: 200 }, { text: 'Title', dataField: 'Title', width: 160 }, { text: 'Birth Date', dataField: 'BirthDate', cellsFormat: 'd', width: 120 }, { text: 'Hire Date', dataField: 'HireDate', cellsFormat: 'd', width: 120 }, { text: 'Address', dataField: 'Address', width: 250 }, { text: 'City', dataField: 'City', width: 120 }, { text: 'Country', dataField: 'Country' } ]; var columnGroups = [ { text: 'Name', name: 'Name' } ]; JQXElements.settings[ "treeGridSettings"] = { sortable:true,filterable:true, columns:columns, columnGroups:columnGroups, source:source, theme: "light", filterMode:"advanced" } </script></head><body> <jqx-tree-grid settings="treeGridSettings"></jqx-tree-grid>
|
height
|
number
|
null
|
Sets or gets the height property.
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>TreeGrid Custom Element Filtering and Sorting</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,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/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtreegrid.js"></script> <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script> <script type="text/javascript"> var source = new jqx.dataAdapter({ dataType: "json", dataFields: [ { name: 'EmployeeID', type: 'number' }, { name: 'ReportsTo', type: 'number' }, { name: 'FirstName', type: 'string' }, { name: 'LastName', type: 'string' }, { name: 'Country', type: 'string' }, { name: 'City', type: 'string' }, { name: 'Address', type: 'string' }, { name: 'Title', type: 'string' }, { name: 'HireDate', type: 'date' }, { name: 'BirthDate', type: 'date' } ], hierarchy: { keyDataField: { name: 'EmployeeID' }, parentDataField: { name: 'ReportsTo' } }, id: 'EmployeeID', localData: [ { "EmployeeID": 1, "FirstName": "Nancy", "LastName": "Davolio", "ReportsTo": 2, "Country": "USA", "Title": "Sales Representative", "HireDate": "1992-05-01 00:00:00", "BirthDate": "1948-12-08 00:00:00", "City": "Seattle", "Address": "507 - 20th Ave. E.Apt. 2A" }, { "EmployeeID": 2, "FirstName": "Andrew", "LastName": "Fuller", "ReportsTo": null, "Country": "USA", "Title": "Vice President, Sales", "HireDate": "1992-08-14 00:00:00", "BirthDate": "1952-02-19 00:00:00", "City": "Tacoma", "Address": "908 W. Capital Way" }, { "EmployeeID": 3, "FirstName": "Janet", "LastName": "Leverling", "ReportsTo": 2, "Country": "USA", "Title": "Sales Representative", "HireDate": "1992-04-01 00:00:00", "BirthDate": "1963-08-30 00:00:00", "City": "Kirkland", "Address": "722 Moss Bay Blvd." }, { "EmployeeID": 4, "FirstName": "Margaret", "LastName": "Peacock", "ReportsTo": 2, "Country": "USA", "Title": "Sales Representative", "HireDate": "1993-05-03 00:00:00", "BirthDate": "1937-09-19 00:00:00", "City": "Redmond", "Address": "4110 Old Redmond Rd." }, { "EmployeeID": 5, "FirstName": "Steven", "LastName": "Buchanan", "ReportsTo": 2, "Country": "UK", "Title": "Sales Manager", "HireDate": "1993-10-17 00:00:00", "BirthDate": "1955-03-04 00:00:00", "City": "London", "Address": "14 Garrett Hill" }, { "EmployeeID": 6, "FirstName": "Michael", "LastName": "Suyama", "ReportsTo": 5, "Country": "UK", "Title": "Sales Representative", "HireDate": "1993-10-17 00:00:00", "BirthDate": "1963-07-02 00:00:00", "City": "London", "Address": "Coventry House Miner Rd." }, { "EmployeeID": 7, "FirstName": "Robert", "LastName": "King", "ReportsTo": 5, "Country": "UK", "Title": "Sales Representative", "HireDate": "1994-01-02 00:00:00", "BirthDate": "1960-05-29 00:00:00", "City": "London", "Address": "Edgeham Hollow Winchester Way" }, { "EmployeeID": 8, "FirstName": "Laura", "LastName": "Callahan", "ReportsTo": 2, "Country": "USA", "Title": "Inside Sales Coordinator", "HireDate": "1994-03-05 00:00:00", "BirthDate": "1958-01-09 00:00:00", "City": "Seattle", "Address": "4726 - 11th Ave. N.E." }, { "EmployeeID": 9, "FirstName": "Anne", "LastName": "Dodsworth", "ReportsTo": 5, "Country": "UK", "Title": "Sales Representative", "HireDate": "1994-11-15 00:00:00", "BirthDate": "1966-01-27 00:00:00", "City": "London", "Address": "7 Houndstooth Rd." } ]}); var columns = [ { text: 'FirstName', columnGroup: 'Name', dataField: 'FirstName', width: 200 }, { text: 'LastName', columnGroup: 'Name', dataField: 'LastName', width: 200 }, { text: 'Title', dataField: 'Title', width: 160 }, { text: 'Birth Date', dataField: 'BirthDate', cellsFormat: 'd', width: 120 }, { text: 'Hire Date', dataField: 'HireDate', cellsFormat: 'd', width: 120 }, { text: 'Address', dataField: 'Address', width: 250 }, { text: 'City', dataField: 'City', width: 120 }, { text: 'Country', dataField: 'Country' } ]; var columnGroups = [ { text: 'Name', name: 'Name' } ]; JQXElements.settings[ "treeGridSettings"] = { sortable:true,filterable:true, columns:columns, columnGroups:columnGroups, source:source, theme: "light",height:200 } </script></head><body> <jqx-tree-grid settings="treeGridSettings"></jqx-tree-grid>
|
hierarchicalCheckboxes
|
boolean
|
false
|
Sets or gets the hierarchicalCheckboxes property.
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>TreeGrid Custom Element Filtering and Sorting</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,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/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtreegrid.js"></script> <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script> <script type="text/javascript"> var source = new jqx.dataAdapter({ dataType: "json", dataFields: [ { name: 'EmployeeID', type: 'number' }, { name: 'ReportsTo', type: 'number' }, { name: 'FirstName', type: 'string' }, { name: 'LastName', type: 'string' }, { name: 'Country', type: 'string' }, { name: 'City', type: 'string' }, { name: 'Address', type: 'string' }, { name: 'Title', type: 'string' }, { name: 'HireDate', type: 'date' }, { name: 'BirthDate', type: 'date' } ], hierarchy: { keyDataField: { name: 'EmployeeID' }, parentDataField: { name: 'ReportsTo' } }, id: 'EmployeeID', localData: [ { "EmployeeID": 1, "FirstName": "Nancy", "LastName": "Davolio", "ReportsTo": 2, "Country": "USA", "Title": "Sales Representative", "HireDate": "1992-05-01 00:00:00", "BirthDate": "1948-12-08 00:00:00", "City": "Seattle", "Address": "507 - 20th Ave. E.Apt. 2A" }, { "EmployeeID": 2, "FirstName": "Andrew", "LastName": "Fuller", "ReportsTo": null, "Country": "USA", "Title": "Vice President, Sales", "HireDate": "1992-08-14 00:00:00", "BirthDate": "1952-02-19 00:00:00", "City": "Tacoma", "Address": "908 W. Capital Way" }, { "EmployeeID": 3, "FirstName": "Janet", "LastName": "Leverling", "ReportsTo": 2, "Country": "USA", "Title": "Sales Representative", "HireDate": "1992-04-01 00:00:00", "BirthDate": "1963-08-30 00:00:00", "City": "Kirkland", "Address": "722 Moss Bay Blvd." }, { "EmployeeID": 4, "FirstName": "Margaret", "LastName": "Peacock", "ReportsTo": 2, "Country": "USA", "Title": "Sales Representative", "HireDate": "1993-05-03 00:00:00", "BirthDate": "1937-09-19 00:00:00", "City": "Redmond", "Address": "4110 Old Redmond Rd." }, { "EmployeeID": 5, "FirstName": "Steven", "LastName": "Buchanan", "ReportsTo": 2, "Country": "UK", "Title": "Sales Manager", "HireDate": "1993-10-17 00:00:00", "BirthDate": "1955-03-04 00:00:00", "City": "London", "Address": "14 Garrett Hill" }, { "EmployeeID": 6, "FirstName": "Michael", "LastName": "Suyama", "ReportsTo": 5, "Country": "UK", "Title": "Sales Representative", "HireDate": "1993-10-17 00:00:00", "BirthDate": "1963-07-02 00:00:00", "City": "London", "Address": "Coventry House Miner Rd." }, { "EmployeeID": 7, "FirstName": "Robert", "LastName": "King", "ReportsTo": 5, "Country": "UK", "Title": "Sales Representative", "HireDate": "1994-01-02 00:00:00", "BirthDate": "1960-05-29 00:00:00", "City": "London", "Address": "Edgeham Hollow Winchester Way" }, { "EmployeeID": 8, "FirstName": "Laura", "LastName": "Callahan", "ReportsTo": 2, "Country": "USA", "Title": "Inside Sales Coordinator", "HireDate": "1994-03-05 00:00:00", "BirthDate": "1958-01-09 00:00:00", "City": "Seattle", "Address": "4726 - 11th Ave. N.E." }, { "EmployeeID": 9, "FirstName": "Anne", "LastName": "Dodsworth", "ReportsTo": 5, "Country": "UK", "Title": "Sales Representative", "HireDate": "1994-11-15 00:00:00", "BirthDate": "1966-01-27 00:00:00", "City": "London", "Address": "7 Houndstooth Rd." } ]}); var columns = [ { text: 'FirstName', columnGroup: 'Name', dataField: 'FirstName', width: 200 }, { text: 'LastName', columnGroup: 'Name', dataField: 'LastName', width: 200 }, { text: 'Title', dataField: 'Title', width: 160 }, { text: 'Birth Date', dataField: 'BirthDate', cellsFormat: 'd', width: 120 }, { text: 'Hire Date', dataField: 'HireDate', cellsFormat: 'd', width: 120 }, { text: 'Address', dataField: 'Address', width: 250 }, { text: 'City', dataField: 'City', width: 120 }, { text: 'Country', dataField: 'Country' } ]; var columnGroups = [ { text: 'Name', name: 'Name' } ]; JQXElements.settings[ "treeGridSettings"] = { sortable:true,filterable:true, columns:columns, columnGroups:columnGroups, source:source, theme: "light",checkboxes:true,hierarchicalCheckboxes:true } </script></head><body> <jqx-tree-grid settings="treeGridSettings"></jqx-tree-grid>
|
icons
|
boolean
|
false
|
Sets or gets the icons property.
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>TreeGrid Custom Element Filtering and Sorting</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,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/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtreegrid.js"></script> <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script> <script type="text/javascript"> var source = new jqx.dataAdapter({ dataType: "json", dataFields: [ { name: 'EmployeeID', type: 'number' }, { name: 'ReportsTo', type: 'number' }, { name: 'FirstName', type: 'string' }, { name: 'LastName', type: 'string' }, { name: 'Country', type: 'string' }, { name: 'City', type: 'string' }, { name: 'Address', type: 'string' }, { name: 'Title', type: 'string' }, { name: 'HireDate', type: 'date' }, { name: 'BirthDate', type: 'date' } ], hierarchy: { keyDataField: { name: 'EmployeeID' }, parentDataField: { name: 'ReportsTo' } }, id: 'EmployeeID', localData: [ { "EmployeeID": 1, "FirstName": "Nancy", "LastName": "Davolio", "ReportsTo": 2, "Country": "USA", "Title": "Sales Representative", "HireDate": "1992-05-01 00:00:00", "BirthDate": "1948-12-08 00:00:00", "City": "Seattle", "Address": "507 - 20th Ave. E.Apt. 2A" }, { "EmployeeID": 2, "FirstName": "Andrew", "LastName": "Fuller", "ReportsTo": null, "Country": "USA", "Title": "Vice President, Sales", "HireDate": "1992-08-14 00:00:00", "BirthDate": "1952-02-19 00:00:00", "City": "Tacoma", "Address": "908 W. Capital Way" }, { "EmployeeID": 3, "FirstName": "Janet", "LastName": "Leverling", "ReportsTo": 2, "Country": "USA", "Title": "Sales Representative", "HireDate": "1992-04-01 00:00:00", "BirthDate": "1963-08-30 00:00:00", "City": "Kirkland", "Address": "722 Moss Bay Blvd." }, { "EmployeeID": 4, "FirstName": "Margaret", "LastName": "Peacock", "ReportsTo": 2, "Country": "USA", "Title": "Sales Representative", "HireDate": "1993-05-03 00:00:00", "BirthDate": "1937-09-19 00:00:00", "City": "Redmond", "Address": "4110 Old Redmond Rd." }, { "EmployeeID": 5, "FirstName": "Steven", "LastName": "Buchanan", "ReportsTo": 2, "Country": "UK", "Title": "Sales Manager", "HireDate": "1993-10-17 00:00:00", "BirthDate": "1955-03-04 00:00:00", "City": "London", "Address": "14 Garrett Hill" }, { "EmployeeID": 6, "FirstName": "Michael", "LastName": "Suyama", "ReportsTo": 5, "Country": "UK", "Title": "Sales Representative", "HireDate": "1993-10-17 00:00:00", "BirthDate": "1963-07-02 00:00:00", "City": "London", "Address": "Coventry House Miner Rd." }, { "EmployeeID": 7, "FirstName": "Robert", "LastName": "King", "ReportsTo": 5, "Country": "UK", "Title": "Sales Representative", "HireDate": "1994-01-02 00:00:00", "BirthDate": "1960-05-29 00:00:00", "City": "London", "Address": "Edgeham Hollow Winchester Way" }, { "EmployeeID": 8, "FirstName": "Laura", "LastName": "Callahan", "ReportsTo": 2, "Country": "USA", "Title": "Inside Sales Coordinator", "HireDate": "1994-03-05 00:00:00", "BirthDate": "1958-01-09 00:00:00", "City": "Seattle", "Address": "4726 - 11th Ave. N.E." }, { "EmployeeID": 9, "FirstName": "Anne", "LastName": "Dodsworth", "ReportsTo": 5, "Country": "UK", "Title": "Sales Representative", "HireDate": "1994-11-15 00:00:00", "BirthDate": "1966-01-27 00:00:00", "City": "London", "Address": "7 Houndstooth Rd." } ]}); var columns = [ { text: 'FirstName', columnGroup: 'Name', dataField: 'FirstName', width: 200 }, { text: 'LastName', columnGroup: 'Name', dataField: 'LastName', width: 200 }, { text: 'Title', dataField: 'Title', width: 160 }, { text: 'Birth Date', dataField: 'BirthDate', cellsFormat: 'd', width: 120 }, { text: 'Hire Date', dataField: 'HireDate', cellsFormat: 'd', width: 120 }, { text: 'Address', dataField: 'Address', width: 250 }, { text: 'City', dataField: 'City', width: 120 }, { text: 'Country', dataField: 'Country' } ]; var columnGroups = [ { text: 'Name', name: 'Name' } ]; JQXElements.settings[ "treeGridSettings"] = { sortable:true,filterable:true, columns:columns, columnGroups:columnGroups, source:source, theme: "light",icons:true } </script></head><body> <jqx-tree-grid settings="treeGridSettings"></jqx-tree-grid>
|
incrementalSearch
|
boolean
|
true
|
Sets or gets the incrementalSearch property.
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>TreeGrid Custom Element Filtering and Sorting</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,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/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtreegrid.js"></script> <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script> <script type="text/javascript"> var source = new jqx.dataAdapter({ dataType: "json", dataFields: [ { name: 'EmployeeID', type: 'number' }, { name: 'ReportsTo', type: 'number' }, { name: 'FirstName', type: 'string' }, { name: 'LastName', type: 'string' }, { name: 'Country', type: 'string' }, { name: 'City', type: 'string' }, { name: 'Address', type: 'string' }, { name: 'Title', type: 'string' }, { name: 'HireDate', type: 'date' }, { name: 'BirthDate', type: 'date' } ], hierarchy: { keyDataField: { name: 'EmployeeID' }, parentDataField: { name: 'ReportsTo' } }, id: 'EmployeeID', localData: [ { "EmployeeID": 1, "FirstName": "Nancy", "LastName": "Davolio", "ReportsTo": 2, "Country": "USA", "Title": "Sales Representative", "HireDate": "1992-05-01 00:00:00", "BirthDate": "1948-12-08 00:00:00", "City": "Seattle", "Address": "507 - 20th Ave. E.Apt. 2A" }, { "EmployeeID": 2, "FirstName": "Andrew", "LastName": "Fuller", "ReportsTo": null, "Country": "USA", "Title": "Vice President, Sales", "HireDate": "1992-08-14 00:00:00", "BirthDate": "1952-02-19 00:00:00", "City": "Tacoma", "Address": "908 W. Capital Way" }, { "EmployeeID": 3, "FirstName": "Janet", "LastName": "Leverling", "ReportsTo": 2, "Country": "USA", "Title": "Sales Representative", "HireDate": "1992-04-01 00:00:00", "BirthDate": "1963-08-30 00:00:00", "City": "Kirkland", "Address": "722 Moss Bay Blvd." }, { "EmployeeID": 4, "FirstName": "Margaret", "LastName": "Peacock", "ReportsTo": 2, "Country": "USA", "Title": "Sales Representative", "HireDate": "1993-05-03 00:00:00", "BirthDate": "1937-09-19 00:00:00", "City": "Redmond", "Address": "4110 Old Redmond Rd." }, { "EmployeeID": 5, "FirstName": "Steven", "LastName": "Buchanan", "ReportsTo": 2, "Country": "UK", "Title": "Sales Manager", "HireDate": "1993-10-17 00:00:00", "BirthDate": "1955-03-04 00:00:00", "City": "London", "Address": "14 Garrett Hill" }, { "EmployeeID": 6, "FirstName": "Michael", "LastName": "Suyama", "ReportsTo": 5, "Country": "UK", "Title": "Sales Representative", "HireDate": "1993-10-17 00:00:00", "BirthDate": "1963-07-02 00:00:00", "City": "London", "Address": "Coventry House Miner Rd." }, { "EmployeeID": 7, "FirstName": "Robert", "LastName": "King", "ReportsTo": 5, "Country": "UK", "Title": "Sales Representative", "HireDate": "1994-01-02 00:00:00", "BirthDate": "1960-05-29 00:00:00", "City": "London", "Address": "Edgeham Hollow Winchester Way" }, { "EmployeeID": 8, "FirstName": "Laura", "LastName": "Callahan", "ReportsTo": 2, "Country": "USA", "Title": "Inside Sales Coordinator", "HireDate": "1994-03-05 00:00:00", "BirthDate": "1958-01-09 00:00:00", "City": "Seattle", "Address": "4726 - 11th Ave. N.E." }, { "EmployeeID": 9, "FirstName": "Anne", "LastName": "Dodsworth", "ReportsTo": 5, "Country": "UK", "Title": "Sales Representative", "HireDate": "1994-11-15 00:00:00", "BirthDate": "1966-01-27 00:00:00", "City": "London", "Address": "7 Houndstooth Rd." } ]}); var columns = [ { text: 'FirstName', columnGroup: 'Name', dataField: 'FirstName', width: 200 }, { text: 'LastName', columnGroup: 'Name', dataField: 'LastName', width: 200 }, { text: 'Title', dataField: 'Title', width: 160 }, { text: 'Birth Date', dataField: 'BirthDate', cellsFormat: 'd', width: 120 }, { text: 'Hire Date', dataField: 'HireDate', cellsFormat: 'd', width: 120 }, { text: 'Address', dataField: 'Address', width: 250 }, { text: 'City', dataField: 'City', width: 120 }, { text: 'Country', dataField: 'Country' } ]; var columnGroups = [ { text: 'Name', name: 'Name' } ]; JQXElements.settings[ "treeGridSettings"] = { sortable:true,filterable:true, columns:columns, columnGroups:columnGroups, source:source, theme: "light",incrementalSearch:true } </script></head><body> <jqx-tree-grid settings="treeGridSettings"></jqx-tree-grid>
|
localization
|
object
|
default localization strings.
|
Sets or gets the localization property.
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>TreeGrid Custom Element Filtering and Sorting</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,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/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtreegrid.js"></script> <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script> <script type="text/javascript"> var source = new jqx.dataAdapter({ dataType: "json", dataFields: [ { name: 'EmployeeID', type: 'number' }, { name: 'ReportsTo', type: 'number' }, { name: 'FirstName', type: 'string' }, { name: 'LastName', type: 'string' }, { name: 'Country', type: 'string' }, { name: 'City', type: 'string' }, { name: 'Address', type: 'string' }, { name: 'Title', type: 'string' }, { name: 'HireDate', type: 'date' }, { name: 'BirthDate', type: 'date' } ], hierarchy: { keyDataField: { name: 'EmployeeID' }, parentDataField: { name: 'ReportsTo' } }, id: 'EmployeeID', localData: [ { "EmployeeID": 1, "FirstName": "Nancy", "LastName": "Davolio", "ReportsTo": 2, "Country": "USA", "Title": "Sales Representative", "HireDate": "1992-05-01 00:00:00", "BirthDate": "1948-12-08 00:00:00", "City": "Seattle", "Address": "507 - 20th Ave. E.Apt. 2A" }, { "EmployeeID": 2, "FirstName": "Andrew", "LastName": "Fuller", "ReportsTo": null, "Country": "USA", "Title": "Vice President, Sales", "HireDate": "1992-08-14 00:00:00", "BirthDate": "1952-02-19 00:00:00", "City": "Tacoma", "Address": "908 W. Capital Way" }, { "EmployeeID": 3, "FirstName": "Janet", "LastName": "Leverling", "ReportsTo": 2, "Country": "USA", "Title": "Sales Representative", "HireDate": "1992-04-01 00:00:00", "BirthDate": "1963-08-30 00:00:00", "City": "Kirkland", "Address": "722 Moss Bay Blvd." }, { "EmployeeID": 4, "FirstName": "Margaret", "LastName": "Peacock", "ReportsTo": 2, "Country": "USA", "Title": "Sales Representative", "HireDate": "1993-05-03 00:00:00", "BirthDate": "1937-09-19 00:00:00", "City": "Redmond", "Address": "4110 Old Redmond Rd." }, { "EmployeeID": 5, "FirstName": "Steven", "LastName": "Buchanan", "ReportsTo": 2, "Country": "UK", "Title": "Sales Manager", "HireDate": "1993-10-17 00:00:00", "BirthDate": "1955-03-04 00:00:00", "City": "London", "Address": "14 Garrett Hill" }, { "EmployeeID": 6, "FirstName": "Michael", "LastName": "Suyama", "ReportsTo": 5, "Country": "UK", "Title": "Sales Representative", "HireDate": "1993-10-17 00:00:00", "BirthDate": "1963-07-02 00:00:00", "City": "London", "Address": "Coventry House Miner Rd." }, { "EmployeeID": 7, "FirstName": "Robert", "LastName": "King", "ReportsTo": 5, "Country": "UK", "Title": "Sales Representative", "HireDate": "1994-01-02 00:00:00", "BirthDate": "1960-05-29 00:00:00", "City": "London", "Address": "Edgeham Hollow Winchester Way" }, { "EmployeeID": 8, "FirstName": "Laura", "LastName": "Callahan", "ReportsTo": 2, "Country": "USA", "Title": "Inside Sales Coordinator", "HireDate": "1994-03-05 00:00:00", "BirthDate": "1958-01-09 00:00:00", "City": "Seattle", "Address": "4726 - 11th Ave. N.E." }, { "EmployeeID": 9, "FirstName": "Anne", "LastName": "Dodsworth", "ReportsTo": 5, "Country": "UK", "Title": "Sales Representative", "HireDate": "1994-11-15 00:00:00", "BirthDate": "1966-01-27 00:00:00", "City": "London", "Address": "7 Houndstooth Rd." } ]}); var columns = [ { text: 'FirstName', columnGroup: 'Name', dataField: 'FirstName', width: 200 }, { text: 'LastName', columnGroup: 'Name', dataField: 'LastName', width: 200 }, { text: 'Title', dataField: 'Title', width: 160 }, { text: 'Birth Date', dataField: 'BirthDate', cellsFormat: 'd', width: 120 }, { text: 'Hire Date', dataField: 'HireDate', cellsFormat: 'd', width: 120 }, { text: 'Address', dataField: 'Address', width: 250 }, { text: 'City', dataField: 'City', width: 120 }, { text: 'Country', dataField: 'Country' } ]; var columnGroups = [ { text: 'Name', name: 'Name' } ]; JQXElements.settings[ "treeGridSettings"] = { sortable:true,filterable:true, columns:columns, columnGroups:columnGroups, source:source, theme: "light", localization:"localization" } </script></head><body> <jqx-tree-grid settings="treeGridSettings"></jqx-tree-grid>
|
pagerHeight
|
number
|
28
|
Sets or gets the pagerHeight property.
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>TreeGrid Custom Element Filtering and Sorting</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,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/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtreegrid.js"></script> <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script> <script type="text/javascript"> var source = new jqx.dataAdapter({ dataType: "json", dataFields: [ { name: 'EmployeeID', type: 'number' }, { name: 'ReportsTo', type: 'number' }, { name: 'FirstName', type: 'string' }, { name: 'LastName', type: 'string' }, { name: 'Country', type: 'string' }, { name: 'City', type: 'string' }, { name: 'Address', type: 'string' }, { name: 'Title', type: 'string' }, { name: 'HireDate', type: 'date' }, { name: 'BirthDate', type: 'date' } ], hierarchy: { keyDataField: { name: 'EmployeeID' }, parentDataField: { name: 'ReportsTo' } }, id: 'EmployeeID', localData: [ { "EmployeeID": 1, "FirstName": "Nancy", "LastName": "Davolio", "ReportsTo": 2, "Country": "USA", "Title": "Sales Representative", "HireDate": "1992-05-01 00:00:00", "BirthDate": "1948-12-08 00:00:00", "City": "Seattle", "Address": "507 - 20th Ave. E.Apt. 2A" }, { "EmployeeID": 2, "FirstName": "Andrew", "LastName": "Fuller", "ReportsTo": null, "Country": "USA", "Title": "Vice President, Sales", "HireDate": "1992-08-14 00:00:00", "BirthDate": "1952-02-19 00:00:00", "City": "Tacoma", "Address": "908 W. Capital Way" }, { "EmployeeID": 3, "FirstName": "Janet", "LastName": "Leverling", "ReportsTo": 2, "Country": "USA", "Title": "Sales Representative", "HireDate": "1992-04-01 00:00:00", "BirthDate": "1963-08-30 00:00:00", "City": "Kirkland", "Address": "722 Moss Bay Blvd." }, { "EmployeeID": 4, "FirstName": "Margaret", "LastName": "Peacock", "ReportsTo": 2, "Country": "USA", "Title": "Sales Representative", "HireDate": "1993-05-03 00:00:00", "BirthDate": "1937-09-19 00:00:00", "City": "Redmond", "Address": "4110 Old Redmond Rd." }, { "EmployeeID": 5, "FirstName": "Steven", "LastName": "Buchanan", "ReportsTo": 2, "Country": "UK", "Title": "Sales Manager", "HireDate": "1993-10-17 00:00:00", "BirthDate": "1955-03-04 00:00:00", "City": "London", "Address": "14 Garrett Hill" }, { "EmployeeID": 6, "FirstName": "Michael", "LastName": "Suyama", "ReportsTo": 5, "Country": "UK", "Title": "Sales Representative", "HireDate": "1993-10-17 00:00:00", "BirthDate": "1963-07-02 00:00:00", "City": "London", "Address": "Coventry House Miner Rd." }, { "EmployeeID": 7, "FirstName": "Robert", "LastName": "King", "ReportsTo": 5, "Country": "UK", "Title": "Sales Representative", "HireDate": "1994-01-02 00:00:00", "BirthDate": "1960-05-29 00:00:00", "City": "London", "Address": "Edgeham Hollow Winchester Way" }, { "EmployeeID": 8, "FirstName": "Laura", "LastName": "Callahan", "ReportsTo": 2, "Country": "USA", "Title": "Inside Sales Coordinator", "HireDate": "1994-03-05 00:00:00", "BirthDate": "1958-01-09 00:00:00", "City": "Seattle", "Address": "4726 - 11th Ave. N.E." }, { "EmployeeID": 9, "FirstName": "Anne", "LastName": "Dodsworth", "ReportsTo": 5, "Country": "UK", "Title": "Sales Representative", "HireDate": "1994-11-15 00:00:00", "BirthDate": "1966-01-27 00:00:00", "City": "London", "Address": "7 Houndstooth Rd." } ]}); var columns = [ { text: 'FirstName', columnGroup: 'Name', dataField: 'FirstName', width: 200 }, { text: 'LastName', columnGroup: 'Name', dataField: 'LastName', width: 200 }, { text: 'Title', dataField: 'Title', width: 160 }, { text: 'Birth Date', dataField: 'BirthDate', cellsFormat: 'd', width: 120 }, { text: 'Hire Date', dataField: 'HireDate', cellsFormat: 'd', width: 120 }, { text: 'Address', dataField: 'Address', width: 250 }, { text: 'City', dataField: 'City', width: 120 }, { text: 'Country', dataField: 'Country' } ]; var columnGroups = [ { text: 'Name', name: 'Name' } ]; JQXElements.settings[ "treeGridSettings"] = { sortable:true,filterable:true, columns:columns, columnGroups:columnGroups, source:source, theme: "light",pageable:true,pagerHeight:35 } </script></head><body> <jqx-tree-grid settings="treeGridSettings"></jqx-tree-grid>
|
pageSize
|
number
|
10
|
Sets or gets the pageSize property.
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>TreeGrid Custom Element Filtering and Sorting</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,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/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtreegrid.js"></script> <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script> <script type="text/javascript"> var source = new jqx.dataAdapter({ dataType: "json", dataFields: [ { name: 'EmployeeID', type: 'number' }, { name: 'ReportsTo', type: 'number' }, { name: 'FirstName', type: 'string' }, { name: 'LastName', type: 'string' }, { name: 'Country', type: 'string' }, { name: 'City', type: 'string' }, { name: 'Address', type: 'string' }, { name: 'Title', type: 'string' }, { name: 'HireDate', type: 'date' }, { name: 'BirthDate', type: 'date' } ], hierarchy: { keyDataField: { name: 'EmployeeID' }, parentDataField: { name: 'ReportsTo' } }, id: 'EmployeeID', localData: [ { "EmployeeID": 1, "FirstName": "Nancy", "LastName": "Davolio", "ReportsTo": 2, "Country": "USA", "Title": "Sales Representative", "HireDate": "1992-05-01 00:00:00", "BirthDate": "1948-12-08 00:00:00", "City": "Seattle", "Address": "507 - 20th Ave. E.Apt. 2A" }, { "EmployeeID": 2, "FirstName": "Andrew", "LastName": "Fuller", "ReportsTo": null, "Country": "USA", "Title": "Vice President, Sales", "HireDate": "1992-08-14 00:00:00", "BirthDate": "1952-02-19 00:00:00", "City": "Tacoma", "Address": "908 W. Capital Way" }, { "EmployeeID": 3, "FirstName": "Janet", "LastName": "Leverling", "ReportsTo": 2, "Country": "USA", "Title": "Sales Representative", "HireDate": "1992-04-01 00:00:00", "BirthDate": "1963-08-30 00:00:00", "City": "Kirkland", "Address": "722 Moss Bay Blvd." }, { "EmployeeID": 4, "FirstName": "Margaret", "LastName": "Peacock", "ReportsTo": 2, "Country": "USA", "Title": "Sales Representative", "HireDate": "1993-05-03 00:00:00", "BirthDate": "1937-09-19 00:00:00", "City": "Redmond", "Address": "4110 Old Redmond Rd." }, { "EmployeeID": 5, "FirstName": "Steven", "LastName": "Buchanan", "ReportsTo": 2, "Country": "UK", "Title": "Sales Manager", "HireDate": "1993-10-17 00:00:00", "BirthDate": "1955-03-04 00:00:00", "City": "London", "Address": "14 Garrett Hill" }, { "EmployeeID": 6, "FirstName": "Michael", "LastName": "Suyama", "ReportsTo": 5, "Country": "UK", "Title": "Sales Representative", "HireDate": "1993-10-17 00:00:00", "BirthDate": "1963-07-02 00:00:00", "City": "London", "Address": "Coventry House Miner Rd." }, { "EmployeeID": 7, "FirstName": "Robert", "LastName": "King", "ReportsTo": 5, "Country": "UK", "Title": "Sales Representative", "HireDate": "1994-01-02 00:00:00", "BirthDate": "1960-05-29 00:00:00", "City": "London", "Address": "Edgeham Hollow Winchester Way" }, { "EmployeeID": 8, "FirstName": "Laura", "LastName": "Callahan", "ReportsTo": 2, "Country": "USA", "Title": "Inside Sales Coordinator", "HireDate": "1994-03-05 00:00:00", "BirthDate": "1958-01-09 00:00:00", "City": "Seattle", "Address": "4726 - 11th Ave. N.E." }, { "EmployeeID": 9, "FirstName": "Anne", "LastName": "Dodsworth", "ReportsTo": 5, "Country": "UK", "Title": "Sales Representative", "HireDate": "1994-11-15 00:00:00", "BirthDate": "1966-01-27 00:00:00", "City": "London", "Address": "7 Houndstooth Rd." } ]}); var columns = [ { text: 'FirstName', columnGroup: 'Name', dataField: 'FirstName', width: 200 }, { text: 'LastName', columnGroup: 'Name', dataField: 'LastName', width: 200 }, { text: 'Title', dataField: 'Title', width: 160 }, { text: 'Birth Date', dataField: 'BirthDate', cellsFormat: 'd', width: 120 }, { text: 'Hire Date', dataField: 'HireDate', cellsFormat: 'd', width: 120 }, { text: 'Address', dataField: 'Address', width: 250 }, { text: 'City', dataField: 'City', width: 120 }, { text: 'Country', dataField: 'Country' } ]; var columnGroups = [ { text: 'Name', name: 'Name' } ]; JQXElements.settings[ "treeGridSettings"] = { sortable:true,filterable:true, columns:columns, columnGroups:columnGroups, source:source, theme: "light",pageable:true,pageSize:5 } </script></head><body> <jqx-tree-grid settings="treeGridSettings"></jqx-tree-grid>
|
pageSizeOptions
|
array
|
['5', '10', '20']
|
Sets or gets the pageSizeOptions property.
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>TreeGrid Custom Element Filtering and Sorting</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,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/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtreegrid.js"></script> <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script> <script type="text/javascript"> var source = new jqx.dataAdapter({ dataType: "json", dataFields: [ { name: 'EmployeeID', type: 'number' }, { name: 'ReportsTo', type: 'number' }, { name: 'FirstName', type: 'string' }, { name: 'LastName', type: 'string' }, { name: 'Country', type: 'string' }, { name: 'City', type: 'string' }, { name: 'Address', type: 'string' }, { name: 'Title', type: 'string' }, { name: 'HireDate', type: 'date' }, { name: 'BirthDate', type: 'date' } ], hierarchy: { keyDataField: { name: 'EmployeeID' }, parentDataField: { name: 'ReportsTo' } }, id: 'EmployeeID', localData: [ { "EmployeeID": 1, "FirstName": "Nancy", "LastName": "Davolio", "ReportsTo": 2, "Country": "USA", "Title": "Sales Representative", "HireDate": "1992-05-01 00:00:00", "BirthDate": "1948-12-08 00:00:00", "City": "Seattle", "Address": "507 - 20th Ave. E.Apt. 2A" }, { "EmployeeID": 2, "FirstName": "Andrew", "LastName": "Fuller", "ReportsTo": null, "Country": "USA", "Title": "Vice President, Sales", "HireDate": "1992-08-14 00:00:00", "BirthDate": "1952-02-19 00:00:00", "City": "Tacoma", "Address": "908 W. Capital Way" }, { "EmployeeID": 3, "FirstName": "Janet", "LastName": "Leverling", "ReportsTo": 2, "Country": "USA", "Title": "Sales Representative", "HireDate": "1992-04-01 00:00:00", "BirthDate": "1963-08-30 00:00:00", "City": "Kirkland", "Address": "722 Moss Bay Blvd." }, { "EmployeeID": 4, "FirstName": "Margaret", "LastName": "Peacock", "ReportsTo": 2, "Country": "USA", "Title": "Sales Representative", "HireDate": "1993-05-03 00:00:00", "BirthDate": "1937-09-19 00:00:00", "City": "Redmond", "Address": "4110 Old Redmond Rd." }, { "EmployeeID": 5, "FirstName": "Steven", "LastName": "Buchanan", "ReportsTo": 2, "Country": "UK", "Title": "Sales Manager", "HireDate": "1993-10-17 00:00:00", "BirthDate": "1955-03-04 00:00:00", "City": "London", "Address": "14 Garrett Hill" }, { "EmployeeID": 6, "FirstName": "Michael", "LastName": "Suyama", "ReportsTo": 5, "Country": "UK", "Title": "Sales Representative", "HireDate": "1993-10-17 00:00:00", "BirthDate": "1963-07-02 00:00:00", "City": "London", "Address": "Coventry House Miner Rd." }, { "EmployeeID": 7, "FirstName": "Robert", "LastName": "King", "ReportsTo": 5, "Country": "UK", "Title": "Sales Representative", "HireDate": "1994-01-02 00:00:00", "BirthDate": "1960-05-29 00:00:00", "City": "London", "Address": "Edgeham Hollow Winchester Way" }, { "EmployeeID": 8, "FirstName": "Laura", "LastName": "Callahan", "ReportsTo": 2, "Country": "USA", "Title": "Inside Sales Coordinator", "HireDate": "1994-03-05 00:00:00", "BirthDate": "1958-01-09 00:00:00", "City": "Seattle", "Address": "4726 - 11th Ave. N.E." }, { "EmployeeID": 9, "FirstName": "Anne", "LastName": "Dodsworth", "ReportsTo": 5, "Country": "UK", "Title": "Sales Representative", "HireDate": "1994-11-15 00:00:00", "BirthDate": "1966-01-27 00:00:00", "City": "London", "Address": "7 Houndstooth Rd." } ]}); var columns = [ { text: 'FirstName', columnGroup: 'Name', dataField: 'FirstName', width: 200 }, { text: 'LastName', columnGroup: 'Name', dataField: 'LastName', width: 200 }, { text: 'Title', dataField: 'Title', width: 160 }, { text: 'Birth Date', dataField: 'BirthDate', cellsFormat: 'd', width: 120 }, { text: 'Hire Date', dataField: 'HireDate', cellsFormat: 'd', width: 120 }, { text: 'Address', dataField: 'Address', width: 250 }, { text: 'City', dataField: 'City', width: 120 }, { text: 'Country', dataField: 'Country' } ]; var columnGroups = [ { text: 'Name', name: 'Name' } ]; JQXElements.settings[ "treeGridSettings"] = { sortable:true,filterable:true, columns:columns, columnGroups:columnGroups, source:source, theme: "light",pageable:true, pageSizeOptions:'['2', '3', '5']' } </script></head><body> <jqx-tree-grid settings="treeGridSettings"></jqx-tree-grid>
|
pageable
|
boolean
|
false
|
Sets or gets the pageable property.
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>TreeGrid Custom Element Filtering and Sorting</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,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/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtreegrid.js"></script> <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script> <script type="text/javascript"> var source = new jqx.dataAdapter({ dataType: "json", dataFields: [ { name: 'EmployeeID', type: 'number' }, { name: 'ReportsTo', type: 'number' }, { name: 'FirstName', type: 'string' }, { name: 'LastName', type: 'string' }, { name: 'Country', type: 'string' }, { name: 'City', type: 'string' }, { name: 'Address', type: 'string' }, { name: 'Title', type: 'string' }, { name: 'HireDate', type: 'date' }, { name: 'BirthDate', type: 'date' } ], hierarchy: { keyDataField: { name: 'EmployeeID' }, parentDataField: { name: 'ReportsTo' } }, id: 'EmployeeID', localData: [ { "EmployeeID": 1, "FirstName": "Nancy", "LastName": "Davolio", "ReportsTo": 2, "Country": "USA", "Title": "Sales Representative", "HireDate": "1992-05-01 00:00:00", "BirthDate": "1948-12-08 00:00:00", "City": "Seattle", "Address": "507 - 20th Ave. E.Apt. 2A" }, { "EmployeeID": 2, "FirstName": "Andrew", "LastName": "Fuller", "ReportsTo": null, "Country": "USA", "Title": "Vice President, Sales", "HireDate": "1992-08-14 00:00:00", "BirthDate": "1952-02-19 00:00:00", "City": "Tacoma", "Address": "908 W. Capital Way" }, { "EmployeeID": 3, "FirstName": "Janet", "LastName": "Leverling", "ReportsTo": 2, "Country": "USA", "Title": "Sales Representative", "HireDate": "1992-04-01 00:00:00", "BirthDate": "1963-08-30 00:00:00", "City": "Kirkland", "Address": "722 Moss Bay Blvd." }, { "EmployeeID": 4, "FirstName": "Margaret", "LastName": "Peacock", "ReportsTo": 2, "Country": "USA", "Title": "Sales Representative", "HireDate": "1993-05-03 00:00:00", "BirthDate": "1937-09-19 00:00:00", "City": "Redmond", "Address": "4110 Old Redmond Rd." }, { "EmployeeID": 5, "FirstName": "Steven", "LastName": "Buchanan", "ReportsTo": 2, "Country": "UK", "Title": "Sales Manager", "HireDate": "1993-10-17 00:00:00", "BirthDate": "1955-03-04 00:00:00", "City": "London", "Address": "14 Garrett Hill" }, { "EmployeeID": 6, "FirstName": "Michael", "LastName": "Suyama", "ReportsTo": 5, "Country": "UK", "Title": "Sales Representative", "HireDate": "1993-10-17 00:00:00", "BirthDate": "1963-07-02 00:00:00", "City": "London", "Address": "Coventry House Miner Rd." }, { "EmployeeID": 7, "FirstName": "Robert", "LastName": "King", "ReportsTo": 5, "Country": "UK", "Title": "Sales Representative", "HireDate": "1994-01-02 00:00:00", "BirthDate": "1960-05-29 00:00:00", "City": "London", "Address": "Edgeham Hollow Winchester Way" }, { "EmployeeID": 8, "FirstName": "Laura", "LastName": "Callahan", "ReportsTo": 2, "Country": "USA", "Title": "Inside Sales Coordinator", "HireDate": "1994-03-05 00:00:00", "BirthDate": "1958-01-09 00:00:00", "City": "Seattle", "Address": "4726 - 11th Ave. N.E." }, { "EmployeeID": 9, "FirstName": "Anne", "LastName": "Dodsworth", "ReportsTo": 5, "Country": "UK", "Title": "Sales Representative", "HireDate": "1994-11-15 00:00:00", "BirthDate": "1966-01-27 00:00:00", "City": "London", "Address": "7 Houndstooth Rd." } ]}); var columns = [ { text: 'FirstName', columnGroup: 'Name', dataField: 'FirstName', width: 200 }, { text: 'LastName', columnGroup: 'Name', dataField: 'LastName', width: 200 }, { text: 'Title', dataField: 'Title', width: 160 }, { text: 'Birth Date', dataField: 'BirthDate', cellsFormat: 'd', width: 120 }, { text: 'Hire Date', dataField: 'HireDate', cellsFormat: 'd', width: 120 }, { text: 'Address', dataField: 'Address', width: 250 }, { text: 'City', dataField: 'City', width: 120 }, { text: 'Country', dataField: 'Country' } ]; var columnGroups = [ { text: 'Name', name: 'Name' } ]; JQXElements.settings[ "treeGridSettings"] = { sortable:true,filterable:true, columns:columns, columnGroups:columnGroups, source:source, theme: "light",pageable:true } </script></head><body> <jqx-tree-grid settings="treeGridSettings"></jqx-tree-grid>
|
pagerPosition
|
string
|
"bottom"
|
Sets or gets the pagerPosition property.
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>TreeGrid Custom Element Filtering and Sorting</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,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/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtreegrid.js"></script> <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script> <script type="text/javascript"> var source = new jqx.dataAdapter({ dataType: "json", dataFields: [ { name: 'EmployeeID', type: 'number' }, { name: 'ReportsTo', type: 'number' }, { name: 'FirstName', type: 'string' }, { name: 'LastName', type: 'string' }, { name: 'Country', type: 'string' }, { name: 'City', type: 'string' }, { name: 'Address', type: 'string' }, { name: 'Title', type: 'string' }, { name: 'HireDate', type: 'date' }, { name: 'BirthDate', type: 'date' } ], hierarchy: { keyDataField: { name: 'EmployeeID' }, parentDataField: { name: 'ReportsTo' } }, id: 'EmployeeID', localData: [ { "EmployeeID": 1, "FirstName": "Nancy", "LastName": "Davolio", "ReportsTo": 2, "Country": "USA", "Title": "Sales Representative", "HireDate": "1992-05-01 00:00:00", "BirthDate": "1948-12-08 00:00:00", "City": "Seattle", "Address": "507 - 20th Ave. E.Apt. 2A" }, { "EmployeeID": 2, "FirstName": "Andrew", "LastName": "Fuller", "ReportsTo": null, "Country": "USA", "Title": "Vice President, Sales", "HireDate": "1992-08-14 00:00:00", "BirthDate": "1952-02-19 00:00:00", "City": "Tacoma", "Address": "908 W. Capital Way" }, { "EmployeeID": 3, "FirstName": "Janet", "LastName": "Leverling", "ReportsTo": 2, "Country": "USA", "Title": "Sales Representative", "HireDate": "1992-04-01 00:00:00", "BirthDate": "1963-08-30 00:00:00", "City": "Kirkland", "Address": "722 Moss Bay Blvd." }, { "EmployeeID": 4, "FirstName": "Margaret", "LastName": "Peacock", "ReportsTo": 2, "Country": "USA", "Title": "Sales Representative", "HireDate": "1993-05-03 00:00:00", "BirthDate": "1937-09-19 00:00:00", "City": "Redmond", "Address": "4110 Old Redmond Rd." }, { "EmployeeID": 5, "FirstName": "Steven", "LastName": "Buchanan", "ReportsTo": 2, "Country": "UK", "Title": "Sales Manager", "HireDate": "1993-10-17 00:00:00", "BirthDate": "1955-03-04 00:00:00", "City": "London", "Address": "14 Garrett Hill" }, { "EmployeeID": 6, "FirstName": "Michael", "LastName": "Suyama", "ReportsTo": 5, "Country": "UK", "Title": "Sales Representative", "HireDate": "1993-10-17 00:00:00", "BirthDate": "1963-07-02 00:00:00", "City": "London", "Address": "Coventry House Miner Rd." }, { "EmployeeID": 7, "FirstName": "Robert", "LastName": "King", "ReportsTo": 5, "Country": "UK", "Title": "Sales Representative", "HireDate": "1994-01-02 00:00:00", "BirthDate": "1960-05-29 00:00:00", "City": "London", "Address": "Edgeham Hollow Winchester Way" }, { "EmployeeID": 8, "FirstName": "Laura", "LastName": "Callahan", "ReportsTo": 2, "Country": "USA", "Title": "Inside Sales Coordinator", "HireDate": "1994-03-05 00:00:00", "BirthDate": "1958-01-09 00:00:00", "City": "Seattle", "Address": "4726 - 11th Ave. N.E." }, { "EmployeeID": 9, "FirstName": "Anne", "LastName": "Dodsworth", "ReportsTo": 5, "Country": "UK", "Title": "Sales Representative", "HireDate": "1994-11-15 00:00:00", "BirthDate": "1966-01-27 00:00:00", "City": "London", "Address": "7 Houndstooth Rd." } ]}); var columns = [ { text: 'FirstName', columnGroup: 'Name', dataField: 'FirstName', width: 200 }, { text: 'LastName', columnGroup: 'Name', dataField: 'LastName', width: 200 }, { text: 'Title', dataField: 'Title', width: 160 }, { text: 'Birth Date', dataField: 'BirthDate', cellsFormat: 'd', width: 120 }, { text: 'Hire Date', dataField: 'HireDate', cellsFormat: 'd', width: 120 }, { text: 'Address', dataField: 'Address', width: 250 }, { text: 'City', dataField: 'City', width: 120 }, { text: 'Country', dataField: 'Country' } ]; var columnGroups = [ { text: 'Name', name: 'Name' } ]; JQXElements.settings[ "treeGridSettings"] = { sortable:true,filterable:true, columns:columns, columnGroups:columnGroups, source:source, theme: "light",pageable:true, pagerPosition:"top" } </script></head><body> <jqx-tree-grid settings="treeGridSettings"></jqx-tree-grid>
|
pagerMode
|
string
|
"default"
|
Sets or gets the pagerMode property.
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>TreeGrid Custom Element Filtering and Sorting</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,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/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtreegrid.js"></script> <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script> <script type="text/javascript"> var source = new jqx.dataAdapter({ dataType: "json", dataFields: [ { name: 'EmployeeID', type: 'number' }, { name: 'ReportsTo', type: 'number' }, { name: 'FirstName', type: 'string' }, { name: 'LastName', type: 'string' }, { name: 'Country', type: 'string' }, { name: 'City', type: 'string' }, { name: 'Address', type: 'string' }, { name: 'Title', type: 'string' }, { name: 'HireDate', type: 'date' }, { name: 'BirthDate', type: 'date' } ], hierarchy: { keyDataField: { name: 'EmployeeID' }, parentDataField: { name: 'ReportsTo' } }, id: 'EmployeeID', localData: [ { "EmployeeID": 1, "FirstName": "Nancy", "LastName": "Davolio", "ReportsTo": 2, "Country": "USA", "Title": "Sales Representative", "HireDate": "1992-05-01 00:00:00", "BirthDate": "1948-12-08 00:00:00", "City": "Seattle", "Address": "507 - 20th Ave. E.Apt. 2A" }, { "EmployeeID": 2, "FirstName": "Andrew", "LastName": "Fuller", "ReportsTo": null, "Country": "USA", "Title": "Vice President, Sales", "HireDate": "1992-08-14 00:00:00", "BirthDate": "1952-02-19 00:00:00", "City": "Tacoma", "Address": "908 W. Capital Way" }, { "EmployeeID": 3, "FirstName": "Janet", "LastName": "Leverling", "ReportsTo": 2, "Country": "USA", "Title": "Sales Representative", "HireDate": "1992-04-01 00:00:00", "BirthDate": "1963-08-30 00:00:00", "City": "Kirkland", "Address": "722 Moss Bay Blvd." }, { "EmployeeID": 4, "FirstName": "Margaret", "LastName": "Peacock", "ReportsTo": 2, "Country": "USA", "Title": "Sales Representative", "HireDate": "1993-05-03 00:00:00", "BirthDate": "1937-09-19 00:00:00", "City": "Redmond", "Address": "4110 Old Redmond Rd." }, { "EmployeeID": 5, "FirstName": "Steven", "LastName": "Buchanan", "ReportsTo": 2, "Country": "UK", "Title": "Sales Manager", "HireDate": "1993-10-17 00:00:00", "BirthDate": "1955-03-04 00:00:00", "City": "London", "Address": "14 Garrett Hill" }, { "EmployeeID": 6, "FirstName": "Michael", "LastName": "Suyama", "ReportsTo": 5, "Country": "UK", "Title": "Sales Representative", "HireDate": "1993-10-17 00:00:00", "BirthDate": "1963-07-02 00:00:00", "City": "London", "Address": "Coventry House Miner Rd." }, { "EmployeeID": 7, "FirstName": "Robert", "LastName": "King", "ReportsTo": 5, "Country": "UK", "Title": "Sales Representative", "HireDate": "1994-01-02 00:00:00", "BirthDate": "1960-05-29 00:00:00", "City": "London", "Address": "Edgeham Hollow Winchester Way" }, { "EmployeeID": 8, "FirstName": "Laura", "LastName": "Callahan", "ReportsTo": 2, "Country": "USA", "Title": "Inside Sales Coordinator", "HireDate": "1994-03-05 00:00:00", "BirthDate": "1958-01-09 00:00:00", "City": "Seattle", "Address": "4726 - 11th Ave. N.E." }, { "EmployeeID": 9, "FirstName": "Anne", "LastName": "Dodsworth", "ReportsTo": 5, "Country": "UK", "Title": "Sales Representative", "HireDate": "1994-11-15 00:00:00", "BirthDate": "1966-01-27 00:00:00", "City": "London", "Address": "7 Houndstooth Rd." } ]}); var columns = [ { text: 'FirstName', columnGroup: 'Name', dataField: 'FirstName', width: 200 }, { text: 'LastName', columnGroup: 'Name', dataField: 'LastName', width: 200 }, { text: 'Title', dataField: 'Title', width: 160 }, { text: 'Birth Date', dataField: 'BirthDate', cellsFormat: 'd', width: 120 }, { text: 'Hire Date', dataField: 'HireDate', cellsFormat: 'd', width: 120 }, { text: 'Address', dataField: 'Address', width: 250 }, { text: 'City', dataField: 'City', width: 120 }, { text: 'Country', dataField: 'Country' } ]; var columnGroups = [ { text: 'Name', name: 'Name' } ]; JQXElements.settings[ "treeGridSettings"] = { sortable:true,filterable:true, columns:columns, columnGroups:columnGroups, source:source, theme: "light",pageable:true, pagerMode:"advanced" } </script></head><body> <jqx-tree-grid settings="treeGridSettings"></jqx-tree-grid>
|
pageSizeMode
|
string
|
"default"
|
Sets or gets the pageSizeMode property.
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>TreeGrid Custom Element Filtering and Sorting</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,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/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtreegrid.js"></script> <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script> <script type="text/javascript"> var source = new jqx.dataAdapter({ dataType: "json", dataFields: [ { name: 'EmployeeID', type: 'number' }, { name: 'ReportsTo', type: 'number' }, { name: 'FirstName', type: 'string' }, { name: 'LastName', type: 'string' }, { name: 'Country', type: 'string' }, { name: 'City', type: 'string' }, { name: 'Address', type: 'string' }, { name: 'Title', type: 'string' }, { name: 'HireDate', type: 'date' }, { name: 'BirthDate', type: 'date' } ], hierarchy: { keyDataField: { name: 'EmployeeID' }, parentDataField: { name: 'ReportsTo' } }, id: 'EmployeeID', localData: [ { "EmployeeID": 1, "FirstName": "Nancy", "LastName": "Davolio", "ReportsTo": 2, "Country": "USA", "Title": "Sales Representative", "HireDate": "1992-05-01 00:00:00", "BirthDate": "1948-12-08 00:00:00", "City": "Seattle", "Address": "507 - 20th Ave. E.Apt. 2A" }, { "EmployeeID": 2, "FirstName": "Andrew", "LastName": "Fuller", "ReportsTo": null, "Country": "USA", "Title": "Vice President, Sales", "HireDate": "1992-08-14 00:00:00", "BirthDate": "1952-02-19 00:00:00", "City": "Tacoma", "Address": "908 W. Capital Way" }, { "EmployeeID": 3, "FirstName": "Janet", "LastName": "Leverling", "ReportsTo": 2, "Country": "USA", "Title": "Sales Representative", "HireDate": "1992-04-01 00:00:00", "BirthDate": "1963-08-30 00:00:00", "City": "Kirkland", "Address": "722 Moss Bay Blvd." }, { "EmployeeID": 4, "FirstName": "Margaret", "LastName": "Peacock", "ReportsTo": 2, "Country": "USA", "Title": "Sales Representative", "HireDate": "1993-05-03 00:00:00", "BirthDate": "1937-09-19 00:00:00", "City": "Redmond", "Address": "4110 Old Redmond Rd." }, { "EmployeeID": 5, "FirstName": "Steven", "LastName": "Buchanan", "ReportsTo": 2, "Country": "UK", "Title": "Sales Manager", "HireDate": "1993-10-17 00:00:00", "BirthDate": "1955-03-04 00:00:00", "City": "London", "Address": "14 Garrett Hill" }, { "EmployeeID": 6, "FirstName": "Michael", "LastName": "Suyama", "ReportsTo": 5, "Country": "UK", "Title": "Sales Representative", "HireDate": "1993-10-17 00:00:00", "BirthDate": "1963-07-02 00:00:00", "City": "London", "Address": "Coventry House Miner Rd." }, { "EmployeeID": 7, "FirstName": "Robert", "LastName": "King", "ReportsTo": 5, "Country": "UK", "Title": "Sales Representative", "HireDate": "1994-01-02 00:00:00", "BirthDate": "1960-05-29 00:00:00", "City": "London", "Address": "Edgeham Hollow Winchester Way" }, { "EmployeeID": 8, "FirstName": "Laura", "LastName": "Callahan", "ReportsTo": 2, "Country": "USA", "Title": "Inside Sales Coordinator", "HireDate": "1994-03-05 00:00:00", "BirthDate": "1958-01-09 00:00:00", "City": "Seattle", "Address": "4726 - 11th Ave. N.E." }, { "EmployeeID": 9, "FirstName": "Anne", "LastName": "Dodsworth", "ReportsTo": 5, "Country": "UK", "Title": "Sales Representative", "HireDate": "1994-11-15 00:00:00", "BirthDate": "1966-01-27 00:00:00", "City": "London", "Address": "7 Houndstooth Rd." } ]}); var columns = [ { text: 'FirstName', columnGroup: 'Name', dataField: 'FirstName', width: 200 }, { text: 'LastName', columnGroup: 'Name', dataField: 'LastName', width: 200 }, { text: 'Title', dataField: 'Title', width: 160 }, { text: 'Birth Date', dataField: 'BirthDate', cellsFormat: 'd', width: 120 }, { text: 'Hire Date', dataField: 'HireDate', cellsFormat: 'd', width: 120 }, { text: 'Address', dataField: 'Address', width: 250 }, { text: 'City', dataField: 'City', width: 120 }, { text: 'Country', dataField: 'Country' } ]; var columnGroups = [ { text: 'Name', name: 'Name' } ]; JQXElements.settings[ "treeGridSettings"] = { sortable:true,filterable:true, columns:columns, columnGroups:columnGroups, source:source, theme: "light",pageable:true, pageSizeMode:"root" } </script></head><body> <jqx-tree-grid settings="treeGridSettings"></jqx-tree-grid>
|
pagerButtonsCount
|
number
|
5
|
Sets or gets the pagerButtonsCount property.
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>TreeGrid Custom Element Filtering and Sorting</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,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/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtreegrid.js"></script> <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script> <script type="text/javascript"> var source = new jqx.dataAdapter({ dataType: "json", dataFields: [ { name: 'EmployeeID', type: 'number' }, { name: 'ReportsTo', type: 'number' }, { name: 'FirstName', type: 'string' }, { name: 'LastName', type: 'string' }, { name: 'Country', type: 'string' }, { name: 'City', type: 'string' }, { name: 'Address', type: 'string' }, { name: 'Title', type: 'string' }, { name: 'HireDate', type: 'date' }, { name: 'BirthDate', type: 'date' } ], hierarchy: { keyDataField: { name: 'EmployeeID' }, parentDataField: { name: 'ReportsTo' } }, id: 'EmployeeID', localData: [ { "EmployeeID": 1, "FirstName": "Nancy", "LastName": "Davolio", "ReportsTo": 2, "Country": "USA", "Title": "Sales Representative", "HireDate": "1992-05-01 00:00:00", "BirthDate": "1948-12-08 00:00:00", "City": "Seattle", "Address": "507 - 20th Ave. E.Apt. 2A" }, { "EmployeeID": 2, "FirstName": "Andrew", "LastName": "Fuller", "ReportsTo": null, "Country": "USA", "Title": "Vice President, Sales", "HireDate": "1992-08-14 00:00:00", "BirthDate": "1952-02-19 00:00:00", "City": "Tacoma", "Address": "908 W. Capital Way" }, { "EmployeeID": 3, "FirstName": "Janet", "LastName": "Leverling", "ReportsTo": 2, "Country": "USA", "Title": "Sales Representative", "HireDate": "1992-04-01 00:00:00", "BirthDate": "1963-08-30 00:00:00", "City": "Kirkland", "Address": "722 Moss Bay Blvd." }, { "EmployeeID": 4, "FirstName": "Margaret", "LastName": "Peacock", "ReportsTo": 2, "Country": "USA", "Title": "Sales Representative", "HireDate": "1993-05-03 00:00:00", "BirthDate": "1937-09-19 00:00:00", "City": "Redmond", "Address": "4110 Old Redmond Rd." }, { "EmployeeID": 5, "FirstName": "Steven", "LastName": "Buchanan", "ReportsTo": 2, "Country": "UK", "Title": "Sales Manager", "HireDate": "1993-10-17 00:00:00", "BirthDate": "1955-03-04 00:00:00", "City": "London", "Address": "14 Garrett Hill" }, { "EmployeeID": 6, "FirstName": "Michael", "LastName": "Suyama", "ReportsTo": 5, "Country": "UK", "Title": "Sales Representative", "HireDate": "1993-10-17 00:00:00", "BirthDate": "1963-07-02 00:00:00", "City": "London", "Address": "Coventry House Miner Rd." }, { "EmployeeID": 7, "FirstName": "Robert", "LastName": "King", "ReportsTo": 5, "Country": "UK", "Title": "Sales Representative", "HireDate": "1994-01-02 00:00:00", "BirthDate": "1960-05-29 00:00:00", "City": "London", "Address": "Edgeham Hollow Winchester Way" }, { "EmployeeID": 8, "FirstName": "Laura", "LastName": "Callahan", "ReportsTo": 2, "Country": "USA", "Title": "Inside Sales Coordinator", "HireDate": "1994-03-05 00:00:00", "BirthDate": "1958-01-09 00:00:00", "City": "Seattle", "Address": "4726 - 11th Ave. N.E." }, { "EmployeeID": 9, "FirstName": "Anne", "LastName": "Dodsworth", "ReportsTo": 5, "Country": "UK", "Title": "Sales Representative", "HireDate": "1994-11-15 00:00:00", "BirthDate": "1966-01-27 00:00:00", "City": "London", "Address": "7 Houndstooth Rd." } ]}); var columns = [ { text: 'FirstName', columnGroup: 'Name', dataField: 'FirstName', width: 200 }, { text: 'LastName', columnGroup: 'Name', dataField: 'LastName', width: 200 }, { text: 'Title', dataField: 'Title', width: 160 }, { text: 'Birth Date', dataField: 'BirthDate', cellsFormat: 'd', width: 120 }, { text: 'Hire Date', dataField: 'HireDate', cellsFormat: 'd', width: 120 }, { text: 'Address', dataField: 'Address', width: 250 }, { text: 'City', dataField: 'City', width: 120 }, { text: 'Country', dataField: 'Country' } ]; var columnGroups = [ { text: 'Name', name: 'Name' } ]; JQXElements.settings[ "treeGridSettings"] = { sortable:true,filterable:true, columns:columns, columnGroups:columnGroups, source:source, theme: "light",pageable:true,pagerButtonsCount:2 } </script></head><body> <jqx-tree-grid settings="treeGridSettings"></jqx-tree-grid>
|
pagerRenderer
|
function
|
null
|
Sets or gets the pagerRenderer property.
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>TreeGrid Custom Element Filtering and Sorting</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,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/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtreegrid.js"></script> <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script> <script type="text/javascript"> var source = new jqx.dataAdapter({ dataType: "json", dataFields: [ { name: 'EmployeeID', type: 'number' }, { name: 'ReportsTo', type: 'number' }, { name: 'FirstName', type: 'string' }, { name: 'LastName', type: 'string' }, { name: 'Country', type: 'string' }, { name: 'City', type: 'string' }, { name: 'Address', type: 'string' }, { name: 'Title', type: 'string' }, { name: 'HireDate', type: 'date' }, { name: 'BirthDate', type: 'date' } ], hierarchy: { keyDataField: { name: 'EmployeeID' }, parentDataField: { name: 'ReportsTo' } }, id: 'EmployeeID', localData: [ { "EmployeeID": 1, "FirstName": "Nancy", "LastName": "Davolio", "ReportsTo": 2, "Country": "USA", "Title": "Sales Representative", "HireDate": "1992-05-01 00:00:00", "BirthDate": "1948-12-08 00:00:00", "City": "Seattle", "Address": "507 - 20th Ave. E.Apt. 2A" }, { "EmployeeID": 2, "FirstName": "Andrew", "LastName": "Fuller", "ReportsTo": null, "Country": "USA", "Title": "Vice President, Sales", "HireDate": "1992-08-14 00:00:00", "BirthDate": "1952-02-19 00:00:00", "City": "Tacoma", "Address": "908 W. Capital Way" }, { "EmployeeID": 3, "FirstName": "Janet", "LastName": "Leverling", "ReportsTo": 2, "Country": "USA", "Title": "Sales Representative", "HireDate": "1992-04-01 00:00:00", "BirthDate": "1963-08-30 00:00:00", "City": "Kirkland", "Address": "722 Moss Bay Blvd." }, { "EmployeeID": 4, "FirstName": "Margaret", "LastName": "Peacock", "ReportsTo": 2, "Country": "USA", "Title": "Sales Representative", "HireDate": "1993-05-03 00:00:00", "BirthDate": "1937-09-19 00:00:00", "City": "Redmond", "Address": "4110 Old Redmond Rd." }, { "EmployeeID": 5, "FirstName": "Steven", "LastName": "Buchanan", "ReportsTo": 2, "Country": "UK", "Title": "Sales Manager", "HireDate": "1993-10-17 00:00:00", "BirthDate": "1955-03-04 00:00:00", "City": "London", "Address": "14 Garrett Hill" }, { "EmployeeID": 6, "FirstName": "Michael", "LastName": "Suyama", "ReportsTo": 5, "Country": "UK", "Title": "Sales Representative", "HireDate": "1993-10-17 00:00:00", "BirthDate": "1963-07-02 00:00:00", "City": "London", "Address": "Coventry House Miner Rd." }, { "EmployeeID": 7, "FirstName": "Robert", "LastName": "King", "ReportsTo": 5, "Country": "UK", "Title": "Sales Representative", "HireDate": "1994-01-02 00:00:00", "BirthDate": "1960-05-29 00:00:00", "City": "London", "Address": "Edgeham Hollow Winchester Way" }, { "EmployeeID": 8, "FirstName": "Laura", "LastName": "Callahan", "ReportsTo": 2, "Country": "USA", "Title": "Inside Sales Coordinator", "HireDate": "1994-03-05 00:00:00", "BirthDate": "1958-01-09 00:00:00", "City": "Seattle", "Address": "4726 - 11th Ave. N.E." }, { "EmployeeID": 9, "FirstName": "Anne", "LastName": "Dodsworth", "ReportsTo": 5, "Country": "UK", "Title": "Sales Representative", "HireDate": "1994-11-15 00:00:00", "BirthDate": "1966-01-27 00:00:00", "City": "London", "Address": "7 Houndstooth Rd." } ]}); var columns = [ { text: 'FirstName', columnGroup: 'Name', dataField: 'FirstName', width: 200 }, { text: 'LastName', columnGroup: 'Name', dataField: 'LastName', width: 200 }, { text: 'Title', dataField: 'Title', width: 160 }, { text: 'Birth Date', dataField: 'BirthDate', cellsFormat: 'd', width: 120 }, { text: 'Hire Date', dataField: 'HireDate', cellsFormat: 'd', width: 120 }, { text: 'Address', dataField: 'Address', width: 250 }, { text: 'City', dataField: 'City', width: 120 }, { text: 'Country', dataField: 'Country' } ]; var columnGroups = [ { text: 'Name', name: 'Name' } ]; JQXElements.settings[ "treeGridSettings"] = { sortable:true,filterable:true, columns:columns, columnGroups:columnGroups, source:source, theme: "light",pageable:true, pagerRenderer:"pagerRenderer" } </script></head><body> <jqx-tree-grid settings="treeGridSettings"></jqx-tree-grid>
|
ready
|
function
|
null
|
Sets or gets the ready property.
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>TreeGrid Custom Element Filtering and Sorting</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,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/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtreegrid.js"></script> <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script> <script type="text/javascript"> var source = new jqx.dataAdapter({ dataType: "json", dataFields: [ { name: 'EmployeeID', type: 'number' }, { name: 'ReportsTo', type: 'number' }, { name: 'FirstName', type: 'string' }, { name: 'LastName', type: 'string' }, { name: 'Country', type: 'string' }, { name: 'City', type: 'string' }, { name: 'Address', type: 'string' }, { name: 'Title', type: 'string' }, { name: 'HireDate', type: 'date' }, { name: 'BirthDate', type: 'date' } ], hierarchy: { keyDataField: { name: 'EmployeeID' }, parentDataField: { name: 'ReportsTo' } }, id: 'EmployeeID', localData: [ { "EmployeeID": 1, "FirstName": "Nancy", "LastName": "Davolio", "ReportsTo": 2, "Country": "USA", "Title": "Sales Representative", "HireDate": "1992-05-01 00:00:00", "BirthDate": "1948-12-08 00:00:00", "City": "Seattle", "Address": "507 - 20th Ave. E.Apt. 2A" }, { "EmployeeID": 2, "FirstName": "Andrew", "LastName": "Fuller", "ReportsTo": null, "Country": "USA", "Title": "Vice President, Sales", "HireDate": "1992-08-14 00:00:00", "BirthDate": "1952-02-19 00:00:00", "City": "Tacoma", "Address": "908 W. Capital Way" }, { "EmployeeID": 3, "FirstName": "Janet", "LastName": "Leverling", "ReportsTo": 2, "Country": "USA", "Title": "Sales Representative", "HireDate": "1992-04-01 00:00:00", "BirthDate": "1963-08-30 00:00:00", "City": "Kirkland", "Address": "722 Moss Bay Blvd." }, { "EmployeeID": 4, "FirstName": "Margaret", "LastName": "Peacock", "ReportsTo": 2, "Country": "USA", "Title": "Sales Representative", "HireDate": "1993-05-03 00:00:00", "BirthDate": "1937-09-19 00:00:00", "City": "Redmond", "Address": "4110 Old Redmond Rd." }, { "EmployeeID": 5, "FirstName": "Steven", "LastName": "Buchanan", "ReportsTo": 2, "Country": "UK", "Title": "Sales Manager", "HireDate": "1993-10-17 00:00:00", "BirthDate": "1955-03-04 00:00:00", "City": "London", "Address": "14 Garrett Hill" }, { "EmployeeID": 6, "FirstName": "Michael", "LastName": "Suyama", "ReportsTo": 5, "Country": "UK", "Title": "Sales Representative", "HireDate": "1993-10-17 00:00:00", "BirthDate": "1963-07-02 00:00:00", "City": "London", "Address": "Coventry House Miner Rd." }, { "EmployeeID": 7, "FirstName": "Robert", "LastName": "King", "ReportsTo": 5, "Country": "UK", "Title": "Sales Representative", "HireDate": "1994-01-02 00:00:00", "BirthDate": "1960-05-29 00:00:00", "City": "London", "Address": "Edgeham Hollow Winchester Way" }, { "EmployeeID": 8, "FirstName": "Laura", "LastName": "Callahan", "ReportsTo": 2, "Country": "USA", "Title": "Inside Sales Coordinator", "HireDate": "1994-03-05 00:00:00", "BirthDate": "1958-01-09 00:00:00", "City": "Seattle", "Address": "4726 - 11th Ave. N.E." }, { "EmployeeID": 9, "FirstName": "Anne", "LastName": "Dodsworth", "ReportsTo": 5, "Country": "UK", "Title": "Sales Representative", "HireDate": "1994-11-15 00:00:00", "BirthDate": "1966-01-27 00:00:00", "City": "London", "Address": "7 Houndstooth Rd." } ]}); var columns = [ { text: 'FirstName', columnGroup: 'Name', dataField: 'FirstName', width: 200 }, { text: 'LastName', columnGroup: 'Name', dataField: 'LastName', width: 200 }, { text: 'Title', dataField: 'Title', width: 160 }, { text: 'Birth Date', dataField: 'BirthDate', cellsFormat: 'd', width: 120 }, { text: 'Hire Date', dataField: 'HireDate', cellsFormat: 'd', width: 120 }, { text: 'Address', dataField: 'Address', width: 250 }, { text: 'City', dataField: 'City', width: 120 }, { text: 'Country', dataField: 'Country' } ]; var columnGroups = [ { text: 'Name', name: 'Name' } ]; JQXElements.settings[ "treeGridSettings"] = { sortable:true,filterable:true, columns:columns, columnGroups:columnGroups, source:source, theme: "light", ready:"ready" } </script></head><body> <jqx-tree-grid settings="treeGridSettings"></jqx-tree-grid>
|
rowDetails
|
boolean
|
false
|
Sets or gets the rowDetails property.
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>TreeGrid Custom Element Filtering and Sorting</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,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/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtreegrid.js"></script> <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script> <script type="text/javascript"> var source = new jqx.dataAdapter({ dataType: "json", dataFields: [ { name: 'EmployeeID', type: 'number' }, { name: 'ReportsTo', type: 'number' }, { name: 'FirstName', type: 'string' }, { name: 'LastName', type: 'string' }, { name: 'Country', type: 'string' }, { name: 'City', type: 'string' }, { name: 'Address', type: 'string' }, { name: 'Title', type: 'string' }, { name: 'HireDate', type: 'date' }, { name: 'BirthDate', type: 'date' } ], hierarchy: { keyDataField: { name: 'EmployeeID' }, parentDataField: { name: 'ReportsTo' } }, id: 'EmployeeID', localData: [ { "EmployeeID": 1, "FirstName": "Nancy", "LastName": "Davolio", "ReportsTo": 2, "Country": "USA", "Title": "Sales Representative", "HireDate": "1992-05-01 00:00:00", "BirthDate": "1948-12-08 00:00:00", "City": "Seattle", "Address": "507 - 20th Ave. E.Apt. 2A" }, { "EmployeeID": 2, "FirstName": "Andrew", "LastName": "Fuller", "ReportsTo": null, "Country": "USA", "Title": "Vice President, Sales", "HireDate": "1992-08-14 00:00:00", "BirthDate": "1952-02-19 00:00:00", "City": "Tacoma", "Address": "908 W. Capital Way" }, { "EmployeeID": 3, "FirstName": "Janet", "LastName": "Leverling", "ReportsTo": 2, "Country": "USA", "Title": "Sales Representative", "HireDate": "1992-04-01 00:00:00", "BirthDate": "1963-08-30 00:00:00", "City": "Kirkland", "Address": "722 Moss Bay Blvd." }, { "EmployeeID": 4, "FirstName": "Margaret", "LastName": "Peacock", "ReportsTo": 2, "Country": "USA", "Title": "Sales Representative", "HireDate": "1993-05-03 00:00:00", "BirthDate": "1937-09-19 00:00:00", "City": "Redmond", "Address": "4110 Old Redmond Rd." }, { "EmployeeID": 5, "FirstName": "Steven", "LastName": "Buchanan", "ReportsTo": 2, "Country": "UK", "Title": "Sales Manager", "HireDate": "1993-10-17 00:00:00", "BirthDate": "1955-03-04 00:00:00", "City": "London", "Address": "14 Garrett Hill" }, { "EmployeeID": 6, "FirstName": "Michael", "LastName": "Suyama", "ReportsTo": 5, "Country": "UK", "Title": "Sales Representative", "HireDate": "1993-10-17 00:00:00", "BirthDate": "1963-07-02 00:00:00", "City": "London", "Address": "Coventry House Miner Rd." }, { "EmployeeID": 7, "FirstName": "Robert", "LastName": "King", "ReportsTo": 5, "Country": "UK", "Title": "Sales Representative", "HireDate": "1994-01-02 00:00:00", "BirthDate": "1960-05-29 00:00:00", "City": "London", "Address": "Edgeham Hollow Winchester Way" }, { "EmployeeID": 8, "FirstName": "Laura", "LastName": "Callahan", "ReportsTo": 2, "Country": "USA", "Title": "Inside Sales Coordinator", "HireDate": "1994-03-05 00:00:00", "BirthDate": "1958-01-09 00:00:00", "City": "Seattle", "Address": "4726 - 11th Ave. N.E." }, { "EmployeeID": 9, "FirstName": "Anne", "LastName": "Dodsworth", "ReportsTo": 5, "Country": "UK", "Title": "Sales Representative", "HireDate": "1994-11-15 00:00:00", "BirthDate": "1966-01-27 00:00:00", "City": "London", "Address": "7 Houndstooth Rd." } ]}); var columns = [ { text: 'FirstName', columnGroup: 'Name', dataField: 'FirstName', width: 200 }, { text: 'LastName', columnGroup: 'Name', dataField: 'LastName', width: 200 }, { text: 'Title', dataField: 'Title', width: 160 }, { text: 'Birth Date', dataField: 'BirthDate', cellsFormat: 'd', width: 120 }, { text: 'Hire Date', dataField: 'HireDate', cellsFormat: 'd', width: 120 }, { text: 'Address', dataField: 'Address', width: 250 }, { text: 'City', dataField: 'City', width: 120 }, { text: 'Country', dataField: 'Country' } ]; var columnGroups = [ { text: 'Name', name: 'Name' } ]; JQXElements.settings[ "treeGridSettings"] = { sortable:true,filterable:true, columns:columns, columnGroups:columnGroups, source:source, theme: "light",rowDetails:true } </script></head><body> <jqx-tree-grid settings="treeGridSettings"></jqx-tree-grid>
|
rowDetailsRenderer
|
function
|
null
|
Sets or gets the rowDetailsRenderer property.
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>TreeGrid Custom Element Filtering and Sorting</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,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/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtreegrid.js"></script> <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script> <script type="text/javascript"> var source = new jqx.dataAdapter({ dataType: "json", dataFields: [ { name: 'EmployeeID', type: 'number' }, { name: 'ReportsTo', type: 'number' }, { name: 'FirstName', type: 'string' }, { name: 'LastName', type: 'string' }, { name: 'Country', type: 'string' }, { name: 'City', type: 'string' }, { name: 'Address', type: 'string' }, { name: 'Title', type: 'string' }, { name: 'HireDate', type: 'date' }, { name: 'BirthDate', type: 'date' } ], hierarchy: { keyDataField: { name: 'EmployeeID' }, parentDataField: { name: 'ReportsTo' } }, id: 'EmployeeID', localData: [ { "EmployeeID": 1, "FirstName": "Nancy", "LastName": "Davolio", "ReportsTo": 2, "Country": "USA", "Title": "Sales Representative", "HireDate": "1992-05-01 00:00:00", "BirthDate": "1948-12-08 00:00:00", "City": "Seattle", "Address": "507 - 20th Ave. E.Apt. 2A" }, { "EmployeeID": 2, "FirstName": "Andrew", "LastName": "Fuller", "ReportsTo": null, "Country": "USA", "Title": "Vice President, Sales", "HireDate": "1992-08-14 00:00:00", "BirthDate": "1952-02-19 00:00:00", "City": "Tacoma", "Address": "908 W. Capital Way" }, { "EmployeeID": 3, "FirstName": "Janet", "LastName": "Leverling", "ReportsTo": 2, "Country": "USA", "Title": "Sales Representative", "HireDate": "1992-04-01 00:00:00", "BirthDate": "1963-08-30 00:00:00", "City": "Kirkland", "Address": "722 Moss Bay Blvd." }, { "EmployeeID": 4, "FirstName": "Margaret", "LastName": "Peacock", "ReportsTo": 2, "Country": "USA", "Title": "Sales Representative", "HireDate": "1993-05-03 00:00:00", "BirthDate": "1937-09-19 00:00:00", "City": "Redmond", "Address": "4110 Old Redmond Rd." }, { "EmployeeID": 5, "FirstName": "Steven", "LastName": "Buchanan", "ReportsTo": 2, "Country": "UK", "Title": "Sales Manager", "HireDate": "1993-10-17 00:00:00", "BirthDate": "1955-03-04 00:00:00", "City": "London", "Address": "14 Garrett Hill" }, { "EmployeeID": 6, "FirstName": "Michael", "LastName": "Suyama", "ReportsTo": 5, "Country": "UK", "Title": "Sales Representative", "HireDate": "1993-10-17 00:00:00", "BirthDate": "1963-07-02 00:00:00", "City": "London", "Address": "Coventry House Miner Rd." }, { "EmployeeID": 7, "FirstName": "Robert", "LastName": "King", "ReportsTo": 5, "Country": "UK", "Title": "Sales Representative", "HireDate": "1994-01-02 00:00:00", "BirthDate": "1960-05-29 00:00:00", "City": "London", "Address": "Edgeham Hollow Winchester Way" }, { "EmployeeID": 8, "FirstName": "Laura", "LastName": "Callahan", "ReportsTo": 2, "Country": "USA", "Title": "Inside Sales Coordinator", "HireDate": "1994-03-05 00:00:00", "BirthDate": "1958-01-09 00:00:00", "City": "Seattle", "Address": "4726 - 11th Ave. N.E." }, { "EmployeeID": 9, "FirstName": "Anne", "LastName": "Dodsworth", "ReportsTo": 5, "Country": "UK", "Title": "Sales Representative", "HireDate": "1994-11-15 00:00:00", "BirthDate": "1966-01-27 00:00:00", "City": "London", "Address": "7 Houndstooth Rd." } ]}); var columns = [ { text: 'FirstName', columnGroup: 'Name', dataField: 'FirstName', width: 200 }, { text: 'LastName', columnGroup: 'Name', dataField: 'LastName', width: 200 }, { text: 'Title', dataField: 'Title', width: 160 }, { text: 'Birth Date', dataField: 'BirthDate', cellsFormat: 'd', width: 120 }, { text: 'Hire Date', dataField: 'HireDate', cellsFormat: 'd', width: 120 }, { text: 'Address', dataField: 'Address', width: 250 }, { text: 'City', dataField: 'City', width: 120 }, { text: 'Country', dataField: 'Country' } ]; var columnGroups = [ { text: 'Name', name: 'Name' } ]; JQXElements.settings[ "treeGridSettings"] = { sortable:true,filterable:true, columns:columns, columnGroups:columnGroups, source:source, theme: "light", rowDetailsRenderer:"rowDetailsRenderer" } </script></head><body> <jqx-tree-grid settings="treeGridSettings"></jqx-tree-grid>
|
renderToolbar
|
function
|
null
|
Sets or gets the renderToolbar property.
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>TreeGrid Custom Element Filtering and Sorting</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,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/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtreegrid.js"></script> <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script> <script type="text/javascript"> var source = new jqx.dataAdapter({ dataType: "json", dataFields: [ { name: 'EmployeeID', type: 'number' }, { name: 'ReportsTo', type: 'number' }, { name: 'FirstName', type: 'string' }, { name: 'LastName', type: 'string' }, { name: 'Country', type: 'string' }, { name: 'City', type: 'string' }, { name: 'Address', type: 'string' }, { name: 'Title', type: 'string' }, { name: 'HireDate', type: 'date' }, { name: 'BirthDate', type: 'date' } ], hierarchy: { keyDataField: { name: 'EmployeeID' }, parentDataField: { name: 'ReportsTo' } }, id: 'EmployeeID', localData: [ { "EmployeeID": 1, "FirstName": "Nancy", "LastName": "Davolio", "ReportsTo": 2, "Country": "USA", "Title": "Sales Representative", "HireDate": "1992-05-01 00:00:00", "BirthDate": "1948-12-08 00:00:00", "City": "Seattle", "Address": "507 - 20th Ave. E.Apt. 2A" }, { "EmployeeID": 2, "FirstName": "Andrew", "LastName": "Fuller", "ReportsTo": null, "Country": "USA", "Title": "Vice President, Sales", "HireDate": "1992-08-14 00:00:00", "BirthDate": "1952-02-19 00:00:00", "City": "Tacoma", "Address": "908 W. Capital Way" }, { "EmployeeID": 3, "FirstName": "Janet", "LastName": "Leverling", "ReportsTo": 2, "Country": "USA", "Title": "Sales Representative", "HireDate": "1992-04-01 00:00:00", "BirthDate": "1963-08-30 00:00:00", "City": "Kirkland", "Address": "722 Moss Bay Blvd." }, { "EmployeeID": 4, "FirstName": "Margaret", "LastName": "Peacock", "ReportsTo": 2, "Country": "USA", "Title": "Sales Representative", "HireDate": "1993-05-03 00:00:00", "BirthDate": "1937-09-19 00:00:00", "City": "Redmond", "Address": "4110 Old Redmond Rd." }, { "EmployeeID": 5, "FirstName": "Steven", "LastName": "Buchanan", "ReportsTo": 2, "Country": "UK", "Title": "Sales Manager", "HireDate": "1993-10-17 00:00:00", "BirthDate": "1955-03-04 00:00:00", "City": "London", "Address": "14 Garrett Hill" }, { "EmployeeID": 6, "FirstName": "Michael", "LastName": "Suyama", "ReportsTo": 5, "Country": "UK", "Title": "Sales Representative", "HireDate": "1993-10-17 00:00:00", "BirthDate": "1963-07-02 00:00:00", "City": "London", "Address": "Coventry House Miner Rd." }, { "EmployeeID": 7, "FirstName": "Robert", "LastName": "King", "ReportsTo": 5, "Country": "UK", "Title": "Sales Representative", "HireDate": "1994-01-02 00:00:00", "BirthDate": "1960-05-29 00:00:00", "City": "London", "Address": "Edgeham Hollow Winchester Way" }, { "EmployeeID": 8, "FirstName": "Laura", "LastName": "Callahan", "ReportsTo": 2, "Country": "USA", "Title": "Inside Sales Coordinator", "HireDate": "1994-03-05 00:00:00", "BirthDate": "1958-01-09 00:00:00", "City": "Seattle", "Address": "4726 - 11th Ave. N.E." }, { "EmployeeID": 9, "FirstName": "Anne", "LastName": "Dodsworth", "ReportsTo": 5, "Country": "UK", "Title": "Sales Representative", "HireDate": "1994-11-15 00:00:00", "BirthDate": "1966-01-27 00:00:00", "City": "London", "Address": "7 Houndstooth Rd." } ]}); var columns = [ { text: 'FirstName', columnGroup: 'Name', dataField: 'FirstName', width: 200 }, { text: 'LastName', columnGroup: 'Name', dataField: 'LastName', width: 200 }, { text: 'Title', dataField: 'Title', width: 160 }, { text: 'Birth Date', dataField: 'BirthDate', cellsFormat: 'd', width: 120 }, { text: 'Hire Date', dataField: 'HireDate', cellsFormat: 'd', width: 120 }, { text: 'Address', dataField: 'Address', width: 250 }, { text: 'City', dataField: 'City', width: 120 }, { text: 'Country', dataField: 'Country' } ]; var columnGroups = [ { text: 'Name', name: 'Name' } ]; JQXElements.settings[ "treeGridSettings"] = { sortable:true,filterable:true, columns:columns, columnGroups:columnGroups, source:source, theme: "light", renderToolbar:"renderToolbar" } </script></head><body> <jqx-tree-grid settings="treeGridSettings"></jqx-tree-grid>
|
renderStatusbar
|
function
|
null
|
Sets or gets the renderStatusbar property.
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>TreeGrid Custom Element Filtering and Sorting</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,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/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtreegrid.js"></script> <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script> <script type="text/javascript"> var source = new jqx.dataAdapter({ dataType: "json", dataFields: [ { name: 'EmployeeID', type: 'number' }, { name: 'ReportsTo', type: 'number' }, { name: 'FirstName', type: 'string' }, { name: 'LastName', type: 'string' }, { name: 'Country', type: 'string' }, { name: 'City', type: 'string' }, { name: 'Address', type: 'string' }, { name: 'Title', type: 'string' }, { name: 'HireDate', type: 'date' }, { name: 'BirthDate', type: 'date' } ], hierarchy: { keyDataField: { name: 'EmployeeID' }, parentDataField: { name: 'ReportsTo' } }, id: 'EmployeeID', localData: [ { "EmployeeID": 1, "FirstName": "Nancy", "LastName": "Davolio", "ReportsTo": 2, "Country": "USA", "Title": "Sales Representative", "HireDate": "1992-05-01 00:00:00", "BirthDate": "1948-12-08 00:00:00", "City": "Seattle", "Address": "507 - 20th Ave. E.Apt. 2A" }, { "EmployeeID": 2, "FirstName": "Andrew", "LastName": "Fuller", "ReportsTo": null, "Country": "USA", "Title": "Vice President, Sales", "HireDate": "1992-08-14 00:00:00", "BirthDate": "1952-02-19 00:00:00", "City": "Tacoma", "Address": "908 W. Capital Way" }, { "EmployeeID": 3, "FirstName": "Janet", "LastName": "Leverling", "ReportsTo": 2, "Country": "USA", "Title": "Sales Representative", "HireDate": "1992-04-01 00:00:00", "BirthDate": "1963-08-30 00:00:00", "City": "Kirkland", "Address": "722 Moss Bay Blvd." }, { "EmployeeID": 4, "FirstName": "Margaret", "LastName": "Peacock", "ReportsTo": 2, "Country": "USA", "Title": "Sales Representative", "HireDate": "1993-05-03 00:00:00", "BirthDate": "1937-09-19 00:00:00", "City": "Redmond", "Address": "4110 Old Redmond Rd." }, { "EmployeeID": 5, "FirstName": "Steven", "LastName": "Buchanan", "ReportsTo": 2, "Country": "UK", "Title": "Sales Manager", "HireDate": "1993-10-17 00:00:00", "BirthDate": "1955-03-04 00:00:00", "City": "London", "Address": "14 Garrett Hill" }, { "EmployeeID": 6, "FirstName": "Michael", "LastName": "Suyama", "ReportsTo": 5, "Country": "UK", "Title": "Sales Representative", "HireDate": "1993-10-17 00:00:00", "BirthDate": "1963-07-02 00:00:00", "City": "London", "Address": "Coventry House Miner Rd." }, { "EmployeeID": 7, "FirstName": "Robert", "LastName": "King", "ReportsTo": 5, "Country": "UK", "Title": "Sales Representative", "HireDate": "1994-01-02 00:00:00", "BirthDate": "1960-05-29 00:00:00", "City": "London", "Address": "Edgeham Hollow Winchester Way" }, { "EmployeeID": 8, "FirstName": "Laura", "LastName": "Callahan", "ReportsTo": 2, "Country": "USA", "Title": "Inside Sales Coordinator", "HireDate": "1994-03-05 00:00:00", "BirthDate": "1958-01-09 00:00:00", "City": "Seattle", "Address": "4726 - 11th Ave. N.E." }, { "EmployeeID": 9, "FirstName": "Anne", "LastName": "Dodsworth", "ReportsTo": 5, "Country": "UK", "Title": "Sales Representative", "HireDate": "1994-11-15 00:00:00", "BirthDate": "1966-01-27 00:00:00", "City": "London", "Address": "7 Houndstooth Rd." } ]}); var columns = [ { text: 'FirstName', columnGroup: 'Name', dataField: 'FirstName', width: 200 }, { text: 'LastName', columnGroup: 'Name', dataField: 'LastName', width: 200 }, { text: 'Title', dataField: 'Title', width: 160 }, { text: 'Birth Date', dataField: 'BirthDate', cellsFormat: 'd', width: 120 }, { text: 'Hire Date', dataField: 'HireDate', cellsFormat: 'd', width: 120 }, { text: 'Address', dataField: 'Address', width: 250 }, { text: 'City', dataField: 'City', width: 120 }, { text: 'Country', dataField: 'Country' } ]; var columnGroups = [ { text: 'Name', name: 'Name' } ]; JQXElements.settings[ "treeGridSettings"] = { sortable:true,filterable:true, columns:columns, columnGroups:columnGroups, source:source, theme: "light", renderStatusbar:"renderStatusbar" } </script></head><body> <jqx-tree-grid settings="treeGridSettings"></jqx-tree-grid>
|
rendering
|
function
|
null
|
Sets or gets the rendering property.
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>TreeGrid Custom Element Filtering and Sorting</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,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/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtreegrid.js"></script> <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script> <script type="text/javascript"> var source = new jqx.dataAdapter({ dataType: "json", dataFields: [ { name: 'EmployeeID', type: 'number' }, { name: 'ReportsTo', type: 'number' }, { name: 'FirstName', type: 'string' }, { name: 'LastName', type: 'string' }, { name: 'Country', type: 'string' }, { name: 'City', type: 'string' }, { name: 'Address', type: 'string' }, { name: 'Title', type: 'string' }, { name: 'HireDate', type: 'date' }, { name: 'BirthDate', type: 'date' } ], hierarchy: { keyDataField: { name: 'EmployeeID' }, parentDataField: { name: 'ReportsTo' } }, id: 'EmployeeID', localData: [ { "EmployeeID": 1, "FirstName": "Nancy", "LastName": "Davolio", "ReportsTo": 2, "Country": "USA", "Title": "Sales Representative", "HireDate": "1992-05-01 00:00:00", "BirthDate": "1948-12-08 00:00:00", "City": "Seattle", "Address": "507 - 20th Ave. E.Apt. 2A" }, { "EmployeeID": 2, "FirstName": "Andrew", "LastName": "Fuller", "ReportsTo": null, "Country": "USA", "Title": "Vice President, Sales", "HireDate": "1992-08-14 00:00:00", "BirthDate": "1952-02-19 00:00:00", "City": "Tacoma", "Address": "908 W. Capital Way" }, { "EmployeeID": 3, "FirstName": "Janet", "LastName": "Leverling", "ReportsTo": 2, "Country": "USA", "Title": "Sales Representative", "HireDate": "1992-04-01 00:00:00", "BirthDate": "1963-08-30 00:00:00", "City": "Kirkland", "Address": "722 Moss Bay Blvd." }, { "EmployeeID": 4, "FirstName": "Margaret", "LastName": "Peacock", "ReportsTo": 2, "Country": "USA", "Title": "Sales Representative", "HireDate": "1993-05-03 00:00:00", "BirthDate": "1937-09-19 00:00:00", "City": "Redmond", "Address": "4110 Old Redmond Rd." }, { "EmployeeID": 5, "FirstName": "Steven", "LastName": "Buchanan", "ReportsTo": 2, "Country": "UK", "Title": "Sales Manager", "HireDate": "1993-10-17 00:00:00", "BirthDate": "1955-03-04 00:00:00", "City": "London", "Address": "14 Garrett Hill" }, { "EmployeeID": 6, "FirstName": "Michael", "LastName": "Suyama", "ReportsTo": 5, "Country": "UK", "Title": "Sales Representative", "HireDate": "1993-10-17 00:00:00", "BirthDate": "1963-07-02 00:00:00", "City": "London", "Address": "Coventry House Miner Rd." }, { "EmployeeID": 7, "FirstName": "Robert", "LastName": "King", "ReportsTo": 5, "Country": "UK", "Title": "Sales Representative", "HireDate": "1994-01-02 00:00:00", "BirthDate": "1960-05-29 00:00:00", "City": "London", "Address": "Edgeham Hollow Winchester Way" }, { "EmployeeID": 8, "FirstName": "Laura", "LastName": "Callahan", "ReportsTo": 2, "Country": "USA", "Title": "Inside Sales Coordinator", "HireDate": "1994-03-05 00:00:00", "BirthDate": "1958-01-09 00:00:00", "City": "Seattle", "Address": "4726 - 11th Ave. N.E." }, { "EmployeeID": 9, "FirstName": "Anne", "LastName": "Dodsworth", "ReportsTo": 5, "Country": "UK", "Title": "Sales Representative", "HireDate": "1994-11-15 00:00:00", "BirthDate": "1966-01-27 00:00:00", "City": "London", "Address": "7 Houndstooth Rd." } ]}); var columns = [ { text: 'FirstName', columnGroup: 'Name', dataField: 'FirstName', width: 200 }, { text: 'LastName', columnGroup: 'Name', dataField: 'LastName', width: 200 }, { text: 'Title', dataField: 'Title', width: 160 }, { text: 'Birth Date', dataField: 'BirthDate', cellsFormat: 'd', width: 120 }, { text: 'Hire Date', dataField: 'HireDate', cellsFormat: 'd', width: 120 }, { text: 'Address', dataField: 'Address', width: 250 }, { text: 'City', dataField: 'City', width: 120 }, { text: 'Country', dataField: 'Country' } ]; var columnGroups = [ { text: 'Name', name: 'Name' } ]; JQXElements.settings[ "treeGridSettings"] = { sortable:true,filterable:true, columns:columns, columnGroups:columnGroups, source:source, theme: "light", rendering:"rendering" } </script></head><body> <jqx-tree-grid settings="treeGridSettings"></jqx-tree-grid>
|
rendered
|
function
|
null
|
Sets or gets the rendered property.
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>TreeGrid Custom Element Filtering and Sorting</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,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/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtreegrid.js"></script> <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script> <script type="text/javascript"> var source = new jqx.dataAdapter({ dataType: "json", dataFields: [ { name: 'EmployeeID', type: 'number' }, { name: 'ReportsTo', type: 'number' }, { name: 'FirstName', type: 'string' }, { name: 'LastName', type: 'string' }, { name: 'Country', type: 'string' }, { name: 'City', type: 'string' }, { name: 'Address', type: 'string' }, { name: 'Title', type: 'string' }, { name: 'HireDate', type: 'date' }, { name: 'BirthDate', type: 'date' } ], hierarchy: { keyDataField: { name: 'EmployeeID' }, parentDataField: { name: 'ReportsTo' } }, id: 'EmployeeID', localData: [ { "EmployeeID": 1, "FirstName": "Nancy", "LastName": "Davolio", "ReportsTo": 2, "Country": "USA", "Title": "Sales Representative", "HireDate": "1992-05-01 00:00:00", "BirthDate": "1948-12-08 00:00:00", "City": "Seattle", "Address": "507 - 20th Ave. E.Apt. 2A" }, { "EmployeeID": 2, "FirstName": "Andrew", "LastName": "Fuller", "ReportsTo": null, "Country": "USA", "Title": "Vice President, Sales", "HireDate": "1992-08-14 00:00:00", "BirthDate": "1952-02-19 00:00:00", "City": "Tacoma", "Address": "908 W. Capital Way" }, { "EmployeeID": 3, "FirstName": "Janet", "LastName": "Leverling", "ReportsTo": 2, "Country": "USA", "Title": "Sales Representative", "HireDate": "1992-04-01 00:00:00", "BirthDate": "1963-08-30 00:00:00", "City": "Kirkland", "Address": "722 Moss Bay Blvd." }, { "EmployeeID": 4, "FirstName": "Margaret", "LastName": "Peacock", "ReportsTo": 2, "Country": "USA", "Title": "Sales Representative", "HireDate": "1993-05-03 00:00:00", "BirthDate": "1937-09-19 00:00:00", "City": "Redmond", "Address": "4110 Old Redmond Rd." }, { "EmployeeID": 5, "FirstName": "Steven", "LastName": "Buchanan", "ReportsTo": 2, "Country": "UK", "Title": "Sales Manager", "HireDate": "1993-10-17 00:00:00", "BirthDate": "1955-03-04 00:00:00", "City": "London", "Address": "14 Garrett Hill" }, { "EmployeeID": 6, "FirstName": "Michael", "LastName": "Suyama", "ReportsTo": 5, "Country": "UK", "Title": "Sales Representative", "HireDate": "1993-10-17 00:00:00", "BirthDate": "1963-07-02 00:00:00", "City": "London", "Address": "Coventry House Miner Rd." }, { "EmployeeID": 7, "FirstName": "Robert", "LastName": "King", "ReportsTo": 5, "Country": "UK", "Title": "Sales Representative", "HireDate": "1994-01-02 00:00:00", "BirthDate": "1960-05-29 00:00:00", "City": "London", "Address": "Edgeham Hollow Winchester Way" }, { "EmployeeID": 8, "FirstName": "Laura", "LastName": "Callahan", "ReportsTo": 2, "Country": "USA", "Title": "Inside Sales Coordinator", "HireDate": "1994-03-05 00:00:00", "BirthDate": "1958-01-09 00:00:00", "City": "Seattle", "Address": "4726 - 11th Ave. N.E." }, { "EmployeeID": 9, "FirstName": "Anne", "LastName": "Dodsworth", "ReportsTo": 5, "Country": "UK", "Title": "Sales Representative", "HireDate": "1994-11-15 00:00:00", "BirthDate": "1966-01-27 00:00:00", "City": "London", "Address": "7 Houndstooth Rd." } ]}); var columns = [ { text: 'FirstName', columnGroup: 'Name', dataField: 'FirstName', width: 200 }, { text: 'LastName', columnGroup: 'Name', dataField: 'LastName', width: 200 }, { text: 'Title', dataField: 'Title', width: 160 }, { text: 'Birth Date', dataField: 'BirthDate', cellsFormat: 'd', width: 120 }, { text: 'Hire Date', dataField: 'HireDate', cellsFormat: 'd', width: 120 }, { text: 'Address', dataField: 'Address', width: 250 }, { text: 'City', dataField: 'City', width: 120 }, { text: 'Country', dataField: 'Country' } ]; var columnGroups = [ { text: 'Name', name: 'Name' } ]; JQXElements.settings[ "treeGridSettings"] = { sortable:true,filterable:true, columns:columns, columnGroups:columnGroups, source:source, theme: "light", rendered:"rendered" } </script></head><body> <jqx-tree-grid settings="treeGridSettings"></jqx-tree-grid>
|
rtl
|
boolean
|
false
|
Sets or gets the rtl property.
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>TreeGrid Custom Element Filtering and Sorting</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,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/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtreegrid.js"></script> <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script> <script type="text/javascript"> var source = new jqx.dataAdapter({ dataType: "json", dataFields: [ { name: 'EmployeeID', type: 'number' }, { name: 'ReportsTo', type: 'number' }, { name: 'FirstName', type: 'string' }, { name: 'LastName', type: 'string' }, { name: 'Country', type: 'string' }, { name: 'City', type: 'string' }, { name: 'Address', type: 'string' }, { name: 'Title', type: 'string' }, { name: 'HireDate', type: 'date' }, { name: 'BirthDate', type: 'date' } ], hierarchy: { keyDataField: { name: 'EmployeeID' }, parentDataField: { name: 'ReportsTo' } }, id: 'EmployeeID', localData: [ { "EmployeeID": 1, "FirstName": "Nancy", "LastName": "Davolio", "ReportsTo": 2, "Country": "USA", "Title": "Sales Representative", "HireDate": "1992-05-01 00:00:00", "BirthDate": "1948-12-08 00:00:00", "City": "Seattle", "Address": "507 - 20th Ave. E.Apt. 2A" }, { "EmployeeID": 2, "FirstName": "Andrew", "LastName": "Fuller", "ReportsTo": null, "Country": "USA", "Title": "Vice President, Sales", "HireDate": "1992-08-14 00:00:00", "BirthDate": "1952-02-19 00:00:00", "City": "Tacoma", "Address": "908 W. Capital Way" }, { "EmployeeID": 3, "FirstName": "Janet", "LastName": "Leverling", "ReportsTo": 2, "Country": "USA", "Title": "Sales Representative", "HireDate": "1992-04-01 00:00:00", "BirthDate": "1963-08-30 00:00:00", "City": "Kirkland", "Address": "722 Moss Bay Blvd." }, { "EmployeeID": 4, "FirstName": "Margaret", "LastName": "Peacock", "ReportsTo": 2, "Country": "USA", "Title": "Sales Representative", "HireDate": "1993-05-03 00:00:00", "BirthDate": "1937-09-19 00:00:00", "City": "Redmond", "Address": "4110 Old Redmond Rd." }, { "EmployeeID": 5, "FirstName": "Steven", "LastName": "Buchanan", "ReportsTo": 2, "Country": "UK", "Title": "Sales Manager", "HireDate": "1993-10-17 00:00:00", "BirthDate": "1955-03-04 00:00:00", "City": "London", "Address": "14 Garrett Hill" }, { "EmployeeID": 6, "FirstName": "Michael", "LastName": "Suyama", "ReportsTo": 5, "Country": "UK", "Title": "Sales Representative", "HireDate": "1993-10-17 00:00:00", "BirthDate": "1963-07-02 00:00:00", "City": "London", "Address": "Coventry House Miner Rd." }, { "EmployeeID": 7, "FirstName": "Robert", "LastName": "King", "ReportsTo": 5, "Country": "UK", "Title": "Sales Representative", "HireDate": "1994-01-02 00:00:00", "BirthDate": "1960-05-29 00:00:00", "City": "London", "Address": "Edgeham Hollow Winchester Way" }, { "EmployeeID": 8, "FirstName": "Laura", "LastName": "Callahan", "ReportsTo": 2, "Country": "USA", "Title": "Inside Sales Coordinator", "HireDate": "1994-03-05 00:00:00", "BirthDate": "1958-01-09 00:00:00", "City": "Seattle", "Address": "4726 - 11th Ave. N.E." }, { "EmployeeID": 9, "FirstName": "Anne", "LastName": "Dodsworth", "ReportsTo": 5, "Country": "UK", "Title": "Sales Representative", "HireDate": "1994-11-15 00:00:00", "BirthDate": "1966-01-27 00:00:00", "City": "London", "Address": "7 Houndstooth Rd." } ]}); var columns = [ { text: 'FirstName', columnGroup: 'Name', dataField: 'FirstName', width: 200 }, { text: 'LastName', columnGroup: 'Name', dataField: 'LastName', width: 200 }, { text: 'Title', dataField: 'Title', width: 160 }, { text: 'Birth Date', dataField: 'BirthDate', cellsFormat: 'd', width: 120 }, { text: 'Hire Date', dataField: 'HireDate', cellsFormat: 'd', width: 120 }, { text: 'Address', dataField: 'Address', width: 250 }, { text: 'City', dataField: 'City', width: 120 }, { text: 'Country', dataField: 'Country' } ]; var columnGroups = [ { text: 'Name', name: 'Name' } ]; JQXElements.settings[ "treeGridSettings"] = { sortable:true,filterable:true, columns:columns, columnGroups:columnGroups, source:source, theme: "light",rtl:true } </script></head><body> <jqx-tree-grid settings="treeGridSettings"></jqx-tree-grid>
|
source
|
object
|
null
|
Sets or gets the source property.
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>TreeGrid Custom Element Filtering and Sorting</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,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/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtreegrid.js"></script> <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script> <script type="text/javascript"> var source = new jqx.dataAdapter({ dataType: "json", dataFields: [ { name: 'EmployeeID', type: 'number' }, { name: 'ReportsTo', type: 'number' }, { name: 'FirstName', type: 'string' }, { name: 'LastName', type: 'string' }, { name: 'Country', type: 'string' }, { name: 'City', type: 'string' }, { name: 'Address', type: 'string' }, { name: 'Title', type: 'string' }, { name: 'HireDate', type: 'date' }, { name: 'BirthDate', type: 'date' } ], hierarchy: { keyDataField: { name: 'EmployeeID' }, parentDataField: { name: 'ReportsTo' } }, id: 'EmployeeID', localData: [ { "EmployeeID": 1, "FirstName": "Nancy", "LastName": "Davolio", "ReportsTo": 2, "Country": "USA", "Title": "Sales Representative", "HireDate": "1992-05-01 00:00:00", "BirthDate": "1948-12-08 00:00:00", "City": "Seattle", "Address": "507 - 20th Ave. E.Apt. 2A" }, { "EmployeeID": 2, "FirstName": "Andrew", "LastName": "Fuller", "ReportsTo": null, "Country": "USA", "Title": "Vice President, Sales", "HireDate": "1992-08-14 00:00:00", "BirthDate": "1952-02-19 00:00:00", "City": "Tacoma", "Address": "908 W. Capital Way" }, { "EmployeeID": 3, "FirstName": "Janet", "LastName": "Leverling", "ReportsTo": 2, "Country": "USA", "Title": "Sales Representative", "HireDate": "1992-04-01 00:00:00", "BirthDate": "1963-08-30 00:00:00", "City": "Kirkland", "Address": "722 Moss Bay Blvd." }, { "EmployeeID": 4, "FirstName": "Margaret", "LastName": "Peacock", "ReportsTo": 2, "Country": "USA", "Title": "Sales Representative", "HireDate": "1993-05-03 00:00:00", "BirthDate": "1937-09-19 00:00:00", "City": "Redmond", "Address": "4110 Old Redmond Rd." }, { "EmployeeID": 5, "FirstName": "Steven", "LastName": "Buchanan", "ReportsTo": 2, "Country": "UK", "Title": "Sales Manager", "HireDate": "1993-10-17 00:00:00", "BirthDate": "1955-03-04 00:00:00", "City": "London", "Address": "14 Garrett Hill" }, { "EmployeeID": 6, "FirstName": "Michael", "LastName": "Suyama", "ReportsTo": 5, "Country": "UK", "Title": "Sales Representative", "HireDate": "1993-10-17 00:00:00", "BirthDate": "1963-07-02 00:00:00", "City": "London", "Address": "Coventry House Miner Rd." }, { "EmployeeID": 7, "FirstName": "Robert", "LastName": "King", "ReportsTo": 5, "Country": "UK", "Title": "Sales Representative", "HireDate": "1994-01-02 00:00:00", "BirthDate": "1960-05-29 00:00:00", "City": "London", "Address": "Edgeham Hollow Winchester Way" }, { "EmployeeID": 8, "FirstName": "Laura", "LastName": "Callahan", "ReportsTo": 2, "Country": "USA", "Title": "Inside Sales Coordinator", "HireDate": "1994-03-05 00:00:00", "BirthDate": "1958-01-09 00:00:00", "City": "Seattle", "Address": "4726 - 11th Ave. N.E." }, { "EmployeeID": 9, "FirstName": "Anne", "LastName": "Dodsworth", "ReportsTo": 5, "Country": "UK", "Title": "Sales Representative", "HireDate": "1994-11-15 00:00:00", "BirthDate": "1966-01-27 00:00:00", "City": "London", "Address": "7 Houndstooth Rd." } ]}); var columns = [ { text: 'FirstName', columnGroup: 'Name', dataField: 'FirstName', width: 200 }, { text: 'LastName', columnGroup: 'Name', dataField: 'LastName', width: 200 }, { text: 'Title', dataField: 'Title', width: 160 }, { text: 'Birth Date', dataField: 'BirthDate', cellsFormat: 'd', width: 120 }, { text: 'Hire Date', dataField: 'HireDate', cellsFormat: 'd', width: 120 }, { text: 'Address', dataField: 'Address', width: 250 }, { text: 'City', dataField: 'City', width: 120 }, { text: 'Country', dataField: 'Country' } ]; var columnGroups = [ { text: 'Name', name: 'Name' } ]; JQXElements.settings[ "treeGridSettings"] = { sortable:true,filterable:true, columns:columns, columnGroups:columnGroups, source:source, theme: "light" } </script></head><body> <jqx-tree-grid settings="treeGridSettings"></jqx-tree-grid>
|
sortable
|
boolean
|
false
|
Sets or gets the sortable property.
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>TreeGrid Custom Element Filtering and Sorting</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,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/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtreegrid.js"></script> <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script> <script type="text/javascript"> var source = new jqx.dataAdapter({ dataType: "json", dataFields: [ { name: 'EmployeeID', type: 'number' }, { name: 'ReportsTo', type: 'number' }, { name: 'FirstName', type: 'string' }, { name: 'LastName', type: 'string' }, { name: 'Country', type: 'string' }, { name: 'City', type: 'string' }, { name: 'Address', type: 'string' }, { name: 'Title', type: 'string' }, { name: 'HireDate', type: 'date' }, { name: 'BirthDate', type: 'date' } ], hierarchy: { keyDataField: { name: 'EmployeeID' }, parentDataField: { name: 'ReportsTo' } }, id: 'EmployeeID', localData: [ { "EmployeeID": 1, "FirstName": "Nancy", "LastName": "Davolio", "ReportsTo": 2, "Country": "USA", "Title": "Sales Representative", "HireDate": "1992-05-01 00:00:00", "BirthDate": "1948-12-08 00:00:00", "City": "Seattle", "Address": "507 - 20th Ave. E.Apt. 2A" }, { "EmployeeID": 2, "FirstName": "Andrew", "LastName": "Fuller", "ReportsTo": null, "Country": "USA", "Title": "Vice President, Sales", "HireDate": "1992-08-14 00:00:00", "BirthDate": "1952-02-19 00:00:00", "City": "Tacoma", "Address": "908 W. Capital Way" }, { "EmployeeID": 3, "FirstName": "Janet", "LastName": "Leverling", "ReportsTo": 2, "Country": "USA", "Title": "Sales Representative", "HireDate": "1992-04-01 00:00:00", "BirthDate": "1963-08-30 00:00:00", "City": "Kirkland", "Address": "722 Moss Bay Blvd." }, { "EmployeeID": 4, "FirstName": "Margaret", "LastName": "Peacock", "ReportsTo": 2, "Country": "USA", "Title": "Sales Representative", "HireDate": "1993-05-03 00:00:00", "BirthDate": "1937-09-19 00:00:00", "City": "Redmond", "Address": "4110 Old Redmond Rd." }, { "EmployeeID": 5, "FirstName": "Steven", "LastName": "Buchanan", "ReportsTo": 2, "Country": "UK", "Title": "Sales Manager", "HireDate": "1993-10-17 00:00:00", "BirthDate": "1955-03-04 00:00:00", "City": "London", "Address": "14 Garrett Hill" }, { "EmployeeID": 6, "FirstName": "Michael", "LastName": "Suyama", "ReportsTo": 5, "Country": "UK", "Title": "Sales Representative", "HireDate": "1993-10-17 00:00:00", "BirthDate": "1963-07-02 00:00:00", "City": "London", "Address": "Coventry House Miner Rd." }, { "EmployeeID": 7, "FirstName": "Robert", "LastName": "King", "ReportsTo": 5, "Country": "UK", "Title": "Sales Representative", "HireDate": "1994-01-02 00:00:00", "BirthDate": "1960-05-29 00:00:00", "City": "London", "Address": "Edgeham Hollow Winchester Way" }, { "EmployeeID": 8, "FirstName": "Laura", "LastName": "Callahan", "ReportsTo": 2, "Country": "USA", "Title": "Inside Sales Coordinator", "HireDate": "1994-03-05 00:00:00", "BirthDate": "1958-01-09 00:00:00", "City": "Seattle", "Address": "4726 - 11th Ave. N.E." }, { "EmployeeID": 9, "FirstName": "Anne", "LastName": "Dodsworth", "ReportsTo": 5, "Country": "UK", "Title": "Sales Representative", "HireDate": "1994-11-15 00:00:00", "BirthDate": "1966-01-27 00:00:00", "City": "London", "Address": "7 Houndstooth Rd." } ]}); var columns = [ { text: 'FirstName', columnGroup: 'Name', dataField: 'FirstName', width: 200 }, { text: 'LastName', columnGroup: 'Name', dataField: 'LastName', width: 200 }, { text: 'Title', dataField: 'Title', width: 160 }, { text: 'Birth Date', dataField: 'BirthDate', cellsFormat: 'd', width: 120 }, { text: 'Hire Date', dataField: 'HireDate', cellsFormat: 'd', width: 120 }, { text: 'Address', dataField: 'Address', width: 250 }, { text: 'City', dataField: 'City', width: 120 }, { text: 'Country', dataField: 'Country' } ]; var columnGroups = [ { text: 'Name', name: 'Name' } ]; JQXElements.settings[ "treeGridSettings"] = { sortable:true,filterable:true, columns:columns, columnGroups:columnGroups, source:source, theme: "light" } </script></head><body> <jqx-tree-grid settings="treeGridSettings"></jqx-tree-grid>
|
showAggregates
|
boolean
|
false
|
Sets or gets the showAggregates property.
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>TreeGrid Custom Element Filtering and Sorting</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,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/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtreegrid.js"></script> <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script> <script type="text/javascript"> var source = new jqx.dataAdapter({ dataType: "json", dataFields: [ { name: 'EmployeeID', type: 'number' }, { name: 'ReportsTo', type: 'number' }, { name: 'FirstName', type: 'string' }, { name: 'LastName', type: 'string' }, { name: 'Country', type: 'string' }, { name: 'City', type: 'string' }, { name: 'Address', type: 'string' }, { name: 'Title', type: 'string' }, { name: 'HireDate', type: 'date' }, { name: 'BirthDate', type: 'date' } ], hierarchy: { keyDataField: { name: 'EmployeeID' }, parentDataField: { name: 'ReportsTo' } }, id: 'EmployeeID', localData: [ { "EmployeeID": 1, "FirstName": "Nancy", "LastName": "Davolio", "ReportsTo": 2, "Country": "USA", "Title": "Sales Representative", "HireDate": "1992-05-01 00:00:00", "BirthDate": "1948-12-08 00:00:00", "City": "Seattle", "Address": "507 - 20th Ave. E.Apt. 2A" }, { "EmployeeID": 2, "FirstName": "Andrew", "LastName": "Fuller", "ReportsTo": null, "Country": "USA", "Title": "Vice President, Sales", "HireDate": "1992-08-14 00:00:00", "BirthDate": "1952-02-19 00:00:00", "City": "Tacoma", "Address": "908 W. Capital Way" }, { "EmployeeID": 3, "FirstName": "Janet", "LastName": "Leverling", "ReportsTo": 2, "Country": "USA", "Title": "Sales Representative", "HireDate": "1992-04-01 00:00:00", "BirthDate": "1963-08-30 00:00:00", "City": "Kirkland", "Address": "722 Moss Bay Blvd." }, { "EmployeeID": 4, "FirstName": "Margaret", "LastName": "Peacock", "ReportsTo": 2, "Country": "USA", "Title": "Sales Representative", "HireDate": "1993-05-03 00:00:00", "BirthDate": "1937-09-19 00:00:00", "City": "Redmond", "Address": "4110 Old Redmond Rd." }, { "EmployeeID": 5, "FirstName": "Steven", "LastName": "Buchanan", "ReportsTo": 2, "Country": "UK", "Title": "Sales Manager", "HireDate": "1993-10-17 00:00:00", "BirthDate": "1955-03-04 00:00:00", "City": "London", "Address": "14 Garrett Hill" }, { "EmployeeID": 6, "FirstName": "Michael", "LastName": "Suyama", "ReportsTo": 5, "Country": "UK", "Title": "Sales Representative", "HireDate": "1993-10-17 00:00:00", "BirthDate": "1963-07-02 00:00:00", "City": "London", "Address": "Coventry House Miner Rd." }, { "EmployeeID": 7, "FirstName": "Robert", "LastName": "King", "ReportsTo": 5, "Country": "UK", "Title": "Sales Representative", "HireDate": "1994-01-02 00:00:00", "BirthDate": "1960-05-29 00:00:00", "City": "London", "Address": "Edgeham Hollow Winchester Way" }, { "EmployeeID": 8, "FirstName": "Laura", "LastName": "Callahan", "ReportsTo": 2, "Country": "USA", "Title": "Inside Sales Coordinator", "HireDate": "1994-03-05 00:00:00", "BirthDate": "1958-01-09 00:00:00", "City": "Seattle", "Address": "4726 - 11th Ave. N.E." }, { "EmployeeID": 9, "FirstName": "Anne", "LastName": "Dodsworth", "ReportsTo": 5, "Country": "UK", "Title": "Sales Representative", "HireDate": "1994-11-15 00:00:00", "BirthDate": "1966-01-27 00:00:00", "City": "London", "Address": "7 Houndstooth Rd." } ]}); var columns = [ { text: 'FirstName', columnGroup: 'Name', dataField: 'FirstName', width: 200 }, { text: 'LastName', columnGroup: 'Name', dataField: 'LastName', width: 200 }, { text: 'Title', dataField: 'Title', width: 160 }, { text: 'Birth Date', dataField: 'BirthDate', cellsFormat: 'd', width: 120 }, { text: 'Hire Date', dataField: 'HireDate', cellsFormat: 'd', width: 120 }, { text: 'Address', dataField: 'Address', width: 250 }, { text: 'City', dataField: 'City', width: 120 }, { text: 'Country', dataField: 'Country' } ]; var columnGroups = [ { text: 'Name', name: 'Name' } ]; JQXElements.settings[ "treeGridSettings"] = { sortable:true,filterable:true, columns:columns, columnGroups:columnGroups, source:source, theme: "light",showAggregates:true } </script></head><body> <jqx-tree-grid settings="treeGridSettings"></jqx-tree-grid>
|
showSubAggregates
|
boolean
|
false
|
Sets or gets the showSubAggregates property.
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>TreeGrid Custom Element Filtering and Sorting</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,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/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtreegrid.js"></script> <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script> <script type="text/javascript"> var source = new jqx.dataAdapter({ dataType: "json", dataFields: [ { name: 'EmployeeID', type: 'number' }, { name: 'ReportsTo', type: 'number' }, { name: 'FirstName', type: 'string' }, { name: 'LastName', type: 'string' }, { name: 'Country', type: 'string' }, { name: 'City', type: 'string' }, { name: 'Address', type: 'string' }, { name: 'Title', type: 'string' }, { name: 'HireDate', type: 'date' }, { name: 'BirthDate', type: 'date' } ], hierarchy: { keyDataField: { name: 'EmployeeID' }, parentDataField: { name: 'ReportsTo' } }, id: 'EmployeeID', localData: [ { "EmployeeID": 1, "FirstName": "Nancy", "LastName": "Davolio", "ReportsTo": 2, "Country": "USA", "Title": "Sales Representative", "HireDate": "1992-05-01 00:00:00", "BirthDate": "1948-12-08 00:00:00", "City": "Seattle", "Address": "507 - 20th Ave. E.Apt. 2A" }, { "EmployeeID": 2, "FirstName": "Andrew", "LastName": "Fuller", "ReportsTo": null, "Country": "USA", "Title": "Vice President, Sales", "HireDate": "1992-08-14 00:00:00", "BirthDate": "1952-02-19 00:00:00", "City": "Tacoma", "Address": "908 W. Capital Way" }, { "EmployeeID": 3, "FirstName": "Janet", "LastName": "Leverling", "ReportsTo": 2, "Country": "USA", "Title": "Sales Representative", "HireDate": "1992-04-01 00:00:00", "BirthDate": "1963-08-30 00:00:00", "City": "Kirkland", "Address": "722 Moss Bay Blvd." }, { "EmployeeID": 4, "FirstName": "Margaret", "LastName": "Peacock", "ReportsTo": 2, "Country": "USA", "Title": "Sales Representative", "HireDate": "1993-05-03 00:00:00", "BirthDate": "1937-09-19 00:00:00", "City": "Redmond", "Address": "4110 Old Redmond Rd." }, { "EmployeeID": 5, "FirstName": "Steven", "LastName": "Buchanan", "ReportsTo": 2, "Country": "UK", "Title": "Sales Manager", "HireDate": "1993-10-17 00:00:00", "BirthDate": "1955-03-04 00:00:00", "City": "London", "Address": "14 Garrett Hill" }, { "EmployeeID": 6, "FirstName": "Michael", "LastName": "Suyama", "ReportsTo": 5, "Country": "UK", "Title": "Sales Representative", "HireDate": "1993-10-17 00:00:00", "BirthDate": "1963-07-02 00:00:00", "City": "London", "Address": "Coventry House Miner Rd." }, { "EmployeeID": 7, "FirstName": "Robert", "LastName": "King", "ReportsTo": 5, "Country": "UK", "Title": "Sales Representative", "HireDate": "1994-01-02 00:00:00", "BirthDate": "1960-05-29 00:00:00", "City": "London", "Address": "Edgeham Hollow Winchester Way" }, { "EmployeeID": 8, "FirstName": "Laura", "LastName": "Callahan", "ReportsTo": 2, "Country": "USA", "Title": "Inside Sales Coordinator", "HireDate": "1994-03-05 00:00:00", "BirthDate": "1958-01-09 00:00:00", "City": "Seattle", "Address": "4726 - 11th Ave. N.E." }, { "EmployeeID": 9, "FirstName": "Anne", "LastName": "Dodsworth", "ReportsTo": 5, "Country": "UK", "Title": "Sales Representative", "HireDate": "1994-11-15 00:00:00", "BirthDate": "1966-01-27 00:00:00", "City": "London", "Address": "7 Houndstooth Rd." } ]}); var columns = [ { text: 'FirstName', columnGroup: 'Name', dataField: 'FirstName', width: 200 }, { text: 'LastName', columnGroup: 'Name', dataField: 'LastName', width: 200 }, { text: 'Title', dataField: 'Title', width: 160 }, { text: 'Birth Date', dataField: 'BirthDate', cellsFormat: 'd', width: 120 }, { text: 'Hire Date', dataField: 'HireDate', cellsFormat: 'd', width: 120 }, { text: 'Address', dataField: 'Address', width: 250 }, { text: 'City', dataField: 'City', width: 120 }, { text: 'Country', dataField: 'Country' } ]; var columnGroups = [ { text: 'Name', name: 'Name' } ]; JQXElements.settings[ "treeGridSettings"] = { sortable:true,filterable:true, columns:columns, columnGroups:columnGroups, source:source, theme: "light",showAggregates:true,showSubAggregates:true } </script></head><body> <jqx-tree-grid settings="treeGridSettings"></jqx-tree-grid>
|
showToolbar
|
boolean
|
false
|
Sets or gets the showToolbar property.
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>TreeGrid Custom Element Filtering and Sorting</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,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/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtreegrid.js"></script> <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script> <script type="text/javascript"> var source = new jqx.dataAdapter({ dataType: "json", dataFields: [ { name: 'EmployeeID', type: 'number' }, { name: 'ReportsTo', type: 'number' }, { name: 'FirstName', type: 'string' }, { name: 'LastName', type: 'string' }, { name: 'Country', type: 'string' }, { name: 'City', type: 'string' }, { name: 'Address', type: 'string' }, { name: 'Title', type: 'string' }, { name: 'HireDate', type: 'date' }, { name: 'BirthDate', type: 'date' } ], hierarchy: { keyDataField: { name: 'EmployeeID' }, parentDataField: { name: 'ReportsTo' } }, id: 'EmployeeID', localData: [ { "EmployeeID": 1, "FirstName": "Nancy", "LastName": "Davolio", "ReportsTo": 2, "Country": "USA", "Title": "Sales Representative", "HireDate": "1992-05-01 00:00:00", "BirthDate": "1948-12-08 00:00:00", "City": "Seattle", "Address": "507 - 20th Ave. E.Apt. 2A" }, { "EmployeeID": 2, "FirstName": "Andrew", "LastName": "Fuller", "ReportsTo": null, "Country": "USA", "Title": "Vice President, Sales", "HireDate": "1992-08-14 00:00:00", "BirthDate": "1952-02-19 00:00:00", "City": "Tacoma", "Address": "908 W. Capital Way" }, { "EmployeeID": 3, "FirstName": "Janet", "LastName": "Leverling", "ReportsTo": 2, "Country": "USA", "Title": "Sales Representative", "HireDate": "1992-04-01 00:00:00", "BirthDate": "1963-08-30 00:00:00", "City": "Kirkland", "Address": "722 Moss Bay Blvd." }, { "EmployeeID": 4, "FirstName": "Margaret", "LastName": "Peacock", "ReportsTo": 2, "Country": "USA", "Title": "Sales Representative", "HireDate": "1993-05-03 00:00:00", "BirthDate": "1937-09-19 00:00:00", "City": "Redmond", "Address": "4110 Old Redmond Rd." }, { "EmployeeID": 5, "FirstName": "Steven", "LastName": "Buchanan", "ReportsTo": 2, "Country": "UK", "Title": "Sales Manager", "HireDate": "1993-10-17 00:00:00", "BirthDate": "1955-03-04 00:00:00", "City": "London", "Address": "14 Garrett Hill" }, { "EmployeeID": 6, "FirstName": "Michael", "LastName": "Suyama", "ReportsTo": 5, "Country": "UK", "Title": "Sales Representative", "HireDate": "1993-10-17 00:00:00", "BirthDate": "1963-07-02 00:00:00", "City": "London", "Address": "Coventry House Miner Rd." }, { "EmployeeID": 7, "FirstName": "Robert", "LastName": "King", "ReportsTo": 5, "Country": "UK", "Title": "Sales Representative", "HireDate": "1994-01-02 00:00:00", "BirthDate": "1960-05-29 00:00:00", "City": "London", "Address": "Edgeham Hollow Winchester Way" }, { "EmployeeID": 8, "FirstName": "Laura", "LastName": "Callahan", "ReportsTo": 2, "Country": "USA", "Title": "Inside Sales Coordinator", "HireDate": "1994-03-05 00:00:00", "BirthDate": "1958-01-09 00:00:00", "City": "Seattle", "Address": "4726 - 11th Ave. N.E." }, { "EmployeeID": 9, "FirstName": "Anne", "LastName": "Dodsworth", "ReportsTo": 5, "Country": "UK", "Title": "Sales Representative", "HireDate": "1994-11-15 00:00:00", "BirthDate": "1966-01-27 00:00:00", "City": "London", "Address": "7 Houndstooth Rd." } ]}); var columns = [ { text: 'FirstName', columnGroup: 'Name', dataField: 'FirstName', width: 200 }, { text: 'LastName', columnGroup: 'Name', dataField: 'LastName', width: 200 }, { text: 'Title', dataField: 'Title', width: 160 }, { text: 'Birth Date', dataField: 'BirthDate', cellsFormat: 'd', width: 120 }, { text: 'Hire Date', dataField: 'HireDate', cellsFormat: 'd', width: 120 }, { text: 'Address', dataField: 'Address', width: 250 }, { text: 'City', dataField: 'City', width: 120 }, { text: 'Country', dataField: 'Country' } ]; var columnGroups = [ { text: 'Name', name: 'Name' } ]; JQXElements.settings[ "treeGridSettings"] = { sortable:true,filterable:true, columns:columns, columnGroups:columnGroups, source:source, theme: "light",showToolbar:true } </script></head><body> <jqx-tree-grid settings="treeGridSettings"></jqx-tree-grid>
|
showStatusbar
|
boolean
|
false
|
Sets or gets the showStatusbar property.
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>TreeGrid Custom Element Filtering and Sorting</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,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/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtreegrid.js"></script> <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script> <script type="text/javascript"> var source = new jqx.dataAdapter({ dataType: "json", dataFields: [ { name: 'EmployeeID', type: 'number' }, { name: 'ReportsTo', type: 'number' }, { name: 'FirstName', type: 'string' }, { name: 'LastName', type: 'string' }, { name: 'Country', type: 'string' }, { name: 'City', type: 'string' }, { name: 'Address', type: 'string' }, { name: 'Title', type: 'string' }, { name: 'HireDate', type: 'date' }, { name: 'BirthDate', type: 'date' } ], hierarchy: { keyDataField: { name: 'EmployeeID' }, parentDataField: { name: 'ReportsTo' } }, id: 'EmployeeID', localData: [ { "EmployeeID": 1, "FirstName": "Nancy", "LastName": "Davolio", "ReportsTo": 2, "Country": "USA", "Title": "Sales Representative", "HireDate": "1992-05-01 00:00:00", "BirthDate": "1948-12-08 00:00:00", "City": "Seattle", "Address": "507 - 20th Ave. E.Apt. 2A" }, { "EmployeeID": 2, "FirstName": "Andrew", "LastName": "Fuller", "ReportsTo": null, "Country": "USA", "Title": "Vice President, Sales", "HireDate": "1992-08-14 00:00:00", "BirthDate": "1952-02-19 00:00:00", "City": "Tacoma", "Address": "908 W. Capital Way" }, { "EmployeeID": 3, "FirstName": "Janet", "LastName": "Leverling", "ReportsTo": 2, "Country": "USA", "Title": "Sales Representative", "HireDate": "1992-04-01 00:00:00", "BirthDate": "1963-08-30 00:00:00", "City": "Kirkland", "Address": "722 Moss Bay Blvd." }, { "EmployeeID": 4, "FirstName": "Margaret", "LastName": "Peacock", "ReportsTo": 2, "Country": "USA", "Title": "Sales Representative", "HireDate": "1993-05-03 00:00:00", "BirthDate": "1937-09-19 00:00:00", "City": "Redmond", "Address": "4110 Old Redmond Rd." }, { "EmployeeID": 5, "FirstName": "Steven", "LastName": "Buchanan", "ReportsTo": 2, "Country": "UK", "Title": "Sales Manager", "HireDate": "1993-10-17 00:00:00", "BirthDate": "1955-03-04 00:00:00", "City": "London", "Address": "14 Garrett Hill" }, { "EmployeeID": 6, "FirstName": "Michael", "LastName": "Suyama", "ReportsTo": 5, "Country": "UK", "Title": "Sales Representative", "HireDate": "1993-10-17 00:00:00", "BirthDate": "1963-07-02 00:00:00", "City": "London", "Address": "Coventry House Miner Rd." }, { "EmployeeID": 7, "FirstName": "Robert", "LastName": "King", "ReportsTo": 5, "Country": "UK", "Title": "Sales Representative", "HireDate": "1994-01-02 00:00:00", "BirthDate": "1960-05-29 00:00:00", "City": "London", "Address": "Edgeham Hollow Winchester Way" }, { "EmployeeID": 8, "FirstName": "Laura", "LastName": "Callahan", "ReportsTo": 2, "Country": "USA", "Title": "Inside Sales Coordinator", "HireDate": "1994-03-05 00:00:00", "BirthDate": "1958-01-09 00:00:00", "City": "Seattle", "Address": "4726 - 11th Ave. N.E." }, { "EmployeeID": 9, "FirstName": "Anne", "LastName": "Dodsworth", "ReportsTo": 5, "Country": "UK", "Title": "Sales Representative", "HireDate": "1994-11-15 00:00:00", "BirthDate": "1966-01-27 00:00:00", "City": "London", "Address": "7 Houndstooth Rd." } ]}); var columns = [ { text: 'FirstName', columnGroup: 'Name', dataField: 'FirstName', width: 200 }, { text: 'LastName', columnGroup: 'Name', dataField: 'LastName', width: 200 }, { text: 'Title', dataField: 'Title', width: 160 }, { text: 'Birth Date', dataField: 'BirthDate', cellsFormat: 'd', width: 120 }, { text: 'Hire Date', dataField: 'HireDate', cellsFormat: 'd', width: 120 }, { text: 'Address', dataField: 'Address', width: 250 }, { text: 'City', dataField: 'City', width: 120 }, { text: 'Country', dataField: 'Country' } ]; var columnGroups = [ { text: 'Name', name: 'Name' } ]; JQXElements.settings[ "treeGridSettings"] = { sortable:true,filterable:true, columns:columns, columnGroups:columnGroups, source:source, theme: "light",showStatusbar:true } </script></head><body> <jqx-tree-grid settings="treeGridSettings"></jqx-tree-grid>
|
statusBarHeight
|
number
|
34
|
Sets or gets the statusBarHeight property.
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>TreeGrid Custom Element Filtering and Sorting</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,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/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtreegrid.js"></script> <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script> <script type="text/javascript"> var source = new jqx.dataAdapter({ dataType: "json", dataFields: [ { name: 'EmployeeID', type: 'number' }, { name: 'ReportsTo', type: 'number' }, { name: 'FirstName', type: 'string' }, { name: 'LastName', type: 'string' }, { name: 'Country', type: 'string' }, { name: 'City', type: 'string' }, { name: 'Address', type: 'string' }, { name: 'Title', type: 'string' }, { name: 'HireDate', type: 'date' }, { name: 'BirthDate', type: 'date' } ], hierarchy: { keyDataField: { name: 'EmployeeID' }, parentDataField: { name: 'ReportsTo' } }, id: 'EmployeeID', localData: [ { "EmployeeID": 1, "FirstName": "Nancy", "LastName": "Davolio", "ReportsTo": 2, "Country": "USA", "Title": "Sales Representative", "HireDate": "1992-05-01 00:00:00", "BirthDate": "1948-12-08 00:00:00", "City": "Seattle", "Address": "507 - 20th Ave. E.Apt. 2A" }, { "EmployeeID": 2, "FirstName": "Andrew", "LastName": "Fuller", "ReportsTo": null, "Country": "USA", "Title": "Vice President, Sales", "HireDate": "1992-08-14 00:00:00", "BirthDate": "1952-02-19 00:00:00", "City": "Tacoma", "Address": "908 W. Capital Way" }, { "EmployeeID": 3, "FirstName": "Janet", "LastName": "Leverling", "ReportsTo": 2, "Country": "USA", "Title": "Sales Representative", "HireDate": "1992-04-01 00:00:00", "BirthDate": "1963-08-30 00:00:00", "City": "Kirkland", "Address": "722 Moss Bay Blvd." }, { "EmployeeID": 4, "FirstName": "Margaret", "LastName": "Peacock", "ReportsTo": 2, "Country": "USA", "Title": "Sales Representative", "HireDate": "1993-05-03 00:00:00", "BirthDate": "1937-09-19 00:00:00", "City": "Redmond", "Address": "4110 Old Redmond Rd." }, { "EmployeeID": 5, "FirstName": "Steven", "LastName": "Buchanan", "ReportsTo": 2, "Country": "UK", "Title": "Sales Manager", "HireDate": "1993-10-17 00:00:00", "BirthDate": "1955-03-04 00:00:00", "City": "London", "Address": "14 Garrett Hill" }, { "EmployeeID": 6, "FirstName": "Michael", "LastName": "Suyama", "ReportsTo": 5, "Country": "UK", "Title": "Sales Representative", "HireDate": "1993-10-17 00:00:00", "BirthDate": "1963-07-02 00:00:00", "City": "London", "Address": "Coventry House Miner Rd." }, { "EmployeeID": 7, "FirstName": "Robert", "LastName": "King", "ReportsTo": 5, "Country": "UK", "Title": "Sales Representative", "HireDate": "1994-01-02 00:00:00", "BirthDate": "1960-05-29 00:00:00", "City": "London", "Address": "Edgeham Hollow Winchester Way" }, { "EmployeeID": 8, "FirstName": "Laura", "LastName": "Callahan", "ReportsTo": 2, "Country": "USA", "Title": "Inside Sales Coordinator", "HireDate": "1994-03-05 00:00:00", "BirthDate": "1958-01-09 00:00:00", "City": "Seattle", "Address": "4726 - 11th Ave. N.E." }, { "EmployeeID": 9, "FirstName": "Anne", "LastName": "Dodsworth", "ReportsTo": 5, "Country": "UK", "Title": "Sales Representative", "HireDate": "1994-11-15 00:00:00", "BirthDate": "1966-01-27 00:00:00", "City": "London", "Address": "7 Houndstooth Rd." } ]}); var columns = [ { text: 'FirstName', columnGroup: 'Name', dataField: 'FirstName', width: 200 }, { text: 'LastName', columnGroup: 'Name', dataField: 'LastName', width: 200 }, { text: 'Title', dataField: 'Title', width: 160 }, { text: 'Birth Date', dataField: 'BirthDate', cellsFormat: 'd', width: 120 }, { text: 'Hire Date', dataField: 'HireDate', cellsFormat: 'd', width: 120 }, { text: 'Address', dataField: 'Address', width: 250 }, { text: 'City', dataField: 'City', width: 120 }, { text: 'Country', dataField: 'Country' } ]; var columnGroups = [ { text: 'Name', name: 'Name' } ]; JQXElements.settings[ "treeGridSettings"] = { sortable:true,filterable:true, columns:columns, columnGroups:columnGroups, source:source, theme: "light",statusBarHeight:40 } </script></head><body> <jqx-tree-grid settings="treeGridSettings"></jqx-tree-grid>
|
scrollBarSize
|
number
|
17
|
Sets or gets the scrollBarSize property.
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>TreeGrid Custom Element Filtering and Sorting</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,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/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtreegrid.js"></script> <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script> <script type="text/javascript"> var source = new jqx.dataAdapter({ dataType: "json", dataFields: [ { name: 'EmployeeID', type: 'number' }, { name: 'ReportsTo', type: 'number' }, { name: 'FirstName', type: 'string' }, { name: 'LastName', type: 'string' }, { name: 'Country', type: 'string' }, { name: 'City', type: 'string' }, { name: 'Address', type: 'string' }, { name: 'Title', type: 'string' }, { name: 'HireDate', type: 'date' }, { name: 'BirthDate', type: 'date' } ], hierarchy: { keyDataField: { name: 'EmployeeID' }, parentDataField: { name: 'ReportsTo' } }, id: 'EmployeeID', localData: [ { "EmployeeID": 1, "FirstName": "Nancy", "LastName": "Davolio", "ReportsTo": 2, "Country": "USA", "Title": "Sales Representative", "HireDate": "1992-05-01 00:00:00", "BirthDate": "1948-12-08 00:00:00", "City": "Seattle", "Address": "507 - 20th Ave. E.Apt. 2A" }, { "EmployeeID": 2, "FirstName": "Andrew", "LastName": "Fuller", "ReportsTo": null, "Country": "USA", "Title": "Vice President, Sales", "HireDate": "1992-08-14 00:00:00", "BirthDate": "1952-02-19 00:00:00", "City": "Tacoma", "Address": "908 W. Capital Way" }, { "EmployeeID": 3, "FirstName": "Janet", "LastName": "Leverling", "ReportsTo": 2, "Country": "USA", "Title": "Sales Representative", "HireDate": "1992-04-01 00:00:00", "BirthDate": "1963-08-30 00:00:00", "City": "Kirkland", "Address": "722 Moss Bay Blvd." }, { "EmployeeID": 4, "FirstName": "Margaret", "LastName": "Peacock", "ReportsTo": 2, "Country": "USA", "Title": "Sales Representative", "HireDate": "1993-05-03 00:00:00", "BirthDate": "1937-09-19 00:00:00", "City": "Redmond", "Address": "4110 Old Redmond Rd." }, { "EmployeeID": 5, "FirstName": "Steven", "LastName": "Buchanan", "ReportsTo": 2, "Country": "UK", "Title": "Sales Manager", "HireDate": "1993-10-17 00:00:00", "BirthDate": "1955-03-04 00:00:00", "City": "London", "Address": "14 Garrett Hill" }, { "EmployeeID": 6, "FirstName": "Michael", "LastName": "Suyama", "ReportsTo": 5, "Country": "UK", "Title": "Sales Representative", "HireDate": "1993-10-17 00:00:00", "BirthDate": "1963-07-02 00:00:00", "City": "London", "Address": "Coventry House Miner Rd." }, { "EmployeeID": 7, "FirstName": "Robert", "LastName": "King", "ReportsTo": 5, "Country": "UK", "Title": "Sales Representative", "HireDate": "1994-01-02 00:00:00", "BirthDate": "1960-05-29 00:00:00", "City": "London", "Address": "Edgeham Hollow Winchester Way" }, { "EmployeeID": 8, "FirstName": "Laura", "LastName": "Callahan", "ReportsTo": 2, "Country": "USA", "Title": "Inside Sales Coordinator", "HireDate": "1994-03-05 00:00:00", "BirthDate": "1958-01-09 00:00:00", "City": "Seattle", "Address": "4726 - 11th Ave. N.E." }, { "EmployeeID": 9, "FirstName": "Anne", "LastName": "Dodsworth", "ReportsTo": 5, "Country": "UK", "Title": "Sales Representative", "HireDate": "1994-11-15 00:00:00", "BirthDate": "1966-01-27 00:00:00", "City": "London", "Address": "7 Houndstooth Rd." } ]}); var columns = [ { text: 'FirstName', columnGroup: 'Name', dataField: 'FirstName', width: 200 }, { text: 'LastName', columnGroup: 'Name', dataField: 'LastName', width: 200 }, { text: 'Title', dataField: 'Title', width: 160 }, { text: 'Birth Date', dataField: 'BirthDate', cellsFormat: 'd', width: 120 }, { text: 'Hire Date', dataField: 'HireDate', cellsFormat: 'd', width: 120 }, { text: 'Address', dataField: 'Address', width: 250 }, { text: 'City', dataField: 'City', width: 120 }, { text: 'Country', dataField: 'Country' } ]; var columnGroups = [ { text: 'Name', name: 'Name' } ]; JQXElements.settings[ "treeGridSettings"] = { sortable:true,filterable:true, columns:columns, columnGroups:columnGroups, source:source, theme: "light",scrollBarSize:15 } </script></head><body> <jqx-tree-grid settings="treeGridSettings"></jqx-tree-grid>
|
selectionMode
|
string
|
"multipleRows"
|
Sets or gets the selectionMode property.
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>TreeGrid Custom Element Filtering and Sorting</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,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/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtreegrid.js"></script> <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script> <script type="text/javascript"> var source = new jqx.dataAdapter({ dataType: "json", dataFields: [ { name: 'EmployeeID', type: 'number' }, { name: 'ReportsTo', type: 'number' }, { name: 'FirstName', type: 'string' }, { name: 'LastName', type: 'string' }, { name: 'Country', type: 'string' }, { name: 'City', type: 'string' }, { name: 'Address', type: 'string' }, { name: 'Title', type: 'string' }, { name: 'HireDate', type: 'date' }, { name: 'BirthDate', type: 'date' } ], hierarchy: { keyDataField: { name: 'EmployeeID' }, parentDataField: { name: 'ReportsTo' } }, id: 'EmployeeID', localData: [ { "EmployeeID": 1, "FirstName": "Nancy", "LastName": "Davolio", "ReportsTo": 2, "Country": "USA", "Title": "Sales Representative", "HireDate": "1992-05-01 00:00:00", "BirthDate": "1948-12-08 00:00:00", "City": "Seattle", "Address": "507 - 20th Ave. E.Apt. 2A" }, { "EmployeeID": 2, "FirstName": "Andrew", "LastName": "Fuller", "ReportsTo": null, "Country": "USA", "Title": "Vice President, Sales", "HireDate": "1992-08-14 00:00:00", "BirthDate": "1952-02-19 00:00:00", "City": "Tacoma", "Address": "908 W. Capital Way" }, { "EmployeeID": 3, "FirstName": "Janet", "LastName": "Leverling", "ReportsTo": 2, "Country": "USA", "Title": "Sales Representative", "HireDate": "1992-04-01 00:00:00", "BirthDate": "1963-08-30 00:00:00", "City": "Kirkland", "Address": "722 Moss Bay Blvd." }, { "EmployeeID": 4, "FirstName": "Margaret", "LastName": "Peacock", "ReportsTo": 2, "Country": "USA", "Title": "Sales Representative", "HireDate": "1993-05-03 00:00:00", "BirthDate": "1937-09-19 00:00:00", "City": "Redmond", "Address": "4110 Old Redmond Rd." }, { "EmployeeID": 5, "FirstName": "Steven", "LastName": "Buchanan", "ReportsTo": 2, "Country": "UK", "Title": "Sales Manager", "HireDate": "1993-10-17 00:00:00", "BirthDate": "1955-03-04 00:00:00", "City": "London", "Address": "14 Garrett Hill" }, { "EmployeeID": 6, "FirstName": "Michael", "LastName": "Suyama", "ReportsTo": 5, "Country": "UK", "Title": "Sales Representative", "HireDate": "1993-10-17 00:00:00", "BirthDate": "1963-07-02 00:00:00", "City": "London", "Address": "Coventry House Miner Rd." }, { "EmployeeID": 7, "FirstName": "Robert", "LastName": "King", "ReportsTo": 5, "Country": "UK", "Title": "Sales Representative", "HireDate": "1994-01-02 00:00:00", "BirthDate": "1960-05-29 00:00:00", "City": "London", "Address": "Edgeham Hollow Winchester Way" }, { "EmployeeID": 8, "FirstName": "Laura", "LastName": "Callahan", "ReportsTo": 2, "Country": "USA", "Title": "Inside Sales Coordinator", "HireDate": "1994-03-05 00:00:00", "BirthDate": "1958-01-09 00:00:00", "City": "Seattle", "Address": "4726 - 11th Ave. N.E." }, { "EmployeeID": 9, "FirstName": "Anne", "LastName": "Dodsworth", "ReportsTo": 5, "Country": "UK", "Title": "Sales Representative", "HireDate": "1994-11-15 00:00:00", "BirthDate": "1966-01-27 00:00:00", "City": "London", "Address": "7 Houndstooth Rd." } ]}); var columns = [ { text: 'FirstName', columnGroup: 'Name', dataField: 'FirstName', width: 200 }, { text: 'LastName', columnGroup: 'Name', dataField: 'LastName', width: 200 }, { text: 'Title', dataField: 'Title', width: 160 }, { text: 'Birth Date', dataField: 'BirthDate', cellsFormat: 'd', width: 120 }, { text: 'Hire Date', dataField: 'HireDate', cellsFormat: 'd', width: 120 }, { text: 'Address', dataField: 'Address', width: 250 }, { text: 'City', dataField: 'City', width: 120 }, { text: 'Country', dataField: 'Country' } ]; var columnGroups = [ { text: 'Name', name: 'Name' } ]; JQXElements.settings[ "treeGridSettings"] = { sortable:true,filterable:true, columns:columns, columnGroups:columnGroups, source:source, theme: "light", selectionMode:"singleRow" } </script></head><body> <jqx-tree-grid settings="treeGridSettings"></jqx-tree-grid>
|
showHeader
|
boolean
|
true
|
Sets or gets the showHeader property.
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>TreeGrid Custom Element Filtering and Sorting</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,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/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtreegrid.js"></script> <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script> <script type="text/javascript"> var source = new jqx.dataAdapter({ dataType: "json", dataFields: [ { name: 'EmployeeID', type: 'number' }, { name: 'ReportsTo', type: 'number' }, { name: 'FirstName', type: 'string' }, { name: 'LastName', type: 'string' }, { name: 'Country', type: 'string' }, { name: 'City', type: 'string' }, { name: 'Address', type: 'string' }, { name: 'Title', type: 'string' }, { name: 'HireDate', type: 'date' }, { name: 'BirthDate', type: 'date' } ], hierarchy: { keyDataField: { name: 'EmployeeID' }, parentDataField: { name: 'ReportsTo' } }, id: 'EmployeeID', localData: [ { "EmployeeID": 1, "FirstName": "Nancy", "LastName": "Davolio", "ReportsTo": 2, "Country": "USA", "Title": "Sales Representative", "HireDate": "1992-05-01 00:00:00", "BirthDate": "1948-12-08 00:00:00", "City": "Seattle", "Address": "507 - 20th Ave. E.Apt. 2A" }, { "EmployeeID": 2, "FirstName": "Andrew", "LastName": "Fuller", "ReportsTo": null, "Country": "USA", "Title": "Vice President, Sales", "HireDate": "1992-08-14 00:00:00", "BirthDate": "1952-02-19 00:00:00", "City": "Tacoma", "Address": "908 W. Capital Way" }, { "EmployeeID": 3, "FirstName": "Janet", "LastName": "Leverling", "ReportsTo": 2, "Country": "USA", "Title": "Sales Representative", "HireDate": "1992-04-01 00:00:00", "BirthDate": "1963-08-30 00:00:00", "City": "Kirkland", "Address": "722 Moss Bay Blvd." }, { "EmployeeID": 4, "FirstName": "Margaret", "LastName": "Peacock", "ReportsTo": 2, "Country": "USA", "Title": "Sales Representative", "HireDate": "1993-05-03 00:00:00", "BirthDate": "1937-09-19 00:00:00", "City": "Redmond", "Address": "4110 Old Redmond Rd." }, { "EmployeeID": 5, "FirstName": "Steven", "LastName": "Buchanan", "ReportsTo": 2, "Country": "UK", "Title": "Sales Manager", "HireDate": "1993-10-17 00:00:00", "BirthDate": "1955-03-04 00:00:00", "City": "London", "Address": "14 Garrett Hill" }, { "EmployeeID": 6, "FirstName": "Michael", "LastName": "Suyama", "ReportsTo": 5, "Country": "UK", "Title": "Sales Representative", "HireDate": "1993-10-17 00:00:00", "BirthDate": "1963-07-02 00:00:00", "City": "London", "Address": "Coventry House Miner Rd." }, { "EmployeeID": 7, "FirstName": "Robert", "LastName": "King", "ReportsTo": 5, "Country": "UK", "Title": "Sales Representative", "HireDate": "1994-01-02 00:00:00", "BirthDate": "1960-05-29 00:00:00", "City": "London", "Address": "Edgeham Hollow Winchester Way" }, { "EmployeeID": 8, "FirstName": "Laura", "LastName": "Callahan", "ReportsTo": 2, "Country": "USA", "Title": "Inside Sales Coordinator", "HireDate": "1994-03-05 00:00:00", "BirthDate": "1958-01-09 00:00:00", "City": "Seattle", "Address": "4726 - 11th Ave. N.E." }, { "EmployeeID": 9, "FirstName": "Anne", "LastName": "Dodsworth", "ReportsTo": 5, "Country": "UK", "Title": "Sales Representative", "HireDate": "1994-11-15 00:00:00", "BirthDate": "1966-01-27 00:00:00", "City": "London", "Address": "7 Houndstooth Rd." } ]}); var columns = [ { text: 'FirstName', columnGroup: 'Name', dataField: 'FirstName', width: 200 }, { text: 'LastName', columnGroup: 'Name', dataField: 'LastName', width: 200 }, { text: 'Title', dataField: 'Title', width: 160 }, { text: 'Birth Date', dataField: 'BirthDate', cellsFormat: 'd', width: 120 }, { text: 'Hire Date', dataField: 'HireDate', cellsFormat: 'd', width: 120 }, { text: 'Address', dataField: 'Address', width: 250 }, { text: 'City', dataField: 'City', width: 120 }, { text: 'Country', dataField: 'Country' } ]; var columnGroups = [ { text: 'Name', name: 'Name' } ]; JQXElements.settings[ "treeGridSettings"] = { sortable:true,filterable:true, columns:columns, columnGroups:columnGroups, source:source, theme: "light",showHeader:false } </script></head><body> <jqx-tree-grid settings="treeGridSettings"></jqx-tree-grid>
|
theme
|
string
|
''
|
Sets or gets the theme property.
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>TreeGrid Custom Element Filtering and Sorting</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,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/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtreegrid.js"></script> <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script> <script type="text/javascript"> var source = new jqx.dataAdapter({ dataType: "json", dataFields: [ { name: 'EmployeeID', type: 'number' }, { name: 'ReportsTo', type: 'number' }, { name: 'FirstName', type: 'string' }, { name: 'LastName', type: 'string' }, { name: 'Country', type: 'string' }, { name: 'City', type: 'string' }, { name: 'Address', type: 'string' }, { name: 'Title', type: 'string' }, { name: 'HireDate', type: 'date' }, { name: 'BirthDate', type: 'date' } ], hierarchy: { keyDataField: { name: 'EmployeeID' }, parentDataField: { name: 'ReportsTo' } }, id: 'EmployeeID', localData: [ { "EmployeeID": 1, "FirstName": "Nancy", "LastName": "Davolio", "ReportsTo": 2, "Country": "USA", "Title": "Sales Representative", "HireDate": "1992-05-01 00:00:00", "BirthDate": "1948-12-08 00:00:00", "City": "Seattle", "Address": "507 - 20th Ave. E.Apt. 2A" }, { "EmployeeID": 2, "FirstName": "Andrew", "LastName": "Fuller", "ReportsTo": null, "Country": "USA", "Title": "Vice President, Sales", "HireDate": "1992-08-14 00:00:00", "BirthDate": "1952-02-19 00:00:00", "City": "Tacoma", "Address": "908 W. Capital Way" }, { "EmployeeID": 3, "FirstName": "Janet", "LastName": "Leverling", "ReportsTo": 2, "Country": "USA", "Title": "Sales Representative", "HireDate": "1992-04-01 00:00:00", "BirthDate": "1963-08-30 00:00:00", "City": "Kirkland", "Address": "722 Moss Bay Blvd." }, { "EmployeeID": 4, "FirstName": "Margaret", "LastName": "Peacock", "ReportsTo": 2, "Country": "USA", "Title": "Sales Representative", "HireDate": "1993-05-03 00:00:00", "BirthDate": "1937-09-19 00:00:00", "City": "Redmond", "Address": "4110 Old Redmond Rd." }, { "EmployeeID": 5, "FirstName": "Steven", "LastName": "Buchanan", "ReportsTo": 2, "Country": "UK", "Title": "Sales Manager", "HireDate": "1993-10-17 00:00:00", "BirthDate": "1955-03-04 00:00:00", "City": "London", "Address": "14 Garrett Hill" }, { "EmployeeID": 6, "FirstName": "Michael", "LastName": "Suyama", "ReportsTo": 5, "Country": "UK", "Title": "Sales Representative", "HireDate": "1993-10-17 00:00:00", "BirthDate": "1963-07-02 00:00:00", "City": "London", "Address": "Coventry House Miner Rd." }, { "EmployeeID": 7, "FirstName": "Robert", "LastName": "King", "ReportsTo": 5, "Country": "UK", "Title": "Sales Representative", "HireDate": "1994-01-02 00:00:00", "BirthDate": "1960-05-29 00:00:00", "City": "London", "Address": "Edgeham Hollow Winchester Way" }, { "EmployeeID": 8, "FirstName": "Laura", "LastName": "Callahan", "ReportsTo": 2, "Country": "USA", "Title": "Inside Sales Coordinator", "HireDate": "1994-03-05 00:00:00", "BirthDate": "1958-01-09 00:00:00", "City": "Seattle", "Address": "4726 - 11th Ave. N.E." }, { "EmployeeID": 9, "FirstName": "Anne", "LastName": "Dodsworth", "ReportsTo": 5, "Country": "UK", "Title": "Sales Representative", "HireDate": "1994-11-15 00:00:00", "BirthDate": "1966-01-27 00:00:00", "City": "London", "Address": "7 Houndstooth Rd." } ]}); var columns = [ { text: 'FirstName', columnGroup: 'Name', dataField: 'FirstName', width: 200 }, { text: 'LastName', columnGroup: 'Name', dataField: 'LastName', width: 200 }, { text: 'Title', dataField: 'Title', width: 160 }, { text: 'Birth Date', dataField: 'BirthDate', cellsFormat: 'd', width: 120 }, { text: 'Hire Date', dataField: 'HireDate', cellsFormat: 'd', width: 120 }, { text: 'Address', dataField: 'Address', width: 250 }, { text: 'City', dataField: 'City', width: 120 }, { text: 'Country', dataField: 'Country' } ]; var columnGroups = [ { text: 'Name', name: 'Name' } ]; JQXElements.settings[ "treeGridSettings"] = { sortable:true,filterable:true, columns:columns, columnGroups:columnGroups, source:source, theme: "light" } </script></head><body> <jqx-tree-grid settings="treeGridSettings"></jqx-tree-grid>
|
toolbarHeight
|
number
|
34
|
Sets or gets the toolbarHeight property.
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>TreeGrid Custom Element Filtering and Sorting</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,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/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtreegrid.js"></script> <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script> <script type="text/javascript"> var source = new jqx.dataAdapter({ dataType: "json", dataFields: [ { name: 'EmployeeID', type: 'number' }, { name: 'ReportsTo', type: 'number' }, { name: 'FirstName', type: 'string' }, { name: 'LastName', type: 'string' }, { name: 'Country', type: 'string' }, { name: 'City', type: 'string' }, { name: 'Address', type: 'string' }, { name: 'Title', type: 'string' }, { name: 'HireDate', type: 'date' }, { name: 'BirthDate', type: 'date' } ], hierarchy: { keyDataField: { name: 'EmployeeID' }, parentDataField: { name: 'ReportsTo' } }, id: 'EmployeeID', localData: [ { "EmployeeID": 1, "FirstName": "Nancy", "LastName": "Davolio", "ReportsTo": 2, "Country": "USA", "Title": "Sales Representative", "HireDate": "1992-05-01 00:00:00", "BirthDate": "1948-12-08 00:00:00", "City": "Seattle", "Address": "507 - 20th Ave. E.Apt. 2A" }, { "EmployeeID": 2, "FirstName": "Andrew", "LastName": "Fuller", "ReportsTo": null, "Country": "USA", "Title": "Vice President, Sales", "HireDate": "1992-08-14 00:00:00", "BirthDate": "1952-02-19 00:00:00", "City": "Tacoma", "Address": "908 W. Capital Way" }, { "EmployeeID": 3, "FirstName": "Janet", "LastName": "Leverling", "ReportsTo": 2, "Country": "USA", "Title": "Sales Representative", "HireDate": "1992-04-01 00:00:00", "BirthDate": "1963-08-30 00:00:00", "City": "Kirkland", "Address": "722 Moss Bay Blvd." }, { "EmployeeID": 4, "FirstName": "Margaret", "LastName": "Peacock", "ReportsTo": 2, "Country": "USA", "Title": "Sales Representative", "HireDate": "1993-05-03 00:00:00", "BirthDate": "1937-09-19 00:00:00", "City": "Redmond", "Address": "4110 Old Redmond Rd." }, { "EmployeeID": 5, "FirstName": "Steven", "LastName": "Buchanan", "ReportsTo": 2, "Country": "UK", "Title": "Sales Manager", "HireDate": "1993-10-17 00:00:00", "BirthDate": "1955-03-04 00:00:00", "City": "London", "Address": "14 Garrett Hill" }, { "EmployeeID": 6, "FirstName": "Michael", "LastName": "Suyama", "ReportsTo": 5, "Country": "UK", "Title": "Sales Representative", "HireDate": "1993-10-17 00:00:00", "BirthDate": "1963-07-02 00:00:00", "City": "London", "Address": "Coventry House Miner Rd." }, { "EmployeeID": 7, "FirstName": "Robert", "LastName": "King", "ReportsTo": 5, "Country": "UK", "Title": "Sales Representative", "HireDate": "1994-01-02 00:00:00", "BirthDate": "1960-05-29 00:00:00", "City": "London", "Address": "Edgeham Hollow Winchester Way" }, { "EmployeeID": 8, "FirstName": "Laura", "LastName": "Callahan", "ReportsTo": 2, "Country": "USA", "Title": "Inside Sales Coordinator", "HireDate": "1994-03-05 00:00:00", "BirthDate": "1958-01-09 00:00:00", "City": "Seattle", "Address": "4726 - 11th Ave. N.E." }, { "EmployeeID": 9, "FirstName": "Anne", "LastName": "Dodsworth", "ReportsTo": 5, "Country": "UK", "Title": "Sales Representative", "HireDate": "1994-11-15 00:00:00", "BirthDate": "1966-01-27 00:00:00", "City": "London", "Address": "7 Houndstooth Rd." } ]}); var columns = [ { text: 'FirstName', columnGroup: 'Name', dataField: 'FirstName', width: 200 }, { text: 'LastName', columnGroup: 'Name', dataField: 'LastName', width: 200 }, { text: 'Title', dataField: 'Title', width: 160 }, { text: 'Birth Date', dataField: 'BirthDate', cellsFormat: 'd', width: 120 }, { text: 'Hire Date', dataField: 'HireDate', cellsFormat: 'd', width: 120 }, { text: 'Address', dataField: 'Address', width: 250 }, { text: 'City', dataField: 'City', width: 120 }, { text: 'Country', dataField: 'Country' } ]; var columnGroups = [ { text: 'Name', name: 'Name' } ]; JQXElements.settings[ "treeGridSettings"] = { sortable:true,filterable:true, columns:columns, columnGroups:columnGroups, source:source, theme: "light",toolbarHeight:40 } </script></head><body> <jqx-tree-grid settings="treeGridSettings"></jqx-tree-grid>
|
width
|
number
|
null
|
Sets or gets the width property.
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>TreeGrid Custom Element Filtering and Sorting</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,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/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtreegrid.js"></script> <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script> <script type="text/javascript"> var source = new jqx.dataAdapter({ dataType: "json", dataFields: [ { name: 'EmployeeID', type: 'number' }, { name: 'ReportsTo', type: 'number' }, { name: 'FirstName', type: 'string' }, { name: 'LastName', type: 'string' }, { name: 'Country', type: 'string' }, { name: 'City', type: 'string' }, { name: 'Address', type: 'string' }, { name: 'Title', type: 'string' }, { name: 'HireDate', type: 'date' }, { name: 'BirthDate', type: 'date' } ], hierarchy: { keyDataField: { name: 'EmployeeID' }, parentDataField: { name: 'ReportsTo' } }, id: 'EmployeeID', localData: [ { "EmployeeID": 1, "FirstName": "Nancy", "LastName": "Davolio", "ReportsTo": 2, "Country": "USA", "Title": "Sales Representative", "HireDate": "1992-05-01 00:00:00", "BirthDate": "1948-12-08 00:00:00", "City": "Seattle", "Address": "507 - 20th Ave. E.Apt. 2A" }, { "EmployeeID": 2, "FirstName": "Andrew", "LastName": "Fuller", "ReportsTo": null, "Country": "USA", "Title": "Vice President, Sales", "HireDate": "1992-08-14 00:00:00", "BirthDate": "1952-02-19 00:00:00", "City": "Tacoma", "Address": "908 W. Capital Way" }, { "EmployeeID": 3, "FirstName": "Janet", "LastName": "Leverling", "ReportsTo": 2, "Country": "USA", "Title": "Sales Representative", "HireDate": "1992-04-01 00:00:00", "BirthDate": "1963-08-30 00:00:00", "City": "Kirkland", "Address": "722 Moss Bay Blvd." }, { "EmployeeID": 4, "FirstName": "Margaret", "LastName": "Peacock", "ReportsTo": 2, "Country": "USA", "Title": "Sales Representative", "HireDate": "1993-05-03 00:00:00", "BirthDate": "1937-09-19 00:00:00", "City": "Redmond", "Address": "4110 Old Redmond Rd." }, { "EmployeeID": 5, "FirstName": "Steven", "LastName": "Buchanan", "ReportsTo": 2, "Country": "UK", "Title": "Sales Manager", "HireDate": "1993-10-17 00:00:00", "BirthDate": "1955-03-04 00:00:00", "City": "London", "Address": "14 Garrett Hill" }, { "EmployeeID": 6, "FirstName": "Michael", "LastName": "Suyama", "ReportsTo": 5, "Country": "UK", "Title": "Sales Representative", "HireDate": "1993-10-17 00:00:00", "BirthDate": "1963-07-02 00:00:00", "City": "London", "Address": "Coventry House Miner Rd." }, { "EmployeeID": 7, "FirstName": "Robert", "LastName": "King", "ReportsTo": 5, "Country": "UK", "Title": "Sales Representative", "HireDate": "1994-01-02 00:00:00", "BirthDate": "1960-05-29 00:00:00", "City": "London", "Address": "Edgeham Hollow Winchester Way" }, { "EmployeeID": 8, "FirstName": "Laura", "LastName": "Callahan", "ReportsTo": 2, "Country": "USA", "Title": "Inside Sales Coordinator", "HireDate": "1994-03-05 00:00:00", "BirthDate": "1958-01-09 00:00:00", "City": "Seattle", "Address": "4726 - 11th Ave. N.E." }, { "EmployeeID": 9, "FirstName": "Anne", "LastName": "Dodsworth", "ReportsTo": 5, "Country": "UK", "Title": "Sales Representative", "HireDate": "1994-11-15 00:00:00", "BirthDate": "1966-01-27 00:00:00", "City": "London", "Address": "7 Houndstooth Rd." } ]}); var columns = [ { text: 'FirstName', columnGroup: 'Name', dataField: 'FirstName', width: 200 }, { text: 'LastName', columnGroup: 'Name', dataField: 'LastName', width: 200 }, { text: 'Title', dataField: 'Title', width: 160 }, { text: 'Birth Date', dataField: 'BirthDate', cellsFormat: 'd', width: 120 }, { text: 'Hire Date', dataField: 'HireDate', cellsFormat: 'd', width: 120 }, { text: 'Address', dataField: 'Address', width: 250 }, { text: 'City', dataField: 'City', width: 120 }, { text: 'Country', dataField: 'Country' } ]; var columnGroups = [ { text: 'Name', name: 'Name' } ]; JQXElements.settings[ "treeGridSettings"] = { sortable:true,filterable:true, columns:columns, columnGroups:columnGroups, source:source, theme: "light" } </script></head><body> <jqx-tree-grid settings="treeGridSettings"></jqx-tree-grid>
|
virtualModeCreateRecords
|
function
|
null
|
Sets or gets the virtualModeCreateRecords property.
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>TreeGrid Custom Element Filtering and Sorting</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,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/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtreegrid.js"></script> <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script> <script type="text/javascript"> var source = new jqx.dataAdapter({ dataType: "json", dataFields: [ { name: 'EmployeeID', type: 'number' }, { name: 'ReportsTo', type: 'number' }, { name: 'FirstName', type: 'string' }, { name: 'LastName', type: 'string' }, { name: 'Country', type: 'string' }, { name: 'City', type: 'string' }, { name: 'Address', type: 'string' }, { name: 'Title', type: 'string' }, { name: 'HireDate', type: 'date' }, { name: 'BirthDate', type: 'date' } ], hierarchy: { keyDataField: { name: 'EmployeeID' }, parentDataField: { name: 'ReportsTo' } }, id: 'EmployeeID', localData: [ { "EmployeeID": 1, "FirstName": "Nancy", "LastName": "Davolio", "ReportsTo": 2, "Country": "USA", "Title": "Sales Representative", "HireDate": "1992-05-01 00:00:00", "BirthDate": "1948-12-08 00:00:00", "City": "Seattle", "Address": "507 - 20th Ave. E.Apt. 2A" }, { "EmployeeID": 2, "FirstName": "Andrew", "LastName": "Fuller", "ReportsTo": null, "Country": "USA", "Title": "Vice President, Sales", "HireDate": "1992-08-14 00:00:00", "BirthDate": "1952-02-19 00:00:00", "City": "Tacoma", "Address": "908 W. Capital Way" }, { "EmployeeID": 3, "FirstName": "Janet", "LastName": "Leverling", "ReportsTo": 2, "Country": "USA", "Title": "Sales Representative", "HireDate": "1992-04-01 00:00:00", "BirthDate": "1963-08-30 00:00:00", "City": "Kirkland", "Address": "722 Moss Bay Blvd." }, { "EmployeeID": 4, "FirstName": "Margaret", "LastName": "Peacock", "ReportsTo": 2, "Country": "USA", "Title": "Sales Representative", "HireDate": "1993-05-03 00:00:00", "BirthDate": "1937-09-19 00:00:00", "City": "Redmond", "Address": "4110 Old Redmond Rd." }, { "EmployeeID": 5, "FirstName": "Steven", "LastName": "Buchanan", "ReportsTo": 2, "Country": "UK", "Title": "Sales Manager", "HireDate": "1993-10-17 00:00:00", "BirthDate": "1955-03-04 00:00:00", "City": "London", "Address": "14 Garrett Hill" }, { "EmployeeID": 6, "FirstName": "Michael", "LastName": "Suyama", "ReportsTo": 5, "Country": "UK", "Title": "Sales Representative", "HireDate": "1993-10-17 00:00:00", "BirthDate": "1963-07-02 00:00:00", "City": "London", "Address": "Coventry House Miner Rd." }, { "EmployeeID": 7, "FirstName": "Robert", "LastName": "King", "ReportsTo": 5, "Country": "UK", "Title": "Sales Representative", "HireDate": "1994-01-02 00:00:00", "BirthDate": "1960-05-29 00:00:00", "City": "London", "Address": "Edgeham Hollow Winchester Way" }, { "EmployeeID": 8, "FirstName": "Laura", "LastName": "Callahan", "ReportsTo": 2, "Country": "USA", "Title": "Inside Sales Coordinator", "HireDate": "1994-03-05 00:00:00", "BirthDate": "1958-01-09 00:00:00", "City": "Seattle", "Address": "4726 - 11th Ave. N.E." }, { "EmployeeID": 9, "FirstName": "Anne", "LastName": "Dodsworth", "ReportsTo": 5, "Country": "UK", "Title": "Sales Representative", "HireDate": "1994-11-15 00:00:00", "BirthDate": "1966-01-27 00:00:00", "City": "London", "Address": "7 Houndstooth Rd." } ]}); var columns = [ { text: 'FirstName', columnGroup: 'Name', dataField: 'FirstName', width: 200 }, { text: 'LastName', columnGroup: 'Name', dataField: 'LastName', width: 200 }, { text: 'Title', dataField: 'Title', width: 160 }, { text: 'Birth Date', dataField: 'BirthDate', cellsFormat: 'd', width: 120 }, { text: 'Hire Date', dataField: 'HireDate', cellsFormat: 'd', width: 120 }, { text: 'Address', dataField: 'Address', width: 250 }, { text: 'City', dataField: 'City', width: 120 }, { text: 'Country', dataField: 'Country' } ]; var columnGroups = [ { text: 'Name', name: 'Name' } ]; JQXElements.settings[ "treeGridSettings"] = { sortable:true,filterable:true, columns:columns, columnGroups:columnGroups, source:source, theme: "light", virtualModeCreateRecords:"virtualModeCreateRecords" } </script></head><body> <jqx-tree-grid settings="treeGridSettings"></jqx-tree-grid>
|
virtualModeRecordCreating
|
function
|
null
|
Sets or gets the virtualModeRecordCreating property.
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>TreeGrid Custom Element Filtering and Sorting</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,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/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtreegrid.js"></script> <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script> <script type="text/javascript"> var source = new jqx.dataAdapter({ dataType: "json", dataFields: [ { name: 'EmployeeID', type: 'number' }, { name: 'ReportsTo', type: 'number' }, { name: 'FirstName', type: 'string' }, { name: 'LastName', type: 'string' }, { name: 'Country', type: 'string' }, { name: 'City', type: 'string' }, { name: 'Address', type: 'string' }, { name: 'Title', type: 'string' }, { name: 'HireDate', type: 'date' }, { name: 'BirthDate', type: 'date' } ], hierarchy: { keyDataField: { name: 'EmployeeID' }, parentDataField: { name: 'ReportsTo' } }, id: 'EmployeeID', localData: [ { "EmployeeID": 1, "FirstName": "Nancy", "LastName": "Davolio", "ReportsTo": 2, "Country": "USA", "Title": "Sales Representative", "HireDate": "1992-05-01 00:00:00", "BirthDate": "1948-12-08 00:00:00", "City": "Seattle", "Address": "507 - 20th Ave. E.Apt. 2A" }, { "EmployeeID": 2, "FirstName": "Andrew", "LastName": "Fuller", "ReportsTo": null, "Country": "USA", "Title": "Vice President, Sales", "HireDate": "1992-08-14 00:00:00", "BirthDate": "1952-02-19 00:00:00", "City": "Tacoma", "Address": "908 W. Capital Way" }, { "EmployeeID": 3, "FirstName": "Janet", "LastName": "Leverling", "ReportsTo": 2, "Country": "USA", "Title": "Sales Representative", "HireDate": "1992-04-01 00:00:00", "BirthDate": "1963-08-30 00:00:00", "City": "Kirkland", "Address": "722 Moss Bay Blvd." }, { "EmployeeID": 4, "FirstName": "Margaret", "LastName": "Peacock", "ReportsTo": 2, "Country": "USA", "Title": "Sales Representative", "HireDate": "1993-05-03 00:00:00", "BirthDate": "1937-09-19 00:00:00", "City": "Redmond", "Address": "4110 Old Redmond Rd." }, { "EmployeeID": 5, "FirstName": "Steven", "LastName": "Buchanan", "ReportsTo": 2, "Country": "UK", "Title": "Sales Manager", "HireDate": "1993-10-17 00:00:00", "BirthDate": "1955-03-04 00:00:00", "City": "London", "Address": "14 Garrett Hill" }, { "EmployeeID": 6, "FirstName": "Michael", "LastName": "Suyama", "ReportsTo": 5, "Country": "UK", "Title": "Sales Representative", "HireDate": "1993-10-17 00:00:00", "BirthDate": "1963-07-02 00:00:00", "City": "London", "Address": "Coventry House Miner Rd." }, { "EmployeeID": 7, "FirstName": "Robert", "LastName": "King", "ReportsTo": 5, "Country": "UK", "Title": "Sales Representative", "HireDate": "1994-01-02 00:00:00", "BirthDate": "1960-05-29 00:00:00", "City": "London", "Address": "Edgeham Hollow Winchester Way" }, { "EmployeeID": 8, "FirstName": "Laura", "LastName": "Callahan", "ReportsTo": 2, "Country": "USA", "Title": "Inside Sales Coordinator", "HireDate": "1994-03-05 00:00:00", "BirthDate": "1958-01-09 00:00:00", "City": "Seattle", "Address": "4726 - 11th Ave. N.E." }, { "EmployeeID": 9, "FirstName": "Anne", "LastName": "Dodsworth", "ReportsTo": 5, "Country": "UK", "Title": "Sales Representative", "HireDate": "1994-11-15 00:00:00", "BirthDate": "1966-01-27 00:00:00", "City": "London", "Address": "7 Houndstooth Rd." } ]}); var columns = [ { text: 'FirstName', columnGroup: 'Name', dataField: 'FirstName', width: 200 }, { text: 'LastName', columnGroup: 'Name', dataField: 'LastName', width: 200 }, { text: 'Title', dataField: 'Title', width: 160 }, { text: 'Birth Date', dataField: 'BirthDate', cellsFormat: 'd', width: 120 }, { text: 'Hire Date', dataField: 'HireDate', cellsFormat: 'd', width: 120 }, { text: 'Address', dataField: 'Address', width: 250 }, { text: 'City', dataField: 'City', width: 120 }, { text: 'Country', dataField: 'Country' } ]; var columnGroups = [ { text: 'Name', name: 'Name' } ]; JQXElements.settings[ "treeGridSettings"] = { sortable:true,filterable:true, columns:columns, columnGroups:columnGroups, source:source, theme: "light", virtualModeRecordCreating:"virtualModeRecordCreating" } </script></head><body> <jqx-tree-grid settings="treeGridSettings"></jqx-tree-grid>
|
|
bindingComplete
|
Event
|
|
Code examples
Bind to the bindingComplete event of jqxTreeGrid.
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>TreeGrid Custom Element Filtering and Sorting</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,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/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtreegrid.js"></script> <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script> <script type="text/javascript"> var source = new jqx.dataAdapter({ dataType: "json", dataFields: [ { name: 'EmployeeID', type: 'number' }, { name: 'ReportsTo', type: 'number' }, { name: 'FirstName', type: 'string' }, { name: 'LastName', type: 'string' }, { name: 'Country', type: 'string' }, { name: 'City', type: 'string' }, { name: 'Address', type: 'string' }, { name: 'Title', type: 'string' }, { name: 'HireDate', type: 'date' }, { name: 'BirthDate', type: 'date' } ], hierarchy: { keyDataField: { name: 'EmployeeID' }, parentDataField: { name: 'ReportsTo' } }, id: 'EmployeeID', localData: [ { "EmployeeID": 1, "FirstName": "Nancy", "LastName": "Davolio", "ReportsTo": 2, "Country": "USA", "Title": "Sales Representative", "HireDate": "1992-05-01 00:00:00", "BirthDate": "1948-12-08 00:00:00", "City": "Seattle", "Address": "507 - 20th Ave. E.Apt. 2A" }, { "EmployeeID": 2, "FirstName": "Andrew", "LastName": "Fuller", "ReportsTo": null, "Country": "USA", "Title": "Vice President, Sales", "HireDate": "1992-08-14 00:00:00", "BirthDate": "1952-02-19 00:00:00", "City": "Tacoma", "Address": "908 W. Capital Way" }, { "EmployeeID": 3, "FirstName": "Janet", "LastName": "Leverling", "ReportsTo": 2, "Country": "USA", "Title": "Sales Representative", "HireDate": "1992-04-01 00:00:00", "BirthDate": "1963-08-30 00:00:00", "City": "Kirkland", "Address": "722 Moss Bay Blvd." }, { "EmployeeID": 4, "FirstName": "Margaret", "LastName": "Peacock", "ReportsTo": 2, "Country": "USA", "Title": "Sales Representative", "HireDate": "1993-05-03 00:00:00", "BirthDate": "1937-09-19 00:00:00", "City": "Redmond", "Address": "4110 Old Redmond Rd." }, { "EmployeeID": 5, "FirstName": "Steven", "LastName": "Buchanan", "ReportsTo": 2, "Country": "UK", "Title": "Sales Manager", "HireDate": "1993-10-17 00:00:00", "BirthDate": "1955-03-04 00:00:00", "City": "London", "Address": "14 Garrett Hill" }, { "EmployeeID": 6, "FirstName": "Michael", "LastName": "Suyama", "ReportsTo": 5, "Country": "UK", "Title": "Sales Representative", "HireDate": "1993-10-17 00:00:00", "BirthDate": "1963-07-02 00:00:00", "City": "London", "Address": "Coventry House Miner Rd." }, { "EmployeeID": 7, "FirstName": "Robert", "LastName": "King", "ReportsTo": 5, "Country": "UK", "Title": "Sales Representative", "HireDate": "1994-01-02 00:00:00", "BirthDate": "1960-05-29 00:00:00", "City": "London", "Address": "Edgeham Hollow Winchester Way" }, { "EmployeeID": 8, "FirstName": "Laura", "LastName": "Callahan", "ReportsTo": 2, "Country": "USA", "Title": "Inside Sales Coordinator", "HireDate": "1994-03-05 00:00:00", "BirthDate": "1958-01-09 00:00:00", "City": "Seattle", "Address": "4726 - 11th Ave. N.E." }, { "EmployeeID": 9, "FirstName": "Anne", "LastName": "Dodsworth", "ReportsTo": 5, "Country": "UK", "Title": "Sales Representative", "HireDate": "1994-11-15 00:00:00", "BirthDate": "1966-01-27 00:00:00", "City": "London", "Address": "7 Houndstooth Rd." } ]}); var columns = [ { text: 'FirstName', columnGroup: 'Name', dataField: 'FirstName', width: 200 }, { text: 'LastName', columnGroup: 'Name', dataField: 'LastName', width: 200 }, { text: 'Title', dataField: 'Title', width: 160 }, { text: 'Birth Date', dataField: 'BirthDate', cellsFormat: 'd', width: 120 }, { text: 'Hire Date', dataField: 'HireDate', cellsFormat: 'd', width: 120 }, { text: 'Address', dataField: 'Address', width: 250 }, { text: 'City', dataField: 'City', width: 120 }, { text: 'Country', dataField: 'Country' } ]; var columnGroups = [ { text: 'Name', name: 'Name' } ]; JQXElements.settings[ "treeGridSettings"] = { sortable:true,filterable:true, columns:columns, columnGroups:columnGroups, source:source, theme: "light" } window.onload = function() { document.querySelector( "jqx-tree-grid").addEventListener("bindingComplete", function(event) { // Your code here. }); }; </script></head><body> <jqx-tree-grid settings="treeGridSettings"></jqx-tree-grid>
|
cellBeginEdit
|
Event
|
|
Code examples
Bind to the cellBeginEdit event of jqxTreeGrid.
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>TreeGrid Custom Element Filtering and Sorting</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,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/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtreegrid.js"></script> <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script> <script type="text/javascript"> var source = new jqx.dataAdapter({ dataType: "json", dataFields: [ { name: 'EmployeeID', type: 'number' }, { name: 'ReportsTo', type: 'number' }, { name: 'FirstName', type: 'string' }, { name: 'LastName', type: 'string' }, { name: 'Country', type: 'string' }, { name: 'City', type: 'string' }, { name: 'Address', type: 'string' }, { name: 'Title', type: 'string' }, { name: 'HireDate', type: 'date' }, { name: 'BirthDate', type: 'date' } ], hierarchy: { keyDataField: { name: 'EmployeeID' }, parentDataField: { name: 'ReportsTo' } }, id: 'EmployeeID', localData: [ { "EmployeeID": 1, "FirstName": "Nancy", "LastName": "Davolio", "ReportsTo": 2, "Country": "USA", "Title": "Sales Representative", "HireDate": "1992-05-01 00:00:00", "BirthDate": "1948-12-08 00:00:00", "City": "Seattle", "Address": "507 - 20th Ave. E.Apt. 2A" }, { "EmployeeID": 2, "FirstName": "Andrew", "LastName": "Fuller", "ReportsTo": null, "Country": "USA", "Title": "Vice President, Sales", "HireDate": "1992-08-14 00:00:00", "BirthDate": "1952-02-19 00:00:00", "City": "Tacoma", "Address": "908 W. Capital Way" }, { "EmployeeID": 3, "FirstName": "Janet", "LastName": "Leverling", "ReportsTo": 2, "Country": "USA", "Title": "Sales Representative", "HireDate": "1992-04-01 00:00:00", "BirthDate": "1963-08-30 00:00:00", "City": "Kirkland", "Address": "722 Moss Bay Blvd." }, { "EmployeeID": 4, "FirstName": "Margaret", "LastName": "Peacock", "ReportsTo": 2, "Country": "USA", "Title": "Sales Representative", "HireDate": "1993-05-03 00:00:00", "BirthDate": "1937-09-19 00:00:00", "City": "Redmond", "Address": "4110 Old Redmond Rd." }, { "EmployeeID": 5, "FirstName": "Steven", "LastName": "Buchanan", "ReportsTo": 2, "Country": "UK", "Title": "Sales Manager", "HireDate": "1993-10-17 00:00:00", "BirthDate": "1955-03-04 00:00:00", "City": "London", "Address": "14 Garrett Hill" }, { "EmployeeID": 6, "FirstName": "Michael", "LastName": "Suyama", "ReportsTo": 5, "Country": "UK", "Title": "Sales Representative", "HireDate": "1993-10-17 00:00:00", "BirthDate": "1963-07-02 00:00:00", "City": "London", "Address": "Coventry House Miner Rd." }, { "EmployeeID": 7, "FirstName": "Robert", "LastName": "King", "ReportsTo": 5, "Country": "UK", "Title": "Sales Representative", "HireDate": "1994-01-02 00:00:00", "BirthDate": "1960-05-29 00:00:00", "City": "London", "Address": "Edgeham Hollow Winchester Way" }, { "EmployeeID": 8, "FirstName": "Laura", "LastName": "Callahan", "ReportsTo": 2, "Country": "USA", "Title": "Inside Sales Coordinator", "HireDate": "1994-03-05 00:00:00", "BirthDate": "1958-01-09 00:00:00", "City": "Seattle", "Address": "4726 - 11th Ave. N.E." }, { "EmployeeID": 9, "FirstName": "Anne", "LastName": "Dodsworth", "ReportsTo": 5, "Country": "UK", "Title": "Sales Representative", "HireDate": "1994-11-15 00:00:00", "BirthDate": "1966-01-27 00:00:00", "City": "London", "Address": "7 Houndstooth Rd." } ]}); var columns = [ { text: 'FirstName', columnGroup: 'Name', dataField: 'FirstName', width: 200 }, { text: 'LastName', columnGroup: 'Name', dataField: 'LastName', width: 200 }, { text: 'Title', dataField: 'Title', width: 160 }, { text: 'Birth Date', dataField: 'BirthDate', cellsFormat: 'd', width: 120 }, { text: 'Hire Date', dataField: 'HireDate', cellsFormat: 'd', width: 120 }, { text: 'Address', dataField: 'Address', width: 250 }, { text: 'City', dataField: 'City', width: 120 }, { text: 'Country', dataField: 'Country' } ]; var columnGroups = [ { text: 'Name', name: 'Name' } ]; JQXElements.settings[ "treeGridSettings"] = { sortable:true,filterable:true, columns:columns, columnGroups:columnGroups, source:source, theme: "light" } window.onload = function() { document.querySelector( "jqx-tree-grid").addEventListener("cellBeginEdit", function(event) { // Your code here. }); }; </script></head><body> <jqx-tree-grid settings="treeGridSettings"></jqx-tree-grid>
|
cellEndEdit
|
Event
|
|
Code examples
Bind to the cellEndEdit event of jqxTreeGrid.
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>TreeGrid Custom Element Filtering and Sorting</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,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/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtreegrid.js"></script> <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script> <script type="text/javascript"> var source = new jqx.dataAdapter({ dataType: "json", dataFields: [ { name: 'EmployeeID', type: 'number' }, { name: 'ReportsTo', type: 'number' }, { name: 'FirstName', type: 'string' }, { name: 'LastName', type: 'string' }, { name: 'Country', type: 'string' }, { name: 'City', type: 'string' }, { name: 'Address', type: 'string' }, { name: 'Title', type: 'string' }, { name: 'HireDate', type: 'date' }, { name: 'BirthDate', type: 'date' } ], hierarchy: { keyDataField: { name: 'EmployeeID' }, parentDataField: { name: 'ReportsTo' } }, id: 'EmployeeID', localData: [ { "EmployeeID": 1, "FirstName": "Nancy", "LastName": "Davolio", "ReportsTo": 2, "Country": "USA", "Title": "Sales Representative", "HireDate": "1992-05-01 00:00:00", "BirthDate": "1948-12-08 00:00:00", "City": "Seattle", "Address": "507 - 20th Ave. E.Apt. 2A" }, { "EmployeeID": 2, "FirstName": "Andrew", "LastName": "Fuller", "ReportsTo": null, "Country": "USA", "Title": "Vice President, Sales", "HireDate": "1992-08-14 00:00:00", "BirthDate": "1952-02-19 00:00:00", "City": "Tacoma", "Address": "908 W. Capital Way" }, { "EmployeeID": 3, "FirstName": "Janet", "LastName": "Leverling", "ReportsTo": 2, "Country": "USA", "Title": "Sales Representative", "HireDate": "1992-04-01 00:00:00", "BirthDate": "1963-08-30 00:00:00", "City": "Kirkland", "Address": "722 Moss Bay Blvd." }, { "EmployeeID": 4, "FirstName": "Margaret", "LastName": "Peacock", "ReportsTo": 2, "Country": "USA", "Title": "Sales Representative", "HireDate": "1993-05-03 00:00:00", "BirthDate": "1937-09-19 00:00:00", "City": "Redmond", "Address": "4110 Old Redmond Rd." }, { "EmployeeID": 5, "FirstName": "Steven", "LastName": "Buchanan", "ReportsTo": 2, "Country": "UK", "Title": "Sales Manager", "HireDate": "1993-10-17 00:00:00", "BirthDate": "1955-03-04 00:00:00", "City": "London", "Address": "14 Garrett Hill" }, { "EmployeeID": 6, "FirstName": "Michael", "LastName": "Suyama", "ReportsTo": 5, "Country": "UK", "Title": "Sales Representative", "HireDate": "1993-10-17 00:00:00", "BirthDate": "1963-07-02 00:00:00", "City": "London", "Address": "Coventry House Miner Rd." }, { "EmployeeID": 7, "FirstName": "Robert", "LastName": "King", "ReportsTo": 5, "Country": "UK", "Title": "Sales Representative", "HireDate": "1994-01-02 00:00:00", "BirthDate": "1960-05-29 00:00:00", "City": "London", "Address": "Edgeham Hollow Winchester Way" }, { "EmployeeID": 8, "FirstName": "Laura", "LastName": "Callahan", "ReportsTo": 2, "Country": "USA", "Title": "Inside Sales Coordinator", "HireDate": "1994-03-05 00:00:00", "BirthDate": "1958-01-09 00:00:00", "City": "Seattle", "Address": "4726 - 11th Ave. N.E." }, { "EmployeeID": 9, "FirstName": "Anne", "LastName": "Dodsworth", "ReportsTo": 5, "Country": "UK", "Title": "Sales Representative", "HireDate": "1994-11-15 00:00:00", "BirthDate": "1966-01-27 00:00:00", "City": "London", "Address": "7 Houndstooth Rd." } ]}); var columns = [ { text: 'FirstName', columnGroup: 'Name', dataField: 'FirstName', width: 200 }, { text: 'LastName', columnGroup: 'Name', dataField: 'LastName', width: 200 }, { text: 'Title', dataField: 'Title', width: 160 }, { text: 'Birth Date', dataField: 'BirthDate', cellsFormat: 'd', width: 120 }, { text: 'Hire Date', dataField: 'HireDate', cellsFormat: 'd', width: 120 }, { text: 'Address', dataField: 'Address', width: 250 }, { text: 'City', dataField: 'City', width: 120 }, { text: 'Country', dataField: 'Country' } ]; var columnGroups = [ { text: 'Name', name: 'Name' } ]; JQXElements.settings[ "treeGridSettings"] = { sortable:true,filterable:true, columns:columns, columnGroups:columnGroups, source:source, theme: "light" } window.onload = function() { document.querySelector( "jqx-tree-grid").addEventListener("cellEndEdit", function(event) { // Your code here. }); }; </script></head><body> <jqx-tree-grid settings="treeGridSettings"></jqx-tree-grid>
|
cellValueChanged
|
Event
|
|
Code examples
Bind to the cellValueChanged event of jqxTreeGrid.
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>TreeGrid Custom Element Filtering and Sorting</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,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/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtreegrid.js"></script> <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script> <script type="text/javascript"> var source = new jqx.dataAdapter({ dataType: "json", dataFields: [ { name: 'EmployeeID', type: 'number' }, { name: 'ReportsTo', type: 'number' }, { name: 'FirstName', type: 'string' }, { name: 'LastName', type: 'string' }, { name: 'Country', type: 'string' }, { name: 'City', type: 'string' }, { name: 'Address', type: 'string' }, { name: 'Title', type: 'string' }, { name: 'HireDate', type: 'date' }, { name: 'BirthDate', type: 'date' } ], hierarchy: { keyDataField: { name: 'EmployeeID' }, parentDataField: { name: 'ReportsTo' } }, id: 'EmployeeID', localData: [ { "EmployeeID": 1, "FirstName": "Nancy", "LastName": "Davolio", "ReportsTo": 2, "Country": "USA", "Title": "Sales Representative", "HireDate": "1992-05-01 00:00:00", "BirthDate": "1948-12-08 00:00:00", "City": "Seattle", "Address": "507 - 20th Ave. E.Apt. 2A" }, { "EmployeeID": 2, "FirstName": "Andrew", "LastName": "Fuller", "ReportsTo": null, "Country": "USA", "Title": "Vice President, Sales", "HireDate": "1992-08-14 00:00:00", "BirthDate": "1952-02-19 00:00:00", "City": "Tacoma", "Address": "908 W. Capital Way" }, { "EmployeeID": 3, "FirstName": "Janet", "LastName": "Leverling", "ReportsTo": 2, "Country": "USA", "Title": "Sales Representative", "HireDate": "1992-04-01 00:00:00", "BirthDate": "1963-08-30 00:00:00", "City": "Kirkland", "Address": "722 Moss Bay Blvd." }, { "EmployeeID": 4, "FirstName": "Margaret", "LastName": "Peacock", "ReportsTo": 2, "Country": "USA", "Title": "Sales Representative", "HireDate": "1993-05-03 00:00:00", "BirthDate": "1937-09-19 00:00:00", "City": "Redmond", "Address": "4110 Old Redmond Rd." }, { "EmployeeID": 5, "FirstName": "Steven", "LastName": "Buchanan", "ReportsTo": 2, "Country": "UK", "Title": "Sales Manager", "HireDate": "1993-10-17 00:00:00", "BirthDate": "1955-03-04 00:00:00", "City": "London", "Address": "14 Garrett Hill" }, { "EmployeeID": 6, "FirstName": "Michael", "LastName": "Suyama", "ReportsTo": 5, "Country": "UK", "Title": "Sales Representative", "HireDate": "1993-10-17 00:00:00", "BirthDate": "1963-07-02 00:00:00", "City": "London", "Address": "Coventry House Miner Rd." }, { "EmployeeID": 7, "FirstName": "Robert", "LastName": "King", "ReportsTo": 5, "Country": "UK", "Title": "Sales Representative", "HireDate": "1994-01-02 00:00:00", "BirthDate": "1960-05-29 00:00:00", "City": "London", "Address": "Edgeham Hollow Winchester Way" }, { "EmployeeID": 8, "FirstName": "Laura", "LastName": "Callahan", "ReportsTo": 2, "Country": "USA", "Title": "Inside Sales Coordinator", "HireDate": "1994-03-05 00:00:00", "BirthDate": "1958-01-09 00:00:00", "City": "Seattle", "Address": "4726 - 11th Ave. N.E." }, { "EmployeeID": 9, "FirstName": "Anne", "LastName": "Dodsworth", "ReportsTo": 5, "Country": "UK", "Title": "Sales Representative", "HireDate": "1994-11-15 00:00:00", "BirthDate": "1966-01-27 00:00:00", "City": "London", "Address": "7 Houndstooth Rd." } ]}); var columns = [ { text: 'FirstName', columnGroup: 'Name', dataField: 'FirstName', width: 200 }, { text: 'LastName', columnGroup: 'Name', dataField: 'LastName', width: 200 }, { text: 'Title', dataField: 'Title', width: 160 }, { text: 'Birth Date', dataField: 'BirthDate', cellsFormat: 'd', width: 120 }, { text: 'Hire Date', dataField: 'HireDate', cellsFormat: 'd', width: 120 }, { text: 'Address', dataField: 'Address', width: 250 }, { text: 'City', dataField: 'City', width: 120 }, { text: 'Country', dataField: 'Country' } ]; var columnGroups = [ { text: 'Name', name: 'Name' } ]; JQXElements.settings[ "treeGridSettings"] = { sortable:true,filterable:true, columns:columns, columnGroups:columnGroups, source:source, theme: "light" } window.onload = function() { document.querySelector( "jqx-tree-grid").addEventListener("cellValueChanged", function(event) { // Your code here. }); }; </script></head><body> <jqx-tree-grid settings="treeGridSettings"></jqx-tree-grid>
|
columnResized
|
Event
|
|
Code examples
Bind to the columnResized event of jqxTreeGrid.
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>TreeGrid Custom Element Filtering and Sorting</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,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/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtreegrid.js"></script> <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script> <script type="text/javascript"> var source = new jqx.dataAdapter({ dataType: "json", dataFields: [ { name: 'EmployeeID', type: 'number' }, { name: 'ReportsTo', type: 'number' }, { name: 'FirstName', type: 'string' }, { name: 'LastName', type: 'string' }, { name: 'Country', type: 'string' }, { name: 'City', type: 'string' }, { name: 'Address', type: 'string' }, { name: 'Title', type: 'string' }, { name: 'HireDate', type: 'date' }, { name: 'BirthDate', type: 'date' } ], hierarchy: { keyDataField: { name: 'EmployeeID' }, parentDataField: { name: 'ReportsTo' } }, id: 'EmployeeID', localData: [ { "EmployeeID": 1, "FirstName": "Nancy", "LastName": "Davolio", "ReportsTo": 2, "Country": "USA", "Title": "Sales Representative", "HireDate": "1992-05-01 00:00:00", "BirthDate": "1948-12-08 00:00:00", "City": "Seattle", "Address": "507 - 20th Ave. E.Apt. 2A" }, { "EmployeeID": 2, "FirstName": "Andrew", "LastName": "Fuller", "ReportsTo": null, "Country": "USA", "Title": "Vice President, Sales", "HireDate": "1992-08-14 00:00:00", "BirthDate": "1952-02-19 00:00:00", "City": "Tacoma", "Address": "908 W. Capital Way" }, { "EmployeeID": 3, "FirstName": "Janet", "LastName": "Leverling", "ReportsTo": 2, "Country": "USA", "Title": "Sales Representative", "HireDate": "1992-04-01 00:00:00", "BirthDate": "1963-08-30 00:00:00", "City": "Kirkland", "Address": "722 Moss Bay Blvd." }, { "EmployeeID": 4, "FirstName": "Margaret", "LastName": "Peacock", "ReportsTo": 2, "Country": "USA", "Title": "Sales Representative", "HireDate": "1993-05-03 00:00:00", "BirthDate": "1937-09-19 00:00:00", "City": "Redmond", "Address": "4110 Old Redmond Rd." }, { "EmployeeID": 5, "FirstName": "Steven", "LastName": "Buchanan", "ReportsTo": 2, "Country": "UK", "Title": "Sales Manager", "HireDate": "1993-10-17 00:00:00", "BirthDate": "1955-03-04 00:00:00", "City": "London", "Address": "14 Garrett Hill" }, { "EmployeeID": 6, "FirstName": "Michael", "LastName": "Suyama", "ReportsTo": 5, "Country": "UK", "Title": "Sales Representative", "HireDate": "1993-10-17 00:00:00", "BirthDate": "1963-07-02 00:00:00", "City": "London", "Address": "Coventry House Miner Rd." }, { "EmployeeID": 7, "FirstName": "Robert", "LastName": "King", "ReportsTo": 5, "Country": "UK", "Title": "Sales Representative", "HireDate": "1994-01-02 00:00:00", "BirthDate": "1960-05-29 00:00:00", "City": "London", "Address": "Edgeham Hollow Winchester Way" }, { "EmployeeID": 8, "FirstName": "Laura", "LastName": "Callahan", "ReportsTo": 2, "Country": "USA", "Title": "Inside Sales Coordinator", "HireDate": "1994-03-05 00:00:00", "BirthDate": "1958-01-09 00:00:00", "City": "Seattle", "Address": "4726 - 11th Ave. N.E." }, { "EmployeeID": 9, "FirstName": "Anne", "LastName": "Dodsworth", "ReportsTo": 5, "Country": "UK", "Title": "Sales Representative", "HireDate": "1994-11-15 00:00:00", "BirthDate": "1966-01-27 00:00:00", "City": "London", "Address": "7 Houndstooth Rd." } ]}); var columns = [ { text: 'FirstName', columnGroup: 'Name', dataField: 'FirstName', width: 200 }, { text: 'LastName', columnGroup: 'Name', dataField: 'LastName', width: 200 }, { text: 'Title', dataField: 'Title', width: 160 }, { text: 'Birth Date', dataField: 'BirthDate', cellsFormat: 'd', width: 120 }, { text: 'Hire Date', dataField: 'HireDate', cellsFormat: 'd', width: 120 }, { text: 'Address', dataField: 'Address', width: 250 }, { text: 'City', dataField: 'City', width: 120 }, { text: 'Country', dataField: 'Country' } ]; var columnGroups = [ { text: 'Name', name: 'Name' } ]; JQXElements.settings[ "treeGridSettings"] = { sortable:true,filterable:true, columns:columns, columnGroups:columnGroups, source:source, theme: "light" } window.onload = function() { document.querySelector( "jqx-tree-grid").addEventListener("columnResized", function(event) { // Your code here. }); }; </script></head><body> <jqx-tree-grid settings="treeGridSettings"></jqx-tree-grid>
|
columnReordered
|
Event
|
|
Code examples
Bind to the columnReordered event of jqxTreeGrid.
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>TreeGrid Custom Element Filtering and Sorting</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,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/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtreegrid.js"></script> <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script> <script type="text/javascript"> var source = new jqx.dataAdapter({ dataType: "json", dataFields: [ { name: 'EmployeeID', type: 'number' }, { name: 'ReportsTo', type: 'number' }, { name: 'FirstName', type: 'string' }, { name: 'LastName', type: 'string' }, { name: 'Country', type: 'string' }, { name: 'City', type: 'string' }, { name: 'Address', type: 'string' }, { name: 'Title', type: 'string' }, { name: 'HireDate', type: 'date' }, { name: 'BirthDate', type: 'date' } ], hierarchy: { keyDataField: { name: 'EmployeeID' }, parentDataField: { name: 'ReportsTo' } }, id: 'EmployeeID', localData: [ { "EmployeeID": 1, "FirstName": "Nancy", "LastName": "Davolio", "ReportsTo": 2, "Country": "USA", "Title": "Sales Representative", "HireDate": "1992-05-01 00:00:00", "BirthDate": "1948-12-08 00:00:00", "City": "Seattle", "Address": "507 - 20th Ave. E.Apt. 2A" }, { "EmployeeID": 2, "FirstName": "Andrew", "LastName": "Fuller", "ReportsTo": null, "Country": "USA", "Title": "Vice President, Sales", "HireDate": "1992-08-14 00:00:00", "BirthDate": "1952-02-19 00:00:00", "City": "Tacoma", "Address": "908 W. Capital Way" }, { "EmployeeID": 3, "FirstName": "Janet", "LastName": "Leverling", "ReportsTo": 2, "Country": "USA", "Title": "Sales Representative", "HireDate": "1992-04-01 00:00:00", "BirthDate": "1963-08-30 00:00:00", "City": "Kirkland", "Address": "722 Moss Bay Blvd." }, { "EmployeeID": 4, "FirstName": "Margaret", "LastName": "Peacock", "ReportsTo": 2, "Country": "USA", "Title": "Sales Representative", "HireDate": "1993-05-03 00:00:00", "BirthDate": "1937-09-19 00:00:00", "City": "Redmond", "Address": "4110 Old Redmond Rd." }, { "EmployeeID": 5, "FirstName": "Steven", "LastName": "Buchanan", "ReportsTo": 2, "Country": "UK", "Title": "Sales Manager", "HireDate": "1993-10-17 00:00:00", "BirthDate": "1955-03-04 00:00:00", "City": "London", "Address": "14 Garrett Hill" }, { "EmployeeID": 6, "FirstName": "Michael", "LastName": "Suyama", "ReportsTo": 5, "Country": "UK", "Title": "Sales Representative", "HireDate": "1993-10-17 00:00:00", "BirthDate": "1963-07-02 00:00:00", "City": "London", "Address": "Coventry House Miner Rd." }, { "EmployeeID": 7, "FirstName": "Robert", "LastName": "King", "ReportsTo": 5, "Country": "UK", "Title": "Sales Representative", "HireDate": "1994-01-02 00:00:00", "BirthDate": "1960-05-29 00:00:00", "City": "London", "Address": "Edgeham Hollow Winchester Way" }, { "EmployeeID": 8, "FirstName": "Laura", "LastName": "Callahan", "ReportsTo": 2, "Country": "USA", "Title": "Inside Sales Coordinator", "HireDate": "1994-03-05 00:00:00", "BirthDate": "1958-01-09 00:00:00", "City": "Seattle", "Address": "4726 - 11th Ave. N.E." }, { "EmployeeID": 9, "FirstName": "Anne", "LastName": "Dodsworth", "ReportsTo": 5, "Country": "UK", "Title": "Sales Representative", "HireDate": "1994-11-15 00:00:00", "BirthDate": "1966-01-27 00:00:00", "City": "London", "Address": "7 Houndstooth Rd." } ]}); var columns = [ { text: 'FirstName', columnGroup: 'Name', dataField: 'FirstName', width: 200 }, { text: 'LastName', columnGroup: 'Name', dataField: 'LastName', width: 200 }, { text: 'Title', dataField: 'Title', width: 160 }, { text: 'Birth Date', dataField: 'BirthDate', cellsFormat: 'd', width: 120 }, { text: 'Hire Date', dataField: 'HireDate', cellsFormat: 'd', width: 120 }, { text: 'Address', dataField: 'Address', width: 250 }, { text: 'City', dataField: 'City', width: 120 }, { text: 'Country', dataField: 'Country' } ]; var columnGroups = [ { text: 'Name', name: 'Name' } ]; JQXElements.settings[ "treeGridSettings"] = { sortable:true,filterable:true, columns:columns, columnGroups:columnGroups, source:source, theme: "light" } window.onload = function() { document.querySelector( "jqx-tree-grid").addEventListener("columnReordered", function(event) { // Your code here. }); }; </script></head><body> <jqx-tree-grid settings="treeGridSettings"></jqx-tree-grid>
|
filter
|
Event
|
|
Code examples
Bind to the filter event of jqxTreeGrid.
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>TreeGrid Custom Element Filtering and Sorting</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,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/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtreegrid.js"></script> <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script> <script type="text/javascript"> var source = new jqx.dataAdapter({ dataType: "json", dataFields: [ { name: 'EmployeeID', type: 'number' }, { name: 'ReportsTo', type: 'number' }, { name: 'FirstName', type: 'string' }, { name: 'LastName', type: 'string' }, { name: 'Country', type: 'string' }, { name: 'City', type: 'string' }, { name: 'Address', type: 'string' }, { name: 'Title', type: 'string' }, { name: 'HireDate', type: 'date' }, { name: 'BirthDate', type: 'date' } ], hierarchy: { keyDataField: { name: 'EmployeeID' }, parentDataField: { name: 'ReportsTo' } }, id: 'EmployeeID', localData: [ { "EmployeeID": 1, "FirstName": "Nancy", "LastName": "Davolio", "ReportsTo": 2, "Country": "USA", "Title": "Sales Representative", "HireDate": "1992-05-01 00:00:00", "BirthDate": "1948-12-08 00:00:00", "City": "Seattle", "Address": "507 - 20th Ave. E.Apt. 2A" }, { "EmployeeID": 2, "FirstName": "Andrew", "LastName": "Fuller", "ReportsTo": null, "Country": "USA", "Title": "Vice President, Sales", "HireDate": "1992-08-14 00:00:00", "BirthDate": "1952-02-19 00:00:00", "City": "Tacoma", "Address": "908 W. Capital Way" }, { "EmployeeID": 3, "FirstName": "Janet", "LastName": "Leverling", "ReportsTo": 2, "Country": "USA", "Title": "Sales Representative", "HireDate": "1992-04-01 00:00:00", "BirthDate": "1963-08-30 00:00:00", "City": "Kirkland", "Address": "722 Moss Bay Blvd." }, { "EmployeeID": 4, "FirstName": "Margaret", "LastName": "Peacock", "ReportsTo": 2, "Country": "USA", "Title": "Sales Representative", "HireDate": "1993-05-03 00:00:00", "BirthDate": "1937-09-19 00:00:00", "City": "Redmond", "Address": "4110 Old Redmond Rd." }, { "EmployeeID": 5, "FirstName": "Steven", "LastName": "Buchanan", "ReportsTo": 2, "Country": "UK", "Title": "Sales Manager", "HireDate": "1993-10-17 00:00:00", "BirthDate": "1955-03-04 00:00:00", "City": "London", "Address": "14 Garrett Hill" }, { "EmployeeID": 6, "FirstName": "Michael", "LastName": "Suyama", "ReportsTo": 5, "Country": "UK", "Title": "Sales Representative", "HireDate": "1993-10-17 00:00:00", "BirthDate": "1963-07-02 00:00:00", "City": "London", "Address": "Coventry House Miner Rd." }, { "EmployeeID": 7, "FirstName": "Robert", "LastName": "King", "ReportsTo": 5, "Country": "UK", "Title": "Sales Representative", "HireDate": "1994-01-02 00:00:00", "BirthDate": "1960-05-29 00:00:00", "City": "London", "Address": "Edgeham Hollow Winchester Way" }, { "EmployeeID": 8, "FirstName": "Laura", "LastName": "Callahan", "ReportsTo": 2, "Country": "USA", "Title": "Inside Sales Coordinator", "HireDate": "1994-03-05 00:00:00", "BirthDate": "1958-01-09 00:00:00", "City": "Seattle", "Address": "4726 - 11th Ave. N.E." }, { "EmployeeID": 9, "FirstName": "Anne", "LastName": "Dodsworth", "ReportsTo": 5, "Country": "UK", "Title": "Sales Representative", "HireDate": "1994-11-15 00:00:00", "BirthDate": "1966-01-27 00:00:00", "City": "London", "Address": "7 Houndstooth Rd." } ]}); var columns = [ { text: 'FirstName', columnGroup: 'Name', dataField: 'FirstName', width: 200 }, { text: 'LastName', columnGroup: 'Name', dataField: 'LastName', width: 200 }, { text: 'Title', dataField: 'Title', width: 160 }, { text: 'Birth Date', dataField: 'BirthDate', cellsFormat: 'd', width: 120 }, { text: 'Hire Date', dataField: 'HireDate', cellsFormat: 'd', width: 120 }, { text: 'Address', dataField: 'Address', width: 250 }, { text: 'City', dataField: 'City', width: 120 }, { text: 'Country', dataField: 'Country' } ]; var columnGroups = [ { text: 'Name', name: 'Name' } ]; JQXElements.settings[ "treeGridSettings"] = { sortable:true,filterable:true, columns:columns, columnGroups:columnGroups, source:source, theme: "light" } window.onload = function() { document.querySelector( "jqx-tree-grid").addEventListener("filter", function(event) { // Your code here. }); }; </script></head><body> <jqx-tree-grid settings="treeGridSettings"></jqx-tree-grid>
|
pageChanged
|
Event
|
|
Code examples
Bind to the pageChanged event of jqxTreeGrid.
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>TreeGrid Custom Element Filtering and Sorting</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,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/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtreegrid.js"></script> <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script> <script type="text/javascript"> var source = new jqx.dataAdapter({ dataType: "json", dataFields: [ { name: 'EmployeeID', type: 'number' }, { name: 'ReportsTo', type: 'number' }, { name: 'FirstName', type: 'string' }, { name: 'LastName', type: 'string' }, { name: 'Country', type: 'string' }, { name: 'City', type: 'string' }, { name: 'Address', type: 'string' }, { name: 'Title', type: 'string' }, { name: 'HireDate', type: 'date' }, { name: 'BirthDate', type: 'date' } ], hierarchy: { keyDataField: { name: 'EmployeeID' }, parentDataField: { name: 'ReportsTo' } }, id: 'EmployeeID', localData: [ { "EmployeeID": 1, "FirstName": "Nancy", "LastName": "Davolio", "ReportsTo": 2, "Country": "USA", "Title": "Sales Representative", "HireDate": "1992-05-01 00:00:00", "BirthDate": "1948-12-08 00:00:00", "City": "Seattle", "Address": "507 - 20th Ave. E.Apt. 2A" }, { "EmployeeID": 2, "FirstName": "Andrew", "LastName": "Fuller", "ReportsTo": null, "Country": "USA", "Title": "Vice President, Sales", "HireDate": "1992-08-14 00:00:00", "BirthDate": "1952-02-19 00:00:00", "City": "Tacoma", "Address": "908 W. Capital Way" }, { "EmployeeID": 3, "FirstName": "Janet", "LastName": "Leverling", "ReportsTo": 2, "Country": "USA", "Title": "Sales Representative", "HireDate": "1992-04-01 00:00:00", "BirthDate": "1963-08-30 00:00:00", "City": "Kirkland", "Address": "722 Moss Bay Blvd." }, { "EmployeeID": 4, "FirstName": "Margaret", "LastName": "Peacock", "ReportsTo": 2, "Country": "USA", "Title": "Sales Representative", "HireDate": "1993-05-03 00:00:00", "BirthDate": "1937-09-19 00:00:00", "City": "Redmond", "Address": "4110 Old Redmond Rd." }, { "EmployeeID": 5, "FirstName": "Steven", "LastName": "Buchanan", "ReportsTo": 2, "Country": "UK", "Title": "Sales Manager", "HireDate": "1993-10-17 00:00:00", "BirthDate": "1955-03-04 00:00:00", "City": "London", "Address": "14 Garrett Hill" }, { "EmployeeID": 6, "FirstName": "Michael", "LastName": "Suyama", "ReportsTo": 5, "Country": "UK", "Title": "Sales Representative", "HireDate": "1993-10-17 00:00:00", "BirthDate": "1963-07-02 00:00:00", "City": "London", "Address": "Coventry House Miner Rd." }, { "EmployeeID": 7, "FirstName": "Robert", "LastName": "King", "ReportsTo": 5, "Country": "UK", "Title": "Sales Representative", "HireDate": "1994-01-02 00:00:00", "BirthDate": "1960-05-29 00:00:00", "City": "London", "Address": "Edgeham Hollow Winchester Way" }, { "EmployeeID": 8, "FirstName": "Laura", "LastName": "Callahan", "ReportsTo": 2, "Country": "USA", "Title": "Inside Sales Coordinator", "HireDate": "1994-03-05 00:00:00", "BirthDate": "1958-01-09 00:00:00", "City": "Seattle", "Address": "4726 - 11th Ave. N.E." }, { "EmployeeID": 9, "FirstName": "Anne", "LastName": "Dodsworth", "ReportsTo": 5, "Country": "UK", "Title": "Sales Representative", "HireDate": "1994-11-15 00:00:00", "BirthDate": "1966-01-27 00:00:00", "City": "London", "Address": "7 Houndstooth Rd." } ]}); var columns = [ { text: 'FirstName', columnGroup: 'Name', dataField: 'FirstName', width: 200 }, { text: 'LastName', columnGroup: 'Name', dataField: 'LastName', width: 200 }, { text: 'Title', dataField: 'Title', width: 160 }, { text: 'Birth Date', dataField: 'BirthDate', cellsFormat: 'd', width: 120 }, { text: 'Hire Date', dataField: 'HireDate', cellsFormat: 'd', width: 120 }, { text: 'Address', dataField: 'Address', width: 250 }, { text: 'City', dataField: 'City', width: 120 }, { text: 'Country', dataField: 'Country' } ]; var columnGroups = [ { text: 'Name', name: 'Name' } ]; JQXElements.settings[ "treeGridSettings"] = { sortable:true,filterable:true, columns:columns, columnGroups:columnGroups, source:source, theme: "light" } window.onload = function() { document.querySelector( "jqx-tree-grid").addEventListener("pageChanged", function(event) { // Your code here. }); }; </script></head><body> <jqx-tree-grid settings="treeGridSettings"></jqx-tree-grid>
|
pageSizeChanged
|
Event
|
|
Code examples
Bind to the pageSizeChanged event of jqxTreeGrid.
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>TreeGrid Custom Element Filtering and Sorting</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,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/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtreegrid.js"></script> <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script> <script type="text/javascript"> var source = new jqx.dataAdapter({ dataType: "json", dataFields: [ { name: 'EmployeeID', type: 'number' }, { name: 'ReportsTo', type: 'number' }, { name: 'FirstName', type: 'string' }, { name: 'LastName', type: 'string' }, { name: 'Country', type: 'string' }, { name: 'City', type: 'string' }, { name: 'Address', type: 'string' }, { name: 'Title', type: 'string' }, { name: 'HireDate', type: 'date' }, { name: 'BirthDate', type: 'date' } ], hierarchy: { keyDataField: { name: 'EmployeeID' }, parentDataField: { name: 'ReportsTo' } }, id: 'EmployeeID', localData: [ { "EmployeeID": 1, "FirstName": "Nancy", "LastName": "Davolio", "ReportsTo": 2, "Country": "USA", "Title": "Sales Representative", "HireDate": "1992-05-01 00:00:00", "BirthDate": "1948-12-08 00:00:00", "City": "Seattle", "Address": "507 - 20th Ave. E.Apt. 2A" }, { "EmployeeID": 2, "FirstName": "Andrew", "LastName": "Fuller", "ReportsTo": null, "Country": "USA", "Title": "Vice President, Sales", "HireDate": "1992-08-14 00:00:00", "BirthDate": "1952-02-19 00:00:00", "City": "Tacoma", "Address": "908 W. Capital Way" }, { "EmployeeID": 3, "FirstName": "Janet", "LastName": "Leverling", "ReportsTo": 2, "Country": "USA", "Title": "Sales Representative", "HireDate": "1992-04-01 00:00:00", "BirthDate": "1963-08-30 00:00:00", "City": "Kirkland", "Address": "722 Moss Bay Blvd." }, { "EmployeeID": 4, "FirstName": "Margaret", "LastName": "Peacock", "ReportsTo": 2, "Country": "USA", "Title": "Sales Representative", "HireDate": "1993-05-03 00:00:00", "BirthDate": "1937-09-19 00:00:00", "City": "Redmond", "Address": "4110 Old Redmond Rd." }, { "EmployeeID": 5, "FirstName": "Steven", "LastName": "Buchanan", "ReportsTo": 2, "Country": "UK", "Title": "Sales Manager", "HireDate": "1993-10-17 00:00:00", "BirthDate": "1955-03-04 00:00:00", "City": "London", "Address": "14 Garrett Hill" }, { "EmployeeID": 6, "FirstName": "Michael", "LastName": "Suyama", "ReportsTo": 5, "Country": "UK", "Title": "Sales Representative", "HireDate": "1993-10-17 00:00:00", "BirthDate": "1963-07-02 00:00:00", "City": "London", "Address": "Coventry House Miner Rd." }, { "EmployeeID": 7, "FirstName": "Robert", "LastName": "King", "ReportsTo": 5, "Country": "UK", "Title": "Sales Representative", "HireDate": "1994-01-02 00:00:00", "BirthDate": "1960-05-29 00:00:00", "City": "London", "Address": "Edgeham Hollow Winchester Way" }, { "EmployeeID": 8, "FirstName": "Laura", "LastName": "Callahan", "ReportsTo": 2, "Country": "USA", "Title": "Inside Sales Coordinator", "HireDate": "1994-03-05 00:00:00", "BirthDate": "1958-01-09 00:00:00", "City": "Seattle", "Address": "4726 - 11th Ave. N.E." }, { "EmployeeID": 9, "FirstName": "Anne", "LastName": "Dodsworth", "ReportsTo": 5, "Country": "UK", "Title": "Sales Representative", "HireDate": "1994-11-15 00:00:00", "BirthDate": "1966-01-27 00:00:00", "City": "London", "Address": "7 Houndstooth Rd." } ]}); var columns = [ { text: 'FirstName', columnGroup: 'Name', dataField: 'FirstName', width: 200 }, { text: 'LastName', columnGroup: 'Name', dataField: 'LastName', width: 200 }, { text: 'Title', dataField: 'Title', width: 160 }, { text: 'Birth Date', dataField: 'BirthDate', cellsFormat: 'd', width: 120 }, { text: 'Hire Date', dataField: 'HireDate', cellsFormat: 'd', width: 120 }, { text: 'Address', dataField: 'Address', width: 250 }, { text: 'City', dataField: 'City', width: 120 }, { text: 'Country', dataField: 'Country' } ]; var columnGroups = [ { text: 'Name', name: 'Name' } ]; JQXElements.settings[ "treeGridSettings"] = { sortable:true,filterable:true, columns:columns, columnGroups:columnGroups, source:source, theme: "light" } window.onload = function() { document.querySelector( "jqx-tree-grid").addEventListener("pageSizeChanged", function(event) { // Your code here. }); }; </script></head><body> <jqx-tree-grid settings="treeGridSettings"></jqx-tree-grid>
|
rowClick
|
Event
|
|
Code examples
Bind to the rowClick event of jqxTreeGrid.
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>TreeGrid Custom Element Filtering and Sorting</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,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/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtreegrid.js"></script> <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script> <script type="text/javascript"> var source = new jqx.dataAdapter({ dataType: "json", dataFields: [ { name: 'EmployeeID', type: 'number' }, { name: 'ReportsTo', type: 'number' }, { name: 'FirstName', type: 'string' }, { name: 'LastName', type: 'string' }, { name: 'Country', type: 'string' }, { name: 'City', type: 'string' }, { name: 'Address', type: 'string' }, { name: 'Title', type: 'string' }, { name: 'HireDate', type: 'date' }, { name: 'BirthDate', type: 'date' } ], hierarchy: { keyDataField: { name: 'EmployeeID' }, parentDataField: { name: 'ReportsTo' } }, id: 'EmployeeID', localData: [ { "EmployeeID": 1, "FirstName": "Nancy", "LastName": "Davolio", "ReportsTo": 2, "Country": "USA", "Title": "Sales Representative", "HireDate": "1992-05-01 00:00:00", "BirthDate": "1948-12-08 00:00:00", "City": "Seattle", "Address": "507 - 20th Ave. E.Apt. 2A" }, { "EmployeeID": 2, "FirstName": "Andrew", "LastName": "Fuller", "ReportsTo": null, "Country": "USA", "Title": "Vice President, Sales", "HireDate": "1992-08-14 00:00:00", "BirthDate": "1952-02-19 00:00:00", "City": "Tacoma", "Address": "908 W. Capital Way" }, { "EmployeeID": 3, "FirstName": "Janet", "LastName": "Leverling", "ReportsTo": 2, "Country": "USA", "Title": "Sales Representative", "HireDate": "1992-04-01 00:00:00", "BirthDate": "1963-08-30 00:00:00", "City": "Kirkland", "Address": "722 Moss Bay Blvd." }, { "EmployeeID": 4, "FirstName": "Margaret", "LastName": "Peacock", "ReportsTo": 2, "Country": "USA", "Title": "Sales Representative", "HireDate": "1993-05-03 00:00:00", "BirthDate": "1937-09-19 00:00:00", "City": "Redmond", "Address": "4110 Old Redmond Rd." }, { "EmployeeID": 5, "FirstName": "Steven", "LastName": "Buchanan", "ReportsTo": 2, "Country": "UK", "Title": "Sales Manager", "HireDate": "1993-10-17 00:00:00", "BirthDate": "1955-03-04 00:00:00", "City": "London", "Address": "14 Garrett Hill" }, { "EmployeeID": 6, "FirstName": "Michael", "LastName": "Suyama", "ReportsTo": 5, "Country": "UK", "Title": "Sales Representative", "HireDate": "1993-10-17 00:00:00", "BirthDate": "1963-07-02 00:00:00", "City": "London", "Address": "Coventry House Miner Rd." }, { "EmployeeID": 7, "FirstName": "Robert", "LastName": "King", "ReportsTo": 5, "Country": "UK", "Title": "Sales Representative", "HireDate": "1994-01-02 00:00:00", "BirthDate": "1960-05-29 00:00:00", "City": "London", "Address": "Edgeham Hollow Winchester Way" }, { "EmployeeID": 8, "FirstName": "Laura", "LastName": "Callahan", "ReportsTo": 2, "Country": "USA", "Title": "Inside Sales Coordinator", "HireDate": "1994-03-05 00:00:00", "BirthDate": "1958-01-09 00:00:00", "City": "Seattle", "Address": "4726 - 11th Ave. N.E." }, { "EmployeeID": 9, "FirstName": "Anne", "LastName": "Dodsworth", "ReportsTo": 5, "Country": "UK", "Title": "Sales Representative", "HireDate": "1994-11-15 00:00:00", "BirthDate": "1966-01-27 00:00:00", "City": "London", "Address": "7 Houndstooth Rd." } ]}); var columns = [ { text: 'FirstName', columnGroup: 'Name', dataField: 'FirstName', width: 200 }, { text: 'LastName', columnGroup: 'Name', dataField: 'LastName', width: 200 }, { text: 'Title', dataField: 'Title', width: 160 }, { text: 'Birth Date', dataField: 'BirthDate', cellsFormat: 'd', width: 120 }, { text: 'Hire Date', dataField: 'HireDate', cellsFormat: 'd', width: 120 }, { text: 'Address', dataField: 'Address', width: 250 }, { text: 'City', dataField: 'City', width: 120 }, { text: 'Country', dataField: 'Country' } ]; var columnGroups = [ { text: 'Name', name: 'Name' } ]; JQXElements.settings[ "treeGridSettings"] = { sortable:true,filterable:true, columns:columns, columnGroups:columnGroups, source:source, theme: "light" } window.onload = function() { document.querySelector( "jqx-tree-grid").addEventListener("rowClick", function(event) { // Your code here. }); }; </script></head><body> <jqx-tree-grid settings="treeGridSettings"></jqx-tree-grid>
|
rowDoubleClick
|
Event
|
|
Code examples
Bind to the rowDoubleClick event of jqxTreeGrid.
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>TreeGrid Custom Element Filtering and Sorting</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,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/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtreegrid.js"></script> <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script> <script type="text/javascript"> var source = new jqx.dataAdapter({ dataType: "json", dataFields: [ { name: 'EmployeeID', type: 'number' }, { name: 'ReportsTo', type: 'number' }, { name: 'FirstName', type: 'string' }, { name: 'LastName', type: 'string' }, { name: 'Country', type: 'string' }, { name: 'City', type: 'string' }, { name: 'Address', type: 'string' }, { name: 'Title', type: 'string' }, { name: 'HireDate', type: 'date' }, { name: 'BirthDate', type: 'date' } ], hierarchy: { keyDataField: { name: 'EmployeeID' }, parentDataField: { name: 'ReportsTo' } }, id: 'EmployeeID', localData: [ { "EmployeeID": 1, "FirstName": "Nancy", "LastName": "Davolio", "ReportsTo": 2, "Country": "USA", "Title": "Sales Representative", "HireDate": "1992-05-01 00:00:00", "BirthDate": "1948-12-08 00:00:00", "City": "Seattle", "Address": "507 - 20th Ave. E.Apt. 2A" }, { "EmployeeID": 2, "FirstName": "Andrew", "LastName": "Fuller", "ReportsTo": null, "Country": "USA", "Title": "Vice President, Sales", "HireDate": "1992-08-14 00:00:00", "BirthDate": "1952-02-19 00:00:00", "City": "Tacoma", "Address": "908 W. Capital Way" }, { "EmployeeID": 3, "FirstName": "Janet", "LastName": "Leverling", "ReportsTo": 2, "Country": "USA", "Title": "Sales Representative", "HireDate": "1992-04-01 00:00:00", "BirthDate": "1963-08-30 00:00:00", "City": "Kirkland", "Address": "722 Moss Bay Blvd." }, { "EmployeeID": 4, "FirstName": "Margaret", "LastName": "Peacock", "ReportsTo": 2, "Country": "USA", "Title": "Sales Representative", "HireDate": "1993-05-03 00:00:00", "BirthDate": "1937-09-19 00:00:00", "City": "Redmond", "Address": "4110 Old Redmond Rd." }, { "EmployeeID": 5, "FirstName": "Steven", "LastName": "Buchanan", "ReportsTo": 2, "Country": "UK", "Title": "Sales Manager", "HireDate": "1993-10-17 00:00:00", "BirthDate": "1955-03-04 00:00:00", "City": "London", "Address": "14 Garrett Hill" }, { "EmployeeID": 6, "FirstName": "Michael", "LastName": "Suyama", "ReportsTo": 5, "Country": "UK", "Title": "Sales Representative", "HireDate": "1993-10-17 00:00:00", "BirthDate": "1963-07-02 00:00:00", "City": "London", "Address": "Coventry House Miner Rd." }, { "EmployeeID": 7, "FirstName": "Robert", "LastName": "King", "ReportsTo": 5, "Country": "UK", "Title": "Sales Representative", "HireDate": "1994-01-02 00:00:00", "BirthDate": "1960-05-29 00:00:00", "City": "London", "Address": "Edgeham Hollow Winchester Way" }, { "EmployeeID": 8, "FirstName": "Laura", "LastName": "Callahan", "ReportsTo": 2, "Country": "USA", "Title": "Inside Sales Coordinator", "HireDate": "1994-03-05 00:00:00", "BirthDate": "1958-01-09 00:00:00", "City": "Seattle", "Address": "4726 - 11th Ave. N.E." }, { "EmployeeID": 9, "FirstName": "Anne", "LastName": "Dodsworth", "ReportsTo": 5, "Country": "UK", "Title": "Sales Representative", "HireDate": "1994-11-15 00:00:00", "BirthDate": "1966-01-27 00:00:00", "City": "London", "Address": "7 Houndstooth Rd." } ]}); var columns = [ { text: 'FirstName', columnGroup: 'Name', dataField: 'FirstName', width: 200 }, { text: 'LastName', columnGroup: 'Name', dataField: 'LastName', width: 200 }, { text: 'Title', dataField: 'Title', width: 160 }, { text: 'Birth Date', dataField: 'BirthDate', cellsFormat: 'd', width: 120 }, { text: 'Hire Date', dataField: 'HireDate', cellsFormat: 'd', width: 120 }, { text: 'Address', dataField: 'Address', width: 250 }, { text: 'City', dataField: 'City', width: 120 }, { text: 'Country', dataField: 'Country' } ]; var columnGroups = [ { text: 'Name', name: 'Name' } ]; JQXElements.settings[ "treeGridSettings"] = { sortable:true,filterable:true, columns:columns, columnGroups:columnGroups, source:source, theme: "light" } window.onload = function() { document.querySelector( "jqx-tree-grid").addEventListener("rowDoubleClick", function(event) { // Your code here. }); }; </script></head><body> <jqx-tree-grid settings="treeGridSettings"></jqx-tree-grid>
|
rowSelect
|
Event
|
|
Code examples
Bind to the rowSelect event of jqxTreeGrid.
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>TreeGrid Custom Element Filtering and Sorting</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,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/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtreegrid.js"></script> <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script> <script type="text/javascript"> var source = new jqx.dataAdapter({ dataType: "json", dataFields: [ { name: 'EmployeeID', type: 'number' }, { name: 'ReportsTo', type: 'number' }, { name: 'FirstName', type: 'string' }, { name: 'LastName', type: 'string' }, { name: 'Country', type: 'string' }, { name: 'City', type: 'string' }, { name: 'Address', type: 'string' }, { name: 'Title', type: 'string' }, { name: 'HireDate', type: 'date' }, { name: 'BirthDate', type: 'date' } ], hierarchy: { keyDataField: { name: 'EmployeeID' }, parentDataField: { name: 'ReportsTo' } }, id: 'EmployeeID', localData: [ { "EmployeeID": 1, "FirstName": "Nancy", "LastName": "Davolio", "ReportsTo": 2, "Country": "USA", "Title": "Sales Representative", "HireDate": "1992-05-01 00:00:00", "BirthDate": "1948-12-08 00:00:00", "City": "Seattle", "Address": "507 - 20th Ave. E.Apt. 2A" }, { "EmployeeID": 2, "FirstName": "Andrew", "LastName": "Fuller", "ReportsTo": null, "Country": "USA", "Title": "Vice President, Sales", "HireDate": "1992-08-14 00:00:00", "BirthDate": "1952-02-19 00:00:00", "City": "Tacoma", "Address": "908 W. Capital Way" }, { "EmployeeID": 3, "FirstName": "Janet", "LastName": "Leverling", "ReportsTo": 2, "Country": "USA", "Title": "Sales Representative", "HireDate": "1992-04-01 00:00:00", "BirthDate": "1963-08-30 00:00:00", "City": "Kirkland", "Address": "722 Moss Bay Blvd." }, { "EmployeeID": 4, "FirstName": "Margaret", "LastName": "Peacock", "ReportsTo": 2, "Country": "USA", "Title": "Sales Representative", "HireDate": "1993-05-03 00:00:00", "BirthDate": "1937-09-19 00:00:00", "City": "Redmond", "Address": "4110 Old Redmond Rd." }, { "EmployeeID": 5, "FirstName": "Steven", "LastName": "Buchanan", "ReportsTo": 2, "Country": "UK", "Title": "Sales Manager", "HireDate": "1993-10-17 00:00:00", "BirthDate": "1955-03-04 00:00:00", "City": "London", "Address": "14 Garrett Hill" }, { "EmployeeID": 6, "FirstName": "Michael", "LastName": "Suyama", "ReportsTo": 5, "Country": "UK", "Title": "Sales Representative", "HireDate": "1993-10-17 00:00:00", "BirthDate": "1963-07-02 00:00:00", "City": "London", "Address": "Coventry House Miner Rd." }, { "EmployeeID": 7, "FirstName": "Robert", "LastName": "King", "ReportsTo": 5, "Country": "UK", "Title": "Sales Representative", "HireDate": "1994-01-02 00:00:00", "BirthDate": "1960-05-29 00:00:00", "City": "London", "Address": "Edgeham Hollow Winchester Way" }, { "EmployeeID": 8, "FirstName": "Laura", "LastName": "Callahan", "ReportsTo": 2, "Country": "USA", "Title": "Inside Sales Coordinator", "HireDate": "1994-03-05 00:00:00", "BirthDate": "1958-01-09 00:00:00", "City": "Seattle", "Address": "4726 - 11th Ave. N.E." }, { "EmployeeID": 9, "FirstName": "Anne", "LastName": "Dodsworth", "ReportsTo": 5, "Country": "UK", "Title": "Sales Representative", "HireDate": "1994-11-15 00:00:00", "BirthDate": "1966-01-27 00:00:00", "City": "London", "Address": "7 Houndstooth Rd." } ]}); var columns = [ { text: 'FirstName', columnGroup: 'Name', dataField: 'FirstName', width: 200 }, { text: 'LastName', columnGroup: 'Name', dataField: 'LastName', width: 200 }, { text: 'Title', dataField: 'Title', width: 160 }, { text: 'Birth Date', dataField: 'BirthDate', cellsFormat: 'd', width: 120 }, { text: 'Hire Date', dataField: 'HireDate', cellsFormat: 'd', width: 120 }, { text: 'Address', dataField: 'Address', width: 250 }, { text: 'City', dataField: 'City', width: 120 }, { text: 'Country', dataField: 'Country' } ]; var columnGroups = [ { text: 'Name', name: 'Name' } ]; JQXElements.settings[ "treeGridSettings"] = { sortable:true,filterable:true, columns:columns, columnGroups:columnGroups, source:source, theme: "light" } window.onload = function() { document.querySelector( "jqx-tree-grid").addEventListener("rowSelect", function(event) { // Your code here. }); }; </script></head><body> <jqx-tree-grid settings="treeGridSettings"></jqx-tree-grid>
|
rowUnselect
|
Event
|
|
Code examples
Bind to the rowUnselect event of jqxTreeGrid.
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>TreeGrid Custom Element Filtering and Sorting</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,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/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtreegrid.js"></script> <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script> <script type="text/javascript"> var source = new jqx.dataAdapter({ dataType: "json", dataFields: [ { name: 'EmployeeID', type: 'number' }, { name: 'ReportsTo', type: 'number' }, { name: 'FirstName', type: 'string' }, { name: 'LastName', type: 'string' }, { name: 'Country', type: 'string' }, { name: 'City', type: 'string' }, { name: 'Address', type: 'string' }, { name: 'Title', type: 'string' }, { name: 'HireDate', type: 'date' }, { name: 'BirthDate', type: 'date' } ], hierarchy: { keyDataField: { name: 'EmployeeID' }, parentDataField: { name: 'ReportsTo' } }, id: 'EmployeeID', localData: [ { "EmployeeID": 1, "FirstName": "Nancy", "LastName": "Davolio", "ReportsTo": 2, "Country": "USA", "Title": "Sales Representative", "HireDate": "1992-05-01 00:00:00", "BirthDate": "1948-12-08 00:00:00", "City": "Seattle", "Address": "507 - 20th Ave. E.Apt. 2A" }, { "EmployeeID": 2, "FirstName": "Andrew", "LastName": "Fuller", "ReportsTo": null, "Country": "USA", "Title": "Vice President, Sales", "HireDate": "1992-08-14 00:00:00", "BirthDate": "1952-02-19 00:00:00", "City": "Tacoma", "Address": "908 W. Capital Way" }, { "EmployeeID": 3, "FirstName": "Janet", "LastName": "Leverling", "ReportsTo": 2, "Country": "USA", "Title": "Sales Representative", "HireDate": "1992-04-01 00:00:00", "BirthDate": "1963-08-30 00:00:00", "City": "Kirkland", "Address": "722 Moss Bay Blvd." }, { "EmployeeID": 4, "FirstName": "Margaret", "LastName": "Peacock", "ReportsTo": 2, "Country": "USA", "Title": "Sales Representative", "HireDate": "1993-05-03 00:00:00", "BirthDate": "1937-09-19 00:00:00", "City": "Redmond", "Address": "4110 Old Redmond Rd." }, { "EmployeeID": 5, "FirstName": "Steven", "LastName": "Buchanan", "ReportsTo": 2, "Country": "UK", "Title": "Sales Manager", "HireDate": "1993-10-17 00:00:00", "BirthDate": "1955-03-04 00:00:00", "City": "London", "Address": "14 Garrett Hill" }, { "EmployeeID": 6, "FirstName": "Michael", "LastName": "Suyama", "ReportsTo": 5, "Country": "UK", "Title": "Sales Representative", "HireDate": "1993-10-17 00:00:00", "BirthDate": "1963-07-02 00:00:00", "City": "London", "Address": "Coventry House Miner Rd." }, { "EmployeeID": 7, "FirstName": "Robert", "LastName": "King", "ReportsTo": 5, "Country": "UK", "Title": "Sales Representative", "HireDate": "1994-01-02 00:00:00", "BirthDate": "1960-05-29 00:00:00", "City": "London", "Address": "Edgeham Hollow Winchester Way" }, { "EmployeeID": 8, "FirstName": "Laura", "LastName": "Callahan", "ReportsTo": 2, "Country": "USA", "Title": "Inside Sales Coordinator", "HireDate": "1994-03-05 00:00:00", "BirthDate": "1958-01-09 00:00:00", "City": "Seattle", "Address": "4726 - 11th Ave. N.E." }, { "EmployeeID": 9, "FirstName": "Anne", "LastName": "Dodsworth", "ReportsTo": 5, "Country": "UK", "Title": "Sales Representative", "HireDate": "1994-11-15 00:00:00", "BirthDate": "1966-01-27 00:00:00", "City": "London", "Address": "7 Houndstooth Rd." } ]}); var columns = [ { text: 'FirstName', columnGroup: 'Name', dataField: 'FirstName', width: 200 }, { text: 'LastName', columnGroup: 'Name', dataField: 'LastName', width: 200 }, { text: 'Title', dataField: 'Title', width: 160 }, { text: 'Birth Date', dataField: 'BirthDate', cellsFormat: 'd', width: 120 }, { text: 'Hire Date', dataField: 'HireDate', cellsFormat: 'd', width: 120 }, { text: 'Address', dataField: 'Address', width: 250 }, { text: 'City', dataField: 'City', width: 120 }, { text: 'Country', dataField: 'Country' } ]; var columnGroups = [ { text: 'Name', name: 'Name' } ]; JQXElements.settings[ "treeGridSettings"] = { sortable:true,filterable:true, columns:columns, columnGroups:columnGroups, source:source, theme: "light" } window.onload = function() { document.querySelector( "jqx-tree-grid").addEventListener("rowUnselect", function(event) { // Your code here. }); }; </script></head><body> <jqx-tree-grid settings="treeGridSettings"></jqx-tree-grid>
|
rowBeginEdit
|
Event
|
|
Code examples
Bind to the rowBeginEdit event of jqxTreeGrid.
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>TreeGrid Custom Element Filtering and Sorting</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,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/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtreegrid.js"></script> <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script> <script type="text/javascript"> var source = new jqx.dataAdapter({ dataType: "json", dataFields: [ { name: 'EmployeeID', type: 'number' }, { name: 'ReportsTo', type: 'number' }, { name: 'FirstName', type: 'string' }, { name: 'LastName', type: 'string' }, { name: 'Country', type: 'string' }, { name: 'City', type: 'string' }, { name: 'Address', type: 'string' }, { name: 'Title', type: 'string' }, { name: 'HireDate', type: 'date' }, { name: 'BirthDate', type: 'date' } ], hierarchy: { keyDataField: { name: 'EmployeeID' }, parentDataField: { name: 'ReportsTo' } }, id: 'EmployeeID', localData: [ { "EmployeeID": 1, "FirstName": "Nancy", "LastName": "Davolio", "ReportsTo": 2, "Country": "USA", "Title": "Sales Representative", "HireDate": "1992-05-01 00:00:00", "BirthDate": "1948-12-08 00:00:00", "City": "Seattle", "Address": "507 - 20th Ave. E.Apt. 2A" }, { "EmployeeID": 2, "FirstName": "Andrew", "LastName": "Fuller", "ReportsTo": null, "Country": "USA", "Title": "Vice President, Sales", "HireDate": "1992-08-14 00:00:00", "BirthDate": "1952-02-19 00:00:00", "City": "Tacoma", "Address": "908 W. Capital Way" }, { "EmployeeID": 3, "FirstName": "Janet", "LastName": "Leverling", "ReportsTo": 2, "Country": "USA", "Title": "Sales Representative", "HireDate": "1992-04-01 00:00:00", "BirthDate": "1963-08-30 00:00:00", "City": "Kirkland", "Address": "722 Moss Bay Blvd." }, { "EmployeeID": 4, "FirstName": "Margaret", "LastName": "Peacock", "ReportsTo": 2, "Country": "USA", "Title": "Sales Representative", "HireDate": "1993-05-03 00:00:00", "BirthDate": "1937-09-19 00:00:00", "City": "Redmond", "Address": "4110 Old Redmond Rd." }, { "EmployeeID": 5, "FirstName": "Steven", "LastName": "Buchanan", "ReportsTo": 2, "Country": "UK", "Title": "Sales Manager", "HireDate": "1993-10-17 00:00:00", "BirthDate": "1955-03-04 00:00:00", "City": "London", "Address": "14 Garrett Hill" }, { "EmployeeID": 6, "FirstName": "Michael", "LastName": "Suyama", "ReportsTo": 5, "Country": "UK", "Title": "Sales Representative", "HireDate": "1993-10-17 00:00:00", "BirthDate": "1963-07-02 00:00:00", "City": "London", "Address": "Coventry House Miner Rd." }, { "EmployeeID": 7, "FirstName": "Robert", "LastName": "King", "ReportsTo": 5, "Country": "UK", "Title": "Sales Representative", "HireDate": "1994-01-02 00:00:00", "BirthDate": "1960-05-29 00:00:00", "City": "London", "Address": "Edgeham Hollow Winchester Way" }, { "EmployeeID": 8, "FirstName": "Laura", "LastName": "Callahan", "ReportsTo": 2, "Country": "USA", "Title": "Inside Sales Coordinator", "HireDate": "1994-03-05 00:00:00", "BirthDate": "1958-01-09 00:00:00", "City": "Seattle", "Address": "4726 - 11th Ave. N.E." }, { "EmployeeID": 9, "FirstName": "Anne", "LastName": "Dodsworth", "ReportsTo": 5, "Country": "UK", "Title": "Sales Representative", "HireDate": "1994-11-15 00:00:00", "BirthDate": "1966-01-27 00:00:00", "City": "London", "Address": "7 Houndstooth Rd." } ]}); var columns = [ { text: 'FirstName', columnGroup: 'Name', dataField: 'FirstName', width: 200 }, { text: 'LastName', columnGroup: 'Name', dataField: 'LastName', width: 200 }, { text: 'Title', dataField: 'Title', width: 160 }, { text: 'Birth Date', dataField: 'BirthDate', cellsFormat: 'd', width: 120 }, { text: 'Hire Date', dataField: 'HireDate', cellsFormat: 'd', width: 120 }, { text: 'Address', dataField: 'Address', width: 250 }, { text: 'City', dataField: 'City', width: 120 }, { text: 'Country', dataField: 'Country' } ]; var columnGroups = [ { text: 'Name', name: 'Name' } ]; JQXElements.settings[ "treeGridSettings"] = { sortable:true,filterable:true, columns:columns, columnGroups:columnGroups, source:source, theme: "light" } window.onload = function() { document.querySelector( "jqx-tree-grid").addEventListener("rowBeginEdit", function(event) { // Your code here. }); }; </script></head><body> <jqx-tree-grid settings="treeGridSettings"></jqx-tree-grid>
|
rowEndEdit
|
Event
|
|
Code examples
Bind to the rowEndEdit event of jqxTreeGrid.
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>TreeGrid Custom Element Filtering and Sorting</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,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/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtreegrid.js"></script> <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script> <script type="text/javascript"> var source = new jqx.dataAdapter({ dataType: "json", dataFields: [ { name: 'EmployeeID', type: 'number' }, { name: 'ReportsTo', type: 'number' }, { name: 'FirstName', type: 'string' }, { name: 'LastName', type: 'string' }, { name: 'Country', type: 'string' }, { name: 'City', type: 'string' }, { name: 'Address', type: 'string' }, { name: 'Title', type: 'string' }, { name: 'HireDate', type: 'date' }, { name: 'BirthDate', type: 'date' } ], hierarchy: { keyDataField: { name: 'EmployeeID' }, parentDataField: { name: 'ReportsTo' } }, id: 'EmployeeID', localData: [ { "EmployeeID": 1, "FirstName": "Nancy", "LastName": "Davolio", "ReportsTo": 2, "Country": "USA", "Title": "Sales Representative", "HireDate": "1992-05-01 00:00:00", "BirthDate": "1948-12-08 00:00:00", "City": "Seattle", "Address": "507 - 20th Ave. E.Apt. 2A" }, { "EmployeeID": 2, "FirstName": "Andrew", "LastName": "Fuller", "ReportsTo": null, "Country": "USA", "Title": "Vice President, Sales", "HireDate": "1992-08-14 00:00:00", "BirthDate": "1952-02-19 00:00:00", "City": "Tacoma", "Address": "908 W. Capital Way" }, { "EmployeeID": 3, "FirstName": "Janet", "LastName": "Leverling", "ReportsTo": 2, "Country": "USA", "Title": "Sales Representative", "HireDate": "1992-04-01 00:00:00", "BirthDate": "1963-08-30 00:00:00", "City": "Kirkland", "Address": "722 Moss Bay Blvd." }, { "EmployeeID": 4, "FirstName": "Margaret", "LastName": "Peacock", "ReportsTo": 2, "Country": "USA", "Title": "Sales Representative", "HireDate": "1993-05-03 00:00:00", "BirthDate": "1937-09-19 00:00:00", "City": "Redmond", "Address": "4110 Old Redmond Rd." }, { "EmployeeID": 5, "FirstName": "Steven", "LastName": "Buchanan", "ReportsTo": 2, "Country": "UK", "Title": "Sales Manager", "HireDate": "1993-10-17 00:00:00", "BirthDate": "1955-03-04 00:00:00", "City": "London", "Address": "14 Garrett Hill" }, { "EmployeeID": 6, "FirstName": "Michael", "LastName": "Suyama", "ReportsTo": 5, "Country": "UK", "Title": "Sales Representative", "HireDate": "1993-10-17 00:00:00", "BirthDate": "1963-07-02 00:00:00", "City": "London", "Address": "Coventry House Miner Rd." }, { "EmployeeID": 7, "FirstName": "Robert", "LastName": "King", "ReportsTo": 5, "Country": "UK", "Title": "Sales Representative", "HireDate": "1994-01-02 00:00:00", "BirthDate": "1960-05-29 00:00:00", "City": "London", "Address": "Edgeham Hollow Winchester Way" }, { "EmployeeID": 8, "FirstName": "Laura", "LastName": "Callahan", "ReportsTo": 2, "Country": "USA", "Title": "Inside Sales Coordinator", "HireDate": "1994-03-05 00:00:00", "BirthDate": "1958-01-09 00:00:00", "City": "Seattle", "Address": "4726 - 11th Ave. N.E." }, { "EmployeeID": 9, "FirstName": "Anne", "LastName": "Dodsworth", "ReportsTo": 5, "Country": "UK", "Title": "Sales Representative", "HireDate": "1994-11-15 00:00:00", "BirthDate": "1966-01-27 00:00:00", "City": "London", "Address": "7 Houndstooth Rd." } ]}); var columns = [ { text: 'FirstName', columnGroup: 'Name', dataField: 'FirstName', width: 200 }, { text: 'LastName', columnGroup: 'Name', dataField: 'LastName', width: 200 }, { text: 'Title', dataField: 'Title', width: 160 }, { text: 'Birth Date', dataField: 'BirthDate', cellsFormat: 'd', width: 120 }, { text: 'Hire Date', dataField: 'HireDate', cellsFormat: 'd', width: 120 }, { text: 'Address', dataField: 'Address', width: 250 }, { text: 'City', dataField: 'City', width: 120 }, { text: 'Country', dataField: 'Country' } ]; var columnGroups = [ { text: 'Name', name: 'Name' } ]; JQXElements.settings[ "treeGridSettings"] = { sortable:true,filterable:true, columns:columns, columnGroups:columnGroups, source:source, theme: "light" } window.onload = function() { document.querySelector( "jqx-tree-grid").addEventListener("rowEndEdit", function(event) { // Your code here. }); }; </script></head><body> <jqx-tree-grid settings="treeGridSettings"></jqx-tree-grid>
|
rowExpand
|
Event
|
|
Code examples
Bind to the rowExpand event of jqxTreeGrid.
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>TreeGrid Custom Element Filtering and Sorting</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,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/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtreegrid.js"></script> <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script> <script type="text/javascript"> var source = new jqx.dataAdapter({ dataType: "json", dataFields: [ { name: 'EmployeeID', type: 'number' }, { name: 'ReportsTo', type: 'number' }, { name: 'FirstName', type: 'string' }, { name: 'LastName', type: 'string' }, { name: 'Country', type: 'string' }, { name: 'City', type: 'string' }, { name: 'Address', type: 'string' }, { name: 'Title', type: 'string' }, { name: 'HireDate', type: 'date' }, { name: 'BirthDate', type: 'date' } ], hierarchy: { keyDataField: { name: 'EmployeeID' }, parentDataField: { name: 'ReportsTo' } }, id: 'EmployeeID', localData: [ { "EmployeeID": 1, "FirstName": "Nancy", "LastName": "Davolio", "ReportsTo": 2, "Country": "USA", "Title": "Sales Representative", "HireDate": "1992-05-01 00:00:00", "BirthDate": "1948-12-08 00:00:00", "City": "Seattle", "Address": "507 - 20th Ave. E.Apt. 2A" }, { "EmployeeID": 2, "FirstName": "Andrew", "LastName": "Fuller", "ReportsTo": null, "Country": "USA", "Title": "Vice President, Sales", "HireDate": "1992-08-14 00:00:00", "BirthDate": "1952-02-19 00:00:00", "City": "Tacoma", "Address": "908 W. Capital Way" }, { "EmployeeID": 3, "FirstName": "Janet", "LastName": "Leverling", "ReportsTo": 2, "Country": "USA", "Title": "Sales Representative", "HireDate": "1992-04-01 00:00:00", "BirthDate": "1963-08-30 00:00:00", "City": "Kirkland", "Address": "722 Moss Bay Blvd." }, { "EmployeeID": 4, "FirstName": "Margaret", "LastName": "Peacock", "ReportsTo": 2, "Country": "USA", "Title": "Sales Representative", "HireDate": "1993-05-03 00:00:00", "BirthDate": "1937-09-19 00:00:00", "City": "Redmond", "Address": "4110 Old Redmond Rd." }, { "EmployeeID": 5, "FirstName": "Steven", "LastName": "Buchanan", "ReportsTo": 2, "Country": "UK", "Title": "Sales Manager", "HireDate": "1993-10-17 00:00:00", "BirthDate": "1955-03-04 00:00:00", "City": "London", "Address": "14 Garrett Hill" }, { "EmployeeID": 6, "FirstName": "Michael", "LastName": "Suyama", "ReportsTo": 5, "Country": "UK", "Title": "Sales Representative", "HireDate": "1993-10-17 00:00:00", "BirthDate": "1963-07-02 00:00:00", "City": "London", "Address": "Coventry House Miner Rd." }, { "EmployeeID": 7, "FirstName": "Robert", "LastName": "King", "ReportsTo": 5, "Country": "UK", "Title": "Sales Representative", "HireDate": "1994-01-02 00:00:00", "BirthDate": "1960-05-29 00:00:00", "City": "London", "Address": "Edgeham Hollow Winchester Way" }, { "EmployeeID": 8, "FirstName": "Laura", "LastName": "Callahan", "ReportsTo": 2, "Country": "USA", "Title": "Inside Sales Coordinator", "HireDate": "1994-03-05 00:00:00", "BirthDate": "1958-01-09 00:00:00", "City": "Seattle", "Address": "4726 - 11th Ave. N.E." }, { "EmployeeID": 9, "FirstName": "Anne", "LastName": "Dodsworth", "ReportsTo": 5, "Country": "UK", "Title": "Sales Representative", "HireDate": "1994-11-15 00:00:00", "BirthDate": "1966-01-27 00:00:00", "City": "London", "Address": "7 Houndstooth Rd." } ]}); var columns = [ { text: 'FirstName', columnGroup: 'Name', dataField: 'FirstName', width: 200 }, { text: 'LastName', columnGroup: 'Name', dataField: 'LastName', width: 200 }, { text: 'Title', dataField: 'Title', width: 160 }, { text: 'Birth Date', dataField: 'BirthDate', cellsFormat: 'd', width: 120 }, { text: 'Hire Date', dataField: 'HireDate', cellsFormat: 'd', width: 120 }, { text: 'Address', dataField: 'Address', width: 250 }, { text: 'City', dataField: 'City', width: 120 }, { text: 'Country', dataField: 'Country' } ]; var columnGroups = [ { text: 'Name', name: 'Name' } ]; JQXElements.settings[ "treeGridSettings"] = { sortable:true,filterable:true, columns:columns, columnGroups:columnGroups, source:source, theme: "light" } window.onload = function() { document.querySelector( "jqx-tree-grid").addEventListener("rowExpand", function(event) { // Your code here. }); }; </script></head><body> <jqx-tree-grid settings="treeGridSettings"></jqx-tree-grid>
|
rowCollapse
|
Event
|
|
Code examples
Bind to the rowCollapse event of jqxTreeGrid.
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>TreeGrid Custom Element Filtering and Sorting</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,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/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtreegrid.js"></script> <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script> <script type="text/javascript"> var source = new jqx.dataAdapter({ dataType: "json", dataFields: [ { name: 'EmployeeID', type: 'number' }, { name: 'ReportsTo', type: 'number' }, { name: 'FirstName', type: 'string' }, { name: 'LastName', type: 'string' }, { name: 'Country', type: 'string' }, { name: 'City', type: 'string' }, { name: 'Address', type: 'string' }, { name: 'Title', type: 'string' }, { name: 'HireDate', type: 'date' }, { name: 'BirthDate', type: 'date' } ], hierarchy: { keyDataField: { name: 'EmployeeID' }, parentDataField: { name: 'ReportsTo' } }, id: 'EmployeeID', localData: [ { "EmployeeID": 1, "FirstName": "Nancy", "LastName": "Davolio", "ReportsTo": 2, "Country": "USA", "Title": "Sales Representative", "HireDate": "1992-05-01 00:00:00", "BirthDate": "1948-12-08 00:00:00", "City": "Seattle", "Address": "507 - 20th Ave. E.Apt. 2A" }, { "EmployeeID": 2, "FirstName": "Andrew", "LastName": "Fuller", "ReportsTo": null, "Country": "USA", "Title": "Vice President, Sales", "HireDate": "1992-08-14 00:00:00", "BirthDate": "1952-02-19 00:00:00", "City": "Tacoma", "Address": "908 W. Capital Way" }, { "EmployeeID": 3, "FirstName": "Janet", "LastName": "Leverling", "ReportsTo": 2, "Country": "USA", "Title": "Sales Representative", "HireDate": "1992-04-01 00:00:00", "BirthDate": "1963-08-30 00:00:00", "City": "Kirkland", "Address": "722 Moss Bay Blvd." }, { "EmployeeID": 4, "FirstName": "Margaret", "LastName": "Peacock", "ReportsTo": 2, "Country": "USA", "Title": "Sales Representative", "HireDate": "1993-05-03 00:00:00", "BirthDate": "1937-09-19 00:00:00", "City": "Redmond", "Address": "4110 Old Redmond Rd." }, { "EmployeeID": 5, "FirstName": "Steven", "LastName": "Buchanan", "ReportsTo": 2, "Country": "UK", "Title": "Sales Manager", "HireDate": "1993-10-17 00:00:00", "BirthDate": "1955-03-04 00:00:00", "City": "London", "Address": "14 Garrett Hill" }, { "EmployeeID": 6, "FirstName": "Michael", "LastName": "Suyama", "ReportsTo": 5, "Country": "UK", "Title": "Sales Representative", "HireDate": "1993-10-17 00:00:00", "BirthDate": "1963-07-02 00:00:00", "City": "London", "Address": "Coventry House Miner Rd." }, { "EmployeeID": 7, "FirstName": "Robert", "LastName": "King", "ReportsTo": 5, "Country": "UK", "Title": "Sales Representative", "HireDate": "1994-01-02 00:00:00", "BirthDate": "1960-05-29 00:00:00", "City": "London", "Address": "Edgeham Hollow Winchester Way" }, { "EmployeeID": 8, "FirstName": "Laura", "LastName": "Callahan", "ReportsTo": 2, "Country": "USA", "Title": "Inside Sales Coordinator", "HireDate": "1994-03-05 00:00:00", "BirthDate": "1958-01-09 00:00:00", "City": "Seattle", "Address": "4726 - 11th Ave. N.E." }, { "EmployeeID": 9, "FirstName": "Anne", "LastName": "Dodsworth", "ReportsTo": 5, "Country": "UK", "Title": "Sales Representative", "HireDate": "1994-11-15 00:00:00", "BirthDate": "1966-01-27 00:00:00", "City": "London", "Address": "7 Houndstooth Rd." } ]}); var columns = [ { text: 'FirstName', columnGroup: 'Name', dataField: 'FirstName', width: 200 }, { text: 'LastName', columnGroup: 'Name', dataField: 'LastName', width: 200 }, { text: 'Title', dataField: 'Title', width: 160 }, { text: 'Birth Date', dataField: 'BirthDate', cellsFormat: 'd', width: 120 }, { text: 'Hire Date', dataField: 'HireDate', cellsFormat: 'd', width: 120 }, { text: 'Address', dataField: 'Address', width: 250 }, { text: 'City', dataField: 'City', width: 120 }, { text: 'Country', dataField: 'Country' } ]; var columnGroups = [ { text: 'Name', name: 'Name' } ]; JQXElements.settings[ "treeGridSettings"] = { sortable:true,filterable:true, columns:columns, columnGroups:columnGroups, source:source, theme: "light" } window.onload = function() { document.querySelector( "jqx-tree-grid").addEventListener("rowCollapse", function(event) { // Your code here. }); }; </script></head><body> <jqx-tree-grid settings="treeGridSettings"></jqx-tree-grid>
|
rowCheck
|
Event
|
|
Code examples
Bind to the rowCheck event of jqxTreeGrid.
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>TreeGrid Custom Element Filtering and Sorting</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,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/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtreegrid.js"></script> <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script> <script type="text/javascript"> var source = new jqx.dataAdapter({ dataType: "json", dataFields: [ { name: 'EmployeeID', type: 'number' }, { name: 'ReportsTo', type: 'number' }, { name: 'FirstName', type: 'string' }, { name: 'LastName', type: 'string' }, { name: 'Country', type: 'string' }, { name: 'City', type: 'string' }, { name: 'Address', type: 'string' }, { name: 'Title', type: 'string' }, { name: 'HireDate', type: 'date' }, { name: 'BirthDate', type: 'date' } ], hierarchy: { keyDataField: { name: 'EmployeeID' }, parentDataField: { name: 'ReportsTo' } }, id: 'EmployeeID', localData: [ { "EmployeeID": 1, "FirstName": "Nancy", "LastName": "Davolio", "ReportsTo": 2, "Country": "USA", "Title": "Sales Representative", "HireDate": "1992-05-01 00:00:00", "BirthDate": "1948-12-08 00:00:00", "City": "Seattle", "Address": "507 - 20th Ave. E.Apt. 2A" }, { "EmployeeID": 2, "FirstName": "Andrew", "LastName": "Fuller", "ReportsTo": null, "Country": "USA", "Title": "Vice President, Sales", "HireDate": "1992-08-14 00:00:00", "BirthDate": "1952-02-19 00:00:00", "City": "Tacoma", "Address": "908 W. Capital Way" }, { "EmployeeID": 3, "FirstName": "Janet", "LastName": "Leverling", "ReportsTo": 2, "Country": "USA", "Title": "Sales Representative", "HireDate": "1992-04-01 00:00:00", "BirthDate": "1963-08-30 00:00:00", "City": "Kirkland", "Address": "722 Moss Bay Blvd." }, { "EmployeeID": 4, "FirstName": "Margaret", "LastName": "Peacock", "ReportsTo": 2, "Country": "USA", "Title": "Sales Representative", "HireDate": "1993-05-03 00:00:00", "BirthDate": "1937-09-19 00:00:00", "City": "Redmond", "Address": "4110 Old Redmond Rd." }, { "EmployeeID": 5, "FirstName": "Steven", "LastName": "Buchanan", "ReportsTo": 2, "Country": "UK", "Title": "Sales Manager", "HireDate": "1993-10-17 00:00:00", "BirthDate": "1955-03-04 00:00:00", "City": "London", "Address": "14 Garrett Hill" }, { "EmployeeID": 6, "FirstName": "Michael", "LastName": "Suyama", "ReportsTo": 5, "Country": "UK", "Title": "Sales Representative", "HireDate": "1993-10-17 00:00:00", "BirthDate": "1963-07-02 00:00:00", "City": "London", "Address": "Coventry House Miner Rd." }, { "EmployeeID": 7, "FirstName": "Robert", "LastName": "King", "ReportsTo": 5, "Country": "UK", "Title": "Sales Representative", "HireDate": "1994-01-02 00:00:00", "BirthDate": "1960-05-29 00:00:00", "City": "London", "Address": "Edgeham Hollow Winchester Way" }, { "EmployeeID": 8, "FirstName": "Laura", "LastName": "Callahan", "ReportsTo": 2, "Country": "USA", "Title": "Inside Sales Coordinator", "HireDate": "1994-03-05 00:00:00", "BirthDate": "1958-01-09 00:00:00", "City": "Seattle", "Address": "4726 - 11th Ave. N.E." }, { "EmployeeID": 9, "FirstName": "Anne", "LastName": "Dodsworth", "ReportsTo": 5, "Country": "UK", "Title": "Sales Representative", "HireDate": "1994-11-15 00:00:00", "BirthDate": "1966-01-27 00:00:00", "City": "London", "Address": "7 Houndstooth Rd." } ]}); var columns = [ { text: 'FirstName', columnGroup: 'Name', dataField: 'FirstName', width: 200 }, { text: 'LastName', columnGroup: 'Name', dataField: 'LastName', width: 200 }, { text: 'Title', dataField: 'Title', width: 160 }, { text: 'Birth Date', dataField: 'BirthDate', cellsFormat: 'd', width: 120 }, { text: 'Hire Date', dataField: 'HireDate', cellsFormat: 'd', width: 120 }, { text: 'Address', dataField: 'Address', width: 250 }, { text: 'City', dataField: 'City', width: 120 }, { text: 'Country', dataField: 'Country' } ]; var columnGroups = [ { text: 'Name', name: 'Name' } ]; JQXElements.settings[ "treeGridSettings"] = { sortable:true,filterable:true, columns:columns, columnGroups:columnGroups, source:source, theme: "light" } window.onload = function() { document.querySelector( "jqx-tree-grid").addEventListener("rowCheck", function(event) { // Your code here. }); }; </script></head><body> <jqx-tree-grid settings="treeGridSettings"></jqx-tree-grid>
|
rowUncheck
|
Event
|
|
Code examples
Bind to the rowUncheck event of jqxTreeGrid.
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>TreeGrid Custom Element Filtering and Sorting</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,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/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtreegrid.js"></script> <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script> <script type="text/javascript"> var source = new jqx.dataAdapter({ dataType: "json", dataFields: [ { name: 'EmployeeID', type: 'number' }, { name: 'ReportsTo', type: 'number' }, { name: 'FirstName', type: 'string' }, { name: 'LastName', type: 'string' }, { name: 'Country', type: 'string' }, { name: 'City', type: 'string' }, { name: 'Address', type: 'string' }, { name: 'Title', type: 'string' }, { name: 'HireDate', type: 'date' }, { name: 'BirthDate', type: 'date' } ], hierarchy: { keyDataField: { name: 'EmployeeID' }, parentDataField: { name: 'ReportsTo' } }, id: 'EmployeeID', localData: [ { "EmployeeID": 1, "FirstName": "Nancy", "LastName": "Davolio", "ReportsTo": 2, "Country": "USA", "Title": "Sales Representative", "HireDate": "1992-05-01 00:00:00", "BirthDate": "1948-12-08 00:00:00", "City": "Seattle", "Address": "507 - 20th Ave. E.Apt. 2A" }, { "EmployeeID": 2, "FirstName": "Andrew", "LastName": "Fuller", "ReportsTo": null, "Country": "USA", "Title": "Vice President, Sales", "HireDate": "1992-08-14 00:00:00", "BirthDate": "1952-02-19 00:00:00", "City": "Tacoma", "Address": "908 W. Capital Way" }, { "EmployeeID": 3, "FirstName": "Janet", "LastName": "Leverling", "ReportsTo": 2, "Country": "USA", "Title": "Sales Representative", "HireDate": "1992-04-01 00:00:00", "BirthDate": "1963-08-30 00:00:00", "City": "Kirkland", "Address": "722 Moss Bay Blvd." }, { "EmployeeID": 4, "FirstName": "Margaret", "LastName": "Peacock", "ReportsTo": 2, "Country": "USA", "Title": "Sales Representative", "HireDate": "1993-05-03 00:00:00", "BirthDate": "1937-09-19 00:00:00", "City": "Redmond", "Address": "4110 Old Redmond Rd." }, { "EmployeeID": 5, "FirstName": "Steven", "LastName": "Buchanan", "ReportsTo": 2, "Country": "UK", "Title": "Sales Manager", "HireDate": "1993-10-17 00:00:00", "BirthDate": "1955-03-04 00:00:00", "City": "London", "Address": "14 Garrett Hill" }, { "EmployeeID": 6, "FirstName": "Michael", "LastName": "Suyama", "ReportsTo": 5, "Country": "UK", "Title": "Sales Representative", "HireDate": "1993-10-17 00:00:00", "BirthDate": "1963-07-02 00:00:00", "City": "London", "Address": "Coventry House Miner Rd." }, { "EmployeeID": 7, "FirstName": "Robert", "LastName": "King", "ReportsTo": 5, "Country": "UK", "Title": "Sales Representative", "HireDate": "1994-01-02 00:00:00", "BirthDate": "1960-05-29 00:00:00", "City": "London", "Address": "Edgeham Hollow Winchester Way" }, { "EmployeeID": 8, "FirstName": "Laura", "LastName": "Callahan", "ReportsTo": 2, "Country": "USA", "Title": "Inside Sales Coordinator", "HireDate": "1994-03-05 00:00:00", "BirthDate": "1958-01-09 00:00:00", "City": "Seattle", "Address": "4726 - 11th Ave. N.E." }, { "EmployeeID": 9, "FirstName": "Anne", "LastName": "Dodsworth", "ReportsTo": 5, "Country": "UK", "Title": "Sales Representative", "HireDate": "1994-11-15 00:00:00", "BirthDate": "1966-01-27 00:00:00", "City": "London", "Address": "7 Houndstooth Rd." } ]}); var columns = [ { text: 'FirstName', columnGroup: 'Name', dataField: 'FirstName', width: 200 }, { text: 'LastName', columnGroup: 'Name', dataField: 'LastName', width: 200 }, { text: 'Title', dataField: 'Title', width: 160 }, { text: 'Birth Date', dataField: 'BirthDate', cellsFormat: 'd', width: 120 }, { text: 'Hire Date', dataField: 'HireDate', cellsFormat: 'd', width: 120 }, { text: 'Address', dataField: 'Address', width: 250 }, { text: 'City', dataField: 'City', width: 120 }, { text: 'Country', dataField: 'Country' } ]; var columnGroups = [ { text: 'Name', name: 'Name' } ]; JQXElements.settings[ "treeGridSettings"] = { sortable:true,filterable:true, columns:columns, columnGroups:columnGroups, source:source, theme: "light" } window.onload = function() { document.querySelector( "jqx-tree-grid").addEventListener("rowUncheck", function(event) { // Your code here. }); }; </script></head><body> <jqx-tree-grid settings="treeGridSettings"></jqx-tree-grid>
|
sort
|
Event
|
|
Code examples
Bind to the sort event of jqxTreeGrid.
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>TreeGrid Custom Element Filtering and Sorting</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,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/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtreegrid.js"></script> <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script> <script type="text/javascript"> var source = new jqx.dataAdapter({ dataType: "json", dataFields: [ { name: 'EmployeeID', type: 'number' }, { name: 'ReportsTo', type: 'number' }, { name: 'FirstName', type: 'string' }, { name: 'LastName', type: 'string' }, { name: 'Country', type: 'string' }, { name: 'City', type: 'string' }, { name: 'Address', type: 'string' }, { name: 'Title', type: 'string' }, { name: 'HireDate', type: 'date' }, { name: 'BirthDate', type: 'date' } ], hierarchy: { keyDataField: { name: 'EmployeeID' }, parentDataField: { name: 'ReportsTo' } }, id: 'EmployeeID', localData: [ { "EmployeeID": 1, "FirstName": "Nancy", "LastName": "Davolio", "ReportsTo": 2, "Country": "USA", "Title": "Sales Representative", "HireDate": "1992-05-01 00:00:00", "BirthDate": "1948-12-08 00:00:00", "City": "Seattle", "Address": "507 - 20th Ave. E.Apt. 2A" }, { "EmployeeID": 2, "FirstName": "Andrew", "LastName": "Fuller", "ReportsTo": null, "Country": "USA", "Title": "Vice President, Sales", "HireDate": "1992-08-14 00:00:00", "BirthDate": "1952-02-19 00:00:00", "City": "Tacoma", "Address": "908 W. Capital Way" }, { "EmployeeID": 3, "FirstName": "Janet", "LastName": "Leverling", "ReportsTo": 2, "Country": "USA", "Title": "Sales Representative", "HireDate": "1992-04-01 00:00:00", "BirthDate": "1963-08-30 00:00:00", "City": "Kirkland", "Address": "722 Moss Bay Blvd." }, { "EmployeeID": 4, "FirstName": "Margaret", "LastName": "Peacock", "ReportsTo": 2, "Country": "USA", "Title": "Sales Representative", "HireDate": "1993-05-03 00:00:00", "BirthDate": "1937-09-19 00:00:00", "City": "Redmond", "Address": "4110 Old Redmond Rd." }, { "EmployeeID": 5, "FirstName": "Steven", "LastName": "Buchanan", "ReportsTo": 2, "Country": "UK", "Title": "Sales Manager", "HireDate": "1993-10-17 00:00:00", "BirthDate": "1955-03-04 00:00:00", "City": "London", "Address": "14 Garrett Hill" }, { "EmployeeID": 6, "FirstName": "Michael", "LastName": "Suyama", "ReportsTo": 5, "Country": "UK", "Title": "Sales Representative", "HireDate": "1993-10-17 00:00:00", "BirthDate": "1963-07-02 00:00:00", "City": "London", "Address": "Coventry House Miner Rd." }, { "EmployeeID": 7, "FirstName": "Robert", "LastName": "King", "ReportsTo": 5, "Country": "UK", "Title": "Sales Representative", "HireDate": "1994-01-02 00:00:00", "BirthDate": "1960-05-29 00:00:00", "City": "London", "Address": "Edgeham Hollow Winchester Way" }, { "EmployeeID": 8, "FirstName": "Laura", "LastName": "Callahan", "ReportsTo": 2, "Country": "USA", "Title": "Inside Sales Coordinator", "HireDate": "1994-03-05 00:00:00", "BirthDate": "1958-01-09 00:00:00", "City": "Seattle", "Address": "4726 - 11th Ave. N.E." }, { "EmployeeID": 9, "FirstName": "Anne", "LastName": "Dodsworth", "ReportsTo": 5, "Country": "UK", "Title": "Sales Representative", "HireDate": "1994-11-15 00:00:00", "BirthDate": "1966-01-27 00:00:00", "City": "London", "Address": "7 Houndstooth Rd." } ]}); var columns = [ { text: 'FirstName', columnGroup: 'Name', dataField: 'FirstName', width: 200 }, { text: 'LastName', columnGroup: 'Name', dataField: 'LastName', width: 200 }, { text: 'Title', dataField: 'Title', width: 160 }, { text: 'Birth Date', dataField: 'BirthDate', cellsFormat: 'd', width: 120 }, { text: 'Hire Date', dataField: 'HireDate', cellsFormat: 'd', width: 120 }, { text: 'Address', dataField: 'Address', width: 250 }, { text: 'City', dataField: 'City', width: 120 }, { text: 'Country', dataField: 'Country' } ]; var columnGroups = [ { text: 'Name', name: 'Name' } ]; JQXElements.settings[ "treeGridSettings"] = { sortable:true,filterable:true, columns:columns, columnGroups:columnGroups, source:source, theme: "light" } window.onload = function() { document.querySelector( "jqx-tree-grid").addEventListener("sort", function(event) { // Your code here. }); }; </script></head><body> <jqx-tree-grid settings="treeGridSettings"></jqx-tree-grid>
|
|
addRow
|
Method
|
|
Parameter |
Type |
Description |
rowKey |
string |
|
rowData |
object |
|
rowPosition |
string |
|
parent |
string |
|
Return Value
void
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>TreeGrid Custom Element Filtering and Sorting</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,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/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtreegrid.js"></script> <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script> <script type="text/javascript"> var source = new jqx.dataAdapter({ dataType: "json", dataFields: [ { name: 'EmployeeID', type: 'number' }, { name: 'ReportsTo', type: 'number' }, { name: 'FirstName', type: 'string' }, { name: 'LastName', type: 'string' }, { name: 'Country', type: 'string' }, { name: 'City', type: 'string' }, { name: 'Address', type: 'string' }, { name: 'Title', type: 'string' }, { name: 'HireDate', type: 'date' }, { name: 'BirthDate', type: 'date' } ], hierarchy: { keyDataField: { name: 'EmployeeID' }, parentDataField: { name: 'ReportsTo' } }, id: 'EmployeeID', localData: [ { "EmployeeID": 1, "FirstName": "Nancy", "LastName": "Davolio", "ReportsTo": 2, "Country": "USA", "Title": "Sales Representative", "HireDate": "1992-05-01 00:00:00", "BirthDate": "1948-12-08 00:00:00", "City": "Seattle", "Address": "507 - 20th Ave. E.Apt. 2A" }, { "EmployeeID": 2, "FirstName": "Andrew", "LastName": "Fuller", "ReportsTo": null, "Country": "USA", "Title": "Vice President, Sales", "HireDate": "1992-08-14 00:00:00", "BirthDate": "1952-02-19 00:00:00", "City": "Tacoma", "Address": "908 W. Capital Way" }, { "EmployeeID": 3, "FirstName": "Janet", "LastName": "Leverling", "ReportsTo": 2, "Country": "USA", "Title": "Sales Representative", "HireDate": "1992-04-01 00:00:00", "BirthDate": "1963-08-30 00:00:00", "City": "Kirkland", "Address": "722 Moss Bay Blvd." }, { "EmployeeID": 4, "FirstName": "Margaret", "LastName": "Peacock", "ReportsTo": 2, "Country": "USA", "Title": "Sales Representative", "HireDate": "1993-05-03 00:00:00", "BirthDate": "1937-09-19 00:00:00", "City": "Redmond", "Address": "4110 Old Redmond Rd." }, { "EmployeeID": 5, "FirstName": "Steven", "LastName": "Buchanan", "ReportsTo": 2, "Country": "UK", "Title": "Sales Manager", "HireDate": "1993-10-17 00:00:00", "BirthDate": "1955-03-04 00:00:00", "City": "London", "Address": "14 Garrett Hill" }, { "EmployeeID": 6, "FirstName": "Michael", "LastName": "Suyama", "ReportsTo": 5, "Country": "UK", "Title": "Sales Representative", "HireDate": "1993-10-17 00:00:00", "BirthDate": "1963-07-02 00:00:00", "City": "London", "Address": "Coventry House Miner Rd." }, { "EmployeeID": 7, "FirstName": "Robert", "LastName": "King", "ReportsTo": 5, "Country": "UK", "Title": "Sales Representative", "HireDate": "1994-01-02 00:00:00", "BirthDate": "1960-05-29 00:00:00", "City": "London", "Address": "Edgeham Hollow Winchester Way" }, { "EmployeeID": 8, "FirstName": "Laura", "LastName": "Callahan", "ReportsTo": 2, "Country": "USA", "Title": "Inside Sales Coordinator", "HireDate": "1994-03-05 00:00:00", "BirthDate": "1958-01-09 00:00:00", "City": "Seattle", "Address": "4726 - 11th Ave. N.E." }, { "EmployeeID": 9, "FirstName": "Anne", "LastName": "Dodsworth", "ReportsTo": 5, "Country": "UK", "Title": "Sales Representative", "HireDate": "1994-11-15 00:00:00", "BirthDate": "1966-01-27 00:00:00", "City": "London", "Address": "7 Houndstooth Rd." } ]}); var columns = [ { text: 'FirstName', columnGroup: 'Name', dataField: 'FirstName', width: 200 }, { text: 'LastName', columnGroup: 'Name', dataField: 'LastName', width: 200 }, { text: 'Title', dataField: 'Title', width: 160 }, { text: 'Birth Date', dataField: 'BirthDate', cellsFormat: 'd', width: 120 }, { text: 'Hire Date', dataField: 'HireDate', cellsFormat: 'd', width: 120 }, { text: 'Address', dataField: 'Address', width: 250 }, { text: 'City', dataField: 'City', width: 120 }, { text: 'Country', dataField: 'Country' } ]; var columnGroups = [ { text: 'Name', name: 'Name' } ]; JQXElements.settings[ "treeGridSettings"] = { } window.onload = function() { document.querySelector( "jqx-tree-grid").addRow(10,{}, 'first'); } </script></head><body> <jqx-tree-grid settings="treeGridSettings"></jqx-tree-grid>
|
addFilter
|
Method
|
|
Parameter |
Type |
Description |
dataField |
string |
|
filerGroup |
object |
|
Return Value
void
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>TreeGrid Custom Element Filtering and Sorting</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,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/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtreegrid.js"></script> <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script> <script type="text/javascript"> var source = new jqx.dataAdapter({ dataType: "json", dataFields: [ { name: 'EmployeeID', type: 'number' }, { name: 'ReportsTo', type: 'number' }, { name: 'FirstName', type: 'string' }, { name: 'LastName', type: 'string' }, { name: 'Country', type: 'string' }, { name: 'City', type: 'string' }, { name: 'Address', type: 'string' }, { name: 'Title', type: 'string' }, { name: 'HireDate', type: 'date' }, { name: 'BirthDate', type: 'date' } ], hierarchy: { keyDataField: { name: 'EmployeeID' }, parentDataField: { name: 'ReportsTo' } }, id: 'EmployeeID', localData: [ { "EmployeeID": 1, "FirstName": "Nancy", "LastName": "Davolio", "ReportsTo": 2, "Country": "USA", "Title": "Sales Representative", "HireDate": "1992-05-01 00:00:00", "BirthDate": "1948-12-08 00:00:00", "City": "Seattle", "Address": "507 - 20th Ave. E.Apt. 2A" }, { "EmployeeID": 2, "FirstName": "Andrew", "LastName": "Fuller", "ReportsTo": null, "Country": "USA", "Title": "Vice President, Sales", "HireDate": "1992-08-14 00:00:00", "BirthDate": "1952-02-19 00:00:00", "City": "Tacoma", "Address": "908 W. Capital Way" }, { "EmployeeID": 3, "FirstName": "Janet", "LastName": "Leverling", "ReportsTo": 2, "Country": "USA", "Title": "Sales Representative", "HireDate": "1992-04-01 00:00:00", "BirthDate": "1963-08-30 00:00:00", "City": "Kirkland", "Address": "722 Moss Bay Blvd." }, { "EmployeeID": 4, "FirstName": "Margaret", "LastName": "Peacock", "ReportsTo": 2, "Country": "USA", "Title": "Sales Representative", "HireDate": "1993-05-03 00:00:00", "BirthDate": "1937-09-19 00:00:00", "City": "Redmond", "Address": "4110 Old Redmond Rd." }, { "EmployeeID": 5, "FirstName": "Steven", "LastName": "Buchanan", "ReportsTo": 2, "Country": "UK", "Title": "Sales Manager", "HireDate": "1993-10-17 00:00:00", "BirthDate": "1955-03-04 00:00:00", "City": "London", "Address": "14 Garrett Hill" }, { "EmployeeID": 6, "FirstName": "Michael", "LastName": "Suyama", "ReportsTo": 5, "Country": "UK", "Title": "Sales Representative", "HireDate": "1993-10-17 00:00:00", "BirthDate": "1963-07-02 00:00:00", "City": "London", "Address": "Coventry House Miner Rd." }, { "EmployeeID": 7, "FirstName": "Robert", "LastName": "King", "ReportsTo": 5, "Country": "UK", "Title": "Sales Representative", "HireDate": "1994-01-02 00:00:00", "BirthDate": "1960-05-29 00:00:00", "City": "London", "Address": "Edgeham Hollow Winchester Way" }, { "EmployeeID": 8, "FirstName": "Laura", "LastName": "Callahan", "ReportsTo": 2, "Country": "USA", "Title": "Inside Sales Coordinator", "HireDate": "1994-03-05 00:00:00", "BirthDate": "1958-01-09 00:00:00", "City": "Seattle", "Address": "4726 - 11th Ave. N.E." }, { "EmployeeID": 9, "FirstName": "Anne", "LastName": "Dodsworth", "ReportsTo": 5, "Country": "UK", "Title": "Sales Representative", "HireDate": "1994-11-15 00:00:00", "BirthDate": "1966-01-27 00:00:00", "City": "London", "Address": "7 Houndstooth Rd." } ]}); var columns = [ { text: 'FirstName', columnGroup: 'Name', dataField: 'FirstName', width: 200 }, { text: 'LastName', columnGroup: 'Name', dataField: 'LastName', width: 200 }, { text: 'Title', dataField: 'Title', width: 160 }, { text: 'Birth Date', dataField: 'BirthDate', cellsFormat: 'd', width: 120 }, { text: 'Hire Date', dataField: 'HireDate', cellsFormat: 'd', width: 120 }, { text: 'Address', dataField: 'Address', width: 250 }, { text: 'City', dataField: 'City', width: 120 }, { text: 'Country', dataField: 'Country' } ]; var columnGroups = [ { text: 'Name', name: 'Name' } ]; JQXElements.settings[ "treeGridSettings"] = { } window.onload = function() { document.querySelector( "jqx-tree-grid").addFilter( 'firstName',new $.jqx.filtergroup()); } </script></head><body> <jqx-tree-grid settings="treeGridSettings"></jqx-tree-grid>
|
applyFilters
|
Method
|
|
Parameter |
Type |
Description |
None |
|
|
Return Value
void
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>TreeGrid Custom Element Filtering and Sorting</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,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/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtreegrid.js"></script> <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script> <script type="text/javascript"> var source = new jqx.dataAdapter({ dataType: "json", dataFields: [ { name: 'EmployeeID', type: 'number' }, { name: 'ReportsTo', type: 'number' }, { name: 'FirstName', type: 'string' }, { name: 'LastName', type: 'string' }, { name: 'Country', type: 'string' }, { name: 'City', type: 'string' }, { name: 'Address', type: 'string' }, { name: 'Title', type: 'string' }, { name: 'HireDate', type: 'date' }, { name: 'BirthDate', type: 'date' } ], hierarchy: { keyDataField: { name: 'EmployeeID' }, parentDataField: { name: 'ReportsTo' } }, id: 'EmployeeID', localData: [ { "EmployeeID": 1, "FirstName": "Nancy", "LastName": "Davolio", "ReportsTo": 2, "Country": "USA", "Title": "Sales Representative", "HireDate": "1992-05-01 00:00:00", "BirthDate": "1948-12-08 00:00:00", "City": "Seattle", "Address": "507 - 20th Ave. E.Apt. 2A" }, { "EmployeeID": 2, "FirstName": "Andrew", "LastName": "Fuller", "ReportsTo": null, "Country": "USA", "Title": "Vice President, Sales", "HireDate": "1992-08-14 00:00:00", "BirthDate": "1952-02-19 00:00:00", "City": "Tacoma", "Address": "908 W. Capital Way" }, { "EmployeeID": 3, "FirstName": "Janet", "LastName": "Leverling", "ReportsTo": 2, "Country": "USA", "Title": "Sales Representative", "HireDate": "1992-04-01 00:00:00", "BirthDate": "1963-08-30 00:00:00", "City": "Kirkland", "Address": "722 Moss Bay Blvd." }, { "EmployeeID": 4, "FirstName": "Margaret", "LastName": "Peacock", "ReportsTo": 2, "Country": "USA", "Title": "Sales Representative", "HireDate": "1993-05-03 00:00:00", "BirthDate": "1937-09-19 00:00:00", "City": "Redmond", "Address": "4110 Old Redmond Rd." }, { "EmployeeID": 5, "FirstName": "Steven", "LastName": "Buchanan", "ReportsTo": 2, "Country": "UK", "Title": "Sales Manager", "HireDate": "1993-10-17 00:00:00", "BirthDate": "1955-03-04 00:00:00", "City": "London", "Address": "14 Garrett Hill" }, { "EmployeeID": 6, "FirstName": "Michael", "LastName": "Suyama", "ReportsTo": 5, "Country": "UK", "Title": "Sales Representative", "HireDate": "1993-10-17 00:00:00", "BirthDate": "1963-07-02 00:00:00", "City": "London", "Address": "Coventry House Miner Rd." }, { "EmployeeID": 7, "FirstName": "Robert", "LastName": "King", "ReportsTo": 5, "Country": "UK", "Title": "Sales Representative", "HireDate": "1994-01-02 00:00:00", "BirthDate": "1960-05-29 00:00:00", "City": "London", "Address": "Edgeham Hollow Winchester Way" }, { "EmployeeID": 8, "FirstName": "Laura", "LastName": "Callahan", "ReportsTo": 2, "Country": "USA", "Title": "Inside Sales Coordinator", "HireDate": "1994-03-05 00:00:00", "BirthDate": "1958-01-09 00:00:00", "City": "Seattle", "Address": "4726 - 11th Ave. N.E." }, { "EmployeeID": 9, "FirstName": "Anne", "LastName": "Dodsworth", "ReportsTo": 5, "Country": "UK", "Title": "Sales Representative", "HireDate": "1994-11-15 00:00:00", "BirthDate": "1966-01-27 00:00:00", "City": "London", "Address": "7 Houndstooth Rd." } ]}); var columns = [ { text: 'FirstName', columnGroup: 'Name', dataField: 'FirstName', width: 200 }, { text: 'LastName', columnGroup: 'Name', dataField: 'LastName', width: 200 }, { text: 'Title', dataField: 'Title', width: 160 }, { text: 'Birth Date', dataField: 'BirthDate', cellsFormat: 'd', width: 120 }, { text: 'Hire Date', dataField: 'HireDate', cellsFormat: 'd', width: 120 }, { text: 'Address', dataField: 'Address', width: 250 }, { text: 'City', dataField: 'City', width: 120 }, { text: 'Country', dataField: 'Country' } ]; var columnGroups = [ { text: 'Name', name: 'Name' } ]; JQXElements.settings[ "treeGridSettings"] = { } window.onload = function() { document.querySelector( "jqx-tree-grid").applyFilters(); } </script></head><body> <jqx-tree-grid settings="treeGridSettings"></jqx-tree-grid>
|
beginUpdate
|
Method
|
|
Parameter |
Type |
Description |
None |
|
|
Return Value
void
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>TreeGrid Custom Element Filtering and Sorting</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,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/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtreegrid.js"></script> <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script> <script type="text/javascript"> var source = new jqx.dataAdapter({ dataType: "json", dataFields: [ { name: 'EmployeeID', type: 'number' }, { name: 'ReportsTo', type: 'number' }, { name: 'FirstName', type: 'string' }, { name: 'LastName', type: 'string' }, { name: 'Country', type: 'string' }, { name: 'City', type: 'string' }, { name: 'Address', type: 'string' }, { name: 'Title', type: 'string' }, { name: 'HireDate', type: 'date' }, { name: 'BirthDate', type: 'date' } ], hierarchy: { keyDataField: { name: 'EmployeeID' }, parentDataField: { name: 'ReportsTo' } }, id: 'EmployeeID', localData: [ { "EmployeeID": 1, "FirstName": "Nancy", "LastName": "Davolio", "ReportsTo": 2, "Country": "USA", "Title": "Sales Representative", "HireDate": "1992-05-01 00:00:00", "BirthDate": "1948-12-08 00:00:00", "City": "Seattle", "Address": "507 - 20th Ave. E.Apt. 2A" }, { "EmployeeID": 2, "FirstName": "Andrew", "LastName": "Fuller", "ReportsTo": null, "Country": "USA", "Title": "Vice President, Sales", "HireDate": "1992-08-14 00:00:00", "BirthDate": "1952-02-19 00:00:00", "City": "Tacoma", "Address": "908 W. Capital Way" }, { "EmployeeID": 3, "FirstName": "Janet", "LastName": "Leverling", "ReportsTo": 2, "Country": "USA", "Title": "Sales Representative", "HireDate": "1992-04-01 00:00:00", "BirthDate": "1963-08-30 00:00:00", "City": "Kirkland", "Address": "722 Moss Bay Blvd." }, { "EmployeeID": 4, "FirstName": "Margaret", "LastName": "Peacock", "ReportsTo": 2, "Country": "USA", "Title": "Sales Representative", "HireDate": "1993-05-03 00:00:00", "BirthDate": "1937-09-19 00:00:00", "City": "Redmond", "Address": "4110 Old Redmond Rd." }, { "EmployeeID": 5, "FirstName": "Steven", "LastName": "Buchanan", "ReportsTo": 2, "Country": "UK", "Title": "Sales Manager", "HireDate": "1993-10-17 00:00:00", "BirthDate": "1955-03-04 00:00:00", "City": "London", "Address": "14 Garrett Hill" }, { "EmployeeID": 6, "FirstName": "Michael", "LastName": "Suyama", "ReportsTo": 5, "Country": "UK", "Title": "Sales Representative", "HireDate": "1993-10-17 00:00:00", "BirthDate": "1963-07-02 00:00:00", "City": "London", "Address": "Coventry House Miner Rd." }, { "EmployeeID": 7, "FirstName": "Robert", "LastName": "King", "ReportsTo": 5, "Country": "UK", "Title": "Sales Representative", "HireDate": "1994-01-02 00:00:00", "BirthDate": "1960-05-29 00:00:00", "City": "London", "Address": "Edgeham Hollow Winchester Way" }, { "EmployeeID": 8, "FirstName": "Laura", "LastName": "Callahan", "ReportsTo": 2, "Country": "USA", "Title": "Inside Sales Coordinator", "HireDate": "1994-03-05 00:00:00", "BirthDate": "1958-01-09 00:00:00", "City": "Seattle", "Address": "4726 - 11th Ave. N.E." }, { "EmployeeID": 9, "FirstName": "Anne", "LastName": "Dodsworth", "ReportsTo": 5, "Country": "UK", "Title": "Sales Representative", "HireDate": "1994-11-15 00:00:00", "BirthDate": "1966-01-27 00:00:00", "City": "London", "Address": "7 Houndstooth Rd." } ]}); var columns = [ { text: 'FirstName', columnGroup: 'Name', dataField: 'FirstName', width: 200 }, { text: 'LastName', columnGroup: 'Name', dataField: 'LastName', width: 200 }, { text: 'Title', dataField: 'Title', width: 160 }, { text: 'Birth Date', dataField: 'BirthDate', cellsFormat: 'd', width: 120 }, { text: 'Hire Date', dataField: 'HireDate', cellsFormat: 'd', width: 120 }, { text: 'Address', dataField: 'Address', width: 250 }, { text: 'City', dataField: 'City', width: 120 }, { text: 'Country', dataField: 'Country' } ]; var columnGroups = [ { text: 'Name', name: 'Name' } ]; JQXElements.settings[ "treeGridSettings"] = { } window.onload = function() { document.querySelector( "jqx-tree-grid").beginUpdate(); } </script></head><body> <jqx-tree-grid settings="treeGridSettings"></jqx-tree-grid>
|
beginRowEdit
|
Method
|
|
Parameter |
Type |
Description |
rowKey |
string |
Unique ID which identifies the row |
Return Value
void
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>TreeGrid Custom Element Filtering and Sorting</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,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/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtreegrid.js"></script> <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script> <script type="text/javascript"> var source = new jqx.dataAdapter({ dataType: "json", dataFields: [ { name: 'EmployeeID', type: 'number' }, { name: 'ReportsTo', type: 'number' }, { name: 'FirstName', type: 'string' }, { name: 'LastName', type: 'string' }, { name: 'Country', type: 'string' }, { name: 'City', type: 'string' }, { name: 'Address', type: 'string' }, { name: 'Title', type: 'string' }, { name: 'HireDate', type: 'date' }, { name: 'BirthDate', type: 'date' } ], hierarchy: { keyDataField: { name: 'EmployeeID' }, parentDataField: { name: 'ReportsTo' } }, id: 'EmployeeID', localData: [ { "EmployeeID": 1, "FirstName": "Nancy", "LastName": "Davolio", "ReportsTo": 2, "Country": "USA", "Title": "Sales Representative", "HireDate": "1992-05-01 00:00:00", "BirthDate": "1948-12-08 00:00:00", "City": "Seattle", "Address": "507 - 20th Ave. E.Apt. 2A" }, { "EmployeeID": 2, "FirstName": "Andrew", "LastName": "Fuller", "ReportsTo": null, "Country": "USA", "Title": "Vice President, Sales", "HireDate": "1992-08-14 00:00:00", "BirthDate": "1952-02-19 00:00:00", "City": "Tacoma", "Address": "908 W. Capital Way" }, { "EmployeeID": 3, "FirstName": "Janet", "LastName": "Leverling", "ReportsTo": 2, "Country": "USA", "Title": "Sales Representative", "HireDate": "1992-04-01 00:00:00", "BirthDate": "1963-08-30 00:00:00", "City": "Kirkland", "Address": "722 Moss Bay Blvd." }, { "EmployeeID": 4, "FirstName": "Margaret", "LastName": "Peacock", "ReportsTo": 2, "Country": "USA", "Title": "Sales Representative", "HireDate": "1993-05-03 00:00:00", "BirthDate": "1937-09-19 00:00:00", "City": "Redmond", "Address": "4110 Old Redmond Rd." }, { "EmployeeID": 5, "FirstName": "Steven", "LastName": "Buchanan", "ReportsTo": 2, "Country": "UK", "Title": "Sales Manager", "HireDate": "1993-10-17 00:00:00", "BirthDate": "1955-03-04 00:00:00", "City": "London", "Address": "14 Garrett Hill" }, { "EmployeeID": 6, "FirstName": "Michael", "LastName": "Suyama", "ReportsTo": 5, "Country": "UK", "Title": "Sales Representative", "HireDate": "1993-10-17 00:00:00", "BirthDate": "1963-07-02 00:00:00", "City": "London", "Address": "Coventry House Miner Rd." }, { "EmployeeID": 7, "FirstName": "Robert", "LastName": "King", "ReportsTo": 5, "Country": "UK", "Title": "Sales Representative", "HireDate": "1994-01-02 00:00:00", "BirthDate": "1960-05-29 00:00:00", "City": "London", "Address": "Edgeham Hollow Winchester Way" }, { "EmployeeID": 8, "FirstName": "Laura", "LastName": "Callahan", "ReportsTo": 2, "Country": "USA", "Title": "Inside Sales Coordinator", "HireDate": "1994-03-05 00:00:00", "BirthDate": "1958-01-09 00:00:00", "City": "Seattle", "Address": "4726 - 11th Ave. N.E." }, { "EmployeeID": 9, "FirstName": "Anne", "LastName": "Dodsworth", "ReportsTo": 5, "Country": "UK", "Title": "Sales Representative", "HireDate": "1994-11-15 00:00:00", "BirthDate": "1966-01-27 00:00:00", "City": "London", "Address": "7 Houndstooth Rd." } ]}); var columns = [ { text: 'FirstName', columnGroup: 'Name', dataField: 'FirstName', width: 200 }, { text: 'LastName', columnGroup: 'Name', dataField: 'LastName', width: 200 }, { text: 'Title', dataField: 'Title', width: 160 }, { text: 'Birth Date', dataField: 'BirthDate', cellsFormat: 'd', width: 120 }, { text: 'Hire Date', dataField: 'HireDate', cellsFormat: 'd', width: 120 }, { text: 'Address', dataField: 'Address', width: 250 }, { text: 'City', dataField: 'City', width: 120 }, { text: 'Country', dataField: 'Country' } ]; var columnGroups = [ { text: 'Name', name: 'Name' } ]; JQXElements.settings[ "treeGridSettings"] = { } window.onload = function() { document.querySelector( "jqx-tree-grid").beginRowEdit(10); } </script></head><body> <jqx-tree-grid settings="treeGridSettings"></jqx-tree-grid>
|
beginCellEdit
|
Method
|
|
Parameter |
Type |
Description |
rowKey |
string |
Unique ID which identifies the row |
dataField |
string |
|
Return Value
void
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>TreeGrid Custom Element Filtering and Sorting</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,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/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtreegrid.js"></script> <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script> <script type="text/javascript"> var source = new jqx.dataAdapter({ dataType: "json", dataFields: [ { name: 'EmployeeID', type: 'number' }, { name: 'ReportsTo', type: 'number' }, { name: 'FirstName', type: 'string' }, { name: 'LastName', type: 'string' }, { name: 'Country', type: 'string' }, { name: 'City', type: 'string' }, { name: 'Address', type: 'string' }, { name: 'Title', type: 'string' }, { name: 'HireDate', type: 'date' }, { name: 'BirthDate', type: 'date' } ], hierarchy: { keyDataField: { name: 'EmployeeID' }, parentDataField: { name: 'ReportsTo' } }, id: 'EmployeeID', localData: [ { "EmployeeID": 1, "FirstName": "Nancy", "LastName": "Davolio", "ReportsTo": 2, "Country": "USA", "Title": "Sales Representative", "HireDate": "1992-05-01 00:00:00", "BirthDate": "1948-12-08 00:00:00", "City": "Seattle", "Address": "507 - 20th Ave. E.Apt. 2A" }, { "EmployeeID": 2, "FirstName": "Andrew", "LastName": "Fuller", "ReportsTo": null, "Country": "USA", "Title": "Vice President, Sales", "HireDate": "1992-08-14 00:00:00", "BirthDate": "1952-02-19 00:00:00", "City": "Tacoma", "Address": "908 W. Capital Way" }, { "EmployeeID": 3, "FirstName": "Janet", "LastName": "Leverling", "ReportsTo": 2, "Country": "USA", "Title": "Sales Representative", "HireDate": "1992-04-01 00:00:00", "BirthDate": "1963-08-30 00:00:00", "City": "Kirkland", "Address": "722 Moss Bay Blvd." }, { "EmployeeID": 4, "FirstName": "Margaret", "LastName": "Peacock", "ReportsTo": 2, "Country": "USA", "Title": "Sales Representative", "HireDate": "1993-05-03 00:00:00", "BirthDate": "1937-09-19 00:00:00", "City": "Redmond", "Address": "4110 Old Redmond Rd." }, { "EmployeeID": 5, "FirstName": "Steven", "LastName": "Buchanan", "ReportsTo": 2, "Country": "UK", "Title": "Sales Manager", "HireDate": "1993-10-17 00:00:00", "BirthDate": "1955-03-04 00:00:00", "City": "London", "Address": "14 Garrett Hill" }, { "EmployeeID": 6, "FirstName": "Michael", "LastName": "Suyama", "ReportsTo": 5, "Country": "UK", "Title": "Sales Representative", "HireDate": "1993-10-17 00:00:00", "BirthDate": "1963-07-02 00:00:00", "City": "London", "Address": "Coventry House Miner Rd." }, { "EmployeeID": 7, "FirstName": "Robert", "LastName": "King", "ReportsTo": 5, "Country": "UK", "Title": "Sales Representative", "HireDate": "1994-01-02 00:00:00", "BirthDate": "1960-05-29 00:00:00", "City": "London", "Address": "Edgeham Hollow Winchester Way" }, { "EmployeeID": 8, "FirstName": "Laura", "LastName": "Callahan", "ReportsTo": 2, "Country": "USA", "Title": "Inside Sales Coordinator", "HireDate": "1994-03-05 00:00:00", "BirthDate": "1958-01-09 00:00:00", "City": "Seattle", "Address": "4726 - 11th Ave. N.E." }, { "EmployeeID": 9, "FirstName": "Anne", "LastName": "Dodsworth", "ReportsTo": 5, "Country": "UK", "Title": "Sales Representative", "HireDate": "1994-11-15 00:00:00", "BirthDate": "1966-01-27 00:00:00", "City": "London", "Address": "7 Houndstooth Rd." } ]}); var columns = [ { text: 'FirstName', columnGroup: 'Name', dataField: 'FirstName', width: 200 }, { text: 'LastName', columnGroup: 'Name', dataField: 'LastName', width: 200 }, { text: 'Title', dataField: 'Title', width: 160 }, { text: 'Birth Date', dataField: 'BirthDate', cellsFormat: 'd', width: 120 }, { text: 'Hire Date', dataField: 'HireDate', cellsFormat: 'd', width: 120 }, { text: 'Address', dataField: 'Address', width: 250 }, { text: 'City', dataField: 'City', width: 120 }, { text: 'Country', dataField: 'Country' } ]; var columnGroups = [ { text: 'Name', name: 'Name' } ]; JQXElements.settings[ "treeGridSettings"] = { } window.onload = function() { document.querySelector( "jqx-tree-grid").beginCellEdit(10, 'firstName'); } </script></head><body> <jqx-tree-grid settings="treeGridSettings"></jqx-tree-grid>
|
clearSelection
|
Method
|
|
Parameter |
Type |
Description |
None |
|
|
Return Value
void
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>TreeGrid Custom Element Filtering and Sorting</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,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/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtreegrid.js"></script> <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script> <script type="text/javascript"> var source = new jqx.dataAdapter({ dataType: "json", dataFields: [ { name: 'EmployeeID', type: 'number' }, { name: 'ReportsTo', type: 'number' }, { name: 'FirstName', type: 'string' }, { name: 'LastName', type: 'string' }, { name: 'Country', type: 'string' }, { name: 'City', type: 'string' }, { name: 'Address', type: 'string' }, { name: 'Title', type: 'string' }, { name: 'HireDate', type: 'date' }, { name: 'BirthDate', type: 'date' } ], hierarchy: { keyDataField: { name: 'EmployeeID' }, parentDataField: { name: 'ReportsTo' } }, id: 'EmployeeID', localData: [ { "EmployeeID": 1, "FirstName": "Nancy", "LastName": "Davolio", "ReportsTo": 2, "Country": "USA", "Title": "Sales Representative", "HireDate": "1992-05-01 00:00:00", "BirthDate": "1948-12-08 00:00:00", "City": "Seattle", "Address": "507 - 20th Ave. E.Apt. 2A" }, { "EmployeeID": 2, "FirstName": "Andrew", "LastName": "Fuller", "ReportsTo": null, "Country": "USA", "Title": "Vice President, Sales", "HireDate": "1992-08-14 00:00:00", "BirthDate": "1952-02-19 00:00:00", "City": "Tacoma", "Address": "908 W. Capital Way" }, { "EmployeeID": 3, "FirstName": "Janet", "LastName": "Leverling", "ReportsTo": 2, "Country": "USA", "Title": "Sales Representative", "HireDate": "1992-04-01 00:00:00", "BirthDate": "1963-08-30 00:00:00", "City": "Kirkland", "Address": "722 Moss Bay Blvd." }, { "EmployeeID": 4, "FirstName": "Margaret", "LastName": "Peacock", "ReportsTo": 2, "Country": "USA", "Title": "Sales Representative", "HireDate": "1993-05-03 00:00:00", "BirthDate": "1937-09-19 00:00:00", "City": "Redmond", "Address": "4110 Old Redmond Rd." }, { "EmployeeID": 5, "FirstName": "Steven", "LastName": "Buchanan", "ReportsTo": 2, "Country": "UK", "Title": "Sales Manager", "HireDate": "1993-10-17 00:00:00", "BirthDate": "1955-03-04 00:00:00", "City": "London", "Address": "14 Garrett Hill" }, { "EmployeeID": 6, "FirstName": "Michael", "LastName": "Suyama", "ReportsTo": 5, "Country": "UK", "Title": "Sales Representative", "HireDate": "1993-10-17 00:00:00", "BirthDate": "1963-07-02 00:00:00", "City": "London", "Address": "Coventry House Miner Rd." }, { "EmployeeID": 7, "FirstName": "Robert", "LastName": "King", "ReportsTo": 5, "Country": "UK", "Title": "Sales Representative", "HireDate": "1994-01-02 00:00:00", "BirthDate": "1960-05-29 00:00:00", "City": "London", "Address": "Edgeham Hollow Winchester Way" }, { "EmployeeID": 8, "FirstName": "Laura", "LastName": "Callahan", "ReportsTo": 2, "Country": "USA", "Title": "Inside Sales Coordinator", "HireDate": "1994-03-05 00:00:00", "BirthDate": "1958-01-09 00:00:00", "City": "Seattle", "Address": "4726 - 11th Ave. N.E." }, { "EmployeeID": 9, "FirstName": "Anne", "LastName": "Dodsworth", "ReportsTo": 5, "Country": "UK", "Title": "Sales Representative", "HireDate": "1994-11-15 00:00:00", "BirthDate": "1966-01-27 00:00:00", "City": "London", "Address": "7 Houndstooth Rd." } ]}); var columns = [ { text: 'FirstName', columnGroup: 'Name', dataField: 'FirstName', width: 200 }, { text: 'LastName', columnGroup: 'Name', dataField: 'LastName', width: 200 }, { text: 'Title', dataField: 'Title', width: 160 }, { text: 'Birth Date', dataField: 'BirthDate', cellsFormat: 'd', width: 120 }, { text: 'Hire Date', dataField: 'HireDate', cellsFormat: 'd', width: 120 }, { text: 'Address', dataField: 'Address', width: 250 }, { text: 'City', dataField: 'City', width: 120 }, { text: 'Country', dataField: 'Country' } ]; var columnGroups = [ { text: 'Name', name: 'Name' } ]; JQXElements.settings[ "treeGridSettings"] = { } window.onload = function() { document.querySelector( "jqx-tree-grid").clearSelection(); } </script></head><body> <jqx-tree-grid settings="treeGridSettings"></jqx-tree-grid>
|
clearFilters
|
Method
|
|
Parameter |
Type |
Description |
None |
|
|
Return Value
void
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>TreeGrid Custom Element Filtering and Sorting</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,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/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtreegrid.js"></script> <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script> <script type="text/javascript"> var source = new jqx.dataAdapter({ dataType: "json", dataFields: [ { name: 'EmployeeID', type: 'number' }, { name: 'ReportsTo', type: 'number' }, { name: 'FirstName', type: 'string' }, { name: 'LastName', type: 'string' }, { name: 'Country', type: 'string' }, { name: 'City', type: 'string' }, { name: 'Address', type: 'string' }, { name: 'Title', type: 'string' }, { name: 'HireDate', type: 'date' }, { name: 'BirthDate', type: 'date' } ], hierarchy: { keyDataField: { name: 'EmployeeID' }, parentDataField: { name: 'ReportsTo' } }, id: 'EmployeeID', localData: [ { "EmployeeID": 1, "FirstName": "Nancy", "LastName": "Davolio", "ReportsTo": 2, "Country": "USA", "Title": "Sales Representative", "HireDate": "1992-05-01 00:00:00", "BirthDate": "1948-12-08 00:00:00", "City": "Seattle", "Address": "507 - 20th Ave. E.Apt. 2A" }, { "EmployeeID": 2, "FirstName": "Andrew", "LastName": "Fuller", "ReportsTo": null, "Country": "USA", "Title": "Vice President, Sales", "HireDate": "1992-08-14 00:00:00", "BirthDate": "1952-02-19 00:00:00", "City": "Tacoma", "Address": "908 W. Capital Way" }, { "EmployeeID": 3, "FirstName": "Janet", "LastName": "Leverling", "ReportsTo": 2, "Country": "USA", "Title": "Sales Representative", "HireDate": "1992-04-01 00:00:00", "BirthDate": "1963-08-30 00:00:00", "City": "Kirkland", "Address": "722 Moss Bay Blvd." }, { "EmployeeID": 4, "FirstName": "Margaret", "LastName": "Peacock", "ReportsTo": 2, "Country": "USA", "Title": "Sales Representative", "HireDate": "1993-05-03 00:00:00", "BirthDate": "1937-09-19 00:00:00", "City": "Redmond", "Address": "4110 Old Redmond Rd." }, { "EmployeeID": 5, "FirstName": "Steven", "LastName": "Buchanan", "ReportsTo": 2, "Country": "UK", "Title": "Sales Manager", "HireDate": "1993-10-17 00:00:00", "BirthDate": "1955-03-04 00:00:00", "City": "London", "Address": "14 Garrett Hill" }, { "EmployeeID": 6, "FirstName": "Michael", "LastName": "Suyama", "ReportsTo": 5, "Country": "UK", "Title": "Sales Representative", "HireDate": "1993-10-17 00:00:00", "BirthDate": "1963-07-02 00:00:00", "City": "London", "Address": "Coventry House Miner Rd." }, { "EmployeeID": 7, "FirstName": "Robert", "LastName": "King", "ReportsTo": 5, "Country": "UK", "Title": "Sales Representative", "HireDate": "1994-01-02 00:00:00", "BirthDate": "1960-05-29 00:00:00", "City": "London", "Address": "Edgeham Hollow Winchester Way" }, { "EmployeeID": 8, "FirstName": "Laura", "LastName": "Callahan", "ReportsTo": 2, "Country": "USA", "Title": "Inside Sales Coordinator", "HireDate": "1994-03-05 00:00:00", "BirthDate": "1958-01-09 00:00:00", "City": "Seattle", "Address": "4726 - 11th Ave. N.E." }, { "EmployeeID": 9, "FirstName": "Anne", "LastName": "Dodsworth", "ReportsTo": 5, "Country": "UK", "Title": "Sales Representative", "HireDate": "1994-11-15 00:00:00", "BirthDate": "1966-01-27 00:00:00", "City": "London", "Address": "7 Houndstooth Rd." } ]}); var columns = [ { text: 'FirstName', columnGroup: 'Name', dataField: 'FirstName', width: 200 }, { text: 'LastName', columnGroup: 'Name', dataField: 'LastName', width: 200 }, { text: 'Title', dataField: 'Title', width: 160 }, { text: 'Birth Date', dataField: 'BirthDate', cellsFormat: 'd', width: 120 }, { text: 'Hire Date', dataField: 'HireDate', cellsFormat: 'd', width: 120 }, { text: 'Address', dataField: 'Address', width: 250 }, { text: 'City', dataField: 'City', width: 120 }, { text: 'Country', dataField: 'Country' } ]; var columnGroups = [ { text: 'Name', name: 'Name' } ]; JQXElements.settings[ "treeGridSettings"] = { } window.onload = function() { document.querySelector( "jqx-tree-grid").clearFilters(); } </script></head><body> <jqx-tree-grid settings="treeGridSettings"></jqx-tree-grid>
|
clear
|
Method
|
|
Parameter |
Type |
Description |
None |
|
|
Return Value
void
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>TreeGrid Custom Element Filtering and Sorting</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,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/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtreegrid.js"></script> <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script> <script type="text/javascript"> var source = new jqx.dataAdapter({ dataType: "json", dataFields: [ { name: 'EmployeeID', type: 'number' }, { name: 'ReportsTo', type: 'number' }, { name: 'FirstName', type: 'string' }, { name: 'LastName', type: 'string' }, { name: 'Country', type: 'string' }, { name: 'City', type: 'string' }, { name: 'Address', type: 'string' }, { name: 'Title', type: 'string' }, { name: 'HireDate', type: 'date' }, { name: 'BirthDate', type: 'date' } ], hierarchy: { keyDataField: { name: 'EmployeeID' }, parentDataField: { name: 'ReportsTo' } }, id: 'EmployeeID', localData: [ { "EmployeeID": 1, "FirstName": "Nancy", "LastName": "Davolio", "ReportsTo": 2, "Country": "USA", "Title": "Sales Representative", "HireDate": "1992-05-01 00:00:00", "BirthDate": "1948-12-08 00:00:00", "City": "Seattle", "Address": "507 - 20th Ave. E.Apt. 2A" }, { "EmployeeID": 2, "FirstName": "Andrew", "LastName": "Fuller", "ReportsTo": null, "Country": "USA", "Title": "Vice President, Sales", "HireDate": "1992-08-14 00:00:00", "BirthDate": "1952-02-19 00:00:00", "City": "Tacoma", "Address": "908 W. Capital Way" }, { "EmployeeID": 3, "FirstName": "Janet", "LastName": "Leverling", "ReportsTo": 2, "Country": "USA", "Title": "Sales Representative", "HireDate": "1992-04-01 00:00:00", "BirthDate": "1963-08-30 00:00:00", "City": "Kirkland", "Address": "722 Moss Bay Blvd." }, { "EmployeeID": 4, "FirstName": "Margaret", "LastName": "Peacock", "ReportsTo": 2, "Country": "USA", "Title": "Sales Representative", "HireDate": "1993-05-03 00:00:00", "BirthDate": "1937-09-19 00:00:00", "City": "Redmond", "Address": "4110 Old Redmond Rd." }, { "EmployeeID": 5, "FirstName": "Steven", "LastName": "Buchanan", "ReportsTo": 2, "Country": "UK", "Title": "Sales Manager", "HireDate": "1993-10-17 00:00:00", "BirthDate": "1955-03-04 00:00:00", "City": "London", "Address": "14 Garrett Hill" }, { "EmployeeID": 6, "FirstName": "Michael", "LastName": "Suyama", "ReportsTo": 5, "Country": "UK", "Title": "Sales Representative", "HireDate": "1993-10-17 00:00:00", "BirthDate": "1963-07-02 00:00:00", "City": "London", "Address": "Coventry House Miner Rd." }, { "EmployeeID": 7, "FirstName": "Robert", "LastName": "King", "ReportsTo": 5, "Country": "UK", "Title": "Sales Representative", "HireDate": "1994-01-02 00:00:00", "BirthDate": "1960-05-29 00:00:00", "City": "London", "Address": "Edgeham Hollow Winchester Way" }, { "EmployeeID": 8, "FirstName": "Laura", "LastName": "Callahan", "ReportsTo": 2, "Country": "USA", "Title": "Inside Sales Coordinator", "HireDate": "1994-03-05 00:00:00", "BirthDate": "1958-01-09 00:00:00", "City": "Seattle", "Address": "4726 - 11th Ave. N.E." }, { "EmployeeID": 9, "FirstName": "Anne", "LastName": "Dodsworth", "ReportsTo": 5, "Country": "UK", "Title": "Sales Representative", "HireDate": "1994-11-15 00:00:00", "BirthDate": "1966-01-27 00:00:00", "City": "London", "Address": "7 Houndstooth Rd." } ]}); var columns = [ { text: 'FirstName', columnGroup: 'Name', dataField: 'FirstName', width: 200 }, { text: 'LastName', columnGroup: 'Name', dataField: 'LastName', width: 200 }, { text: 'Title', dataField: 'Title', width: 160 }, { text: 'Birth Date', dataField: 'BirthDate', cellsFormat: 'd', width: 120 }, { text: 'Hire Date', dataField: 'HireDate', cellsFormat: 'd', width: 120 }, { text: 'Address', dataField: 'Address', width: 250 }, { text: 'City', dataField: 'City', width: 120 }, { text: 'Country', dataField: 'Country' } ]; var columnGroups = [ { text: 'Name', name: 'Name' } ]; JQXElements.settings[ "treeGridSettings"] = { } window.onload = function() { document.querySelector( "jqx-tree-grid").clear(); } </script></head><body> <jqx-tree-grid settings="treeGridSettings"></jqx-tree-grid>
|
checkRow
|
Method
|
|
Parameter |
Type |
Description |
rowKey |
string |
Unique ID which identifies the row |
Return Value
void
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>TreeGrid Custom Element Filtering and Sorting</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,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/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtreegrid.js"></script> <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script> <script type="text/javascript"> var source = new jqx.dataAdapter({ dataType: "json", dataFields: [ { name: 'EmployeeID', type: 'number' }, { name: 'ReportsTo', type: 'number' }, { name: 'FirstName', type: 'string' }, { name: 'LastName', type: 'string' }, { name: 'Country', type: 'string' }, { name: 'City', type: 'string' }, { name: 'Address', type: 'string' }, { name: 'Title', type: 'string' }, { name: 'HireDate', type: 'date' }, { name: 'BirthDate', type: 'date' } ], hierarchy: { keyDataField: { name: 'EmployeeID' }, parentDataField: { name: 'ReportsTo' } }, id: 'EmployeeID', localData: [ { "EmployeeID": 1, "FirstName": "Nancy", "LastName": "Davolio", "ReportsTo": 2, "Country": "USA", "Title": "Sales Representative", "HireDate": "1992-05-01 00:00:00", "BirthDate": "1948-12-08 00:00:00", "City": "Seattle", "Address": "507 - 20th Ave. E.Apt. 2A" }, { "EmployeeID": 2, "FirstName": "Andrew", "LastName": "Fuller", "ReportsTo": null, "Country": "USA", "Title": "Vice President, Sales", "HireDate": "1992-08-14 00:00:00", "BirthDate": "1952-02-19 00:00:00", "City": "Tacoma", "Address": "908 W. Capital Way" }, { "EmployeeID": 3, "FirstName": "Janet", "LastName": "Leverling", "ReportsTo": 2, "Country": "USA", "Title": "Sales Representative", "HireDate": "1992-04-01 00:00:00", "BirthDate": "1963-08-30 00:00:00", "City": "Kirkland", "Address": "722 Moss Bay Blvd." }, { "EmployeeID": 4, "FirstName": "Margaret", "LastName": "Peacock", "ReportsTo": 2, "Country": "USA", "Title": "Sales Representative", "HireDate": "1993-05-03 00:00:00", "BirthDate": "1937-09-19 00:00:00", "City": "Redmond", "Address": "4110 Old Redmond Rd." }, { "EmployeeID": 5, "FirstName": "Steven", "LastName": "Buchanan", "ReportsTo": 2, "Country": "UK", "Title": "Sales Manager", "HireDate": "1993-10-17 00:00:00", "BirthDate": "1955-03-04 00:00:00", "City": "London", "Address": "14 Garrett Hill" }, { "EmployeeID": 6, "FirstName": "Michael", "LastName": "Suyama", "ReportsTo": 5, "Country": "UK", "Title": "Sales Representative", "HireDate": "1993-10-17 00:00:00", "BirthDate": "1963-07-02 00:00:00", "City": "London", "Address": "Coventry House Miner Rd." }, { "EmployeeID": 7, "FirstName": "Robert", "LastName": "King", "ReportsTo": 5, "Country": "UK", "Title": "Sales Representative", "HireDate": "1994-01-02 00:00:00", "BirthDate": "1960-05-29 00:00:00", "City": "London", "Address": "Edgeham Hollow Winchester Way" }, { "EmployeeID": 8, "FirstName": "Laura", "LastName": "Callahan", "ReportsTo": 2, "Country": "USA", "Title": "Inside Sales Coordinator", "HireDate": "1994-03-05 00:00:00", "BirthDate": "1958-01-09 00:00:00", "City": "Seattle", "Address": "4726 - 11th Ave. N.E." }, { "EmployeeID": 9, "FirstName": "Anne", "LastName": "Dodsworth", "ReportsTo": 5, "Country": "UK", "Title": "Sales Representative", "HireDate": "1994-11-15 00:00:00", "BirthDate": "1966-01-27 00:00:00", "City": "London", "Address": "7 Houndstooth Rd." } ]}); var columns = [ { text: 'FirstName', columnGroup: 'Name', dataField: 'FirstName', width: 200 }, { text: 'LastName', columnGroup: 'Name', dataField: 'LastName', width: 200 }, { text: 'Title', dataField: 'Title', width: 160 }, { text: 'Birth Date', dataField: 'BirthDate', cellsFormat: 'd', width: 120 }, { text: 'Hire Date', dataField: 'HireDate', cellsFormat: 'd', width: 120 }, { text: 'Address', dataField: 'Address', width: 250 }, { text: 'City', dataField: 'City', width: 120 }, { text: 'Country', dataField: 'Country' } ]; var columnGroups = [ { text: 'Name', name: 'Name' } ]; JQXElements.settings[ "treeGridSettings"] = { } window.onload = function() { document.querySelector( "jqx-tree-grid").checkRow(10); } </script></head><body> <jqx-tree-grid settings="treeGridSettings"></jqx-tree-grid>
|
collapseRow
|
Method
|
|
Parameter |
Type |
Description |
rowKey |
string |
Unique ID which identifies the row |
Return Value
void
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>TreeGrid Custom Element Filtering and Sorting</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,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/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtreegrid.js"></script> <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script> <script type="text/javascript"> var source = new jqx.dataAdapter({ dataType: "json", dataFields: [ { name: 'EmployeeID', type: 'number' }, { name: 'ReportsTo', type: 'number' }, { name: 'FirstName', type: 'string' }, { name: 'LastName', type: 'string' }, { name: 'Country', type: 'string' }, { name: 'City', type: 'string' }, { name: 'Address', type: 'string' }, { name: 'Title', type: 'string' }, { name: 'HireDate', type: 'date' }, { name: 'BirthDate', type: 'date' } ], hierarchy: { keyDataField: { name: 'EmployeeID' }, parentDataField: { name: 'ReportsTo' } }, id: 'EmployeeID', localData: [ { "EmployeeID": 1, "FirstName": "Nancy", "LastName": "Davolio", "ReportsTo": 2, "Country": "USA", "Title": "Sales Representative", "HireDate": "1992-05-01 00:00:00", "BirthDate": "1948-12-08 00:00:00", "City": "Seattle", "Address": "507 - 20th Ave. E.Apt. 2A" }, { "EmployeeID": 2, "FirstName": "Andrew", "LastName": "Fuller", "ReportsTo": null, "Country": "USA", "Title": "Vice President, Sales", "HireDate": "1992-08-14 00:00:00", "BirthDate": "1952-02-19 00:00:00", "City": "Tacoma", "Address": "908 W. Capital Way" }, { "EmployeeID": 3, "FirstName": "Janet", "LastName": "Leverling", "ReportsTo": 2, "Country": "USA", "Title": "Sales Representative", "HireDate": "1992-04-01 00:00:00", "BirthDate": "1963-08-30 00:00:00", "City": "Kirkland", "Address": "722 Moss Bay Blvd." }, { "EmployeeID": 4, "FirstName": "Margaret", "LastName": "Peacock", "ReportsTo": 2, "Country": "USA", "Title": "Sales Representative", "HireDate": "1993-05-03 00:00:00", "BirthDate": "1937-09-19 00:00:00", "City": "Redmond", "Address": "4110 Old Redmond Rd." }, { "EmployeeID": 5, "FirstName": "Steven", "LastName": "Buchanan", "ReportsTo": 2, "Country": "UK", "Title": "Sales Manager", "HireDate": "1993-10-17 00:00:00", "BirthDate": "1955-03-04 00:00:00", "City": "London", "Address": "14 Garrett Hill" }, { "EmployeeID": 6, "FirstName": "Michael", "LastName": "Suyama", "ReportsTo": 5, "Country": "UK", "Title": "Sales Representative", "HireDate": "1993-10-17 00:00:00", "BirthDate": "1963-07-02 00:00:00", "City": "London", "Address": "Coventry House Miner Rd." }, { "EmployeeID": 7, "FirstName": "Robert", "LastName": "King", "ReportsTo": 5, "Country": "UK", "Title": "Sales Representative", "HireDate": "1994-01-02 00:00:00", "BirthDate": "1960-05-29 00:00:00", "City": "London", "Address": "Edgeham Hollow Winchester Way" }, { "EmployeeID": 8, "FirstName": "Laura", "LastName": "Callahan", "ReportsTo": 2, "Country": "USA", "Title": "Inside Sales Coordinator", "HireDate": "1994-03-05 00:00:00", "BirthDate": "1958-01-09 00:00:00", "City": "Seattle", "Address": "4726 - 11th Ave. N.E." }, { "EmployeeID": 9, "FirstName": "Anne", "LastName": "Dodsworth", "ReportsTo": 5, "Country": "UK", "Title": "Sales Representative", "HireDate": "1994-11-15 00:00:00", "BirthDate": "1966-01-27 00:00:00", "City": "London", "Address": "7 Houndstooth Rd." } ]}); var columns = [ { text: 'FirstName', columnGroup: 'Name', dataField: 'FirstName', width: 200 }, { text: 'LastName', columnGroup: 'Name', dataField: 'LastName', width: 200 }, { text: 'Title', dataField: 'Title', width: 160 }, { text: 'Birth Date', dataField: 'BirthDate', cellsFormat: 'd', width: 120 }, { text: 'Hire Date', dataField: 'HireDate', cellsFormat: 'd', width: 120 }, { text: 'Address', dataField: 'Address', width: 250 }, { text: 'City', dataField: 'City', width: 120 }, { text: 'Country', dataField: 'Country' } ]; var columnGroups = [ { text: 'Name', name: 'Name' } ]; JQXElements.settings[ "treeGridSettings"] = { } window.onload = function() { document.querySelector( "jqx-tree-grid").collapseRow(10); } </script></head><body> <jqx-tree-grid settings="treeGridSettings"></jqx-tree-grid>
|
collapseAll
|
Method
|
|
Parameter |
Type |
Description |
None |
|
|
Return Value
void
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>TreeGrid Custom Element Filtering and Sorting</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,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/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtreegrid.js"></script> <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script> <script type="text/javascript"> var source = new jqx.dataAdapter({ dataType: "json", dataFields: [ { name: 'EmployeeID', type: 'number' }, { name: 'ReportsTo', type: 'number' }, { name: 'FirstName', type: 'string' }, { name: 'LastName', type: 'string' }, { name: 'Country', type: 'string' }, { name: 'City', type: 'string' }, { name: 'Address', type: 'string' }, { name: 'Title', type: 'string' }, { name: 'HireDate', type: 'date' }, { name: 'BirthDate', type: 'date' } ], hierarchy: { keyDataField: { name: 'EmployeeID' }, parentDataField: { name: 'ReportsTo' } }, id: 'EmployeeID', localData: [ { "EmployeeID": 1, "FirstName": "Nancy", "LastName": "Davolio", "ReportsTo": 2, "Country": "USA", "Title": "Sales Representative", "HireDate": "1992-05-01 00:00:00", "BirthDate": "1948-12-08 00:00:00", "City": "Seattle", "Address": "507 - 20th Ave. E.Apt. 2A" }, { "EmployeeID": 2, "FirstName": "Andrew", "LastName": "Fuller", "ReportsTo": null, "Country": "USA", "Title": "Vice President, Sales", "HireDate": "1992-08-14 00:00:00", "BirthDate": "1952-02-19 00:00:00", "City": "Tacoma", "Address": "908 W. Capital Way" }, { "EmployeeID": 3, "FirstName": "Janet", "LastName": "Leverling", "ReportsTo": 2, "Country": "USA", "Title": "Sales Representative", "HireDate": "1992-04-01 00:00:00", "BirthDate": "1963-08-30 00:00:00", "City": "Kirkland", "Address": "722 Moss Bay Blvd." }, { "EmployeeID": 4, "FirstName": "Margaret", "LastName": "Peacock", "ReportsTo": 2, "Country": "USA", "Title": "Sales Representative", "HireDate": "1993-05-03 00:00:00", "BirthDate": "1937-09-19 00:00:00", "City": "Redmond", "Address": "4110 Old Redmond Rd." }, { "EmployeeID": 5, "FirstName": "Steven", "LastName": "Buchanan", "ReportsTo": 2, "Country": "UK", "Title": "Sales Manager", "HireDate": "1993-10-17 00:00:00", "BirthDate": "1955-03-04 00:00:00", "City": "London", "Address": "14 Garrett Hill" }, { "EmployeeID": 6, "FirstName": "Michael", "LastName": "Suyama", "ReportsTo": 5, "Country": "UK", "Title": "Sales Representative", "HireDate": "1993-10-17 00:00:00", "BirthDate": "1963-07-02 00:00:00", "City": "London", "Address": "Coventry House Miner Rd." }, { "EmployeeID": 7, "FirstName": "Robert", "LastName": "King", "ReportsTo": 5, "Country": "UK", "Title": "Sales Representative", "HireDate": "1994-01-02 00:00:00", "BirthDate": "1960-05-29 00:00:00", "City": "London", "Address": "Edgeham Hollow Winchester Way" }, { "EmployeeID": 8, "FirstName": "Laura", "LastName": "Callahan", "ReportsTo": 2, "Country": "USA", "Title": "Inside Sales Coordinator", "HireDate": "1994-03-05 00:00:00", "BirthDate": "1958-01-09 00:00:00", "City": "Seattle", "Address": "4726 - 11th Ave. N.E." }, { "EmployeeID": 9, "FirstName": "Anne", "LastName": "Dodsworth", "ReportsTo": 5, "Country": "UK", "Title": "Sales Representative", "HireDate": "1994-11-15 00:00:00", "BirthDate": "1966-01-27 00:00:00", "City": "London", "Address": "7 Houndstooth Rd." } ]}); var columns = [ { text: 'FirstName', columnGroup: 'Name', dataField: 'FirstName', width: 200 }, { text: 'LastName', columnGroup: 'Name', dataField: 'LastName', width: 200 }, { text: 'Title', dataField: 'Title', width: 160 }, { text: 'Birth Date', dataField: 'BirthDate', cellsFormat: 'd', width: 120 }, { text: 'Hire Date', dataField: 'HireDate', cellsFormat: 'd', width: 120 }, { text: 'Address', dataField: 'Address', width: 250 }, { text: 'City', dataField: 'City', width: 120 }, { text: 'Country', dataField: 'Country' } ]; var columnGroups = [ { text: 'Name', name: 'Name' } ]; JQXElements.settings[ "treeGridSettings"] = { } window.onload = function() { document.querySelector( "jqx-tree-grid").collapseAll(); } </script></head><body> <jqx-tree-grid settings="treeGridSettings"></jqx-tree-grid>
|
destroy
|
Method
|
|
Parameter |
Type |
Description |
None |
|
|
Return Value
void
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>TreeGrid Custom Element Filtering and Sorting</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,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/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtreegrid.js"></script> <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script> <script type="text/javascript"> var source = new jqx.dataAdapter({ dataType: "json", dataFields: [ { name: 'EmployeeID', type: 'number' }, { name: 'ReportsTo', type: 'number' }, { name: 'FirstName', type: 'string' }, { name: 'LastName', type: 'string' }, { name: 'Country', type: 'string' }, { name: 'City', type: 'string' }, { name: 'Address', type: 'string' }, { name: 'Title', type: 'string' }, { name: 'HireDate', type: 'date' }, { name: 'BirthDate', type: 'date' } ], hierarchy: { keyDataField: { name: 'EmployeeID' }, parentDataField: { name: 'ReportsTo' } }, id: 'EmployeeID', localData: [ { "EmployeeID": 1, "FirstName": "Nancy", "LastName": "Davolio", "ReportsTo": 2, "Country": "USA", "Title": "Sales Representative", "HireDate": "1992-05-01 00:00:00", "BirthDate": "1948-12-08 00:00:00", "City": "Seattle", "Address": "507 - 20th Ave. E.Apt. 2A" }, { "EmployeeID": 2, "FirstName": "Andrew", "LastName": "Fuller", "ReportsTo": null, "Country": "USA", "Title": "Vice President, Sales", "HireDate": "1992-08-14 00:00:00", "BirthDate": "1952-02-19 00:00:00", "City": "Tacoma", "Address": "908 W. Capital Way" }, { "EmployeeID": 3, "FirstName": "Janet", "LastName": "Leverling", "ReportsTo": 2, "Country": "USA", "Title": "Sales Representative", "HireDate": "1992-04-01 00:00:00", "BirthDate": "1963-08-30 00:00:00", "City": "Kirkland", "Address": "722 Moss Bay Blvd." }, { "EmployeeID": 4, "FirstName": "Margaret", "LastName": "Peacock", "ReportsTo": 2, "Country": "USA", "Title": "Sales Representative", "HireDate": "1993-05-03 00:00:00", "BirthDate": "1937-09-19 00:00:00", "City": "Redmond", "Address": "4110 Old Redmond Rd." }, { "EmployeeID": 5, "FirstName": "Steven", "LastName": "Buchanan", "ReportsTo": 2, "Country": "UK", "Title": "Sales Manager", "HireDate": "1993-10-17 00:00:00", "BirthDate": "1955-03-04 00:00:00", "City": "London", "Address": "14 Garrett Hill" }, { "EmployeeID": 6, "FirstName": "Michael", "LastName": "Suyama", "ReportsTo": 5, "Country": "UK", "Title": "Sales Representative", "HireDate": "1993-10-17 00:00:00", "BirthDate": "1963-07-02 00:00:00", "City": "London", "Address": "Coventry House Miner Rd." }, { "EmployeeID": 7, "FirstName": "Robert", "LastName": "King", "ReportsTo": 5, "Country": "UK", "Title": "Sales Representative", "HireDate": "1994-01-02 00:00:00", "BirthDate": "1960-05-29 00:00:00", "City": "London", "Address": "Edgeham Hollow Winchester Way" }, { "EmployeeID": 8, "FirstName": "Laura", "LastName": "Callahan", "ReportsTo": 2, "Country": "USA", "Title": "Inside Sales Coordinator", "HireDate": "1994-03-05 00:00:00", "BirthDate": "1958-01-09 00:00:00", "City": "Seattle", "Address": "4726 - 11th Ave. N.E." }, { "EmployeeID": 9, "FirstName": "Anne", "LastName": "Dodsworth", "ReportsTo": 5, "Country": "UK", "Title": "Sales Representative", "HireDate": "1994-11-15 00:00:00", "BirthDate": "1966-01-27 00:00:00", "City": "London", "Address": "7 Houndstooth Rd." } ]}); var columns = [ { text: 'FirstName', columnGroup: 'Name', dataField: 'FirstName', width: 200 }, { text: 'LastName', columnGroup: 'Name', dataField: 'LastName', width: 200 }, { text: 'Title', dataField: 'Title', width: 160 }, { text: 'Birth Date', dataField: 'BirthDate', cellsFormat: 'd', width: 120 }, { text: 'Hire Date', dataField: 'HireDate', cellsFormat: 'd', width: 120 }, { text: 'Address', dataField: 'Address', width: 250 }, { text: 'City', dataField: 'City', width: 120 }, { text: 'Country', dataField: 'Country' } ]; var columnGroups = [ { text: 'Name', name: 'Name' } ]; JQXElements.settings[ "treeGridSettings"] = { } window.onload = function() { document.querySelector( "jqx-tree-grid").destroy(); } </script></head><body> <jqx-tree-grid settings="treeGridSettings"></jqx-tree-grid>
|
deleteRow
|
Method
|
|
Parameter |
Type |
Description |
rowKey |
string |
Unique ID which identifies the row |
Return Value
void
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>TreeGrid Custom Element Filtering and Sorting</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,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/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtreegrid.js"></script> <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script> <script type="text/javascript"> var source = new jqx.dataAdapter({ dataType: "json", dataFields: [ { name: 'EmployeeID', type: 'number' }, { name: 'ReportsTo', type: 'number' }, { name: 'FirstName', type: 'string' }, { name: 'LastName', type: 'string' }, { name: 'Country', type: 'string' }, { name: 'City', type: 'string' }, { name: 'Address', type: 'string' }, { name: 'Title', type: 'string' }, { name: 'HireDate', type: 'date' }, { name: 'BirthDate', type: 'date' } ], hierarchy: { keyDataField: { name: 'EmployeeID' }, parentDataField: { name: 'ReportsTo' } }, id: 'EmployeeID', localData: [ { "EmployeeID": 1, "FirstName": "Nancy", "LastName": "Davolio", "ReportsTo": 2, "Country": "USA", "Title": "Sales Representative", "HireDate": "1992-05-01 00:00:00", "BirthDate": "1948-12-08 00:00:00", "City": "Seattle", "Address": "507 - 20th Ave. E.Apt. 2A" }, { "EmployeeID": 2, "FirstName": "Andrew", "LastName": "Fuller", "ReportsTo": null, "Country": "USA", "Title": "Vice President, Sales", "HireDate": "1992-08-14 00:00:00", "BirthDate": "1952-02-19 00:00:00", "City": "Tacoma", "Address": "908 W. Capital Way" }, { "EmployeeID": 3, "FirstName": "Janet", "LastName": "Leverling", "ReportsTo": 2, "Country": "USA", "Title": "Sales Representative", "HireDate": "1992-04-01 00:00:00", "BirthDate": "1963-08-30 00:00:00", "City": "Kirkland", "Address": "722 Moss Bay Blvd." }, { "EmployeeID": 4, "FirstName": "Margaret", "LastName": "Peacock", "ReportsTo": 2, "Country": "USA", "Title": "Sales Representative", "HireDate": "1993-05-03 00:00:00", "BirthDate": "1937-09-19 00:00:00", "City": "Redmond", "Address": "4110 Old Redmond Rd." }, { "EmployeeID": 5, "FirstName": "Steven", "LastName": "Buchanan", "ReportsTo": 2, "Country": "UK", "Title": "Sales Manager", "HireDate": "1993-10-17 00:00:00", "BirthDate": "1955-03-04 00:00:00", "City": "London", "Address": "14 Garrett Hill" }, { "EmployeeID": 6, "FirstName": "Michael", "LastName": "Suyama", "ReportsTo": 5, "Country": "UK", "Title": "Sales Representative", "HireDate": "1993-10-17 00:00:00", "BirthDate": "1963-07-02 00:00:00", "City": "London", "Address": "Coventry House Miner Rd." }, { "EmployeeID": 7, "FirstName": "Robert", "LastName": "King", "ReportsTo": 5, "Country": "UK", "Title": "Sales Representative", "HireDate": "1994-01-02 00:00:00", "BirthDate": "1960-05-29 00:00:00", "City": "London", "Address": "Edgeham Hollow Winchester Way" }, { "EmployeeID": 8, "FirstName": "Laura", "LastName": "Callahan", "ReportsTo": 2, "Country": "USA", "Title": "Inside Sales Coordinator", "HireDate": "1994-03-05 00:00:00", "BirthDate": "1958-01-09 00:00:00", "City": "Seattle", "Address": "4726 - 11th Ave. N.E." }, { "EmployeeID": 9, "FirstName": "Anne", "LastName": "Dodsworth", "ReportsTo": 5, "Country": "UK", "Title": "Sales Representative", "HireDate": "1994-11-15 00:00:00", "BirthDate": "1966-01-27 00:00:00", "City": "London", "Address": "7 Houndstooth Rd." } ]}); var columns = [ { text: 'FirstName', columnGroup: 'Name', dataField: 'FirstName', width: 200 }, { text: 'LastName', columnGroup: 'Name', dataField: 'LastName', width: 200 }, { text: 'Title', dataField: 'Title', width: 160 }, { text: 'Birth Date', dataField: 'BirthDate', cellsFormat: 'd', width: 120 }, { text: 'Hire Date', dataField: 'HireDate', cellsFormat: 'd', width: 120 }, { text: 'Address', dataField: 'Address', width: 250 }, { text: 'City', dataField: 'City', width: 120 }, { text: 'Country', dataField: 'Country' } ]; var columnGroups = [ { text: 'Name', name: 'Name' } ]; JQXElements.settings[ "treeGridSettings"] = { } window.onload = function() { document.querySelector( "jqx-tree-grid").deleteRow(10); } </script></head><body> <jqx-tree-grid settings="treeGridSettings"></jqx-tree-grid>
|
expandRow
|
Method
|
|
Parameter |
Type |
Description |
rowKey |
string |
Unique ID which identifies the row |
Return Value
void
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>TreeGrid Custom Element Filtering and Sorting</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,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/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtreegrid.js"></script> <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script> <script type="text/javascript"> var source = new jqx.dataAdapter({ dataType: "json", dataFields: [ { name: 'EmployeeID', type: 'number' }, { name: 'ReportsTo', type: 'number' }, { name: 'FirstName', type: 'string' }, { name: 'LastName', type: 'string' }, { name: 'Country', type: 'string' }, { name: 'City', type: 'string' }, { name: 'Address', type: 'string' }, { name: 'Title', type: 'string' }, { name: 'HireDate', type: 'date' }, { name: 'BirthDate', type: 'date' } ], hierarchy: { keyDataField: { name: 'EmployeeID' }, parentDataField: { name: 'ReportsTo' } }, id: 'EmployeeID', localData: [ { "EmployeeID": 1, "FirstName": "Nancy", "LastName": "Davolio", "ReportsTo": 2, "Country": "USA", "Title": "Sales Representative", "HireDate": "1992-05-01 00:00:00", "BirthDate": "1948-12-08 00:00:00", "City": "Seattle", "Address": "507 - 20th Ave. E.Apt. 2A" }, { "EmployeeID": 2, "FirstName": "Andrew", "LastName": "Fuller", "ReportsTo": null, "Country": "USA", "Title": "Vice President, Sales", "HireDate": "1992-08-14 00:00:00", "BirthDate": "1952-02-19 00:00:00", "City": "Tacoma", "Address": "908 W. Capital Way" }, { "EmployeeID": 3, "FirstName": "Janet", "LastName": "Leverling", "ReportsTo": 2, "Country": "USA", "Title": "Sales Representative", "HireDate": "1992-04-01 00:00:00", "BirthDate": "1963-08-30 00:00:00", "City": "Kirkland", "Address": "722 Moss Bay Blvd." }, { "EmployeeID": 4, "FirstName": "Margaret", "LastName": "Peacock", "ReportsTo": 2, "Country": "USA", "Title": "Sales Representative", "HireDate": "1993-05-03 00:00:00", "BirthDate": "1937-09-19 00:00:00", "City": "Redmond", "Address": "4110 Old Redmond Rd." }, { "EmployeeID": 5, "FirstName": "Steven", "LastName": "Buchanan", "ReportsTo": 2, "Country": "UK", "Title": "Sales Manager", "HireDate": "1993-10-17 00:00:00", "BirthDate": "1955-03-04 00:00:00", "City": "London", "Address": "14 Garrett Hill" }, { "EmployeeID": 6, "FirstName": "Michael", "LastName": "Suyama", "ReportsTo": 5, "Country": "UK", "Title": "Sales Representative", "HireDate": "1993-10-17 00:00:00", "BirthDate": "1963-07-02 00:00:00", "City": "London", "Address": "Coventry House Miner Rd." }, { "EmployeeID": 7, "FirstName": "Robert", "LastName": "King", "ReportsTo": 5, "Country": "UK", "Title": "Sales Representative", "HireDate": "1994-01-02 00:00:00", "BirthDate": "1960-05-29 00:00:00", "City": "London", "Address": "Edgeham Hollow Winchester Way" }, { "EmployeeID": 8, "FirstName": "Laura", "LastName": "Callahan", "ReportsTo": 2, "Country": "USA", "Title": "Inside Sales Coordinator", "HireDate": "1994-03-05 00:00:00", "BirthDate": "1958-01-09 00:00:00", "City": "Seattle", "Address": "4726 - 11th Ave. N.E." }, { "EmployeeID": 9, "FirstName": "Anne", "LastName": "Dodsworth", "ReportsTo": 5, "Country": "UK", "Title": "Sales Representative", "HireDate": "1994-11-15 00:00:00", "BirthDate": "1966-01-27 00:00:00", "City": "London", "Address": "7 Houndstooth Rd." } ]}); var columns = [ { text: 'FirstName', columnGroup: 'Name', dataField: 'FirstName', width: 200 }, { text: 'LastName', columnGroup: 'Name', dataField: 'LastName', width: 200 }, { text: 'Title', dataField: 'Title', width: 160 }, { text: 'Birth Date', dataField: 'BirthDate', cellsFormat: 'd', width: 120 }, { text: 'Hire Date', dataField: 'HireDate', cellsFormat: 'd', width: 120 }, { text: 'Address', dataField: 'Address', width: 250 }, { text: 'City', dataField: 'City', width: 120 }, { text: 'Country', dataField: 'Country' } ]; var columnGroups = [ { text: 'Name', name: 'Name' } ]; JQXElements.settings[ "treeGridSettings"] = { } window.onload = function() { document.querySelector( "jqx-tree-grid").expandRow(10); } </script></head><body> <jqx-tree-grid settings="treeGridSettings"></jqx-tree-grid>
|
expandAll
|
Method
|
|
Parameter |
Type |
Description |
None |
|
|
Return Value
void
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>TreeGrid Custom Element Filtering and Sorting</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,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/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtreegrid.js"></script> <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script> <script type="text/javascript"> var source = new jqx.dataAdapter({ dataType: "json", dataFields: [ { name: 'EmployeeID', type: 'number' }, { name: 'ReportsTo', type: 'number' }, { name: 'FirstName', type: 'string' }, { name: 'LastName', type: 'string' }, { name: 'Country', type: 'string' }, { name: 'City', type: 'string' }, { name: 'Address', type: 'string' }, { name: 'Title', type: 'string' }, { name: 'HireDate', type: 'date' }, { name: 'BirthDate', type: 'date' } ], hierarchy: { keyDataField: { name: 'EmployeeID' }, parentDataField: { name: 'ReportsTo' } }, id: 'EmployeeID', localData: [ { "EmployeeID": 1, "FirstName": "Nancy", "LastName": "Davolio", "ReportsTo": 2, "Country": "USA", "Title": "Sales Representative", "HireDate": "1992-05-01 00:00:00", "BirthDate": "1948-12-08 00:00:00", "City": "Seattle", "Address": "507 - 20th Ave. E.Apt. 2A" }, { "EmployeeID": 2, "FirstName": "Andrew", "LastName": "Fuller", "ReportsTo": null, "Country": "USA", "Title": "Vice President, Sales", "HireDate": "1992-08-14 00:00:00", "BirthDate": "1952-02-19 00:00:00", "City": "Tacoma", "Address": "908 W. Capital Way" }, { "EmployeeID": 3, "FirstName": "Janet", "LastName": "Leverling", "ReportsTo": 2, "Country": "USA", "Title": "Sales Representative", "HireDate": "1992-04-01 00:00:00", "BirthDate": "1963-08-30 00:00:00", "City": "Kirkland", "Address": "722 Moss Bay Blvd." }, { "EmployeeID": 4, "FirstName": "Margaret", "LastName": "Peacock", "ReportsTo": 2, "Country": "USA", "Title": "Sales Representative", "HireDate": "1993-05-03 00:00:00", "BirthDate": "1937-09-19 00:00:00", "City": "Redmond", "Address": "4110 Old Redmond Rd." }, { "EmployeeID": 5, "FirstName": "Steven", "LastName": "Buchanan", "ReportsTo": 2, "Country": "UK", "Title": "Sales Manager", "HireDate": "1993-10-17 00:00:00", "BirthDate": "1955-03-04 00:00:00", "City": "London", "Address": "14 Garrett Hill" }, { "EmployeeID": 6, "FirstName": "Michael", "LastName": "Suyama", "ReportsTo": 5, "Country": "UK", "Title": "Sales Representative", "HireDate": "1993-10-17 00:00:00", "BirthDate": "1963-07-02 00:00:00", "City": "London", "Address": "Coventry House Miner Rd." }, { "EmployeeID": 7, "FirstName": "Robert", "LastName": "King", "ReportsTo": 5, "Country": "UK", "Title": "Sales Representative", "HireDate": "1994-01-02 00:00:00", "BirthDate": "1960-05-29 00:00:00", "City": "London", "Address": "Edgeham Hollow Winchester Way" }, { "EmployeeID": 8, "FirstName": "Laura", "LastName": "Callahan", "ReportsTo": 2, "Country": "USA", "Title": "Inside Sales Coordinator", "HireDate": "1994-03-05 00:00:00", "BirthDate": "1958-01-09 00:00:00", "City": "Seattle", "Address": "4726 - 11th Ave. N.E." }, { "EmployeeID": 9, "FirstName": "Anne", "LastName": "Dodsworth", "ReportsTo": 5, "Country": "UK", "Title": "Sales Representative", "HireDate": "1994-11-15 00:00:00", "BirthDate": "1966-01-27 00:00:00", "City": "London", "Address": "7 Houndstooth Rd." } ]}); var columns = [ { text: 'FirstName', columnGroup: 'Name', dataField: 'FirstName', width: 200 }, { text: 'LastName', columnGroup: 'Name', dataField: 'LastName', width: 200 }, { text: 'Title', dataField: 'Title', width: 160 }, { text: 'Birth Date', dataField: 'BirthDate', cellsFormat: 'd', width: 120 }, { text: 'Hire Date', dataField: 'HireDate', cellsFormat: 'd', width: 120 }, { text: 'Address', dataField: 'Address', width: 250 }, { text: 'City', dataField: 'City', width: 120 }, { text: 'Country', dataField: 'Country' } ]; var columnGroups = [ { text: 'Name', name: 'Name' } ]; JQXElements.settings[ "treeGridSettings"] = { } window.onload = function() { document.querySelector( "jqx-tree-grid").expandAll(); } </script></head><body> <jqx-tree-grid settings="treeGridSettings"></jqx-tree-grid>
|
endUpdate
|
Method
|
|
Parameter |
Type |
Description |
None |
|
|
Return Value
void
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>TreeGrid Custom Element Filtering and Sorting</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,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/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtreegrid.js"></script> <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script> <script type="text/javascript"> var source = new jqx.dataAdapter({ dataType: "json", dataFields: [ { name: 'EmployeeID', type: 'number' }, { name: 'ReportsTo', type: 'number' }, { name: 'FirstName', type: 'string' }, { name: 'LastName', type: 'string' }, { name: 'Country', type: 'string' }, { name: 'City', type: 'string' }, { name: 'Address', type: 'string' }, { name: 'Title', type: 'string' }, { name: 'HireDate', type: 'date' }, { name: 'BirthDate', type: 'date' } ], hierarchy: { keyDataField: { name: 'EmployeeID' }, parentDataField: { name: 'ReportsTo' } }, id: 'EmployeeID', localData: [ { "EmployeeID": 1, "FirstName": "Nancy", "LastName": "Davolio", "ReportsTo": 2, "Country": "USA", "Title": "Sales Representative", "HireDate": "1992-05-01 00:00:00", "BirthDate": "1948-12-08 00:00:00", "City": "Seattle", "Address": "507 - 20th Ave. E.Apt. 2A" }, { "EmployeeID": 2, "FirstName": "Andrew", "LastName": "Fuller", "ReportsTo": null, "Country": "USA", "Title": "Vice President, Sales", "HireDate": "1992-08-14 00:00:00", "BirthDate": "1952-02-19 00:00:00", "City": "Tacoma", "Address": "908 W. Capital Way" }, { "EmployeeID": 3, "FirstName": "Janet", "LastName": "Leverling", "ReportsTo": 2, "Country": "USA", "Title": "Sales Representative", "HireDate": "1992-04-01 00:00:00", "BirthDate": "1963-08-30 00:00:00", "City": "Kirkland", "Address": "722 Moss Bay Blvd." }, { "EmployeeID": 4, "FirstName": "Margaret", "LastName": "Peacock", "ReportsTo": 2, "Country": "USA", "Title": "Sales Representative", "HireDate": "1993-05-03 00:00:00", "BirthDate": "1937-09-19 00:00:00", "City": "Redmond", "Address": "4110 Old Redmond Rd." }, { "EmployeeID": 5, "FirstName": "Steven", "LastName": "Buchanan", "ReportsTo": 2, "Country": "UK", "Title": "Sales Manager", "HireDate": "1993-10-17 00:00:00", "BirthDate": "1955-03-04 00:00:00", "City": "London", "Address": "14 Garrett Hill" }, { "EmployeeID": 6, "FirstName": "Michael", "LastName": "Suyama", "ReportsTo": 5, "Country": "UK", "Title": "Sales Representative", "HireDate": "1993-10-17 00:00:00", "BirthDate": "1963-07-02 00:00:00", "City": "London", "Address": "Coventry House Miner Rd." }, { "EmployeeID": 7, "FirstName": "Robert", "LastName": "King", "ReportsTo": 5, "Country": "UK", "Title": "Sales Representative", "HireDate": "1994-01-02 00:00:00", "BirthDate": "1960-05-29 00:00:00", "City": "London", "Address": "Edgeham Hollow Winchester Way" }, { "EmployeeID": 8, "FirstName": "Laura", "LastName": "Callahan", "ReportsTo": 2, "Country": "USA", "Title": "Inside Sales Coordinator", "HireDate": "1994-03-05 00:00:00", "BirthDate": "1958-01-09 00:00:00", "City": "Seattle", "Address": "4726 - 11th Ave. N.E." }, { "EmployeeID": 9, "FirstName": "Anne", "LastName": "Dodsworth", "ReportsTo": 5, "Country": "UK", "Title": "Sales Representative", "HireDate": "1994-11-15 00:00:00", "BirthDate": "1966-01-27 00:00:00", "City": "London", "Address": "7 Houndstooth Rd." } ]}); var columns = [ { text: 'FirstName', columnGroup: 'Name', dataField: 'FirstName', width: 200 }, { text: 'LastName', columnGroup: 'Name', dataField: 'LastName', width: 200 }, { text: 'Title', dataField: 'Title', width: 160 }, { text: 'Birth Date', dataField: 'BirthDate', cellsFormat: 'd', width: 120 }, { text: 'Hire Date', dataField: 'HireDate', cellsFormat: 'd', width: 120 }, { text: 'Address', dataField: 'Address', width: 250 }, { text: 'City', dataField: 'City', width: 120 }, { text: 'Country', dataField: 'Country' } ]; var columnGroups = [ { text: 'Name', name: 'Name' } ]; JQXElements.settings[ "treeGridSettings"] = { } window.onload = function() { document.querySelector( "jqx-tree-grid").endUpdate(); } </script></head><body> <jqx-tree-grid settings="treeGridSettings"></jqx-tree-grid>
|
ensureRowVisible
|
Method
|
|
Parameter |
Type |
Description |
rowKey |
string |
Unique ID which identifies the row |
Return Value
void
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>TreeGrid Custom Element Filtering and Sorting</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,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/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtreegrid.js"></script> <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script> <script type="text/javascript"> var source = new jqx.dataAdapter({ dataType: "json", dataFields: [ { name: 'EmployeeID', type: 'number' }, { name: 'ReportsTo', type: 'number' }, { name: 'FirstName', type: 'string' }, { name: 'LastName', type: 'string' }, { name: 'Country', type: 'string' }, { name: 'City', type: 'string' }, { name: 'Address', type: 'string' }, { name: 'Title', type: 'string' }, { name: 'HireDate', type: 'date' }, { name: 'BirthDate', type: 'date' } ], hierarchy: { keyDataField: { name: 'EmployeeID' }, parentDataField: { name: 'ReportsTo' } }, id: 'EmployeeID', localData: [ { "EmployeeID": 1, "FirstName": "Nancy", "LastName": "Davolio", "ReportsTo": 2, "Country": "USA", "Title": "Sales Representative", "HireDate": "1992-05-01 00:00:00", "BirthDate": "1948-12-08 00:00:00", "City": "Seattle", "Address": "507 - 20th Ave. E.Apt. 2A" }, { "EmployeeID": 2, "FirstName": "Andrew", "LastName": "Fuller", "ReportsTo": null, "Country": "USA", "Title": "Vice President, Sales", "HireDate": "1992-08-14 00:00:00", "BirthDate": "1952-02-19 00:00:00", "City": "Tacoma", "Address": "908 W. Capital Way" }, { "EmployeeID": 3, "FirstName": "Janet", "LastName": "Leverling", "ReportsTo": 2, "Country": "USA", "Title": "Sales Representative", "HireDate": "1992-04-01 00:00:00", "BirthDate": "1963-08-30 00:00:00", "City": "Kirkland", "Address": "722 Moss Bay Blvd." }, { "EmployeeID": 4, "FirstName": "Margaret", "LastName": "Peacock", "ReportsTo": 2, "Country": "USA", "Title": "Sales Representative", "HireDate": "1993-05-03 00:00:00", "BirthDate": "1937-09-19 00:00:00", "City": "Redmond", "Address": "4110 Old Redmond Rd." }, { "EmployeeID": 5, "FirstName": "Steven", "LastName": "Buchanan", "ReportsTo": 2, "Country": "UK", "Title": "Sales Manager", "HireDate": "1993-10-17 00:00:00", "BirthDate": "1955-03-04 00:00:00", "City": "London", "Address": "14 Garrett Hill" }, { "EmployeeID": 6, "FirstName": "Michael", "LastName": "Suyama", "ReportsTo": 5, "Country": "UK", "Title": "Sales Representative", "HireDate": "1993-10-17 00:00:00", "BirthDate": "1963-07-02 00:00:00", "City": "London", "Address": "Coventry House Miner Rd." }, { "EmployeeID": 7, "FirstName": "Robert", "LastName": "King", "ReportsTo": 5, "Country": "UK", "Title": "Sales Representative", "HireDate": "1994-01-02 00:00:00", "BirthDate": "1960-05-29 00:00:00", "City": "London", "Address": "Edgeham Hollow Winchester Way" }, { "EmployeeID": 8, "FirstName": "Laura", "LastName": "Callahan", "ReportsTo": 2, "Country": "USA", "Title": "Inside Sales Coordinator", "HireDate": "1994-03-05 00:00:00", "BirthDate": "1958-01-09 00:00:00", "City": "Seattle", "Address": "4726 - 11th Ave. N.E." }, { "EmployeeID": 9, "FirstName": "Anne", "LastName": "Dodsworth", "ReportsTo": 5, "Country": "UK", "Title": "Sales Representative", "HireDate": "1994-11-15 00:00:00", "BirthDate": "1966-01-27 00:00:00", "City": "London", "Address": "7 Houndstooth Rd." } ]}); var columns = [ { text: 'FirstName', columnGroup: 'Name', dataField: 'FirstName', width: 200 }, { text: 'LastName', columnGroup: 'Name', dataField: 'LastName', width: 200 }, { text: 'Title', dataField: 'Title', width: 160 }, { text: 'Birth Date', dataField: 'BirthDate', cellsFormat: 'd', width: 120 }, { text: 'Hire Date', dataField: 'HireDate', cellsFormat: 'd', width: 120 }, { text: 'Address', dataField: 'Address', width: 250 }, { text: 'City', dataField: 'City', width: 120 }, { text: 'Country', dataField: 'Country' } ]; var columnGroups = [ { text: 'Name', name: 'Name' } ]; JQXElements.settings[ "treeGridSettings"] = { } window.onload = function() { document.querySelector( "jqx-tree-grid").ensureRowVisible(10); } </script></head><body> <jqx-tree-grid settings="treeGridSettings"></jqx-tree-grid>
|
endRowEdit
|
Method
|
|
Parameter |
Type |
Description |
rowKey |
string |
Unique ID which identifies the row |
cancelChanges |
boolean |
|
Return Value
void
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>TreeGrid Custom Element Filtering and Sorting</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,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/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtreegrid.js"></script> <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script> <script type="text/javascript"> var source = new jqx.dataAdapter({ dataType: "json", dataFields: [ { name: 'EmployeeID', type: 'number' }, { name: 'ReportsTo', type: 'number' }, { name: 'FirstName', type: 'string' }, { name: 'LastName', type: 'string' }, { name: 'Country', type: 'string' }, { name: 'City', type: 'string' }, { name: 'Address', type: 'string' }, { name: 'Title', type: 'string' }, { name: 'HireDate', type: 'date' }, { name: 'BirthDate', type: 'date' } ], hierarchy: { keyDataField: { name: 'EmployeeID' }, parentDataField: { name: 'ReportsTo' } }, id: 'EmployeeID', localData: [ { "EmployeeID": 1, "FirstName": "Nancy", "LastName": "Davolio", "ReportsTo": 2, "Country": "USA", "Title": "Sales Representative", "HireDate": "1992-05-01 00:00:00", "BirthDate": "1948-12-08 00:00:00", "City": "Seattle", "Address": "507 - 20th Ave. E.Apt. 2A" }, { "EmployeeID": 2, "FirstName": "Andrew", "LastName": "Fuller", "ReportsTo": null, "Country": "USA", "Title": "Vice President, Sales", "HireDate": "1992-08-14 00:00:00", "BirthDate": "1952-02-19 00:00:00", "City": "Tacoma", "Address": "908 W. Capital Way" }, { "EmployeeID": 3, "FirstName": "Janet", "LastName": "Leverling", "ReportsTo": 2, "Country": "USA", "Title": "Sales Representative", "HireDate": "1992-04-01 00:00:00", "BirthDate": "1963-08-30 00:00:00", "City": "Kirkland", "Address": "722 Moss Bay Blvd." }, { "EmployeeID": 4, "FirstName": "Margaret", "LastName": "Peacock", "ReportsTo": 2, "Country": "USA", "Title": "Sales Representative", "HireDate": "1993-05-03 00:00:00", "BirthDate": "1937-09-19 00:00:00", "City": "Redmond", "Address": "4110 Old Redmond Rd." }, { "EmployeeID": 5, "FirstName": "Steven", "LastName": "Buchanan", "ReportsTo": 2, "Country": "UK", "Title": "Sales Manager", "HireDate": "1993-10-17 00:00:00", "BirthDate": "1955-03-04 00:00:00", "City": "London", "Address": "14 Garrett Hill" }, { "EmployeeID": 6, "FirstName": "Michael", "LastName": "Suyama", "ReportsTo": 5, "Country": "UK", "Title": "Sales Representative", "HireDate": "1993-10-17 00:00:00", "BirthDate": "1963-07-02 00:00:00", "City": "London", "Address": "Coventry House Miner Rd." }, { "EmployeeID": 7, "FirstName": "Robert", "LastName": "King", "ReportsTo": 5, "Country": "UK", "Title": "Sales Representative", "HireDate": "1994-01-02 00:00:00", "BirthDate": "1960-05-29 00:00:00", "City": "London", "Address": "Edgeham Hollow Winchester Way" }, { "EmployeeID": 8, "FirstName": "Laura", "LastName": "Callahan", "ReportsTo": 2, "Country": "USA", "Title": "Inside Sales Coordinator", "HireDate": "1994-03-05 00:00:00", "BirthDate": "1958-01-09 00:00:00", "City": "Seattle", "Address": "4726 - 11th Ave. N.E." }, { "EmployeeID": 9, "FirstName": "Anne", "LastName": "Dodsworth", "ReportsTo": 5, "Country": "UK", "Title": "Sales Representative", "HireDate": "1994-11-15 00:00:00", "BirthDate": "1966-01-27 00:00:00", "City": "London", "Address": "7 Houndstooth Rd." } ]}); var columns = [ { text: 'FirstName', columnGroup: 'Name', dataField: 'FirstName', width: 200 }, { text: 'LastName', columnGroup: 'Name', dataField: 'LastName', width: 200 }, { text: 'Title', dataField: 'Title', width: 160 }, { text: 'Birth Date', dataField: 'BirthDate', cellsFormat: 'd', width: 120 }, { text: 'Hire Date', dataField: 'HireDate', cellsFormat: 'd', width: 120 }, { text: 'Address', dataField: 'Address', width: 250 }, { text: 'City', dataField: 'City', width: 120 }, { text: 'Country', dataField: 'Country' } ]; var columnGroups = [ { text: 'Name', name: 'Name' } ]; JQXElements.settings[ "treeGridSettings"] = { } window.onload = function() { document.querySelector( "jqx-tree-grid").endRowEdit(10,true); } </script></head><body> <jqx-tree-grid settings="treeGridSettings"></jqx-tree-grid>
|
endCellEdit
|
Method
|
|
Parameter |
Type |
Description |
rowKey |
string |
Unique ID which identifies the row |
dataField |
string |
|
cancelChanges |
boolean |
Determines whether the changes would be canceled or confirmed. Default: false |
Return Value
void
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>TreeGrid Custom Element Filtering and Sorting</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,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/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtreegrid.js"></script> <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script> <script type="text/javascript"> var source = new jqx.dataAdapter({ dataType: "json", dataFields: [ { name: 'EmployeeID', type: 'number' }, { name: 'ReportsTo', type: 'number' }, { name: 'FirstName', type: 'string' }, { name: 'LastName', type: 'string' }, { name: 'Country', type: 'string' }, { name: 'City', type: 'string' }, { name: 'Address', type: 'string' }, { name: 'Title', type: 'string' }, { name: 'HireDate', type: 'date' }, { name: 'BirthDate', type: 'date' } ], hierarchy: { keyDataField: { name: 'EmployeeID' }, parentDataField: { name: 'ReportsTo' } }, id: 'EmployeeID', localData: [ { "EmployeeID": 1, "FirstName": "Nancy", "LastName": "Davolio", "ReportsTo": 2, "Country": "USA", "Title": "Sales Representative", "HireDate": "1992-05-01 00:00:00", "BirthDate": "1948-12-08 00:00:00", "City": "Seattle", "Address": "507 - 20th Ave. E.Apt. 2A" }, { "EmployeeID": 2, "FirstName": "Andrew", "LastName": "Fuller", "ReportsTo": null, "Country": "USA", "Title": "Vice President, Sales", "HireDate": "1992-08-14 00:00:00", "BirthDate": "1952-02-19 00:00:00", "City": "Tacoma", "Address": "908 W. Capital Way" }, { "EmployeeID": 3, "FirstName": "Janet", "LastName": "Leverling", "ReportsTo": 2, "Country": "USA", "Title": "Sales Representative", "HireDate": "1992-04-01 00:00:00", "BirthDate": "1963-08-30 00:00:00", "City": "Kirkland", "Address": "722 Moss Bay Blvd." }, { "EmployeeID": 4, "FirstName": "Margaret", "LastName": "Peacock", "ReportsTo": 2, "Country": "USA", "Title": "Sales Representative", "HireDate": "1993-05-03 00:00:00", "BirthDate": "1937-09-19 00:00:00", "City": "Redmond", "Address": "4110 Old Redmond Rd." }, { "EmployeeID": 5, "FirstName": "Steven", "LastName": "Buchanan", "ReportsTo": 2, "Country": "UK", "Title": "Sales Manager", "HireDate": "1993-10-17 00:00:00", "BirthDate": "1955-03-04 00:00:00", "City": "London", "Address": "14 Garrett Hill" }, { "EmployeeID": 6, "FirstName": "Michael", "LastName": "Suyama", "ReportsTo": 5, "Country": "UK", "Title": "Sales Representative", "HireDate": "1993-10-17 00:00:00", "BirthDate": "1963-07-02 00:00:00", "City": "London", "Address": "Coventry House Miner Rd." }, { "EmployeeID": 7, "FirstName": "Robert", "LastName": "King", "ReportsTo": 5, "Country": "UK", "Title": "Sales Representative", "HireDate": "1994-01-02 00:00:00", "BirthDate": "1960-05-29 00:00:00", "City": "London", "Address": "Edgeham Hollow Winchester Way" }, { "EmployeeID": 8, "FirstName": "Laura", "LastName": "Callahan", "ReportsTo": 2, "Country": "USA", "Title": "Inside Sales Coordinator", "HireDate": "1994-03-05 00:00:00", "BirthDate": "1958-01-09 00:00:00", "City": "Seattle", "Address": "4726 - 11th Ave. N.E." }, { "EmployeeID": 9, "FirstName": "Anne", "LastName": "Dodsworth", "ReportsTo": 5, "Country": "UK", "Title": "Sales Representative", "HireDate": "1994-11-15 00:00:00", "BirthDate": "1966-01-27 00:00:00", "City": "London", "Address": "7 Houndstooth Rd." } ]}); var columns = [ { text: 'FirstName', columnGroup: 'Name', dataField: 'FirstName', width: 200 }, { text: 'LastName', columnGroup: 'Name', dataField: 'LastName', width: 200 }, { text: 'Title', dataField: 'Title', width: 160 }, { text: 'Birth Date', dataField: 'BirthDate', cellsFormat: 'd', width: 120 }, { text: 'Hire Date', dataField: 'HireDate', cellsFormat: 'd', width: 120 }, { text: 'Address', dataField: 'Address', width: 250 }, { text: 'City', dataField: 'City', width: 120 }, { text: 'Country', dataField: 'Country' } ]; var columnGroups = [ { text: 'Name', name: 'Name' } ]; JQXElements.settings[ "treeGridSettings"] = { } window.onload = function() { document.querySelector( "jqx-tree-grid").endCellEdit(10, 'firstName'); } </script></head><body> <jqx-tree-grid settings="treeGridSettings"></jqx-tree-grid>
|
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'>TreeGrid Custom Element Filtering and Sorting</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,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/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtreegrid.js"></script> <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script> <script type="text/javascript"> var source = new jqx.dataAdapter({ dataType: "json", dataFields: [ { name: 'EmployeeID', type: 'number' }, { name: 'ReportsTo', type: 'number' }, { name: 'FirstName', type: 'string' }, { name: 'LastName', type: 'string' }, { name: 'Country', type: 'string' }, { name: 'City', type: 'string' }, { name: 'Address', type: 'string' }, { name: 'Title', type: 'string' }, { name: 'HireDate', type: 'date' }, { name: 'BirthDate', type: 'date' } ], hierarchy: { keyDataField: { name: 'EmployeeID' }, parentDataField: { name: 'ReportsTo' } }, id: 'EmployeeID', localData: [ { "EmployeeID": 1, "FirstName": "Nancy", "LastName": "Davolio", "ReportsTo": 2, "Country": "USA", "Title": "Sales Representative", "HireDate": "1992-05-01 00:00:00", "BirthDate": "1948-12-08 00:00:00", "City": "Seattle", "Address": "507 - 20th Ave. E.Apt. 2A" }, { "EmployeeID": 2, "FirstName": "Andrew", "LastName": "Fuller", "ReportsTo": null, "Country": "USA", "Title": "Vice President, Sales", "HireDate": "1992-08-14 00:00:00", "BirthDate": "1952-02-19 00:00:00", "City": "Tacoma", "Address": "908 W. Capital Way" }, { "EmployeeID": 3, "FirstName": "Janet", "LastName": "Leverling", "ReportsTo": 2, "Country": "USA", "Title": "Sales Representative", "HireDate": "1992-04-01 00:00:00", "BirthDate": "1963-08-30 00:00:00", "City": "Kirkland", "Address": "722 Moss Bay Blvd." }, { "EmployeeID": 4, "FirstName": "Margaret", "LastName": "Peacock", "ReportsTo": 2, "Country": "USA", "Title": "Sales Representative", "HireDate": "1993-05-03 00:00:00", "BirthDate": "1937-09-19 00:00:00", "City": "Redmond", "Address": "4110 Old Redmond Rd." }, { "EmployeeID": 5, "FirstName": "Steven", "LastName": "Buchanan", "ReportsTo": 2, "Country": "UK", "Title": "Sales Manager", "HireDate": "1993-10-17 00:00:00", "BirthDate": "1955-03-04 00:00:00", "City": "London", "Address": "14 Garrett Hill" }, { "EmployeeID": 6, "FirstName": "Michael", "LastName": "Suyama", "ReportsTo": 5, "Country": "UK", "Title": "Sales Representative", "HireDate": "1993-10-17 00:00:00", "BirthDate": "1963-07-02 00:00:00", "City": "London", "Address": "Coventry House Miner Rd." }, { "EmployeeID": 7, "FirstName": "Robert", "LastName": "King", "ReportsTo": 5, "Country": "UK", "Title": "Sales Representative", "HireDate": "1994-01-02 00:00:00", "BirthDate": "1960-05-29 00:00:00", "City": "London", "Address": "Edgeham Hollow Winchester Way" }, { "EmployeeID": 8, "FirstName": "Laura", "LastName": "Callahan", "ReportsTo": 2, "Country": "USA", "Title": "Inside Sales Coordinator", "HireDate": "1994-03-05 00:00:00", "BirthDate": "1958-01-09 00:00:00", "City": "Seattle", "Address": "4726 - 11th Ave. N.E." }, { "EmployeeID": 9, "FirstName": "Anne", "LastName": "Dodsworth", "ReportsTo": 5, "Country": "UK", "Title": "Sales Representative", "HireDate": "1994-11-15 00:00:00", "BirthDate": "1966-01-27 00:00:00", "City": "London", "Address": "7 Houndstooth Rd." } ]}); var columns = [ { text: 'FirstName', columnGroup: 'Name', dataField: 'FirstName', width: 200 }, { text: 'LastName', columnGroup: 'Name', dataField: 'LastName', width: 200 }, { text: 'Title', dataField: 'Title', width: 160 }, { text: 'Birth Date', dataField: 'BirthDate', cellsFormat: 'd', width: 120 }, { text: 'Hire Date', dataField: 'HireDate', cellsFormat: 'd', width: 120 }, { text: 'Address', dataField: 'Address', width: 250 }, { text: 'City', dataField: 'City', width: 120 }, { text: 'Country', dataField: 'Country' } ]; var columnGroups = [ { text: 'Name', name: 'Name' } ]; JQXElements.settings[ "treeGridSettings"] = { } window.onload = function() { document.querySelector( "jqx-tree-grid").exportData( 'xls'); } </script></head><body> <jqx-tree-grid settings="treeGridSettings"></jqx-tree-grid>
|
focus
|
Method
|
|
Parameter |
Type |
Description |
None |
|
|
Return Value
void
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>TreeGrid Custom Element Filtering and Sorting</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,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/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtreegrid.js"></script> <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script> <script type="text/javascript"> var source = new jqx.dataAdapter({ dataType: "json", dataFields: [ { name: 'EmployeeID', type: 'number' }, { name: 'ReportsTo', type: 'number' }, { name: 'FirstName', type: 'string' }, { name: 'LastName', type: 'string' }, { name: 'Country', type: 'string' }, { name: 'City', type: 'string' }, { name: 'Address', type: 'string' }, { name: 'Title', type: 'string' }, { name: 'HireDate', type: 'date' }, { name: 'BirthDate', type: 'date' } ], hierarchy: { keyDataField: { name: 'EmployeeID' }, parentDataField: { name: 'ReportsTo' } }, id: 'EmployeeID', localData: [ { "EmployeeID": 1, "FirstName": "Nancy", "LastName": "Davolio", "ReportsTo": 2, "Country": "USA", "Title": "Sales Representative", "HireDate": "1992-05-01 00:00:00", "BirthDate": "1948-12-08 00:00:00", "City": "Seattle", "Address": "507 - 20th Ave. E.Apt. 2A" }, { "EmployeeID": 2, "FirstName": "Andrew", "LastName": "Fuller", "ReportsTo": null, "Country": "USA", "Title": "Vice President, Sales", "HireDate": "1992-08-14 00:00:00", "BirthDate": "1952-02-19 00:00:00", "City": "Tacoma", "Address": "908 W. Capital Way" }, { "EmployeeID": 3, "FirstName": "Janet", "LastName": "Leverling", "ReportsTo": 2, "Country": "USA", "Title": "Sales Representative", "HireDate": "1992-04-01 00:00:00", "BirthDate": "1963-08-30 00:00:00", "City": "Kirkland", "Address": "722 Moss Bay Blvd." }, { "EmployeeID": 4, "FirstName": "Margaret", "LastName": "Peacock", "ReportsTo": 2, "Country": "USA", "Title": "Sales Representative", "HireDate": "1993-05-03 00:00:00", "BirthDate": "1937-09-19 00:00:00", "City": "Redmond", "Address": "4110 Old Redmond Rd." }, { "EmployeeID": 5, "FirstName": "Steven", "LastName": "Buchanan", "ReportsTo": 2, "Country": "UK", "Title": "Sales Manager", "HireDate": "1993-10-17 00:00:00", "BirthDate": "1955-03-04 00:00:00", "City": "London", "Address": "14 Garrett Hill" }, { "EmployeeID": 6, "FirstName": "Michael", "LastName": "Suyama", "ReportsTo": 5, "Country": "UK", "Title": "Sales Representative", "HireDate": "1993-10-17 00:00:00", "BirthDate": "1963-07-02 00:00:00", "City": "London", "Address": "Coventry House Miner Rd." }, { "EmployeeID": 7, "FirstName": "Robert", "LastName": "King", "ReportsTo": 5, "Country": "UK", "Title": "Sales Representative", "HireDate": "1994-01-02 00:00:00", "BirthDate": "1960-05-29 00:00:00", "City": "London", "Address": "Edgeham Hollow Winchester Way" }, { "EmployeeID": 8, "FirstName": "Laura", "LastName": "Callahan", "ReportsTo": 2, "Country": "USA", "Title": "Inside Sales Coordinator", "HireDate": "1994-03-05 00:00:00", "BirthDate": "1958-01-09 00:00:00", "City": "Seattle", "Address": "4726 - 11th Ave. N.E." }, { "EmployeeID": 9, "FirstName": "Anne", "LastName": "Dodsworth", "ReportsTo": 5, "Country": "UK", "Title": "Sales Representative", "HireDate": "1994-11-15 00:00:00", "BirthDate": "1966-01-27 00:00:00", "City": "London", "Address": "7 Houndstooth Rd." } ]}); var columns = [ { text: 'FirstName', columnGroup: 'Name', dataField: 'FirstName', width: 200 }, { text: 'LastName', columnGroup: 'Name', dataField: 'LastName', width: 200 }, { text: 'Title', dataField: 'Title', width: 160 }, { text: 'Birth Date', dataField: 'BirthDate', cellsFormat: 'd', width: 120 }, { text: 'Hire Date', dataField: 'HireDate', cellsFormat: 'd', width: 120 }, { text: 'Address', dataField: 'Address', width: 250 }, { text: 'City', dataField: 'City', width: 120 }, { text: 'Country', dataField: 'Country' } ]; var columnGroups = [ { text: 'Name', name: 'Name' } ]; JQXElements.settings[ "treeGridSettings"] = { } window.onload = function() { document.querySelector( "jqx-tree-grid").focus(); } </script></head><body> <jqx-tree-grid settings="treeGridSettings"></jqx-tree-grid>
|
getColumnProperty
|
Method
|
|
Parameter |
Type |
Description |
dataField |
string |
|
propertyName |
string |
|
Return Value
Object
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>TreeGrid Custom Element Filtering and Sorting</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,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/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtreegrid.js"></script> <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script> <script type="text/javascript"> var source = new jqx.dataAdapter({ dataType: "json", dataFields: [ { name: 'EmployeeID', type: 'number' }, { name: 'ReportsTo', type: 'number' }, { name: 'FirstName', type: 'string' }, { name: 'LastName', type: 'string' }, { name: 'Country', type: 'string' }, { name: 'City', type: 'string' }, { name: 'Address', type: 'string' }, { name: 'Title', type: 'string' }, { name: 'HireDate', type: 'date' }, { name: 'BirthDate', type: 'date' } ], hierarchy: { keyDataField: { name: 'EmployeeID' }, parentDataField: { name: 'ReportsTo' } }, id: 'EmployeeID', localData: [ { "EmployeeID": 1, "FirstName": "Nancy", "LastName": "Davolio", "ReportsTo": 2, "Country": "USA", "Title": "Sales Representative", "HireDate": "1992-05-01 00:00:00", "BirthDate": "1948-12-08 00:00:00", "City": "Seattle", "Address": "507 - 20th Ave. E.Apt. 2A" }, { "EmployeeID": 2, "FirstName": "Andrew", "LastName": "Fuller", "ReportsTo": null, "Country": "USA", "Title": "Vice President, Sales", "HireDate": "1992-08-14 00:00:00", "BirthDate": "1952-02-19 00:00:00", "City": "Tacoma", "Address": "908 W. Capital Way" }, { "EmployeeID": 3, "FirstName": "Janet", "LastName": "Leverling", "ReportsTo": 2, "Country": "USA", "Title": "Sales Representative", "HireDate": "1992-04-01 00:00:00", "BirthDate": "1963-08-30 00:00:00", "City": "Kirkland", "Address": "722 Moss Bay Blvd." }, { "EmployeeID": 4, "FirstName": "Margaret", "LastName": "Peacock", "ReportsTo": 2, "Country": "USA", "Title": "Sales Representative", "HireDate": "1993-05-03 00:00:00", "BirthDate": "1937-09-19 00:00:00", "City": "Redmond", "Address": "4110 Old Redmond Rd." }, { "EmployeeID": 5, "FirstName": "Steven", "LastName": "Buchanan", "ReportsTo": 2, "Country": "UK", "Title": "Sales Manager", "HireDate": "1993-10-17 00:00:00", "BirthDate": "1955-03-04 00:00:00", "City": "London", "Address": "14 Garrett Hill" }, { "EmployeeID": 6, "FirstName": "Michael", "LastName": "Suyama", "ReportsTo": 5, "Country": "UK", "Title": "Sales Representative", "HireDate": "1993-10-17 00:00:00", "BirthDate": "1963-07-02 00:00:00", "City": "London", "Address": "Coventry House Miner Rd." }, { "EmployeeID": 7, "FirstName": "Robert", "LastName": "King", "ReportsTo": 5, "Country": "UK", "Title": "Sales Representative", "HireDate": "1994-01-02 00:00:00", "BirthDate": "1960-05-29 00:00:00", "City": "London", "Address": "Edgeham Hollow Winchester Way" }, { "EmployeeID": 8, "FirstName": "Laura", "LastName": "Callahan", "ReportsTo": 2, "Country": "USA", "Title": "Inside Sales Coordinator", "HireDate": "1994-03-05 00:00:00", "BirthDate": "1958-01-09 00:00:00", "City": "Seattle", "Address": "4726 - 11th Ave. N.E." }, { "EmployeeID": 9, "FirstName": "Anne", "LastName": "Dodsworth", "ReportsTo": 5, "Country": "UK", "Title": "Sales Representative", "HireDate": "1994-11-15 00:00:00", "BirthDate": "1966-01-27 00:00:00", "City": "London", "Address": "7 Houndstooth Rd." } ]}); var columns = [ { text: 'FirstName', columnGroup: 'Name', dataField: 'FirstName', width: 200 }, { text: 'LastName', columnGroup: 'Name', dataField: 'LastName', width: 200 }, { text: 'Title', dataField: 'Title', width: 160 }, { text: 'Birth Date', dataField: 'BirthDate', cellsFormat: 'd', width: 120 }, { text: 'Hire Date', dataField: 'HireDate', cellsFormat: 'd', width: 120 }, { text: 'Address', dataField: 'Address', width: 250 }, { text: 'City', dataField: 'City', width: 120 }, { text: 'Country', dataField: 'Country' } ]; var columnGroups = [ { text: 'Name', name: 'Name' } ]; JQXElements.settings[ "treeGridSettings"] = { } window.onload = function() { document.querySelector( "jqx-tree-grid").getColumnProperty( 'firstName'); } </script></head><body> <jqx-tree-grid settings="treeGridSettings"></jqx-tree-grid>
|
goToPage
|
Method
|
|
Parameter |
Type |
Description |
pageIndex |
number |
|
Return Value
void
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>TreeGrid Custom Element Filtering and Sorting</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,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/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtreegrid.js"></script> <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script> <script type="text/javascript"> var source = new jqx.dataAdapter({ dataType: "json", dataFields: [ { name: 'EmployeeID', type: 'number' }, { name: 'ReportsTo', type: 'number' }, { name: 'FirstName', type: 'string' }, { name: 'LastName', type: 'string' }, { name: 'Country', type: 'string' }, { name: 'City', type: 'string' }, { name: 'Address', type: 'string' }, { name: 'Title', type: 'string' }, { name: 'HireDate', type: 'date' }, { name: 'BirthDate', type: 'date' } ], hierarchy: { keyDataField: { name: 'EmployeeID' }, parentDataField: { name: 'ReportsTo' } }, id: 'EmployeeID', localData: [ { "EmployeeID": 1, "FirstName": "Nancy", "LastName": "Davolio", "ReportsTo": 2, "Country": "USA", "Title": "Sales Representative", "HireDate": "1992-05-01 00:00:00", "BirthDate": "1948-12-08 00:00:00", "City": "Seattle", "Address": "507 - 20th Ave. E.Apt. 2A" }, { "EmployeeID": 2, "FirstName": "Andrew", "LastName": "Fuller", "ReportsTo": null, "Country": "USA", "Title": "Vice President, Sales", "HireDate": "1992-08-14 00:00:00", "BirthDate": "1952-02-19 00:00:00", "City": "Tacoma", "Address": "908 W. Capital Way" }, { "EmployeeID": 3, "FirstName": "Janet", "LastName": "Leverling", "ReportsTo": 2, "Country": "USA", "Title": "Sales Representative", "HireDate": "1992-04-01 00:00:00", "BirthDate": "1963-08-30 00:00:00", "City": "Kirkland", "Address": "722 Moss Bay Blvd." }, { "EmployeeID": 4, "FirstName": "Margaret", "LastName": "Peacock", "ReportsTo": 2, "Country": "USA", "Title": "Sales Representative", "HireDate": "1993-05-03 00:00:00", "BirthDate": "1937-09-19 00:00:00", "City": "Redmond", "Address": "4110 Old Redmond Rd." }, { "EmployeeID": 5, "FirstName": "Steven", "LastName": "Buchanan", "ReportsTo": 2, "Country": "UK", "Title": "Sales Manager", "HireDate": "1993-10-17 00:00:00", "BirthDate": "1955-03-04 00:00:00", "City": "London", "Address": "14 Garrett Hill" }, { "EmployeeID": 6, "FirstName": "Michael", "LastName": "Suyama", "ReportsTo": 5, "Country": "UK", "Title": "Sales Representative", "HireDate": "1993-10-17 00:00:00", "BirthDate": "1963-07-02 00:00:00", "City": "London", "Address": "Coventry House Miner Rd." }, { "EmployeeID": 7, "FirstName": "Robert", "LastName": "King", "ReportsTo": 5, "Country": "UK", "Title": "Sales Representative", "HireDate": "1994-01-02 00:00:00", "BirthDate": "1960-05-29 00:00:00", "City": "London", "Address": "Edgeham Hollow Winchester Way" }, { "EmployeeID": 8, "FirstName": "Laura", "LastName": "Callahan", "ReportsTo": 2, "Country": "USA", "Title": "Inside Sales Coordinator", "HireDate": "1994-03-05 00:00:00", "BirthDate": "1958-01-09 00:00:00", "City": "Seattle", "Address": "4726 - 11th Ave. N.E." }, { "EmployeeID": 9, "FirstName": "Anne", "LastName": "Dodsworth", "ReportsTo": 5, "Country": "UK", "Title": "Sales Representative", "HireDate": "1994-11-15 00:00:00", "BirthDate": "1966-01-27 00:00:00", "City": "London", "Address": "7 Houndstooth Rd." } ]}); var columns = [ { text: 'FirstName', columnGroup: 'Name', dataField: 'FirstName', width: 200 }, { text: 'LastName', columnGroup: 'Name', dataField: 'LastName', width: 200 }, { text: 'Title', dataField: 'Title', width: 160 }, { text: 'Birth Date', dataField: 'BirthDate', cellsFormat: 'd', width: 120 }, { text: 'Hire Date', dataField: 'HireDate', cellsFormat: 'd', width: 120 }, { text: 'Address', dataField: 'Address', width: 250 }, { text: 'City', dataField: 'City', width: 120 }, { text: 'Country', dataField: 'Country' } ]; var columnGroups = [ { text: 'Name', name: 'Name' } ]; JQXElements.settings[ "treeGridSettings"] = { } window.onload = function() { document.querySelector( "jqx-tree-grid").goToPage(); } </script></head><body> <jqx-tree-grid settings="treeGridSettings"></jqx-tree-grid>
|
goToPrevPage
|
Method
|
|
Parameter |
Type |
Description |
None |
|
|
Return Value
void
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>TreeGrid Custom Element Filtering and Sorting</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,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/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtreegrid.js"></script> <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script> <script type="text/javascript"> var source = new jqx.dataAdapter({ dataType: "json", dataFields: [ { name: 'EmployeeID', type: 'number' }, { name: 'ReportsTo', type: 'number' }, { name: 'FirstName', type: 'string' }, { name: 'LastName', type: 'string' }, { name: 'Country', type: 'string' }, { name: 'City', type: 'string' }, { name: 'Address', type: 'string' }, { name: 'Title', type: 'string' }, { name: 'HireDate', type: 'date' }, { name: 'BirthDate', type: 'date' } ], hierarchy: { keyDataField: { name: 'EmployeeID' }, parentDataField: { name: 'ReportsTo' } }, id: 'EmployeeID', localData: [ { "EmployeeID": 1, "FirstName": "Nancy", "LastName": "Davolio", "ReportsTo": 2, "Country": "USA", "Title": "Sales Representative", "HireDate": "1992-05-01 00:00:00", "BirthDate": "1948-12-08 00:00:00", "City": "Seattle", "Address": "507 - 20th Ave. E.Apt. 2A" }, { "EmployeeID": 2, "FirstName": "Andrew", "LastName": "Fuller", "ReportsTo": null, "Country": "USA", "Title": "Vice President, Sales", "HireDate": "1992-08-14 00:00:00", "BirthDate": "1952-02-19 00:00:00", "City": "Tacoma", "Address": "908 W. Capital Way" }, { "EmployeeID": 3, "FirstName": "Janet", "LastName": "Leverling", "ReportsTo": 2, "Country": "USA", "Title": "Sales Representative", "HireDate": "1992-04-01 00:00:00", "BirthDate": "1963-08-30 00:00:00", "City": "Kirkland", "Address": "722 Moss Bay Blvd." }, { "EmployeeID": 4, "FirstName": "Margaret", "LastName": "Peacock", "ReportsTo": 2, "Country": "USA", "Title": "Sales Representative", "HireDate": "1993-05-03 00:00:00", "BirthDate": "1937-09-19 00:00:00", "City": "Redmond", "Address": "4110 Old Redmond Rd." }, { "EmployeeID": 5, "FirstName": "Steven", "LastName": "Buchanan", "ReportsTo": 2, "Country": "UK", "Title": "Sales Manager", "HireDate": "1993-10-17 00:00:00", "BirthDate": "1955-03-04 00:00:00", "City": "London", "Address": "14 Garrett Hill" }, { "EmployeeID": 6, "FirstName": "Michael", "LastName": "Suyama", "ReportsTo": 5, "Country": "UK", "Title": "Sales Representative", "HireDate": "1993-10-17 00:00:00", "BirthDate": "1963-07-02 00:00:00", "City": "London", "Address": "Coventry House Miner Rd." }, { "EmployeeID": 7, "FirstName": "Robert", "LastName": "King", "ReportsTo": 5, "Country": "UK", "Title": "Sales Representative", "HireDate": "1994-01-02 00:00:00", "BirthDate": "1960-05-29 00:00:00", "City": "London", "Address": "Edgeham Hollow Winchester Way" }, { "EmployeeID": 8, "FirstName": "Laura", "LastName": "Callahan", "ReportsTo": 2, "Country": "USA", "Title": "Inside Sales Coordinator", "HireDate": "1994-03-05 00:00:00", "BirthDate": "1958-01-09 00:00:00", "City": "Seattle", "Address": "4726 - 11th Ave. N.E." }, { "EmployeeID": 9, "FirstName": "Anne", "LastName": "Dodsworth", "ReportsTo": 5, "Country": "UK", "Title": "Sales Representative", "HireDate": "1994-11-15 00:00:00", "BirthDate": "1966-01-27 00:00:00", "City": "London", "Address": "7 Houndstooth Rd." } ]}); var columns = [ { text: 'FirstName', columnGroup: 'Name', dataField: 'FirstName', width: 200 }, { text: 'LastName', columnGroup: 'Name', dataField: 'LastName', width: 200 }, { text: 'Title', dataField: 'Title', width: 160 }, { text: 'Birth Date', dataField: 'BirthDate', cellsFormat: 'd', width: 120 }, { text: 'Hire Date', dataField: 'HireDate', cellsFormat: 'd', width: 120 }, { text: 'Address', dataField: 'Address', width: 250 }, { text: 'City', dataField: 'City', width: 120 }, { text: 'Country', dataField: 'Country' } ]; var columnGroups = [ { text: 'Name', name: 'Name' } ]; JQXElements.settings[ "treeGridSettings"] = { } window.onload = function() { document.querySelector( "jqx-tree-grid").goToPrevPage(); } </script></head><body> <jqx-tree-grid settings="treeGridSettings"></jqx-tree-grid>
|
goToNextPage
|
Method
|
|
Parameter |
Type |
Description |
None |
|
|
Return Value
void
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>TreeGrid Custom Element Filtering and Sorting</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,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/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtreegrid.js"></script> <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script> <script type="text/javascript"> var source = new jqx.dataAdapter({ dataType: "json", dataFields: [ { name: 'EmployeeID', type: 'number' }, { name: 'ReportsTo', type: 'number' }, { name: 'FirstName', type: 'string' }, { name: 'LastName', type: 'string' }, { name: 'Country', type: 'string' }, { name: 'City', type: 'string' }, { name: 'Address', type: 'string' }, { name: 'Title', type: 'string' }, { name: 'HireDate', type: 'date' }, { name: 'BirthDate', type: 'date' } ], hierarchy: { keyDataField: { name: 'EmployeeID' }, parentDataField: { name: 'ReportsTo' } }, id: 'EmployeeID', localData: [ { "EmployeeID": 1, "FirstName": "Nancy", "LastName": "Davolio", "ReportsTo": 2, "Country": "USA", "Title": "Sales Representative", "HireDate": "1992-05-01 00:00:00", "BirthDate": "1948-12-08 00:00:00", "City": "Seattle", "Address": "507 - 20th Ave. E.Apt. 2A" }, { "EmployeeID": 2, "FirstName": "Andrew", "LastName": "Fuller", "ReportsTo": null, "Country": "USA", "Title": "Vice President, Sales", "HireDate": "1992-08-14 00:00:00", "BirthDate": "1952-02-19 00:00:00", "City": "Tacoma", "Address": "908 W. Capital Way" }, { "EmployeeID": 3, "FirstName": "Janet", "LastName": "Leverling", "ReportsTo": 2, "Country": "USA", "Title": "Sales Representative", "HireDate": "1992-04-01 00:00:00", "BirthDate": "1963-08-30 00:00:00", "City": "Kirkland", "Address": "722 Moss Bay Blvd." }, { "EmployeeID": 4, "FirstName": "Margaret", "LastName": "Peacock", "ReportsTo": 2, "Country": "USA", "Title": "Sales Representative", "HireDate": "1993-05-03 00:00:00", "BirthDate": "1937-09-19 00:00:00", "City": "Redmond", "Address": "4110 Old Redmond Rd." }, { "EmployeeID": 5, "FirstName": "Steven", "LastName": "Buchanan", "ReportsTo": 2, "Country": "UK", "Title": "Sales Manager", "HireDate": "1993-10-17 00:00:00", "BirthDate": "1955-03-04 00:00:00", "City": "London", "Address": "14 Garrett Hill" }, { "EmployeeID": 6, "FirstName": "Michael", "LastName": "Suyama", "ReportsTo": 5, "Country": "UK", "Title": "Sales Representative", "HireDate": "1993-10-17 00:00:00", "BirthDate": "1963-07-02 00:00:00", "City": "London", "Address": "Coventry House Miner Rd." }, { "EmployeeID": 7, "FirstName": "Robert", "LastName": "King", "ReportsTo": 5, "Country": "UK", "Title": "Sales Representative", "HireDate": "1994-01-02 00:00:00", "BirthDate": "1960-05-29 00:00:00", "City": "London", "Address": "Edgeham Hollow Winchester Way" }, { "EmployeeID": 8, "FirstName": "Laura", "LastName": "Callahan", "ReportsTo": 2, "Country": "USA", "Title": "Inside Sales Coordinator", "HireDate": "1994-03-05 00:00:00", "BirthDate": "1958-01-09 00:00:00", "City": "Seattle", "Address": "4726 - 11th Ave. N.E." }, { "EmployeeID": 9, "FirstName": "Anne", "LastName": "Dodsworth", "ReportsTo": 5, "Country": "UK", "Title": "Sales Representative", "HireDate": "1994-11-15 00:00:00", "BirthDate": "1966-01-27 00:00:00", "City": "London", "Address": "7 Houndstooth Rd." } ]}); var columns = [ { text: 'FirstName', columnGroup: 'Name', dataField: 'FirstName', width: 200 }, { text: 'LastName', columnGroup: 'Name', dataField: 'LastName', width: 200 }, { text: 'Title', dataField: 'Title', width: 160 }, { text: 'Birth Date', dataField: 'BirthDate', cellsFormat: 'd', width: 120 }, { text: 'Hire Date', dataField: 'HireDate', cellsFormat: 'd', width: 120 }, { text: 'Address', dataField: 'Address', width: 250 }, { text: 'City', dataField: 'City', width: 120 }, { text: 'Country', dataField: 'Country' } ]; var columnGroups = [ { text: 'Name', name: 'Name' } ]; JQXElements.settings[ "treeGridSettings"] = { } window.onload = function() { document.querySelector( "jqx-tree-grid").goToNextPage(); } </script></head><body> <jqx-tree-grid settings="treeGridSettings"></jqx-tree-grid>
|
getSelection
|
Method
|
|
Parameter |
Type |
Description |
None |
|
|
Return Value
Array
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>TreeGrid Custom Element Filtering and Sorting</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,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/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtreegrid.js"></script> <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script> <script type="text/javascript"> var source = new jqx.dataAdapter({ dataType: "json", dataFields: [ { name: 'EmployeeID', type: 'number' }, { name: 'ReportsTo', type: 'number' }, { name: 'FirstName', type: 'string' }, { name: 'LastName', type: 'string' }, { name: 'Country', type: 'string' }, { name: 'City', type: 'string' }, { name: 'Address', type: 'string' }, { name: 'Title', type: 'string' }, { name: 'HireDate', type: 'date' }, { name: 'BirthDate', type: 'date' } ], hierarchy: { keyDataField: { name: 'EmployeeID' }, parentDataField: { name: 'ReportsTo' } }, id: 'EmployeeID', localData: [ { "EmployeeID": 1, "FirstName": "Nancy", "LastName": "Davolio", "ReportsTo": 2, "Country": "USA", "Title": "Sales Representative", "HireDate": "1992-05-01 00:00:00", "BirthDate": "1948-12-08 00:00:00", "City": "Seattle", "Address": "507 - 20th Ave. E.Apt. 2A" }, { "EmployeeID": 2, "FirstName": "Andrew", "LastName": "Fuller", "ReportsTo": null, "Country": "USA", "Title": "Vice President, Sales", "HireDate": "1992-08-14 00:00:00", "BirthDate": "1952-02-19 00:00:00", "City": "Tacoma", "Address": "908 W. Capital Way" }, { "EmployeeID": 3, "FirstName": "Janet", "LastName": "Leverling", "ReportsTo": 2, "Country": "USA", "Title": "Sales Representative", "HireDate": "1992-04-01 00:00:00", "BirthDate": "1963-08-30 00:00:00", "City": "Kirkland", "Address": "722 Moss Bay Blvd." }, { "EmployeeID": 4, "FirstName": "Margaret", "LastName": "Peacock", "ReportsTo": 2, "Country": "USA", "Title": "Sales Representative", "HireDate": "1993-05-03 00:00:00", "BirthDate": "1937-09-19 00:00:00", "City": "Redmond", "Address": "4110 Old Redmond Rd." }, { "EmployeeID": 5, "FirstName": "Steven", "LastName": "Buchanan", "ReportsTo": 2, "Country": "UK", "Title": "Sales Manager", "HireDate": "1993-10-17 00:00:00", "BirthDate": "1955-03-04 00:00:00", "City": "London", "Address": "14 Garrett Hill" }, { "EmployeeID": 6, "FirstName": "Michael", "LastName": "Suyama", "ReportsTo": 5, "Country": "UK", "Title": "Sales Representative", "HireDate": "1993-10-17 00:00:00", "BirthDate": "1963-07-02 00:00:00", "City": "London", "Address": "Coventry House Miner Rd." }, { "EmployeeID": 7, "FirstName": "Robert", "LastName": "King", "ReportsTo": 5, "Country": "UK", "Title": "Sales Representative", "HireDate": "1994-01-02 00:00:00", "BirthDate": "1960-05-29 00:00:00", "City": "London", "Address": "Edgeham Hollow Winchester Way" }, { "EmployeeID": 8, "FirstName": "Laura", "LastName": "Callahan", "ReportsTo": 2, "Country": "USA", "Title": "Inside Sales Coordinator", "HireDate": "1994-03-05 00:00:00", "BirthDate": "1958-01-09 00:00:00", "City": "Seattle", "Address": "4726 - 11th Ave. N.E." }, { "EmployeeID": 9, "FirstName": "Anne", "LastName": "Dodsworth", "ReportsTo": 5, "Country": "UK", "Title": "Sales Representative", "HireDate": "1994-11-15 00:00:00", "BirthDate": "1966-01-27 00:00:00", "City": "London", "Address": "7 Houndstooth Rd." } ]}); var columns = [ { text: 'FirstName', columnGroup: 'Name', dataField: 'FirstName', width: 200 }, { text: 'LastName', columnGroup: 'Name', dataField: 'LastName', width: 200 }, { text: 'Title', dataField: 'Title', width: 160 }, { text: 'Birth Date', dataField: 'BirthDate', cellsFormat: 'd', width: 120 }, { text: 'Hire Date', dataField: 'HireDate', cellsFormat: 'd', width: 120 }, { text: 'Address', dataField: 'Address', width: 250 }, { text: 'City', dataField: 'City', width: 120 }, { text: 'Country', dataField: 'Country' } ]; var columnGroups = [ { text: 'Name', name: 'Name' } ]; JQXElements.settings[ "treeGridSettings"] = { } window.onload = function() { var result = document.querySelector( "jqx-tree-grid").getSelection(); } </script></head><body> <jqx-tree-grid settings="treeGridSettings"></jqx-tree-grid>
|
getKey
|
Method
|
|
Parameter |
Type |
Description |
row |
object |
|
Return Value
String
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>TreeGrid Custom Element Filtering and Sorting</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,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/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtreegrid.js"></script> <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script> <script type="text/javascript"> var source = new jqx.dataAdapter({ dataType: "json", dataFields: [ { name: 'EmployeeID', type: 'number' }, { name: 'ReportsTo', type: 'number' }, { name: 'FirstName', type: 'string' }, { name: 'LastName', type: 'string' }, { name: 'Country', type: 'string' }, { name: 'City', type: 'string' }, { name: 'Address', type: 'string' }, { name: 'Title', type: 'string' }, { name: 'HireDate', type: 'date' }, { name: 'BirthDate', type: 'date' } ], hierarchy: { keyDataField: { name: 'EmployeeID' }, parentDataField: { name: 'ReportsTo' } }, id: 'EmployeeID', localData: [ { "EmployeeID": 1, "FirstName": "Nancy", "LastName": "Davolio", "ReportsTo": 2, "Country": "USA", "Title": "Sales Representative", "HireDate": "1992-05-01 00:00:00", "BirthDate": "1948-12-08 00:00:00", "City": "Seattle", "Address": "507 - 20th Ave. E.Apt. 2A" }, { "EmployeeID": 2, "FirstName": "Andrew", "LastName": "Fuller", "ReportsTo": null, "Country": "USA", "Title": "Vice President, Sales", "HireDate": "1992-08-14 00:00:00", "BirthDate": "1952-02-19 00:00:00", "City": "Tacoma", "Address": "908 W. Capital Way" }, { "EmployeeID": 3, "FirstName": "Janet", "LastName": "Leverling", "ReportsTo": 2, "Country": "USA", "Title": "Sales Representative", "HireDate": "1992-04-01 00:00:00", "BirthDate": "1963-08-30 00:00:00", "City": "Kirkland", "Address": "722 Moss Bay Blvd." }, { "EmployeeID": 4, "FirstName": "Margaret", "LastName": "Peacock", "ReportsTo": 2, "Country": "USA", "Title": "Sales Representative", "HireDate": "1993-05-03 00:00:00", "BirthDate": "1937-09-19 00:00:00", "City": "Redmond", "Address": "4110 Old Redmond Rd." }, { "EmployeeID": 5, "FirstName": "Steven", "LastName": "Buchanan", "ReportsTo": 2, "Country": "UK", "Title": "Sales Manager", "HireDate": "1993-10-17 00:00:00", "BirthDate": "1955-03-04 00:00:00", "City": "London", "Address": "14 Garrett Hill" }, { "EmployeeID": 6, "FirstName": "Michael", "LastName": "Suyama", "ReportsTo": 5, "Country": "UK", "Title": "Sales Representative", "HireDate": "1993-10-17 00:00:00", "BirthDate": "1963-07-02 00:00:00", "City": "London", "Address": "Coventry House Miner Rd." }, { "EmployeeID": 7, "FirstName": "Robert", "LastName": "King", "ReportsTo": 5, "Country": "UK", "Title": "Sales Representative", "HireDate": "1994-01-02 00:00:00", "BirthDate": "1960-05-29 00:00:00", "City": "London", "Address": "Edgeham Hollow Winchester Way" }, { "EmployeeID": 8, "FirstName": "Laura", "LastName": "Callahan", "ReportsTo": 2, "Country": "USA", "Title": "Inside Sales Coordinator", "HireDate": "1994-03-05 00:00:00", "BirthDate": "1958-01-09 00:00:00", "City": "Seattle", "Address": "4726 - 11th Ave. N.E." }, { "EmployeeID": 9, "FirstName": "Anne", "LastName": "Dodsworth", "ReportsTo": 5, "Country": "UK", "Title": "Sales Representative", "HireDate": "1994-11-15 00:00:00", "BirthDate": "1966-01-27 00:00:00", "City": "London", "Address": "7 Houndstooth Rd." } ]}); var columns = [ { text: 'FirstName', columnGroup: 'Name', dataField: 'FirstName', width: 200 }, { text: 'LastName', columnGroup: 'Name', dataField: 'LastName', width: 200 }, { text: 'Title', dataField: 'Title', width: 160 }, { text: 'Birth Date', dataField: 'BirthDate', cellsFormat: 'd', width: 120 }, { text: 'Hire Date', dataField: 'HireDate', cellsFormat: 'd', width: 120 }, { text: 'Address', dataField: 'Address', width: 250 }, { text: 'City', dataField: 'City', width: 120 }, { text: 'Country', dataField: 'Country' } ]; var columnGroups = [ { text: 'Name', name: 'Name' } ]; JQXElements.settings[ "treeGridSettings"] = { } window.onload = function() { document.querySelector( "jqx-tree-grid").getKey(row); } </script></head><body> <jqx-tree-grid settings="treeGridSettings"></jqx-tree-grid>
|
getRow
|
Method
|
|
Parameter |
Type |
Description |
rowKey |
string |
|
Return Value
Object
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>TreeGrid Custom Element Filtering and Sorting</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,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/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtreegrid.js"></script> <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script> <script type="text/javascript"> var source = new jqx.dataAdapter({ dataType: "json", dataFields: [ { name: 'EmployeeID', type: 'number' }, { name: 'ReportsTo', type: 'number' }, { name: 'FirstName', type: 'string' }, { name: 'LastName', type: 'string' }, { name: 'Country', type: 'string' }, { name: 'City', type: 'string' }, { name: 'Address', type: 'string' }, { name: 'Title', type: 'string' }, { name: 'HireDate', type: 'date' }, { name: 'BirthDate', type: 'date' } ], hierarchy: { keyDataField: { name: 'EmployeeID' }, parentDataField: { name: 'ReportsTo' } }, id: 'EmployeeID', localData: [ { "EmployeeID": 1, "FirstName": "Nancy", "LastName": "Davolio", "ReportsTo": 2, "Country": "USA", "Title": "Sales Representative", "HireDate": "1992-05-01 00:00:00", "BirthDate": "1948-12-08 00:00:00", "City": "Seattle", "Address": "507 - 20th Ave. E.Apt. 2A" }, { "EmployeeID": 2, "FirstName": "Andrew", "LastName": "Fuller", "ReportsTo": null, "Country": "USA", "Title": "Vice President, Sales", "HireDate": "1992-08-14 00:00:00", "BirthDate": "1952-02-19 00:00:00", "City": "Tacoma", "Address": "908 W. Capital Way" }, { "EmployeeID": 3, "FirstName": "Janet", "LastName": "Leverling", "ReportsTo": 2, "Country": "USA", "Title": "Sales Representative", "HireDate": "1992-04-01 00:00:00", "BirthDate": "1963-08-30 00:00:00", "City": "Kirkland", "Address": "722 Moss Bay Blvd." }, { "EmployeeID": 4, "FirstName": "Margaret", "LastName": "Peacock", "ReportsTo": 2, "Country": "USA", "Title": "Sales Representative", "HireDate": "1993-05-03 00:00:00", "BirthDate": "1937-09-19 00:00:00", "City": "Redmond", "Address": "4110 Old Redmond Rd." }, { "EmployeeID": 5, "FirstName": "Steven", "LastName": "Buchanan", "ReportsTo": 2, "Country": "UK", "Title": "Sales Manager", "HireDate": "1993-10-17 00:00:00", "BirthDate": "1955-03-04 00:00:00", "City": "London", "Address": "14 Garrett Hill" }, { "EmployeeID": 6, "FirstName": "Michael", "LastName": "Suyama", "ReportsTo": 5, "Country": "UK", "Title": "Sales Representative", "HireDate": "1993-10-17 00:00:00", "BirthDate": "1963-07-02 00:00:00", "City": "London", "Address": "Coventry House Miner Rd." }, { "EmployeeID": 7, "FirstName": "Robert", "LastName": "King", "ReportsTo": 5, "Country": "UK", "Title": "Sales Representative", "HireDate": "1994-01-02 00:00:00", "BirthDate": "1960-05-29 00:00:00", "City": "London", "Address": "Edgeham Hollow Winchester Way" }, { "EmployeeID": 8, "FirstName": "Laura", "LastName": "Callahan", "ReportsTo": 2, "Country": "USA", "Title": "Inside Sales Coordinator", "HireDate": "1994-03-05 00:00:00", "BirthDate": "1958-01-09 00:00:00", "City": "Seattle", "Address": "4726 - 11th Ave. N.E." }, { "EmployeeID": 9, "FirstName": "Anne", "LastName": "Dodsworth", "ReportsTo": 5, "Country": "UK", "Title": "Sales Representative", "HireDate": "1994-11-15 00:00:00", "BirthDate": "1966-01-27 00:00:00", "City": "London", "Address": "7 Houndstooth Rd." } ]}); var columns = [ { text: 'FirstName', columnGroup: 'Name', dataField: 'FirstName', width: 200 }, { text: 'LastName', columnGroup: 'Name', dataField: 'LastName', width: 200 }, { text: 'Title', dataField: 'Title', width: 160 }, { text: 'Birth Date', dataField: 'BirthDate', cellsFormat: 'd', width: 120 }, { text: 'Hire Date', dataField: 'HireDate', cellsFormat: 'd', width: 120 }, { text: 'Address', dataField: 'Address', width: 250 }, { text: 'City', dataField: 'City', width: 120 }, { text: 'Country', dataField: 'Country' } ]; var columnGroups = [ { text: 'Name', name: 'Name' } ]; JQXElements.settings[ "treeGridSettings"] = { } window.onload = function() { document.querySelector( "jqx-tree-grid").getRow(1); } </script></head><body> <jqx-tree-grid settings="treeGridSettings"></jqx-tree-grid>
|
getRows
|
Method
|
|
Parameter |
Type |
Description |
None |
|
|
Return Value
Array
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>TreeGrid Custom Element Filtering and Sorting</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,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/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtreegrid.js"></script> <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script> <script type="text/javascript"> var source = new jqx.dataAdapter({ dataType: "json", dataFields: [ { name: 'EmployeeID', type: 'number' }, { name: 'ReportsTo', type: 'number' }, { name: 'FirstName', type: 'string' }, { name: 'LastName', type: 'string' }, { name: 'Country', type: 'string' }, { name: 'City', type: 'string' }, { name: 'Address', type: 'string' }, { name: 'Title', type: 'string' }, { name: 'HireDate', type: 'date' }, { name: 'BirthDate', type: 'date' } ], hierarchy: { keyDataField: { name: 'EmployeeID' }, parentDataField: { name: 'ReportsTo' } }, id: 'EmployeeID', localData: [ { "EmployeeID": 1, "FirstName": "Nancy", "LastName": "Davolio", "ReportsTo": 2, "Country": "USA", "Title": "Sales Representative", "HireDate": "1992-05-01 00:00:00", "BirthDate": "1948-12-08 00:00:00", "City": "Seattle", "Address": "507 - 20th Ave. E.Apt. 2A" }, { "EmployeeID": 2, "FirstName": "Andrew", "LastName": "Fuller", "ReportsTo": null, "Country": "USA", "Title": "Vice President, Sales", "HireDate": "1992-08-14 00:00:00", "BirthDate": "1952-02-19 00:00:00", "City": "Tacoma", "Address": "908 W. Capital Way" }, { "EmployeeID": 3, "FirstName": "Janet", "LastName": "Leverling", "ReportsTo": 2, "Country": "USA", "Title": "Sales Representative", "HireDate": "1992-04-01 00:00:00", "BirthDate": "1963-08-30 00:00:00", "City": "Kirkland", "Address": "722 Moss Bay Blvd." }, { "EmployeeID": 4, "FirstName": "Margaret", "LastName": "Peacock", "ReportsTo": 2, "Country": "USA", "Title": "Sales Representative", "HireDate": "1993-05-03 00:00:00", "BirthDate": "1937-09-19 00:00:00", "City": "Redmond", "Address": "4110 Old Redmond Rd." }, { "EmployeeID": 5, "FirstName": "Steven", "LastName": "Buchanan", "ReportsTo": 2, "Country": "UK", "Title": "Sales Manager", "HireDate": "1993-10-17 00:00:00", "BirthDate": "1955-03-04 00:00:00", "City": "London", "Address": "14 Garrett Hill" }, { "EmployeeID": 6, "FirstName": "Michael", "LastName": "Suyama", "ReportsTo": 5, "Country": "UK", "Title": "Sales Representative", "HireDate": "1993-10-17 00:00:00", "BirthDate": "1963-07-02 00:00:00", "City": "London", "Address": "Coventry House Miner Rd." }, { "EmployeeID": 7, "FirstName": "Robert", "LastName": "King", "ReportsTo": 5, "Country": "UK", "Title": "Sales Representative", "HireDate": "1994-01-02 00:00:00", "BirthDate": "1960-05-29 00:00:00", "City": "London", "Address": "Edgeham Hollow Winchester Way" }, { "EmployeeID": 8, "FirstName": "Laura", "LastName": "Callahan", "ReportsTo": 2, "Country": "USA", "Title": "Inside Sales Coordinator", "HireDate": "1994-03-05 00:00:00", "BirthDate": "1958-01-09 00:00:00", "City": "Seattle", "Address": "4726 - 11th Ave. N.E." }, { "EmployeeID": 9, "FirstName": "Anne", "LastName": "Dodsworth", "ReportsTo": 5, "Country": "UK", "Title": "Sales Representative", "HireDate": "1994-11-15 00:00:00", "BirthDate": "1966-01-27 00:00:00", "City": "London", "Address": "7 Houndstooth Rd." } ]}); var columns = [ { text: 'FirstName', columnGroup: 'Name', dataField: 'FirstName', width: 200 }, { text: 'LastName', columnGroup: 'Name', dataField: 'LastName', width: 200 }, { text: 'Title', dataField: 'Title', width: 160 }, { text: 'Birth Date', dataField: 'BirthDate', cellsFormat: 'd', width: 120 }, { text: 'Hire Date', dataField: 'HireDate', cellsFormat: 'd', width: 120 }, { text: 'Address', dataField: 'Address', width: 250 }, { text: 'City', dataField: 'City', width: 120 }, { text: 'Country', dataField: 'Country' } ]; var columnGroups = [ { text: 'Name', name: 'Name' } ]; JQXElements.settings[ "treeGridSettings"] = { } window.onload = function() { var result = document.querySelector( "jqx-tree-grid").getRows(); } </script></head><body> <jqx-tree-grid settings="treeGridSettings"></jqx-tree-grid>
|
getCheckedRows
|
Method
|
|
Parameter |
Type |
Description |
None |
|
|
Return Value
Array
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>TreeGrid Custom Element Filtering and Sorting</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,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/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtreegrid.js"></script> <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script> <script type="text/javascript"> var source = new jqx.dataAdapter({ dataType: "json", dataFields: [ { name: 'EmployeeID', type: 'number' }, { name: 'ReportsTo', type: 'number' }, { name: 'FirstName', type: 'string' }, { name: 'LastName', type: 'string' }, { name: 'Country', type: 'string' }, { name: 'City', type: 'string' }, { name: 'Address', type: 'string' }, { name: 'Title', type: 'string' }, { name: 'HireDate', type: 'date' }, { name: 'BirthDate', type: 'date' } ], hierarchy: { keyDataField: { name: 'EmployeeID' }, parentDataField: { name: 'ReportsTo' } }, id: 'EmployeeID', localData: [ { "EmployeeID": 1, "FirstName": "Nancy", "LastName": "Davolio", "ReportsTo": 2, "Country": "USA", "Title": "Sales Representative", "HireDate": "1992-05-01 00:00:00", "BirthDate": "1948-12-08 00:00:00", "City": "Seattle", "Address": "507 - 20th Ave. E.Apt. 2A" }, { "EmployeeID": 2, "FirstName": "Andrew", "LastName": "Fuller", "ReportsTo": null, "Country": "USA", "Title": "Vice President, Sales", "HireDate": "1992-08-14 00:00:00", "BirthDate": "1952-02-19 00:00:00", "City": "Tacoma", "Address": "908 W. Capital Way" }, { "EmployeeID": 3, "FirstName": "Janet", "LastName": "Leverling", "ReportsTo": 2, "Country": "USA", "Title": "Sales Representative", "HireDate": "1992-04-01 00:00:00", "BirthDate": "1963-08-30 00:00:00", "City": "Kirkland", "Address": "722 Moss Bay Blvd." }, { "EmployeeID": 4, "FirstName": "Margaret", "LastName": "Peacock", "ReportsTo": 2, "Country": "USA", "Title": "Sales Representative", "HireDate": "1993-05-03 00:00:00", "BirthDate": "1937-09-19 00:00:00", "City": "Redmond", "Address": "4110 Old Redmond Rd." }, { "EmployeeID": 5, "FirstName": "Steven", "LastName": "Buchanan", "ReportsTo": 2, "Country": "UK", "Title": "Sales Manager", "HireDate": "1993-10-17 00:00:00", "BirthDate": "1955-03-04 00:00:00", "City": "London", "Address": "14 Garrett Hill" }, { "EmployeeID": 6, "FirstName": "Michael", "LastName": "Suyama", "ReportsTo": 5, "Country": "UK", "Title": "Sales Representative", "HireDate": "1993-10-17 00:00:00", "BirthDate": "1963-07-02 00:00:00", "City": "London", "Address": "Coventry House Miner Rd." }, { "EmployeeID": 7, "FirstName": "Robert", "LastName": "King", "ReportsTo": 5, "Country": "UK", "Title": "Sales Representative", "HireDate": "1994-01-02 00:00:00", "BirthDate": "1960-05-29 00:00:00", "City": "London", "Address": "Edgeham Hollow Winchester Way" }, { "EmployeeID": 8, "FirstName": "Laura", "LastName": "Callahan", "ReportsTo": 2, "Country": "USA", "Title": "Inside Sales Coordinator", "HireDate": "1994-03-05 00:00:00", "BirthDate": "1958-01-09 00:00:00", "City": "Seattle", "Address": "4726 - 11th Ave. N.E." }, { "EmployeeID": 9, "FirstName": "Anne", "LastName": "Dodsworth", "ReportsTo": 5, "Country": "UK", "Title": "Sales Representative", "HireDate": "1994-11-15 00:00:00", "BirthDate": "1966-01-27 00:00:00", "City": "London", "Address": "7 Houndstooth Rd." } ]}); var columns = [ { text: 'FirstName', columnGroup: 'Name', dataField: 'FirstName', width: 200 }, { text: 'LastName', columnGroup: 'Name', dataField: 'LastName', width: 200 }, { text: 'Title', dataField: 'Title', width: 160 }, { text: 'Birth Date', dataField: 'BirthDate', cellsFormat: 'd', width: 120 }, { text: 'Hire Date', dataField: 'HireDate', cellsFormat: 'd', width: 120 }, { text: 'Address', dataField: 'Address', width: 250 }, { text: 'City', dataField: 'City', width: 120 }, { text: 'Country', dataField: 'Country' } ]; var columnGroups = [ { text: 'Name', name: 'Name' } ]; JQXElements.settings[ "treeGridSettings"] = { } window.onload = function() { var result = document.querySelector( "jqx-tree-grid").getCheckedRows(); } </script></head><body> <jqx-tree-grid settings="treeGridSettings"></jqx-tree-grid>
|
getView
|
Method
|
|
Parameter |
Type |
Description |
None |
|
|
Return Value
Array
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>TreeGrid Custom Element Filtering and Sorting</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,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/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtreegrid.js"></script> <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script> <script type="text/javascript"> var source = new jqx.dataAdapter({ dataType: "json", dataFields: [ { name: 'EmployeeID', type: 'number' }, { name: 'ReportsTo', type: 'number' }, { name: 'FirstName', type: 'string' }, { name: 'LastName', type: 'string' }, { name: 'Country', type: 'string' }, { name: 'City', type: 'string' }, { name: 'Address', type: 'string' }, { name: 'Title', type: 'string' }, { name: 'HireDate', type: 'date' }, { name: 'BirthDate', type: 'date' } ], hierarchy: { keyDataField: { name: 'EmployeeID' }, parentDataField: { name: 'ReportsTo' } }, id: 'EmployeeID', localData: [ { "EmployeeID": 1, "FirstName": "Nancy", "LastName": "Davolio", "ReportsTo": 2, "Country": "USA", "Title": "Sales Representative", "HireDate": "1992-05-01 00:00:00", "BirthDate": "1948-12-08 00:00:00", "City": "Seattle", "Address": "507 - 20th Ave. E.Apt. 2A" }, { "EmployeeID": 2, "FirstName": "Andrew", "LastName": "Fuller", "ReportsTo": null, "Country": "USA", "Title": "Vice President, Sales", "HireDate": "1992-08-14 00:00:00", "BirthDate": "1952-02-19 00:00:00", "City": "Tacoma", "Address": "908 W. Capital Way" }, { "EmployeeID": 3, "FirstName": "Janet", "LastName": "Leverling", "ReportsTo": 2, "Country": "USA", "Title": "Sales Representative", "HireDate": "1992-04-01 00:00:00", "BirthDate": "1963-08-30 00:00:00", "City": "Kirkland", "Address": "722 Moss Bay Blvd." }, { "EmployeeID": 4, "FirstName": "Margaret", "LastName": "Peacock", "ReportsTo": 2, "Country": "USA", "Title": "Sales Representative", "HireDate": "1993-05-03 00:00:00", "BirthDate": "1937-09-19 00:00:00", "City": "Redmond", "Address": "4110 Old Redmond Rd." }, { "EmployeeID": 5, "FirstName": "Steven", "LastName": "Buchanan", "ReportsTo": 2, "Country": "UK", "Title": "Sales Manager", "HireDate": "1993-10-17 00:00:00", "BirthDate": "1955-03-04 00:00:00", "City": "London", "Address": "14 Garrett Hill" }, { "EmployeeID": 6, "FirstName": "Michael", "LastName": "Suyama", "ReportsTo": 5, "Country": "UK", "Title": "Sales Representative", "HireDate": "1993-10-17 00:00:00", "BirthDate": "1963-07-02 00:00:00", "City": "London", "Address": "Coventry House Miner Rd." }, { "EmployeeID": 7, "FirstName": "Robert", "LastName": "King", "ReportsTo": 5, "Country": "UK", "Title": "Sales Representative", "HireDate": "1994-01-02 00:00:00", "BirthDate": "1960-05-29 00:00:00", "City": "London", "Address": "Edgeham Hollow Winchester Way" }, { "EmployeeID": 8, "FirstName": "Laura", "LastName": "Callahan", "ReportsTo": 2, "Country": "USA", "Title": "Inside Sales Coordinator", "HireDate": "1994-03-05 00:00:00", "BirthDate": "1958-01-09 00:00:00", "City": "Seattle", "Address": "4726 - 11th Ave. N.E." }, { "EmployeeID": 9, "FirstName": "Anne", "LastName": "Dodsworth", "ReportsTo": 5, "Country": "UK", "Title": "Sales Representative", "HireDate": "1994-11-15 00:00:00", "BirthDate": "1966-01-27 00:00:00", "City": "London", "Address": "7 Houndstooth Rd." } ]}); var columns = [ { text: 'FirstName', columnGroup: 'Name', dataField: 'FirstName', width: 200 }, { text: 'LastName', columnGroup: 'Name', dataField: 'LastName', width: 200 }, { text: 'Title', dataField: 'Title', width: 160 }, { text: 'Birth Date', dataField: 'BirthDate', cellsFormat: 'd', width: 120 }, { text: 'Hire Date', dataField: 'HireDate', cellsFormat: 'd', width: 120 }, { text: 'Address', dataField: 'Address', width: 250 }, { text: 'City', dataField: 'City', width: 120 }, { text: 'Country', dataField: 'Country' } ]; var columnGroups = [ { text: 'Name', name: 'Name' } ]; JQXElements.settings[ "treeGridSettings"] = { } window.onload = function() { var result = document.querySelector( "jqx-tree-grid").getView(); } </script></head><body> <jqx-tree-grid settings="treeGridSettings"></jqx-tree-grid>
|
getCellValue
|
Method
|
|
Parameter |
Type |
Description |
rowKey |
string |
Unique ID which identifies the row |
dataField |
string |
|
Return Value
Object
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>TreeGrid Custom Element Filtering and Sorting</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,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/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtreegrid.js"></script> <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script> <script type="text/javascript"> var source = new jqx.dataAdapter({ dataType: "json", dataFields: [ { name: 'EmployeeID', type: 'number' }, { name: 'ReportsTo', type: 'number' }, { name: 'FirstName', type: 'string' }, { name: 'LastName', type: 'string' }, { name: 'Country', type: 'string' }, { name: 'City', type: 'string' }, { name: 'Address', type: 'string' }, { name: 'Title', type: 'string' }, { name: 'HireDate', type: 'date' }, { name: 'BirthDate', type: 'date' } ], hierarchy: { keyDataField: { name: 'EmployeeID' }, parentDataField: { name: 'ReportsTo' } }, id: 'EmployeeID', localData: [ { "EmployeeID": 1, "FirstName": "Nancy", "LastName": "Davolio", "ReportsTo": 2, "Country": "USA", "Title": "Sales Representative", "HireDate": "1992-05-01 00:00:00", "BirthDate": "1948-12-08 00:00:00", "City": "Seattle", "Address": "507 - 20th Ave. E.Apt. 2A" }, { "EmployeeID": 2, "FirstName": "Andrew", "LastName": "Fuller", "ReportsTo": null, "Country": "USA", "Title": "Vice President, Sales", "HireDate": "1992-08-14 00:00:00", "BirthDate": "1952-02-19 00:00:00", "City": "Tacoma", "Address": "908 W. Capital Way" }, { "EmployeeID": 3, "FirstName": "Janet", "LastName": "Leverling", "ReportsTo": 2, "Country": "USA", "Title": "Sales Representative", "HireDate": "1992-04-01 00:00:00", "BirthDate": "1963-08-30 00:00:00", "City": "Kirkland", "Address": "722 Moss Bay Blvd." }, { "EmployeeID": 4, "FirstName": "Margaret", "LastName": "Peacock", "ReportsTo": 2, "Country": "USA", "Title": "Sales Representative", "HireDate": "1993-05-03 00:00:00", "BirthDate": "1937-09-19 00:00:00", "City": "Redmond", "Address": "4110 Old Redmond Rd." }, { "EmployeeID": 5, "FirstName": "Steven", "LastName": "Buchanan", "ReportsTo": 2, "Country": "UK", "Title": "Sales Manager", "HireDate": "1993-10-17 00:00:00", "BirthDate": "1955-03-04 00:00:00", "City": "London", "Address": "14 Garrett Hill" }, { "EmployeeID": 6, "FirstName": "Michael", "LastName": "Suyama", "ReportsTo": 5, "Country": "UK", "Title": "Sales Representative", "HireDate": "1993-10-17 00:00:00", "BirthDate": "1963-07-02 00:00:00", "City": "London", "Address": "Coventry House Miner Rd." }, { "EmployeeID": 7, "FirstName": "Robert", "LastName": "King", "ReportsTo": 5, "Country": "UK", "Title": "Sales Representative", "HireDate": "1994-01-02 00:00:00", "BirthDate": "1960-05-29 00:00:00", "City": "London", "Address": "Edgeham Hollow Winchester Way" }, { "EmployeeID": 8, "FirstName": "Laura", "LastName": "Callahan", "ReportsTo": 2, "Country": "USA", "Title": "Inside Sales Coordinator", "HireDate": "1994-03-05 00:00:00", "BirthDate": "1958-01-09 00:00:00", "City": "Seattle", "Address": "4726 - 11th Ave. N.E." }, { "EmployeeID": 9, "FirstName": "Anne", "LastName": "Dodsworth", "ReportsTo": 5, "Country": "UK", "Title": "Sales Representative", "HireDate": "1994-11-15 00:00:00", "BirthDate": "1966-01-27 00:00:00", "City": "London", "Address": "7 Houndstooth Rd." } ]}); var columns = [ { text: 'FirstName', columnGroup: 'Name', dataField: 'FirstName', width: 200 }, { text: 'LastName', columnGroup: 'Name', dataField: 'LastName', width: 200 }, { text: 'Title', dataField: 'Title', width: 160 }, { text: 'Birth Date', dataField: 'BirthDate', cellsFormat: 'd', width: 120 }, { text: 'Hire Date', dataField: 'HireDate', cellsFormat: 'd', width: 120 }, { text: 'Address', dataField: 'Address', width: 250 }, { text: 'City', dataField: 'City', width: 120 }, { text: 'Country', dataField: 'Country' } ]; var columnGroups = [ { text: 'Name', name: 'Name' } ]; JQXElements.settings[ "treeGridSettings"] = { } window.onload = function() { document.querySelector( "jqx-tree-grid").getCellValue(1, 'firstName'); } </script></head><body> <jqx-tree-grid settings="treeGridSettings"></jqx-tree-grid>
|
hideColumn
|
Method
|
|
Parameter |
Type |
Description |
dataField |
string |
|
Return Value
void
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>TreeGrid Custom Element Filtering and Sorting</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,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/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtreegrid.js"></script> <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script> <script type="text/javascript"> var source = new jqx.dataAdapter({ dataType: "json", dataFields: [ { name: 'EmployeeID', type: 'number' }, { name: 'ReportsTo', type: 'number' }, { name: 'FirstName', type: 'string' }, { name: 'LastName', type: 'string' }, { name: 'Country', type: 'string' }, { name: 'City', type: 'string' }, { name: 'Address', type: 'string' }, { name: 'Title', type: 'string' }, { name: 'HireDate', type: 'date' }, { name: 'BirthDate', type: 'date' } ], hierarchy: { keyDataField: { name: 'EmployeeID' }, parentDataField: { name: 'ReportsTo' } }, id: 'EmployeeID', localData: [ { "EmployeeID": 1, "FirstName": "Nancy", "LastName": "Davolio", "ReportsTo": 2, "Country": "USA", "Title": "Sales Representative", "HireDate": "1992-05-01 00:00:00", "BirthDate": "1948-12-08 00:00:00", "City": "Seattle", "Address": "507 - 20th Ave. E.Apt. 2A" }, { "EmployeeID": 2, "FirstName": "Andrew", "LastName": "Fuller", "ReportsTo": null, "Country": "USA", "Title": "Vice President, Sales", "HireDate": "1992-08-14 00:00:00", "BirthDate": "1952-02-19 00:00:00", "City": "Tacoma", "Address": "908 W. Capital Way" }, { "EmployeeID": 3, "FirstName": "Janet", "LastName": "Leverling", "ReportsTo": 2, "Country": "USA", "Title": "Sales Representative", "HireDate": "1992-04-01 00:00:00", "BirthDate": "1963-08-30 00:00:00", "City": "Kirkland", "Address": "722 Moss Bay Blvd." }, { "EmployeeID": 4, "FirstName": "Margaret", "LastName": "Peacock", "ReportsTo": 2, "Country": "USA", "Title": "Sales Representative", "HireDate": "1993-05-03 00:00:00", "BirthDate": "1937-09-19 00:00:00", "City": "Redmond", "Address": "4110 Old Redmond Rd." }, { "EmployeeID": 5, "FirstName": "Steven", "LastName": "Buchanan", "ReportsTo": 2, "Country": "UK", "Title": "Sales Manager", "HireDate": "1993-10-17 00:00:00", "BirthDate": "1955-03-04 00:00:00", "City": "London", "Address": "14 Garrett Hill" }, { "EmployeeID": 6, "FirstName": "Michael", "LastName": "Suyama", "ReportsTo": 5, "Country": "UK", "Title": "Sales Representative", "HireDate": "1993-10-17 00:00:00", "BirthDate": "1963-07-02 00:00:00", "City": "London", "Address": "Coventry House Miner Rd." }, { "EmployeeID": 7, "FirstName": "Robert", "LastName": "King", "ReportsTo": 5, "Country": "UK", "Title": "Sales Representative", "HireDate": "1994-01-02 00:00:00", "BirthDate": "1960-05-29 00:00:00", "City": "London", "Address": "Edgeham Hollow Winchester Way" }, { "EmployeeID": 8, "FirstName": "Laura", "LastName": "Callahan", "ReportsTo": 2, "Country": "USA", "Title": "Inside Sales Coordinator", "HireDate": "1994-03-05 00:00:00", "BirthDate": "1958-01-09 00:00:00", "City": "Seattle", "Address": "4726 - 11th Ave. N.E." }, { "EmployeeID": 9, "FirstName": "Anne", "LastName": "Dodsworth", "ReportsTo": 5, "Country": "UK", "Title": "Sales Representative", "HireDate": "1994-11-15 00:00:00", "BirthDate": "1966-01-27 00:00:00", "City": "London", "Address": "7 Houndstooth Rd." } ]}); var columns = [ { text: 'FirstName', columnGroup: 'Name', dataField: 'FirstName', width: 200 }, { text: 'LastName', columnGroup: 'Name', dataField: 'LastName', width: 200 }, { text: 'Title', dataField: 'Title', width: 160 }, { text: 'Birth Date', dataField: 'BirthDate', cellsFormat: 'd', width: 120 }, { text: 'Hire Date', dataField: 'HireDate', cellsFormat: 'd', width: 120 }, { text: 'Address', dataField: 'Address', width: 250 }, { text: 'City', dataField: 'City', width: 120 }, { text: 'Country', dataField: 'Country' } ]; var columnGroups = [ { text: 'Name', name: 'Name' } ]; JQXElements.settings[ "treeGridSettings"] = { } window.onload = function() { document.querySelector( "jqx-tree-grid").hideColumn( 'firstName'); } </script></head><body> <jqx-tree-grid settings="treeGridSettings"></jqx-tree-grid>
|
isBindingCompleted
|
Method
|
|
Parameter |
Type |
Description |
None |
|
|
Return Value
Boolean
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>TreeGrid Custom Element Filtering and Sorting</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,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/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtreegrid.js"></script> <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script> <script type="text/javascript"> var source = new jqx.dataAdapter({ dataType: "json", dataFields: [ { name: 'EmployeeID', type: 'number' }, { name: 'ReportsTo', type: 'number' }, { name: 'FirstName', type: 'string' }, { name: 'LastName', type: 'string' }, { name: 'Country', type: 'string' }, { name: 'City', type: 'string' }, { name: 'Address', type: 'string' }, { name: 'Title', type: 'string' }, { name: 'HireDate', type: 'date' }, { name: 'BirthDate', type: 'date' } ], hierarchy: { keyDataField: { name: 'EmployeeID' }, parentDataField: { name: 'ReportsTo' } }, id: 'EmployeeID', localData: [ { "EmployeeID": 1, "FirstName": "Nancy", "LastName": "Davolio", "ReportsTo": 2, "Country": "USA", "Title": "Sales Representative", "HireDate": "1992-05-01 00:00:00", "BirthDate": "1948-12-08 00:00:00", "City": "Seattle", "Address": "507 - 20th Ave. E.Apt. 2A" }, { "EmployeeID": 2, "FirstName": "Andrew", "LastName": "Fuller", "ReportsTo": null, "Country": "USA", "Title": "Vice President, Sales", "HireDate": "1992-08-14 00:00:00", "BirthDate": "1952-02-19 00:00:00", "City": "Tacoma", "Address": "908 W. Capital Way" }, { "EmployeeID": 3, "FirstName": "Janet", "LastName": "Leverling", "ReportsTo": 2, "Country": "USA", "Title": "Sales Representative", "HireDate": "1992-04-01 00:00:00", "BirthDate": "1963-08-30 00:00:00", "City": "Kirkland", "Address": "722 Moss Bay Blvd." }, { "EmployeeID": 4, "FirstName": "Margaret", "LastName": "Peacock", "ReportsTo": 2, "Country": "USA", "Title": "Sales Representative", "HireDate": "1993-05-03 00:00:00", "BirthDate": "1937-09-19 00:00:00", "City": "Redmond", "Address": "4110 Old Redmond Rd." }, { "EmployeeID": 5, "FirstName": "Steven", "LastName": "Buchanan", "ReportsTo": 2, "Country": "UK", "Title": "Sales Manager", "HireDate": "1993-10-17 00:00:00", "BirthDate": "1955-03-04 00:00:00", "City": "London", "Address": "14 Garrett Hill" }, { "EmployeeID": 6, "FirstName": "Michael", "LastName": "Suyama", "ReportsTo": 5, "Country": "UK", "Title": "Sales Representative", "HireDate": "1993-10-17 00:00:00", "BirthDate": "1963-07-02 00:00:00", "City": "London", "Address": "Coventry House Miner Rd." }, { "EmployeeID": 7, "FirstName": "Robert", "LastName": "King", "ReportsTo": 5, "Country": "UK", "Title": "Sales Representative", "HireDate": "1994-01-02 00:00:00", "BirthDate": "1960-05-29 00:00:00", "City": "London", "Address": "Edgeham Hollow Winchester Way" }, { "EmployeeID": 8, "FirstName": "Laura", "LastName": "Callahan", "ReportsTo": 2, "Country": "USA", "Title": "Inside Sales Coordinator", "HireDate": "1994-03-05 00:00:00", "BirthDate": "1958-01-09 00:00:00", "City": "Seattle", "Address": "4726 - 11th Ave. N.E." }, { "EmployeeID": 9, "FirstName": "Anne", "LastName": "Dodsworth", "ReportsTo": 5, "Country": "UK", "Title": "Sales Representative", "HireDate": "1994-11-15 00:00:00", "BirthDate": "1966-01-27 00:00:00", "City": "London", "Address": "7 Houndstooth Rd." } ]}); var columns = [ { text: 'FirstName', columnGroup: 'Name', dataField: 'FirstName', width: 200 }, { text: 'LastName', columnGroup: 'Name', dataField: 'LastName', width: 200 }, { text: 'Title', dataField: 'Title', width: 160 }, { text: 'Birth Date', dataField: 'BirthDate', cellsFormat: 'd', width: 120 }, { text: 'Hire Date', dataField: 'HireDate', cellsFormat: 'd', width: 120 }, { text: 'Address', dataField: 'Address', width: 250 }, { text: 'City', dataField: 'City', width: 120 }, { text: 'Country', dataField: 'Country' } ]; var columnGroups = [ { text: 'Name', name: 'Name' } ]; JQXElements.settings[ "treeGridSettings"] = { } window.onload = function() { var result = document.querySelector( "jqx-tree-grid").isBindingCompleted(); } </script></head><body> <jqx-tree-grid settings="treeGridSettings"></jqx-tree-grid>
|
lockRow
|
Method
|
|
Parameter |
Type |
Description |
rowKey |
string |
Unique ID which identifies the row |
Return Value
void
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>TreeGrid Custom Element Filtering and Sorting</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,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/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtreegrid.js"></script> <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script> <script type="text/javascript"> var source = new jqx.dataAdapter({ dataType: "json", dataFields: [ { name: 'EmployeeID', type: 'number' }, { name: 'ReportsTo', type: 'number' }, { name: 'FirstName', type: 'string' }, { name: 'LastName', type: 'string' }, { name: 'Country', type: 'string' }, { name: 'City', type: 'string' }, { name: 'Address', type: 'string' }, { name: 'Title', type: 'string' }, { name: 'HireDate', type: 'date' }, { name: 'BirthDate', type: 'date' } ], hierarchy: { keyDataField: { name: 'EmployeeID' }, parentDataField: { name: 'ReportsTo' } }, id: 'EmployeeID', localData: [ { "EmployeeID": 1, "FirstName": "Nancy", "LastName": "Davolio", "ReportsTo": 2, "Country": "USA", "Title": "Sales Representative", "HireDate": "1992-05-01 00:00:00", "BirthDate": "1948-12-08 00:00:00", "City": "Seattle", "Address": "507 - 20th Ave. E.Apt. 2A" }, { "EmployeeID": 2, "FirstName": "Andrew", "LastName": "Fuller", "ReportsTo": null, "Country": "USA", "Title": "Vice President, Sales", "HireDate": "1992-08-14 00:00:00", "BirthDate": "1952-02-19 00:00:00", "City": "Tacoma", "Address": "908 W. Capital Way" }, { "EmployeeID": 3, "FirstName": "Janet", "LastName": "Leverling", "ReportsTo": 2, "Country": "USA", "Title": "Sales Representative", "HireDate": "1992-04-01 00:00:00", "BirthDate": "1963-08-30 00:00:00", "City": "Kirkland", "Address": "722 Moss Bay Blvd." }, { "EmployeeID": 4, "FirstName": "Margaret", "LastName": "Peacock", "ReportsTo": 2, "Country": "USA", "Title": "Sales Representative", "HireDate": "1993-05-03 00:00:00", "BirthDate": "1937-09-19 00:00:00", "City": "Redmond", "Address": "4110 Old Redmond Rd." }, { "EmployeeID": 5, "FirstName": "Steven", "LastName": "Buchanan", "ReportsTo": 2, "Country": "UK", "Title": "Sales Manager", "HireDate": "1993-10-17 00:00:00", "BirthDate": "1955-03-04 00:00:00", "City": "London", "Address": "14 Garrett Hill" }, { "EmployeeID": 6, "FirstName": "Michael", "LastName": "Suyama", "ReportsTo": 5, "Country": "UK", "Title": "Sales Representative", "HireDate": "1993-10-17 00:00:00", "BirthDate": "1963-07-02 00:00:00", "City": "London", "Address": "Coventry House Miner Rd." }, { "EmployeeID": 7, "FirstName": "Robert", "LastName": "King", "ReportsTo": 5, "Country": "UK", "Title": "Sales Representative", "HireDate": "1994-01-02 00:00:00", "BirthDate": "1960-05-29 00:00:00", "City": "London", "Address": "Edgeham Hollow Winchester Way" }, { "EmployeeID": 8, "FirstName": "Laura", "LastName": "Callahan", "ReportsTo": 2, "Country": "USA", "Title": "Inside Sales Coordinator", "HireDate": "1994-03-05 00:00:00", "BirthDate": "1958-01-09 00:00:00", "City": "Seattle", "Address": "4726 - 11th Ave. N.E." }, { "EmployeeID": 9, "FirstName": "Anne", "LastName": "Dodsworth", "ReportsTo": 5, "Country": "UK", "Title": "Sales Representative", "HireDate": "1994-11-15 00:00:00", "BirthDate": "1966-01-27 00:00:00", "City": "London", "Address": "7 Houndstooth Rd." } ]}); var columns = [ { text: 'FirstName', columnGroup: 'Name', dataField: 'FirstName', width: 200 }, { text: 'LastName', columnGroup: 'Name', dataField: 'LastName', width: 200 }, { text: 'Title', dataField: 'Title', width: 160 }, { text: 'Birth Date', dataField: 'BirthDate', cellsFormat: 'd', width: 120 }, { text: 'Hire Date', dataField: 'HireDate', cellsFormat: 'd', width: 120 }, { text: 'Address', dataField: 'Address', width: 250 }, { text: 'City', dataField: 'City', width: 120 }, { text: 'Country', dataField: 'Country' } ]; var columnGroups = [ { text: 'Name', name: 'Name' } ]; JQXElements.settings[ "treeGridSettings"] = { } window.onload = function() { document.querySelector( "jqx-tree-grid").lockRow(10); } </script></head><body> <jqx-tree-grid settings="treeGridSettings"></jqx-tree-grid>
|
refresh
|
Method
|
|
Parameter |
Type |
Description |
None |
|
|
Return Value
void
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>TreeGrid Custom Element Filtering and Sorting</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,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/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtreegrid.js"></script> <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script> <script type="text/javascript"> var source = new jqx.dataAdapter({ dataType: "json", dataFields: [ { name: 'EmployeeID', type: 'number' }, { name: 'ReportsTo', type: 'number' }, { name: 'FirstName', type: 'string' }, { name: 'LastName', type: 'string' }, { name: 'Country', type: 'string' }, { name: 'City', type: 'string' }, { name: 'Address', type: 'string' }, { name: 'Title', type: 'string' }, { name: 'HireDate', type: 'date' }, { name: 'BirthDate', type: 'date' } ], hierarchy: { keyDataField: { name: 'EmployeeID' }, parentDataField: { name: 'ReportsTo' } }, id: 'EmployeeID', localData: [ { "EmployeeID": 1, "FirstName": "Nancy", "LastName": "Davolio", "ReportsTo": 2, "Country": "USA", "Title": "Sales Representative", "HireDate": "1992-05-01 00:00:00", "BirthDate": "1948-12-08 00:00:00", "City": "Seattle", "Address": "507 - 20th Ave. E.Apt. 2A" }, { "EmployeeID": 2, "FirstName": "Andrew", "LastName": "Fuller", "ReportsTo": null, "Country": "USA", "Title": "Vice President, Sales", "HireDate": "1992-08-14 00:00:00", "BirthDate": "1952-02-19 00:00:00", "City": "Tacoma", "Address": "908 W. Capital Way" }, { "EmployeeID": 3, "FirstName": "Janet", "LastName": "Leverling", "ReportsTo": 2, "Country": "USA", "Title": "Sales Representative", "HireDate": "1992-04-01 00:00:00", "BirthDate": "1963-08-30 00:00:00", "City": "Kirkland", "Address": "722 Moss Bay Blvd." }, { "EmployeeID": 4, "FirstName": "Margaret", "LastName": "Peacock", "ReportsTo": 2, "Country": "USA", "Title": "Sales Representative", "HireDate": "1993-05-03 00:00:00", "BirthDate": "1937-09-19 00:00:00", "City": "Redmond", "Address": "4110 Old Redmond Rd." }, { "EmployeeID": 5, "FirstName": "Steven", "LastName": "Buchanan", "ReportsTo": 2, "Country": "UK", "Title": "Sales Manager", "HireDate": "1993-10-17 00:00:00", "BirthDate": "1955-03-04 00:00:00", "City": "London", "Address": "14 Garrett Hill" }, { "EmployeeID": 6, "FirstName": "Michael", "LastName": "Suyama", "ReportsTo": 5, "Country": "UK", "Title": "Sales Representative", "HireDate": "1993-10-17 00:00:00", "BirthDate": "1963-07-02 00:00:00", "City": "London", "Address": "Coventry House Miner Rd." }, { "EmployeeID": 7, "FirstName": "Robert", "LastName": "King", "ReportsTo": 5, "Country": "UK", "Title": "Sales Representative", "HireDate": "1994-01-02 00:00:00", "BirthDate": "1960-05-29 00:00:00", "City": "London", "Address": "Edgeham Hollow Winchester Way" }, { "EmployeeID": 8, "FirstName": "Laura", "LastName": "Callahan", "ReportsTo": 2, "Country": "USA", "Title": "Inside Sales Coordinator", "HireDate": "1994-03-05 00:00:00", "BirthDate": "1958-01-09 00:00:00", "City": "Seattle", "Address": "4726 - 11th Ave. N.E." }, { "EmployeeID": 9, "FirstName": "Anne", "LastName": "Dodsworth", "ReportsTo": 5, "Country": "UK", "Title": "Sales Representative", "HireDate": "1994-11-15 00:00:00", "BirthDate": "1966-01-27 00:00:00", "City": "London", "Address": "7 Houndstooth Rd." } ]}); var columns = [ { text: 'FirstName', columnGroup: 'Name', dataField: 'FirstName', width: 200 }, { text: 'LastName', columnGroup: 'Name', dataField: 'LastName', width: 200 }, { text: 'Title', dataField: 'Title', width: 160 }, { text: 'Birth Date', dataField: 'BirthDate', cellsFormat: 'd', width: 120 }, { text: 'Hire Date', dataField: 'HireDate', cellsFormat: 'd', width: 120 }, { text: 'Address', dataField: 'Address', width: 250 }, { text: 'City', dataField: 'City', width: 120 }, { text: 'Country', dataField: 'Country' } ]; var columnGroups = [ { text: 'Name', name: 'Name' } ]; JQXElements.settings[ "treeGridSettings"] = { } window.onload = function() { document.querySelector( "jqx-tree-grid").refresh(); } </script></head><body> <jqx-tree-grid settings="treeGridSettings"></jqx-tree-grid>
|
render
|
Method
|
|
Parameter |
Type |
Description |
None |
|
|
Return Value
void
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>TreeGrid Custom Element Filtering and Sorting</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,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/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtreegrid.js"></script> <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script> <script type="text/javascript"> var source = new jqx.dataAdapter({ dataType: "json", dataFields: [ { name: 'EmployeeID', type: 'number' }, { name: 'ReportsTo', type: 'number' }, { name: 'FirstName', type: 'string' }, { name: 'LastName', type: 'string' }, { name: 'Country', type: 'string' }, { name: 'City', type: 'string' }, { name: 'Address', type: 'string' }, { name: 'Title', type: 'string' }, { name: 'HireDate', type: 'date' }, { name: 'BirthDate', type: 'date' } ], hierarchy: { keyDataField: { name: 'EmployeeID' }, parentDataField: { name: 'ReportsTo' } }, id: 'EmployeeID', localData: [ { "EmployeeID": 1, "FirstName": "Nancy", "LastName": "Davolio", "ReportsTo": 2, "Country": "USA", "Title": "Sales Representative", "HireDate": "1992-05-01 00:00:00", "BirthDate": "1948-12-08 00:00:00", "City": "Seattle", "Address": "507 - 20th Ave. E.Apt. 2A" }, { "EmployeeID": 2, "FirstName": "Andrew", "LastName": "Fuller", "ReportsTo": null, "Country": "USA", "Title": "Vice President, Sales", "HireDate": "1992-08-14 00:00:00", "BirthDate": "1952-02-19 00:00:00", "City": "Tacoma", "Address": "908 W. Capital Way" }, { "EmployeeID": 3, "FirstName": "Janet", "LastName": "Leverling", "ReportsTo": 2, "Country": "USA", "Title": "Sales Representative", "HireDate": "1992-04-01 00:00:00", "BirthDate": "1963-08-30 00:00:00", "City": "Kirkland", "Address": "722 Moss Bay Blvd." }, { "EmployeeID": 4, "FirstName": "Margaret", "LastName": "Peacock", "ReportsTo": 2, "Country": "USA", "Title": "Sales Representative", "HireDate": "1993-05-03 00:00:00", "BirthDate": "1937-09-19 00:00:00", "City": "Redmond", "Address": "4110 Old Redmond Rd." }, { "EmployeeID": 5, "FirstName": "Steven", "LastName": "Buchanan", "ReportsTo": 2, "Country": "UK", "Title": "Sales Manager", "HireDate": "1993-10-17 00:00:00", "BirthDate": "1955-03-04 00:00:00", "City": "London", "Address": "14 Garrett Hill" }, { "EmployeeID": 6, "FirstName": "Michael", "LastName": "Suyama", "ReportsTo": 5, "Country": "UK", "Title": "Sales Representative", "HireDate": "1993-10-17 00:00:00", "BirthDate": "1963-07-02 00:00:00", "City": "London", "Address": "Coventry House Miner Rd." }, { "EmployeeID": 7, "FirstName": "Robert", "LastName": "King", "ReportsTo": 5, "Country": "UK", "Title": "Sales Representative", "HireDate": "1994-01-02 00:00:00", "BirthDate": "1960-05-29 00:00:00", "City": "London", "Address": "Edgeham Hollow Winchester Way" }, { "EmployeeID": 8, "FirstName": "Laura", "LastName": "Callahan", "ReportsTo": 2, "Country": "USA", "Title": "Inside Sales Coordinator", "HireDate": "1994-03-05 00:00:00", "BirthDate": "1958-01-09 00:00:00", "City": "Seattle", "Address": "4726 - 11th Ave. N.E." }, { "EmployeeID": 9, "FirstName": "Anne", "LastName": "Dodsworth", "ReportsTo": 5, "Country": "UK", "Title": "Sales Representative", "HireDate": "1994-11-15 00:00:00", "BirthDate": "1966-01-27 00:00:00", "City": "London", "Address": "7 Houndstooth Rd." } ]}); var columns = [ { text: 'FirstName', columnGroup: 'Name', dataField: 'FirstName', width: 200 }, { text: 'LastName', columnGroup: 'Name', dataField: 'LastName', width: 200 }, { text: 'Title', dataField: 'Title', width: 160 }, { text: 'Birth Date', dataField: 'BirthDate', cellsFormat: 'd', width: 120 }, { text: 'Hire Date', dataField: 'HireDate', cellsFormat: 'd', width: 120 }, { text: 'Address', dataField: 'Address', width: 250 }, { text: 'City', dataField: 'City', width: 120 }, { text: 'Country', dataField: 'Country' } ]; var columnGroups = [ { text: 'Name', name: 'Name' } ]; JQXElements.settings[ "treeGridSettings"] = { } window.onload = function() { document.querySelector( "jqx-tree-grid").render(); } </script></head><body> <jqx-tree-grid settings="treeGridSettings"></jqx-tree-grid>
|
removeFilter
|
Method
|
|
Parameter |
Type |
Description |
dataField |
string |
|
Return Value
void
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>TreeGrid Custom Element Filtering and Sorting</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,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/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtreegrid.js"></script> <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script> <script type="text/javascript"> var source = new jqx.dataAdapter({ dataType: "json", dataFields: [ { name: 'EmployeeID', type: 'number' }, { name: 'ReportsTo', type: 'number' }, { name: 'FirstName', type: 'string' }, { name: 'LastName', type: 'string' }, { name: 'Country', type: 'string' }, { name: 'City', type: 'string' }, { name: 'Address', type: 'string' }, { name: 'Title', type: 'string' }, { name: 'HireDate', type: 'date' }, { name: 'BirthDate', type: 'date' } ], hierarchy: { keyDataField: { name: 'EmployeeID' }, parentDataField: { name: 'ReportsTo' } }, id: 'EmployeeID', localData: [ { "EmployeeID": 1, "FirstName": "Nancy", "LastName": "Davolio", "ReportsTo": 2, "Country": "USA", "Title": "Sales Representative", "HireDate": "1992-05-01 00:00:00", "BirthDate": "1948-12-08 00:00:00", "City": "Seattle", "Address": "507 - 20th Ave. E.Apt. 2A" }, { "EmployeeID": 2, "FirstName": "Andrew", "LastName": "Fuller", "ReportsTo": null, "Country": "USA", "Title": "Vice President, Sales", "HireDate": "1992-08-14 00:00:00", "BirthDate": "1952-02-19 00:00:00", "City": "Tacoma", "Address": "908 W. Capital Way" }, { "EmployeeID": 3, "FirstName": "Janet", "LastName": "Leverling", "ReportsTo": 2, "Country": "USA", "Title": "Sales Representative", "HireDate": "1992-04-01 00:00:00", "BirthDate": "1963-08-30 00:00:00", "City": "Kirkland", "Address": "722 Moss Bay Blvd." }, { "EmployeeID": 4, "FirstName": "Margaret", "LastName": "Peacock", "ReportsTo": 2, "Country": "USA", "Title": "Sales Representative", "HireDate": "1993-05-03 00:00:00", "BirthDate": "1937-09-19 00:00:00", "City": "Redmond", "Address": "4110 Old Redmond Rd." }, { "EmployeeID": 5, "FirstName": "Steven", "LastName": "Buchanan", "ReportsTo": 2, "Country": "UK", "Title": "Sales Manager", "HireDate": "1993-10-17 00:00:00", "BirthDate": "1955-03-04 00:00:00", "City": "London", "Address": "14 Garrett Hill" }, { "EmployeeID": 6, "FirstName": "Michael", "LastName": "Suyama", "ReportsTo": 5, "Country": "UK", "Title": "Sales Representative", "HireDate": "1993-10-17 00:00:00", "BirthDate": "1963-07-02 00:00:00", "City": "London", "Address": "Coventry House Miner Rd." }, { "EmployeeID": 7, "FirstName": "Robert", "LastName": "King", "ReportsTo": 5, "Country": "UK", "Title": "Sales Representative", "HireDate": "1994-01-02 00:00:00", "BirthDate": "1960-05-29 00:00:00", "City": "London", "Address": "Edgeham Hollow Winchester Way" }, { "EmployeeID": 8, "FirstName": "Laura", "LastName": "Callahan", "ReportsTo": 2, "Country": "USA", "Title": "Inside Sales Coordinator", "HireDate": "1994-03-05 00:00:00", "BirthDate": "1958-01-09 00:00:00", "City": "Seattle", "Address": "4726 - 11th Ave. N.E." }, { "EmployeeID": 9, "FirstName": "Anne", "LastName": "Dodsworth", "ReportsTo": 5, "Country": "UK", "Title": "Sales Representative", "HireDate": "1994-11-15 00:00:00", "BirthDate": "1966-01-27 00:00:00", "City": "London", "Address": "7 Houndstooth Rd." } ]}); var columns = [ { text: 'FirstName', columnGroup: 'Name', dataField: 'FirstName', width: 200 }, { text: 'LastName', columnGroup: 'Name', dataField: 'LastName', width: 200 }, { text: 'Title', dataField: 'Title', width: 160 }, { text: 'Birth Date', dataField: 'BirthDate', cellsFormat: 'd', width: 120 }, { text: 'Hire Date', dataField: 'HireDate', cellsFormat: 'd', width: 120 }, { text: 'Address', dataField: 'Address', width: 250 }, { text: 'City', dataField: 'City', width: 120 }, { text: 'Country', dataField: 'Country' } ]; var columnGroups = [ { text: 'Name', name: 'Name' } ]; JQXElements.settings[ "treeGridSettings"] = { } window.onload = function() { document.querySelector( "jqx-tree-grid").removeFilter(firstName); } </script></head><body> <jqx-tree-grid settings="treeGridSettings"></jqx-tree-grid>
|
scrollOffset
|
Method
|
|
Parameter |
Type |
Description |
top |
number |
vertical scrollbar value |
left |
number |
horizontal scrollbar value |
Return Value
Object
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>TreeGrid Custom Element Filtering and Sorting</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,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/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtreegrid.js"></script> <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script> <script type="text/javascript"> var source = new jqx.dataAdapter({ dataType: "json", dataFields: [ { name: 'EmployeeID', type: 'number' }, { name: 'ReportsTo', type: 'number' }, { name: 'FirstName', type: 'string' }, { name: 'LastName', type: 'string' }, { name: 'Country', type: 'string' }, { name: 'City', type: 'string' }, { name: 'Address', type: 'string' }, { name: 'Title', type: 'string' }, { name: 'HireDate', type: 'date' }, { name: 'BirthDate', type: 'date' } ], hierarchy: { keyDataField: { name: 'EmployeeID' }, parentDataField: { name: 'ReportsTo' } }, id: 'EmployeeID', localData: [ { "EmployeeID": 1, "FirstName": "Nancy", "LastName": "Davolio", "ReportsTo": 2, "Country": "USA", "Title": "Sales Representative", "HireDate": "1992-05-01 00:00:00", "BirthDate": "1948-12-08 00:00:00", "City": "Seattle", "Address": "507 - 20th Ave. E.Apt. 2A" }, { "EmployeeID": 2, "FirstName": "Andrew", "LastName": "Fuller", "ReportsTo": null, "Country": "USA", "Title": "Vice President, Sales", "HireDate": "1992-08-14 00:00:00", "BirthDate": "1952-02-19 00:00:00", "City": "Tacoma", "Address": "908 W. Capital Way" }, { "EmployeeID": 3, "FirstName": "Janet", "LastName": "Leverling", "ReportsTo": 2, "Country": "USA", "Title": "Sales Representative", "HireDate": "1992-04-01 00:00:00", "BirthDate": "1963-08-30 00:00:00", "City": "Kirkland", "Address": "722 Moss Bay Blvd." }, { "EmployeeID": 4, "FirstName": "Margaret", "LastName": "Peacock", "ReportsTo": 2, "Country": "USA", "Title": "Sales Representative", "HireDate": "1993-05-03 00:00:00", "BirthDate": "1937-09-19 00:00:00", "City": "Redmond", "Address": "4110 Old Redmond Rd." }, { "EmployeeID": 5, "FirstName": "Steven", "LastName": "Buchanan", "ReportsTo": 2, "Country": "UK", "Title": "Sales Manager", "HireDate": "1993-10-17 00:00:00", "BirthDate": "1955-03-04 00:00:00", "City": "London", "Address": "14 Garrett Hill" }, { "EmployeeID": 6, "FirstName": "Michael", "LastName": "Suyama", "ReportsTo": 5, "Country": "UK", "Title": "Sales Representative", "HireDate": "1993-10-17 00:00:00", "BirthDate": "1963-07-02 00:00:00", "City": "London", "Address": "Coventry House Miner Rd." }, { "EmployeeID": 7, "FirstName": "Robert", "LastName": "King", "ReportsTo": 5, "Country": "UK", "Title": "Sales Representative", "HireDate": "1994-01-02 00:00:00", "BirthDate": "1960-05-29 00:00:00", "City": "London", "Address": "Edgeham Hollow Winchester Way" }, { "EmployeeID": 8, "FirstName": "Laura", "LastName": "Callahan", "ReportsTo": 2, "Country": "USA", "Title": "Inside Sales Coordinator", "HireDate": "1994-03-05 00:00:00", "BirthDate": "1958-01-09 00:00:00", "City": "Seattle", "Address": "4726 - 11th Ave. N.E." }, { "EmployeeID": 9, "FirstName": "Anne", "LastName": "Dodsworth", "ReportsTo": 5, "Country": "UK", "Title": "Sales Representative", "HireDate": "1994-11-15 00:00:00", "BirthDate": "1966-01-27 00:00:00", "City": "London", "Address": "7 Houndstooth Rd." } ]}); var columns = [ { text: 'FirstName', columnGroup: 'Name', dataField: 'FirstName', width: 200 }, { text: 'LastName', columnGroup: 'Name', dataField: 'LastName', width: 200 }, { text: 'Title', dataField: 'Title', width: 160 }, { text: 'Birth Date', dataField: 'BirthDate', cellsFormat: 'd', width: 120 }, { text: 'Hire Date', dataField: 'HireDate', cellsFormat: 'd', width: 120 }, { text: 'Address', dataField: 'Address', width: 250 }, { text: 'City', dataField: 'City', width: 120 }, { text: 'Country', dataField: 'Country' } ]; var columnGroups = [ { text: 'Name', name: 'Name' } ]; JQXElements.settings[ "treeGridSettings"] = { } window.onload = function() { document.querySelector( "jqx-tree-grid").scrollOffset(10,0); } </script></head><body> <jqx-tree-grid settings="treeGridSettings"></jqx-tree-grid>
|
setColumnProperty
|
Method
|
|
Parameter |
Type |
Description |
dataField |
string |
|
propertyName |
string |
|
propertyValue |
object |
|
Return Value
void
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>TreeGrid Custom Element Filtering and Sorting</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,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/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtreegrid.js"></script> <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script> <script type="text/javascript"> var source = new jqx.dataAdapter({ dataType: "json", dataFields: [ { name: 'EmployeeID', type: 'number' }, { name: 'ReportsTo', type: 'number' }, { name: 'FirstName', type: 'string' }, { name: 'LastName', type: 'string' }, { name: 'Country', type: 'string' }, { name: 'City', type: 'string' }, { name: 'Address', type: 'string' }, { name: 'Title', type: 'string' }, { name: 'HireDate', type: 'date' }, { name: 'BirthDate', type: 'date' } ], hierarchy: { keyDataField: { name: 'EmployeeID' }, parentDataField: { name: 'ReportsTo' } }, id: 'EmployeeID', localData: [ { "EmployeeID": 1, "FirstName": "Nancy", "LastName": "Davolio", "ReportsTo": 2, "Country": "USA", "Title": "Sales Representative", "HireDate": "1992-05-01 00:00:00", "BirthDate": "1948-12-08 00:00:00", "City": "Seattle", "Address": "507 - 20th Ave. E.Apt. 2A" }, { "EmployeeID": 2, "FirstName": "Andrew", "LastName": "Fuller", "ReportsTo": null, "Country": "USA", "Title": "Vice President, Sales", "HireDate": "1992-08-14 00:00:00", "BirthDate": "1952-02-19 00:00:00", "City": "Tacoma", "Address": "908 W. Capital Way" }, { "EmployeeID": 3, "FirstName": "Janet", "LastName": "Leverling", "ReportsTo": 2, "Country": "USA", "Title": "Sales Representative", "HireDate": "1992-04-01 00:00:00", "BirthDate": "1963-08-30 00:00:00", "City": "Kirkland", "Address": "722 Moss Bay Blvd." }, { "EmployeeID": 4, "FirstName": "Margaret", "LastName": "Peacock", "ReportsTo": 2, "Country": "USA", "Title": "Sales Representative", "HireDate": "1993-05-03 00:00:00", "BirthDate": "1937-09-19 00:00:00", "City": "Redmond", "Address": "4110 Old Redmond Rd." }, { "EmployeeID": 5, "FirstName": "Steven", "LastName": "Buchanan", "ReportsTo": 2, "Country": "UK", "Title": "Sales Manager", "HireDate": "1993-10-17 00:00:00", "BirthDate": "1955-03-04 00:00:00", "City": "London", "Address": "14 Garrett Hill" }, { "EmployeeID": 6, "FirstName": "Michael", "LastName": "Suyama", "ReportsTo": 5, "Country": "UK", "Title": "Sales Representative", "HireDate": "1993-10-17 00:00:00", "BirthDate": "1963-07-02 00:00:00", "City": "London", "Address": "Coventry House Miner Rd." }, { "EmployeeID": 7, "FirstName": "Robert", "LastName": "King", "ReportsTo": 5, "Country": "UK", "Title": "Sales Representative", "HireDate": "1994-01-02 00:00:00", "BirthDate": "1960-05-29 00:00:00", "City": "London", "Address": "Edgeham Hollow Winchester Way" }, { "EmployeeID": 8, "FirstName": "Laura", "LastName": "Callahan", "ReportsTo": 2, "Country": "USA", "Title": "Inside Sales Coordinator", "HireDate": "1994-03-05 00:00:00", "BirthDate": "1958-01-09 00:00:00", "City": "Seattle", "Address": "4726 - 11th Ave. N.E." }, { "EmployeeID": 9, "FirstName": "Anne", "LastName": "Dodsworth", "ReportsTo": 5, "Country": "UK", "Title": "Sales Representative", "HireDate": "1994-11-15 00:00:00", "BirthDate": "1966-01-27 00:00:00", "City": "London", "Address": "7 Houndstooth Rd." } ]}); var columns = [ { text: 'FirstName', columnGroup: 'Name', dataField: 'FirstName', width: 200 }, { text: 'LastName', columnGroup: 'Name', dataField: 'LastName', width: 200 }, { text: 'Title', dataField: 'Title', width: 160 }, { text: 'Birth Date', dataField: 'BirthDate', cellsFormat: 'd', width: 120 }, { text: 'Hire Date', dataField: 'HireDate', cellsFormat: 'd', width: 120 }, { text: 'Address', dataField: 'Address', width: 250 }, { text: 'City', dataField: 'City', width: 120 }, { text: 'Country', dataField: 'Country' } ]; var columnGroups = [ { text: 'Name', name: 'Name' } ]; JQXElements.settings[ "treeGridSettings"] = { } window.onload = function() { document.querySelector( "jqx-tree-grid").setColumnProperty( 'firstName','text','New Text'); } </script></head><body> <jqx-tree-grid settings="treeGridSettings"></jqx-tree-grid>
|
showColumn
|
Method
|
|
Parameter |
Type |
Description |
dataField |
string |
|
Return Value
void
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>TreeGrid Custom Element Filtering and Sorting</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,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/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtreegrid.js"></script> <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script> <script type="text/javascript"> var source = new jqx.dataAdapter({ dataType: "json", dataFields: [ { name: 'EmployeeID', type: 'number' }, { name: 'ReportsTo', type: 'number' }, { name: 'FirstName', type: 'string' }, { name: 'LastName', type: 'string' }, { name: 'Country', type: 'string' }, { name: 'City', type: 'string' }, { name: 'Address', type: 'string' }, { name: 'Title', type: 'string' }, { name: 'HireDate', type: 'date' }, { name: 'BirthDate', type: 'date' } ], hierarchy: { keyDataField: { name: 'EmployeeID' }, parentDataField: { name: 'ReportsTo' } }, id: 'EmployeeID', localData: [ { "EmployeeID": 1, "FirstName": "Nancy", "LastName": "Davolio", "ReportsTo": 2, "Country": "USA", "Title": "Sales Representative", "HireDate": "1992-05-01 00:00:00", "BirthDate": "1948-12-08 00:00:00", "City": "Seattle", "Address": "507 - 20th Ave. E.Apt. 2A" }, { "EmployeeID": 2, "FirstName": "Andrew", "LastName": "Fuller", "ReportsTo": null, "Country": "USA", "Title": "Vice President, Sales", "HireDate": "1992-08-14 00:00:00", "BirthDate": "1952-02-19 00:00:00", "City": "Tacoma", "Address": "908 W. Capital Way" }, { "EmployeeID": 3, "FirstName": "Janet", "LastName": "Leverling", "ReportsTo": 2, "Country": "USA", "Title": "Sales Representative", "HireDate": "1992-04-01 00:00:00", "BirthDate": "1963-08-30 00:00:00", "City": "Kirkland", "Address": "722 Moss Bay Blvd." }, { "EmployeeID": 4, "FirstName": "Margaret", "LastName": "Peacock", "ReportsTo": 2, "Country": "USA", "Title": "Sales Representative", "HireDate": "1993-05-03 00:00:00", "BirthDate": "1937-09-19 00:00:00", "City": "Redmond", "Address": "4110 Old Redmond Rd." }, { "EmployeeID": 5, "FirstName": "Steven", "LastName": "Buchanan", "ReportsTo": 2, "Country": "UK", "Title": "Sales Manager", "HireDate": "1993-10-17 00:00:00", "BirthDate": "1955-03-04 00:00:00", "City": "London", "Address": "14 Garrett Hill" }, { "EmployeeID": 6, "FirstName": "Michael", "LastName": "Suyama", "ReportsTo": 5, "Country": "UK", "Title": "Sales Representative", "HireDate": "1993-10-17 00:00:00", "BirthDate": "1963-07-02 00:00:00", "City": "London", "Address": "Coventry House Miner Rd." }, { "EmployeeID": 7, "FirstName": "Robert", "LastName": "King", "ReportsTo": 5, "Country": "UK", "Title": "Sales Representative", "HireDate": "1994-01-02 00:00:00", "BirthDate": "1960-05-29 00:00:00", "City": "London", "Address": "Edgeham Hollow Winchester Way" }, { "EmployeeID": 8, "FirstName": "Laura", "LastName": "Callahan", "ReportsTo": 2, "Country": "USA", "Title": "Inside Sales Coordinator", "HireDate": "1994-03-05 00:00:00", "BirthDate": "1958-01-09 00:00:00", "City": "Seattle", "Address": "4726 - 11th Ave. N.E." }, { "EmployeeID": 9, "FirstName": "Anne", "LastName": "Dodsworth", "ReportsTo": 5, "Country": "UK", "Title": "Sales Representative", "HireDate": "1994-11-15 00:00:00", "BirthDate": "1966-01-27 00:00:00", "City": "London", "Address": "7 Houndstooth Rd." } ]}); var columns = [ { text: 'FirstName', columnGroup: 'Name', dataField: 'FirstName', width: 200 }, { text: 'LastName', columnGroup: 'Name', dataField: 'LastName', width: 200 }, { text: 'Title', dataField: 'Title', width: 160 }, { text: 'Birth Date', dataField: 'BirthDate', cellsFormat: 'd', width: 120 }, { text: 'Hire Date', dataField: 'HireDate', cellsFormat: 'd', width: 120 }, { text: 'Address', dataField: 'Address', width: 250 }, { text: 'City', dataField: 'City', width: 120 }, { text: 'Country', dataField: 'Country' } ]; var columnGroups = [ { text: 'Name', name: 'Name' } ]; JQXElements.settings[ "treeGridSettings"] = { } window.onload = function() { document.querySelector( "jqx-tree-grid").showColumn( 'firstName'); } </script></head><body> <jqx-tree-grid settings="treeGridSettings"></jqx-tree-grid>
|
selectRow
|
Method
|
|
Parameter |
Type |
Description |
rowId |
string |
Unique ID which identifies the row |
Return Value
void
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>TreeGrid Custom Element Filtering and Sorting</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,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/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtreegrid.js"></script> <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script> <script type="text/javascript"> var source = new jqx.dataAdapter({ dataType: "json", dataFields: [ { name: 'EmployeeID', type: 'number' }, { name: 'ReportsTo', type: 'number' }, { name: 'FirstName', type: 'string' }, { name: 'LastName', type: 'string' }, { name: 'Country', type: 'string' }, { name: 'City', type: 'string' }, { name: 'Address', type: 'string' }, { name: 'Title', type: 'string' }, { name: 'HireDate', type: 'date' }, { name: 'BirthDate', type: 'date' } ], hierarchy: { keyDataField: { name: 'EmployeeID' }, parentDataField: { name: 'ReportsTo' } }, id: 'EmployeeID', localData: [ { "EmployeeID": 1, "FirstName": "Nancy", "LastName": "Davolio", "ReportsTo": 2, "Country": "USA", "Title": "Sales Representative", "HireDate": "1992-05-01 00:00:00", "BirthDate": "1948-12-08 00:00:00", "City": "Seattle", "Address": "507 - 20th Ave. E.Apt. 2A" }, { "EmployeeID": 2, "FirstName": "Andrew", "LastName": "Fuller", "ReportsTo": null, "Country": "USA", "Title": "Vice President, Sales", "HireDate": "1992-08-14 00:00:00", "BirthDate": "1952-02-19 00:00:00", "City": "Tacoma", "Address": "908 W. Capital Way" }, { "EmployeeID": 3, "FirstName": "Janet", "LastName": "Leverling", "ReportsTo": 2, "Country": "USA", "Title": "Sales Representative", "HireDate": "1992-04-01 00:00:00", "BirthDate": "1963-08-30 00:00:00", "City": "Kirkland", "Address": "722 Moss Bay Blvd." }, { "EmployeeID": 4, "FirstName": "Margaret", "LastName": "Peacock", "ReportsTo": 2, "Country": "USA", "Title": "Sales Representative", "HireDate": "1993-05-03 00:00:00", "BirthDate": "1937-09-19 00:00:00", "City": "Redmond", "Address": "4110 Old Redmond Rd." }, { "EmployeeID": 5, "FirstName": "Steven", "LastName": "Buchanan", "ReportsTo": 2, "Country": "UK", "Title": "Sales Manager", "HireDate": "1993-10-17 00:00:00", "BirthDate": "1955-03-04 00:00:00", "City": "London", "Address": "14 Garrett Hill" }, { "EmployeeID": 6, "FirstName": "Michael", "LastName": "Suyama", "ReportsTo": 5, "Country": "UK", "Title": "Sales Representative", "HireDate": "1993-10-17 00:00:00", "BirthDate": "1963-07-02 00:00:00", "City": "London", "Address": "Coventry House Miner Rd." }, { "EmployeeID": 7, "FirstName": "Robert", "LastName": "King", "ReportsTo": 5, "Country": "UK", "Title": "Sales Representative", "HireDate": "1994-01-02 00:00:00", "BirthDate": "1960-05-29 00:00:00", "City": "London", "Address": "Edgeham Hollow Winchester Way" }, { "EmployeeID": 8, "FirstName": "Laura", "LastName": "Callahan", "ReportsTo": 2, "Country": "USA", "Title": "Inside Sales Coordinator", "HireDate": "1994-03-05 00:00:00", "BirthDate": "1958-01-09 00:00:00", "City": "Seattle", "Address": "4726 - 11th Ave. N.E." }, { "EmployeeID": 9, "FirstName": "Anne", "LastName": "Dodsworth", "ReportsTo": 5, "Country": "UK", "Title": "Sales Representative", "HireDate": "1994-11-15 00:00:00", "BirthDate": "1966-01-27 00:00:00", "City": "London", "Address": "7 Houndstooth Rd." } ]}); var columns = [ { text: 'FirstName', columnGroup: 'Name', dataField: 'FirstName', width: 200 }, { text: 'LastName', columnGroup: 'Name', dataField: 'LastName', width: 200 }, { text: 'Title', dataField: 'Title', width: 160 }, { text: 'Birth Date', dataField: 'BirthDate', cellsFormat: 'd', width: 120 }, { text: 'Hire Date', dataField: 'HireDate', cellsFormat: 'd', width: 120 }, { text: 'Address', dataField: 'Address', width: 250 }, { text: 'City', dataField: 'City', width: 120 }, { text: 'Country', dataField: 'Country' } ]; var columnGroups = [ { text: 'Name', name: 'Name' } ]; JQXElements.settings[ "treeGridSettings"] = { } window.onload = function() { document.querySelector( "jqx-tree-grid").selectRow(1); } </script></head><body> <jqx-tree-grid settings="treeGridSettings"></jqx-tree-grid>
|
setCellValue
|
Method
|
|
Parameter |
Type |
Description |
rowId |
string |
|
dataField |
string |
|
cellValue |
object |
|
Return Value
void
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>TreeGrid Custom Element Filtering and Sorting</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,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/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtreegrid.js"></script> <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script> <script type="text/javascript"> var source = new jqx.dataAdapter({ dataType: "json", dataFields: [ { name: 'EmployeeID', type: 'number' }, { name: 'ReportsTo', type: 'number' }, { name: 'FirstName', type: 'string' }, { name: 'LastName', type: 'string' }, { name: 'Country', type: 'string' }, { name: 'City', type: 'string' }, { name: 'Address', type: 'string' }, { name: 'Title', type: 'string' }, { name: 'HireDate', type: 'date' }, { name: 'BirthDate', type: 'date' } ], hierarchy: { keyDataField: { name: 'EmployeeID' }, parentDataField: { name: 'ReportsTo' } }, id: 'EmployeeID', localData: [ { "EmployeeID": 1, "FirstName": "Nancy", "LastName": "Davolio", "ReportsTo": 2, "Country": "USA", "Title": "Sales Representative", "HireDate": "1992-05-01 00:00:00", "BirthDate": "1948-12-08 00:00:00", "City": "Seattle", "Address": "507 - 20th Ave. E.Apt. 2A" }, { "EmployeeID": 2, "FirstName": "Andrew", "LastName": "Fuller", "ReportsTo": null, "Country": "USA", "Title": "Vice President, Sales", "HireDate": "1992-08-14 00:00:00", "BirthDate": "1952-02-19 00:00:00", "City": "Tacoma", "Address": "908 W. Capital Way" }, { "EmployeeID": 3, "FirstName": "Janet", "LastName": "Leverling", "ReportsTo": 2, "Country": "USA", "Title": "Sales Representative", "HireDate": "1992-04-01 00:00:00", "BirthDate": "1963-08-30 00:00:00", "City": "Kirkland", "Address": "722 Moss Bay Blvd." }, { "EmployeeID": 4, "FirstName": "Margaret", "LastName": "Peacock", "ReportsTo": 2, "Country": "USA", "Title": "Sales Representative", "HireDate": "1993-05-03 00:00:00", "BirthDate": "1937-09-19 00:00:00", "City": "Redmond", "Address": "4110 Old Redmond Rd." }, { "EmployeeID": 5, "FirstName": "Steven", "LastName": "Buchanan", "ReportsTo": 2, "Country": "UK", "Title": "Sales Manager", "HireDate": "1993-10-17 00:00:00", "BirthDate": "1955-03-04 00:00:00", "City": "London", "Address": "14 Garrett Hill" }, { "EmployeeID": 6, "FirstName": "Michael", "LastName": "Suyama", "ReportsTo": 5, "Country": "UK", "Title": "Sales Representative", "HireDate": "1993-10-17 00:00:00", "BirthDate": "1963-07-02 00:00:00", "City": "London", "Address": "Coventry House Miner Rd." }, { "EmployeeID": 7, "FirstName": "Robert", "LastName": "King", "ReportsTo": 5, "Country": "UK", "Title": "Sales Representative", "HireDate": "1994-01-02 00:00:00", "BirthDate": "1960-05-29 00:00:00", "City": "London", "Address": "Edgeham Hollow Winchester Way" }, { "EmployeeID": 8, "FirstName": "Laura", "LastName": "Callahan", "ReportsTo": 2, "Country": "USA", "Title": "Inside Sales Coordinator", "HireDate": "1994-03-05 00:00:00", "BirthDate": "1958-01-09 00:00:00", "City": "Seattle", "Address": "4726 - 11th Ave. N.E." }, { "EmployeeID": 9, "FirstName": "Anne", "LastName": "Dodsworth", "ReportsTo": 5, "Country": "UK", "Title": "Sales Representative", "HireDate": "1994-11-15 00:00:00", "BirthDate": "1966-01-27 00:00:00", "City": "London", "Address": "7 Houndstooth Rd." } ]}); var columns = [ { text: 'FirstName', columnGroup: 'Name', dataField: 'FirstName', width: 200 }, { text: 'LastName', columnGroup: 'Name', dataField: 'LastName', width: 200 }, { text: 'Title', dataField: 'Title', width: 160 }, { text: 'Birth Date', dataField: 'BirthDate', cellsFormat: 'd', width: 120 }, { text: 'Hire Date', dataField: 'HireDate', cellsFormat: 'd', width: 120 }, { text: 'Address', dataField: 'Address', width: 250 }, { text: 'City', dataField: 'City', width: 120 }, { text: 'Country', dataField: 'Country' } ]; var columnGroups = [ { text: 'Name', name: 'Name' } ]; JQXElements.settings[ "treeGridSettings"] = { } window.onload = function() { document.querySelector( "jqx-tree-grid").setCellValue(1, 'firstName','New Value'); } </script></head><body> <jqx-tree-grid settings="treeGridSettings"></jqx-tree-grid>
|
sortBy
|
Method
|
|
Parameter |
Type |
Description |
dataField |
string |
|
sortOrder |
string |
'asc', 'desc' or null |
Return Value
void
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>TreeGrid Custom Element Filtering and Sorting</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,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/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtreegrid.js"></script> <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script> <script type="text/javascript"> var source = new jqx.dataAdapter({ dataType: "json", dataFields: [ { name: 'EmployeeID', type: 'number' }, { name: 'ReportsTo', type: 'number' }, { name: 'FirstName', type: 'string' }, { name: 'LastName', type: 'string' }, { name: 'Country', type: 'string' }, { name: 'City', type: 'string' }, { name: 'Address', type: 'string' }, { name: 'Title', type: 'string' }, { name: 'HireDate', type: 'date' }, { name: 'BirthDate', type: 'date' } ], hierarchy: { keyDataField: { name: 'EmployeeID' }, parentDataField: { name: 'ReportsTo' } }, id: 'EmployeeID', localData: [ { "EmployeeID": 1, "FirstName": "Nancy", "LastName": "Davolio", "ReportsTo": 2, "Country": "USA", "Title": "Sales Representative", "HireDate": "1992-05-01 00:00:00", "BirthDate": "1948-12-08 00:00:00", "City": "Seattle", "Address": "507 - 20th Ave. E.Apt. 2A" }, { "EmployeeID": 2, "FirstName": "Andrew", "LastName": "Fuller", "ReportsTo": null, "Country": "USA", "Title": "Vice President, Sales", "HireDate": "1992-08-14 00:00:00", "BirthDate": "1952-02-19 00:00:00", "City": "Tacoma", "Address": "908 W. Capital Way" }, { "EmployeeID": 3, "FirstName": "Janet", "LastName": "Leverling", "ReportsTo": 2, "Country": "USA", "Title": "Sales Representative", "HireDate": "1992-04-01 00:00:00", "BirthDate": "1963-08-30 00:00:00", "City": "Kirkland", "Address": "722 Moss Bay Blvd." }, { "EmployeeID": 4, "FirstName": "Margaret", "LastName": "Peacock", "ReportsTo": 2, "Country": "USA", "Title": "Sales Representative", "HireDate": "1993-05-03 00:00:00", "BirthDate": "1937-09-19 00:00:00", "City": "Redmond", "Address": "4110 Old Redmond Rd." }, { "EmployeeID": 5, "FirstName": "Steven", "LastName": "Buchanan", "ReportsTo": 2, "Country": "UK", "Title": "Sales Manager", "HireDate": "1993-10-17 00:00:00", "BirthDate": "1955-03-04 00:00:00", "City": "London", "Address": "14 Garrett Hill" }, { "EmployeeID": 6, "FirstName": "Michael", "LastName": "Suyama", "ReportsTo": 5, "Country": "UK", "Title": "Sales Representative", "HireDate": "1993-10-17 00:00:00", "BirthDate": "1963-07-02 00:00:00", "City": "London", "Address": "Coventry House Miner Rd." }, { "EmployeeID": 7, "FirstName": "Robert", "LastName": "King", "ReportsTo": 5, "Country": "UK", "Title": "Sales Representative", "HireDate": "1994-01-02 00:00:00", "BirthDate": "1960-05-29 00:00:00", "City": "London", "Address": "Edgeham Hollow Winchester Way" }, { "EmployeeID": 8, "FirstName": "Laura", "LastName": "Callahan", "ReportsTo": 2, "Country": "USA", "Title": "Inside Sales Coordinator", "HireDate": "1994-03-05 00:00:00", "BirthDate": "1958-01-09 00:00:00", "City": "Seattle", "Address": "4726 - 11th Ave. N.E." }, { "EmployeeID": 9, "FirstName": "Anne", "LastName": "Dodsworth", "ReportsTo": 5, "Country": "UK", "Title": "Sales Representative", "HireDate": "1994-11-15 00:00:00", "BirthDate": "1966-01-27 00:00:00", "City": "London", "Address": "7 Houndstooth Rd." } ]}); var columns = [ { text: 'FirstName', columnGroup: 'Name', dataField: 'FirstName', width: 200 }, { text: 'LastName', columnGroup: 'Name', dataField: 'LastName', width: 200 }, { text: 'Title', dataField: 'Title', width: 160 }, { text: 'Birth Date', dataField: 'BirthDate', cellsFormat: 'd', width: 120 }, { text: 'Hire Date', dataField: 'HireDate', cellsFormat: 'd', width: 120 }, { text: 'Address', dataField: 'Address', width: 250 }, { text: 'City', dataField: 'City', width: 120 }, { text: 'Country', dataField: 'Country' } ]; var columnGroups = [ { text: 'Name', name: 'Name' } ]; JQXElements.settings[ "treeGridSettings"] = { } window.onload = function() { document.querySelector( "jqx-tree-grid").sortBy( 'FirstName','asc'); } </script></head><body> <jqx-tree-grid settings="treeGridSettings"></jqx-tree-grid>
|
updating
|
Method
|
|
Parameter |
Type |
Description |
None |
|
|
Return Value
Boolean
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>TreeGrid Custom Element Filtering and Sorting</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,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/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtreegrid.js"></script> <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script> <script type="text/javascript"> var source = new jqx.dataAdapter({ dataType: "json", dataFields: [ { name: 'EmployeeID', type: 'number' }, { name: 'ReportsTo', type: 'number' }, { name: 'FirstName', type: 'string' }, { name: 'LastName', type: 'string' }, { name: 'Country', type: 'string' }, { name: 'City', type: 'string' }, { name: 'Address', type: 'string' }, { name: 'Title', type: 'string' }, { name: 'HireDate', type: 'date' }, { name: 'BirthDate', type: 'date' } ], hierarchy: { keyDataField: { name: 'EmployeeID' }, parentDataField: { name: 'ReportsTo' } }, id: 'EmployeeID', localData: [ { "EmployeeID": 1, "FirstName": "Nancy", "LastName": "Davolio", "ReportsTo": 2, "Country": "USA", "Title": "Sales Representative", "HireDate": "1992-05-01 00:00:00", "BirthDate": "1948-12-08 00:00:00", "City": "Seattle", "Address": "507 - 20th Ave. E.Apt. 2A" }, { "EmployeeID": 2, "FirstName": "Andrew", "LastName": "Fuller", "ReportsTo": null, "Country": "USA", "Title": "Vice President, Sales", "HireDate": "1992-08-14 00:00:00", "BirthDate": "1952-02-19 00:00:00", "City": "Tacoma", "Address": "908 W. Capital Way" }, { "EmployeeID": 3, "FirstName": "Janet", "LastName": "Leverling", "ReportsTo": 2, "Country": "USA", "Title": "Sales Representative", "HireDate": "1992-04-01 00:00:00", "BirthDate": "1963-08-30 00:00:00", "City": "Kirkland", "Address": "722 Moss Bay Blvd." }, { "EmployeeID": 4, "FirstName": "Margaret", "LastName": "Peacock", "ReportsTo": 2, "Country": "USA", "Title": "Sales Representative", "HireDate": "1993-05-03 00:00:00", "BirthDate": "1937-09-19 00:00:00", "City": "Redmond", "Address": "4110 Old Redmond Rd." }, { "EmployeeID": 5, "FirstName": "Steven", "LastName": "Buchanan", "ReportsTo": 2, "Country": "UK", "Title": "Sales Manager", "HireDate": "1993-10-17 00:00:00", "BirthDate": "1955-03-04 00:00:00", "City": "London", "Address": "14 Garrett Hill" }, { "EmployeeID": 6, "FirstName": "Michael", "LastName": "Suyama", "ReportsTo": 5, "Country": "UK", "Title": "Sales Representative", "HireDate": "1993-10-17 00:00:00", "BirthDate": "1963-07-02 00:00:00", "City": "London", "Address": "Coventry House Miner Rd." }, { "EmployeeID": 7, "FirstName": "Robert", "LastName": "King", "ReportsTo": 5, "Country": "UK", "Title": "Sales Representative", "HireDate": "1994-01-02 00:00:00", "BirthDate": "1960-05-29 00:00:00", "City": "London", "Address": "Edgeham Hollow Winchester Way" }, { "EmployeeID": 8, "FirstName": "Laura", "LastName": "Callahan", "ReportsTo": 2, "Country": "USA", "Title": "Inside Sales Coordinator", "HireDate": "1994-03-05 00:00:00", "BirthDate": "1958-01-09 00:00:00", "City": "Seattle", "Address": "4726 - 11th Ave. N.E." }, { "EmployeeID": 9, "FirstName": "Anne", "LastName": "Dodsworth", "ReportsTo": 5, "Country": "UK", "Title": "Sales Representative", "HireDate": "1994-11-15 00:00:00", "BirthDate": "1966-01-27 00:00:00", "City": "London", "Address": "7 Houndstooth Rd." } ]}); var columns = [ { text: 'FirstName', columnGroup: 'Name', dataField: 'FirstName', width: 200 }, { text: 'LastName', columnGroup: 'Name', dataField: 'LastName', width: 200 }, { text: 'Title', dataField: 'Title', width: 160 }, { text: 'Birth Date', dataField: 'BirthDate', cellsFormat: 'd', width: 120 }, { text: 'Hire Date', dataField: 'HireDate', cellsFormat: 'd', width: 120 }, { text: 'Address', dataField: 'Address', width: 250 }, { text: 'City', dataField: 'City', width: 120 }, { text: 'Country', dataField: 'Country' } ]; var columnGroups = [ { text: 'Name', name: 'Name' } ]; JQXElements.settings[ "treeGridSettings"] = { } window.onload = function() { var result = document.querySelector( "jqx-tree-grid").updating(); } </script></head><body> <jqx-tree-grid settings="treeGridSettings"></jqx-tree-grid>
|
updateBoundData
|
Method
|
|
Parameter |
Type |
Description |
None |
|
|
Return Value
void
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>TreeGrid Custom Element Filtering and Sorting</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,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/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtreegrid.js"></script> <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script> <script type="text/javascript"> var source = new jqx.dataAdapter({ dataType: "json", dataFields: [ { name: 'EmployeeID', type: 'number' }, { name: 'ReportsTo', type: 'number' }, { name: 'FirstName', type: 'string' }, { name: 'LastName', type: 'string' }, { name: 'Country', type: 'string' }, { name: 'City', type: 'string' }, { name: 'Address', type: 'string' }, { name: 'Title', type: 'string' }, { name: 'HireDate', type: 'date' }, { name: 'BirthDate', type: 'date' } ], hierarchy: { keyDataField: { name: 'EmployeeID' }, parentDataField: { name: 'ReportsTo' } }, id: 'EmployeeID', localData: [ { "EmployeeID": 1, "FirstName": "Nancy", "LastName": "Davolio", "ReportsTo": 2, "Country": "USA", "Title": "Sales Representative", "HireDate": "1992-05-01 00:00:00", "BirthDate": "1948-12-08 00:00:00", "City": "Seattle", "Address": "507 - 20th Ave. E.Apt. 2A" }, { "EmployeeID": 2, "FirstName": "Andrew", "LastName": "Fuller", "ReportsTo": null, "Country": "USA", "Title": "Vice President, Sales", "HireDate": "1992-08-14 00:00:00", "BirthDate": "1952-02-19 00:00:00", "City": "Tacoma", "Address": "908 W. Capital Way" }, { "EmployeeID": 3, "FirstName": "Janet", "LastName": "Leverling", "ReportsTo": 2, "Country": "USA", "Title": "Sales Representative", "HireDate": "1992-04-01 00:00:00", "BirthDate": "1963-08-30 00:00:00", "City": "Kirkland", "Address": "722 Moss Bay Blvd." }, { "EmployeeID": 4, "FirstName": "Margaret", "LastName": "Peacock", "ReportsTo": 2, "Country": "USA", "Title": "Sales Representative", "HireDate": "1993-05-03 00:00:00", "BirthDate": "1937-09-19 00:00:00", "City": "Redmond", "Address": "4110 Old Redmond Rd." }, { "EmployeeID": 5, "FirstName": "Steven", "LastName": "Buchanan", "ReportsTo": 2, "Country": "UK", "Title": "Sales Manager", "HireDate": "1993-10-17 00:00:00", "BirthDate": "1955-03-04 00:00:00", "City": "London", "Address": "14 Garrett Hill" }, { "EmployeeID": 6, "FirstName": "Michael", "LastName": "Suyama", "ReportsTo": 5, "Country": "UK", "Title": "Sales Representative", "HireDate": "1993-10-17 00:00:00", "BirthDate": "1963-07-02 00:00:00", "City": "London", "Address": "Coventry House Miner Rd." }, { "EmployeeID": 7, "FirstName": "Robert", "LastName": "King", "ReportsTo": 5, "Country": "UK", "Title": "Sales Representative", "HireDate": "1994-01-02 00:00:00", "BirthDate": "1960-05-29 00:00:00", "City": "London", "Address": "Edgeham Hollow Winchester Way" }, { "EmployeeID": 8, "FirstName": "Laura", "LastName": "Callahan", "ReportsTo": 2, "Country": "USA", "Title": "Inside Sales Coordinator", "HireDate": "1994-03-05 00:00:00", "BirthDate": "1958-01-09 00:00:00", "City": "Seattle", "Address": "4726 - 11th Ave. N.E." }, { "EmployeeID": 9, "FirstName": "Anne", "LastName": "Dodsworth", "ReportsTo": 5, "Country": "UK", "Title": "Sales Representative", "HireDate": "1994-11-15 00:00:00", "BirthDate": "1966-01-27 00:00:00", "City": "London", "Address": "7 Houndstooth Rd." } ]}); var columns = [ { text: 'FirstName', columnGroup: 'Name', dataField: 'FirstName', width: 200 }, { text: 'LastName', columnGroup: 'Name', dataField: 'LastName', width: 200 }, { text: 'Title', dataField: 'Title', width: 160 }, { text: 'Birth Date', dataField: 'BirthDate', cellsFormat: 'd', width: 120 }, { text: 'Hire Date', dataField: 'HireDate', cellsFormat: 'd', width: 120 }, { text: 'Address', dataField: 'Address', width: 250 }, { text: 'City', dataField: 'City', width: 120 }, { text: 'Country', dataField: 'Country' } ]; var columnGroups = [ { text: 'Name', name: 'Name' } ]; JQXElements.settings[ "treeGridSettings"] = { } window.onload = function() { document.querySelector( "jqx-tree-grid").updateBoundData(); } </script></head><body> <jqx-tree-grid settings="treeGridSettings"></jqx-tree-grid>
|
unselectRow
|
Method
|
|
Parameter |
Type |
Description |
rowId |
string |
Unique ID which identifies the row |
Return Value
void
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>TreeGrid Custom Element Filtering and Sorting</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,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/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtreegrid.js"></script> <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script> <script type="text/javascript"> var source = new jqx.dataAdapter({ dataType: "json", dataFields: [ { name: 'EmployeeID', type: 'number' }, { name: 'ReportsTo', type: 'number' }, { name: 'FirstName', type: 'string' }, { name: 'LastName', type: 'string' }, { name: 'Country', type: 'string' }, { name: 'City', type: 'string' }, { name: 'Address', type: 'string' }, { name: 'Title', type: 'string' }, { name: 'HireDate', type: 'date' }, { name: 'BirthDate', type: 'date' } ], hierarchy: { keyDataField: { name: 'EmployeeID' }, parentDataField: { name: 'ReportsTo' } }, id: 'EmployeeID', localData: [ { "EmployeeID": 1, "FirstName": "Nancy", "LastName": "Davolio", "ReportsTo": 2, "Country": "USA", "Title": "Sales Representative", "HireDate": "1992-05-01 00:00:00", "BirthDate": "1948-12-08 00:00:00", "City": "Seattle", "Address": "507 - 20th Ave. E.Apt. 2A" }, { "EmployeeID": 2, "FirstName": "Andrew", "LastName": "Fuller", "ReportsTo": null, "Country": "USA", "Title": "Vice President, Sales", "HireDate": "1992-08-14 00:00:00", "BirthDate": "1952-02-19 00:00:00", "City": "Tacoma", "Address": "908 W. Capital Way" }, { "EmployeeID": 3, "FirstName": "Janet", "LastName": "Leverling", "ReportsTo": 2, "Country": "USA", "Title": "Sales Representative", "HireDate": "1992-04-01 00:00:00", "BirthDate": "1963-08-30 00:00:00", "City": "Kirkland", "Address": "722 Moss Bay Blvd." }, { "EmployeeID": 4, "FirstName": "Margaret", "LastName": "Peacock", "ReportsTo": 2, "Country": "USA", "Title": "Sales Representative", "HireDate": "1993-05-03 00:00:00", "BirthDate": "1937-09-19 00:00:00", "City": "Redmond", "Address": "4110 Old Redmond Rd." }, { "EmployeeID": 5, "FirstName": "Steven", "LastName": "Buchanan", "ReportsTo": 2, "Country": "UK", "Title": "Sales Manager", "HireDate": "1993-10-17 00:00:00", "BirthDate": "1955-03-04 00:00:00", "City": "London", "Address": "14 Garrett Hill" }, { "EmployeeID": 6, "FirstName": "Michael", "LastName": "Suyama", "ReportsTo": 5, "Country": "UK", "Title": "Sales Representative", "HireDate": "1993-10-17 00:00:00", "BirthDate": "1963-07-02 00:00:00", "City": "London", "Address": "Coventry House Miner Rd." }, { "EmployeeID": 7, "FirstName": "Robert", "LastName": "King", "ReportsTo": 5, "Country": "UK", "Title": "Sales Representative", "HireDate": "1994-01-02 00:00:00", "BirthDate": "1960-05-29 00:00:00", "City": "London", "Address": "Edgeham Hollow Winchester Way" }, { "EmployeeID": 8, "FirstName": "Laura", "LastName": "Callahan", "ReportsTo": 2, "Country": "USA", "Title": "Inside Sales Coordinator", "HireDate": "1994-03-05 00:00:00", "BirthDate": "1958-01-09 00:00:00", "City": "Seattle", "Address": "4726 - 11th Ave. N.E." }, { "EmployeeID": 9, "FirstName": "Anne", "LastName": "Dodsworth", "ReportsTo": 5, "Country": "UK", "Title": "Sales Representative", "HireDate": "1994-11-15 00:00:00", "BirthDate": "1966-01-27 00:00:00", "City": "London", "Address": "7 Houndstooth Rd." } ]}); var columns = [ { text: 'FirstName', columnGroup: 'Name', dataField: 'FirstName', width: 200 }, { text: 'LastName', columnGroup: 'Name', dataField: 'LastName', width: 200 }, { text: 'Title', dataField: 'Title', width: 160 }, { text: 'Birth Date', dataField: 'BirthDate', cellsFormat: 'd', width: 120 }, { text: 'Hire Date', dataField: 'HireDate', cellsFormat: 'd', width: 120 }, { text: 'Address', dataField: 'Address', width: 250 }, { text: 'City', dataField: 'City', width: 120 }, { text: 'Country', dataField: 'Country' } ]; var columnGroups = [ { text: 'Name', name: 'Name' } ]; JQXElements.settings[ "treeGridSettings"] = { } window.onload = function() { document.querySelector( "jqx-tree-grid").unselectRow(1); } </script></head><body> <jqx-tree-grid settings="treeGridSettings"></jqx-tree-grid>
|
uncheckRow
|
Method
|
|
Parameter |
Type |
Description |
rowId |
string |
Unique ID which identifies the row |
Return Value
void
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>TreeGrid Custom Element Filtering and Sorting</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,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/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtreegrid.js"></script> <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script> <script type="text/javascript"> var source = new jqx.dataAdapter({ dataType: "json", dataFields: [ { name: 'EmployeeID', type: 'number' }, { name: 'ReportsTo', type: 'number' }, { name: 'FirstName', type: 'string' }, { name: 'LastName', type: 'string' }, { name: 'Country', type: 'string' }, { name: 'City', type: 'string' }, { name: 'Address', type: 'string' }, { name: 'Title', type: 'string' }, { name: 'HireDate', type: 'date' }, { name: 'BirthDate', type: 'date' } ], hierarchy: { keyDataField: { name: 'EmployeeID' }, parentDataField: { name: 'ReportsTo' } }, id: 'EmployeeID', localData: [ { "EmployeeID": 1, "FirstName": "Nancy", "LastName": "Davolio", "ReportsTo": 2, "Country": "USA", "Title": "Sales Representative", "HireDate": "1992-05-01 00:00:00", "BirthDate": "1948-12-08 00:00:00", "City": "Seattle", "Address": "507 - 20th Ave. E.Apt. 2A" }, { "EmployeeID": 2, "FirstName": "Andrew", "LastName": "Fuller", "ReportsTo": null, "Country": "USA", "Title": "Vice President, Sales", "HireDate": "1992-08-14 00:00:00", "BirthDate": "1952-02-19 00:00:00", "City": "Tacoma", "Address": "908 W. Capital Way" }, { "EmployeeID": 3, "FirstName": "Janet", "LastName": "Leverling", "ReportsTo": 2, "Country": "USA", "Title": "Sales Representative", "HireDate": "1992-04-01 00:00:00", "BirthDate": "1963-08-30 00:00:00", "City": "Kirkland", "Address": "722 Moss Bay Blvd." }, { "EmployeeID": 4, "FirstName": "Margaret", "LastName": "Peacock", "ReportsTo": 2, "Country": "USA", "Title": "Sales Representative", "HireDate": "1993-05-03 00:00:00", "BirthDate": "1937-09-19 00:00:00", "City": "Redmond", "Address": "4110 Old Redmond Rd." }, { "EmployeeID": 5, "FirstName": "Steven", "LastName": "Buchanan", "ReportsTo": 2, "Country": "UK", "Title": "Sales Manager", "HireDate": "1993-10-17 00:00:00", "BirthDate": "1955-03-04 00:00:00", "City": "London", "Address": "14 Garrett Hill" }, { "EmployeeID": 6, "FirstName": "Michael", "LastName": "Suyama", "ReportsTo": 5, "Country": "UK", "Title": "Sales Representative", "HireDate": "1993-10-17 00:00:00", "BirthDate": "1963-07-02 00:00:00", "City": "London", "Address": "Coventry House Miner Rd." }, { "EmployeeID": 7, "FirstName": "Robert", "LastName": "King", "ReportsTo": 5, "Country": "UK", "Title": "Sales Representative", "HireDate": "1994-01-02 00:00:00", "BirthDate": "1960-05-29 00:00:00", "City": "London", "Address": "Edgeham Hollow Winchester Way" }, { "EmployeeID": 8, "FirstName": "Laura", "LastName": "Callahan", "ReportsTo": 2, "Country": "USA", "Title": "Inside Sales Coordinator", "HireDate": "1994-03-05 00:00:00", "BirthDate": "1958-01-09 00:00:00", "City": "Seattle", "Address": "4726 - 11th Ave. N.E." }, { "EmployeeID": 9, "FirstName": "Anne", "LastName": "Dodsworth", "ReportsTo": 5, "Country": "UK", "Title": "Sales Representative", "HireDate": "1994-11-15 00:00:00", "BirthDate": "1966-01-27 00:00:00", "City": "London", "Address": "7 Houndstooth Rd." } ]}); var columns = [ { text: 'FirstName', columnGroup: 'Name', dataField: 'FirstName', width: 200 }, { text: 'LastName', columnGroup: 'Name', dataField: 'LastName', width: 200 }, { text: 'Title', dataField: 'Title', width: 160 }, { text: 'Birth Date', dataField: 'BirthDate', cellsFormat: 'd', width: 120 }, { text: 'Hire Date', dataField: 'HireDate', cellsFormat: 'd', width: 120 }, { text: 'Address', dataField: 'Address', width: 250 }, { text: 'City', dataField: 'City', width: 120 }, { text: 'Country', dataField: 'Country' } ]; var columnGroups = [ { text: 'Name', name: 'Name' } ]; JQXElements.settings[ "treeGridSettings"] = { } window.onload = function() { document.querySelector( "jqx-tree-grid").uncheckRow(1); } </script></head><body> <jqx-tree-grid settings="treeGridSettings"></jqx-tree-grid>
|
updateRow
|
Method
|
|
Parameter |
Type |
Description |
rowId |
number |
Unique ID which identifies the row |
data |
object |
|
Return Value
void
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>TreeGrid Custom Element Filtering and Sorting</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,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/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtreegrid.js"></script> <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script> <script type="text/javascript"> var source = new jqx.dataAdapter({ dataType: "json", dataFields: [ { name: 'EmployeeID', type: 'number' }, { name: 'ReportsTo', type: 'number' }, { name: 'FirstName', type: 'string' }, { name: 'LastName', type: 'string' }, { name: 'Country', type: 'string' }, { name: 'City', type: 'string' }, { name: 'Address', type: 'string' }, { name: 'Title', type: 'string' }, { name: 'HireDate', type: 'date' }, { name: 'BirthDate', type: 'date' } ], hierarchy: { keyDataField: { name: 'EmployeeID' }, parentDataField: { name: 'ReportsTo' } }, id: 'EmployeeID', localData: [ { "EmployeeID": 1, "FirstName": "Nancy", "LastName": "Davolio", "ReportsTo": 2, "Country": "USA", "Title": "Sales Representative", "HireDate": "1992-05-01 00:00:00", "BirthDate": "1948-12-08 00:00:00", "City": "Seattle", "Address": "507 - 20th Ave. E.Apt. 2A" }, { "EmployeeID": 2, "FirstName": "Andrew", "LastName": "Fuller", "ReportsTo": null, "Country": "USA", "Title": "Vice President, Sales", "HireDate": "1992-08-14 00:00:00", "BirthDate": "1952-02-19 00:00:00", "City": "Tacoma", "Address": "908 W. Capital Way" }, { "EmployeeID": 3, "FirstName": "Janet", "LastName": "Leverling", "ReportsTo": 2, "Country": "USA", "Title": "Sales Representative", "HireDate": "1992-04-01 00:00:00", "BirthDate": "1963-08-30 00:00:00", "City": "Kirkland", "Address": "722 Moss Bay Blvd." }, { "EmployeeID": 4, "FirstName": "Margaret", "LastName": "Peacock", "ReportsTo": 2, "Country": "USA", "Title": "Sales Representative", "HireDate": "1993-05-03 00:00:00", "BirthDate": "1937-09-19 00:00:00", "City": "Redmond", "Address": "4110 Old Redmond Rd." }, { "EmployeeID": 5, "FirstName": "Steven", "LastName": "Buchanan", "ReportsTo": 2, "Country": "UK", "Title": "Sales Manager", "HireDate": "1993-10-17 00:00:00", "BirthDate": "1955-03-04 00:00:00", "City": "London", "Address": "14 Garrett Hill" }, { "EmployeeID": 6, "FirstName": "Michael", "LastName": "Suyama", "ReportsTo": 5, "Country": "UK", "Title": "Sales Representative", "HireDate": "1993-10-17 00:00:00", "BirthDate": "1963-07-02 00:00:00", "City": "London", "Address": "Coventry House Miner Rd." }, { "EmployeeID": 7, "FirstName": "Robert", "LastName": "King", "ReportsTo": 5, "Country": "UK", "Title": "Sales Representative", "HireDate": "1994-01-02 00:00:00", "BirthDate": "1960-05-29 00:00:00", "City": "London", "Address": "Edgeham Hollow Winchester Way" }, { "EmployeeID": 8, "FirstName": "Laura", "LastName": "Callahan", "ReportsTo": 2, "Country": "USA", "Title": "Inside Sales Coordinator", "HireDate": "1994-03-05 00:00:00", "BirthDate": "1958-01-09 00:00:00", "City": "Seattle", "Address": "4726 - 11th Ave. N.E." }, { "EmployeeID": 9, "FirstName": "Anne", "LastName": "Dodsworth", "ReportsTo": 5, "Country": "UK", "Title": "Sales Representative", "HireDate": "1994-11-15 00:00:00", "BirthDate": "1966-01-27 00:00:00", "City": "London", "Address": "7 Houndstooth Rd." } ]}); var columns = [ { text: 'FirstName', columnGroup: 'Name', dataField: 'FirstName', width: 200 }, { text: 'LastName', columnGroup: 'Name', dataField: 'LastName', width: 200 }, { text: 'Title', dataField: 'Title', width: 160 }, { text: 'Birth Date', dataField: 'BirthDate', cellsFormat: 'd', width: 120 }, { text: 'Hire Date', dataField: 'HireDate', cellsFormat: 'd', width: 120 }, { text: 'Address', dataField: 'Address', width: 250 }, { text: 'City', dataField: 'City', width: 120 }, { text: 'Country', dataField: 'Country' } ]; var columnGroups = [ { text: 'Name', name: 'Name' } ]; JQXElements.settings[ "treeGridSettings"] = { } window.onload = function() { document.querySelector( "jqx-tree-grid").updateRow(1,{FirstName: 'Nancy', LastName: 'Davolio}); } </script></head><body> <jqx-tree-grid settings="treeGridSettings"></jqx-tree-grid>
|
unlockRow
|
Method
|
|
Parameter |
Type |
Description |
rowId |
string |
Unique ID which identifies the row |
Return Value
void
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>TreeGrid Custom Element Filtering and Sorting</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,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/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtreegrid.js"></script> <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script> <script type="text/javascript"> var source = new jqx.dataAdapter({ dataType: "json", dataFields: [ { name: 'EmployeeID', type: 'number' }, { name: 'ReportsTo', type: 'number' }, { name: 'FirstName', type: 'string' }, { name: 'LastName', type: 'string' }, { name: 'Country', type: 'string' }, { name: 'City', type: 'string' }, { name: 'Address', type: 'string' }, { name: 'Title', type: 'string' }, { name: 'HireDate', type: 'date' }, { name: 'BirthDate', type: 'date' } ], hierarchy: { keyDataField: { name: 'EmployeeID' }, parentDataField: { name: 'ReportsTo' } }, id: 'EmployeeID', localData: [ { "EmployeeID": 1, "FirstName": "Nancy", "LastName": "Davolio", "ReportsTo": 2, "Country": "USA", "Title": "Sales Representative", "HireDate": "1992-05-01 00:00:00", "BirthDate": "1948-12-08 00:00:00", "City": "Seattle", "Address": "507 - 20th Ave. E.Apt. 2A" }, { "EmployeeID": 2, "FirstName": "Andrew", "LastName": "Fuller", "ReportsTo": null, "Country": "USA", "Title": "Vice President, Sales", "HireDate": "1992-08-14 00:00:00", "BirthDate": "1952-02-19 00:00:00", "City": "Tacoma", "Address": "908 W. Capital Way" }, { "EmployeeID": 3, "FirstName": "Janet", "LastName": "Leverling", "ReportsTo": 2, "Country": "USA", "Title": "Sales Representative", "HireDate": "1992-04-01 00:00:00", "BirthDate": "1963-08-30 00:00:00", "City": "Kirkland", "Address": "722 Moss Bay Blvd." }, { "EmployeeID": 4, "FirstName": "Margaret", "LastName": "Peacock", "ReportsTo": 2, "Country": "USA", "Title": "Sales Representative", "HireDate": "1993-05-03 00:00:00", "BirthDate": "1937-09-19 00:00:00", "City": "Redmond", "Address": "4110 Old Redmond Rd." }, { "EmployeeID": 5, "FirstName": "Steven", "LastName": "Buchanan", "ReportsTo": 2, "Country": "UK", "Title": "Sales Manager", "HireDate": "1993-10-17 00:00:00", "BirthDate": "1955-03-04 00:00:00", "City": "London", "Address": "14 Garrett Hill" }, { "EmployeeID": 6, "FirstName": "Michael", "LastName": "Suyama", "ReportsTo": 5, "Country": "UK", "Title": "Sales Representative", "HireDate": "1993-10-17 00:00:00", "BirthDate": "1963-07-02 00:00:00", "City": "London", "Address": "Coventry House Miner Rd." }, { "EmployeeID": 7, "FirstName": "Robert", "LastName": "King", "ReportsTo": 5, "Country": "UK", "Title": "Sales Representative", "HireDate": "1994-01-02 00:00:00", "BirthDate": "1960-05-29 00:00:00", "City": "London", "Address": "Edgeham Hollow Winchester Way" }, { "EmployeeID": 8, "FirstName": "Laura", "LastName": "Callahan", "ReportsTo": 2, "Country": "USA", "Title": "Inside Sales Coordinator", "HireDate": "1994-03-05 00:00:00", "BirthDate": "1958-01-09 00:00:00", "City": "Seattle", "Address": "4726 - 11th Ave. N.E." }, { "EmployeeID": 9, "FirstName": "Anne", "LastName": "Dodsworth", "ReportsTo": 5, "Country": "UK", "Title": "Sales Representative", "HireDate": "1994-11-15 00:00:00", "BirthDate": "1966-01-27 00:00:00", "City": "London", "Address": "7 Houndstooth Rd." } ]}); var columns = [ { text: 'FirstName', columnGroup: 'Name', dataField: 'FirstName', width: 200 }, { text: 'LastName', columnGroup: 'Name', dataField: 'LastName', width: 200 }, { text: 'Title', dataField: 'Title', width: 160 }, { text: 'Birth Date', dataField: 'BirthDate', cellsFormat: 'd', width: 120 }, { text: 'Hire Date', dataField: 'HireDate', cellsFormat: 'd', width: 120 }, { text: 'Address', dataField: 'Address', width: 250 }, { text: 'City', dataField: 'City', width: 120 }, { text: 'Country', dataField: 'Country' } ]; var columnGroups = [ { text: 'Name', name: 'Name' } ]; JQXElements.settings[ "treeGridSettings"] = { } window.onload = function() { document.querySelector( "jqx-tree-grid").unlockRow(1); } </script></head><body> <jqx-tree-grid settings="treeGridSettings"></jqx-tree-grid>
|