Name
|
Type
|
Default
|
altRows
|
Boolean
|
false
|
Sets or gets whether the jqxTreeGrid automatically alternates row colors.
Code examples
Set the altRows property.
$('#treeGrid').jqxTreeGrid({altRows: true});
Get the altRows property.
var altRows = $('#treeGrid').jqxTreeGrid('altRows');
|
autoRowHeight
|
Boolean
|
true
|
Sets or gets whether the jqxTreeGrid automatically calculates the rows height and wraps the cell text.
Code examples
Set the autoRowHeight property.
$('#treeGrid').jqxTreeGrid({autoRowHeight: true});
Get the autoRowHeight property.
var autoRowHeight = $('#treeGrid').jqxTreeGrid('autoRowHeight');
|
aggregatesHeight
|
Number
|
34
|
Sets or gets the height of the aggregates bar. Aggregates bar is displayed after setting showAggregates to true.
Code examples
Set the aggregatesHeight property.
$('#treeGrid').jqxTreeGrid({aggregatesHeight: 50});
Get the aggregatesHeight property.
var aggregatesHeight = $('#treeGrid').jqxTreeGrid('aggregatesHeight');
|
autoShowLoadElement
|
Boolean
|
true
|
Sets or gets whether the loading html element with animated gif is automatically displayed by the widget during the data binding process.
Code examples
Set the autoShowLoadElement property.
$('#treeGrid').jqxTreeGrid({autoShowLoadElement: false});
Get the autoShowLoadElement property.
var autoShowLoadElement = $('#treeGrid').jqxTreeGrid('autoShowLoadElement');
|
checkboxes
|
Boolean
|
false
|
Determines whether checkboxes are displayed or not.
Code examples
Set the checkboxes property.
$('#treeGrid').jqxTreeGrid({checkboxes: true});
You can also set the checkboxes property to a function. The function's result should be true or false depending on whether you want a checkbox to be displayed or not.
checkboxes: function (rowKey, dataRow) {
var level = dataRow.level;
if (level == 0) {
return true;
}
return false;
}
Get the checkboxes property.
var checkboxes = $('#treeGrid').jqxTreeGrid('checkboxes');
|
columnsHeight
|
Number
|
30
|
Sets or gets the height of the columns header.
Code examples
Set the columnsHeight property.
$('#treeGrid').jqxTreeGrid({columnsHeight: 40});
Get the columnsHeight property.
var columnsHeight = $('#treeGrid').jqxTreeGrid('columnsHeight');
|
columns
|
Array
|
[]
|
Sets the jqxTreeGrid's columns.
List of properties:
- text - string property which sets the column header's text.
- dataField - string property which sets the column's bound field. It should be unique and should point to a data field defined in the jqxDataAdapter's dataFields array.
- displayField - string property which sets the column's display field. It should be unique and should point to a data field defined in the jqxDataAdapter's dataFields array.
- sortable - boolean property which determines whether the column is sortable.
- filterable - boolean property which determines whether the column is filterable.
- hidden - boolean property which determines whether the column is visible or hidden.
- columnGroup - string property which determines the name of the column's parent group. It should point to a valid name defined in the
columnGroups .
- autoCellHeight - boolean property which determines whether the cell's data wrapping is enabled. This property is set to
true by default. When autoRowHeight is enabled and autoCellHeight is set to false, the cell's data will not be wrapped.
- renderer - callback function for custom rendering of the column's header.
Code Example
renderer: function (text, align, height) { var checkBox = "<div id='checkbox' style='z-index: 999; margin: 5px; margin-left: 30px; margin-top: 8px; margin-bottom: 3px;'>";
- rendered - callback function which is called after the column's header rendering is completed.
Code Example
rendered: function (element, align, height) { element.jqxCheckBox(); element.on( 'change', function (event) { if (!updatingSelectionFromtreeGrid) { var args = event.args; var rows = $( "#treeGrid").jqxTreeGrid( 'getRows'); updatingSelection = true; if (args.checked) { for (var i = 0; i < rows.length; i++) { $( "#treeGrid").jqxTreeGrid( 'selectRow', i); } } else { $( "#treeGrid").jqxTreeGrid( 'clearSelection'); } updatingSelection = false;
- cellsRenderer - callback function which is called when a cell is being rendered. The result of that function should be valid and well-formatted HTML String.
The cellsRenderer function has 4 parameters passed by jqxTreeGrid - row's key, column's data field, cell's value, row's data as an Object of Key/Value pairs.
Code Example
{ text: 'Details', align: 'center', dataField: 'lastname', // row - row's key. // column - column's data field. // value - cell's value. // rowData - rendered row's object. cellsRenderer: function (row, column, value, rowData) { var container = '<div style="width: 100%; height: 100%;">' var leftcolumn = '<div style="float: left; width: 50%;">'; var rightcolumn = '<div style="float: left; width: 50%;">'; var firstname = "<div style='margin: 10px;'><b>First Name:</b> " + rowData.firstname + "</div>"; var lastname = "<div style='margin: 10px;'><b>Last Name:</b> " + rowData.lastname + "</div>"; var title = "<div style='margin: 10px;'><b>Title:</b> " + rowData.title + "</div>"; var address = "<div style='margin: 10px;'><b>Address:</b> " + rowData.address + "</div>"; leftcolumn += firstname; leftcolumn += lastname; leftcolumn += title; leftcolumn += address; leftcolumn += "</div>"; var postalcode = "<div style='margin: 10px;'><b>Postal Code:</b> " + rowData.postalcode + "</div>"; var city = "<div style='margin: 10px;'><b>City:</b> " + rowData.city + "</div>"; var phone = "<div style='margin: 10px;'><b>Phone:</b> " + rowData.homephone + "</div>"; var hiredate = "<div style='margin: 10px;'><b>Hire Date:</b> " + rowData.hiredate + "</div>"; rightcolumn += postalcode; rightcolumn += city; rightcolumn += phone; rightcolumn += hiredate; rightcolumn += "</div>"; container += leftcolumn; container += rightcolumn;
- columnType - string property which determines the column's type.
Possible values:
- "template" - sets a custom editor as a default editor for the column. The editor should be created in the
createEditor callback function. The editor should be synchronized with the cell's value in the initEditor callback. The editor's value should be retrieved in the getEditorValue callback function.
- "custom" - sets a custom editor as a default editor for a cell. That setting enables you to have different cell editors in the column. The editors should be created in the
createEditor callback function which is called for each row when the columnType property is set to "custom". The editors should be synchronized with the cell's value in the initEditor callback. The editor's value should be retrieved in the getEditorValue callback function.
- validation - callback function which is called when the jqxTreeGrid's edited row needs to be validated. The function has 2 parameters - edit cell and the cell's value. The function should return
true or false, depending on the user's validation logic. It can also return a validation object with 2 fields - "result" - true or false, and "message" - validation string displayed to the users.
Code Example
validation: function (cell, value) { var date = new Date(value); if (date.getFullYear() > 2014 || date.getFullYear() < 1990) { return { message: "Shipped Date should be in the 1990 - 2014 interval", result: false };
- initEditor - callback function which is called when an editor is opened. It has 5 parameters - row's key, cell's value, the editor element, cell's width and cell's height. The function can be
used for adding some custom parameters to the editor.
Code Example
initEditor: function (row, cellValue, editor, cellText, width, height) {
- createEditor - callback function which is called just once when the cells editor is created. It has 5 parameters - row's key, cell's value, the editor element, cell's width and cell's height. The function can be
used for adding some custom parameters to the editor.
Code Example
createEditor: function (row, cellValue, editor, cellText, width, height) {
- getEditorValue - callback function which could be used for overriding the value returned by the editor. It is useful for advanced scenarios with custom editors. It has 3 parameters - row's key, cell's value and the editor element. The result of the function is expected to be the editor's new value.
Code Example
getEditorValue: function (row, cellValue, editor) {
- cellsFormat - determines the Format string used for formatting the cell values.
Possible Number strings:
"d" - decimal numbers.
"f" - floating-point numbers.
"n" - integer numbers.
"c" - currency numbers.
"p" - percentage numbers.
For adding decimal places to the numbers, add a number after the formatting string.
For example: "c3" displays a number in this format $25.256
Possible built-in Date formats:
// short date pattern
d: "M/d/yyyy",
// long date pattern
D: "dddd, MMMM dd, yyyy",
// short time pattern
t: "h:mm tt",
// long time pattern
T: "h:mm:ss tt",
// long date, short time pattern
f: "dddd, MMMM dd, yyyy h:mm tt",
// long date, long time pattern
F: "dddd, MMMM dd, yyyy h:mm:ss tt",
// month/day pattern
M: "MMMM dd",
// month/year pattern
Y: "yyyy MMMM",
// S is a sortable format that does not vary by culture
S: "yyyy\u0027-\u0027MM\u0027-\u0027dd\u0027T\u0027HH\u0027:\u0027mm\u0027:\u0027ss"
Possible Date format strings:
"d"-the day of the month;
"dd"-the day of the month;
"ddd"-the abbreviated name of the day of the week;
"dddd"- the full name of the day of the week;
"h"-the hour, using a 12-hour clock from 1 to 12;
"hh"-the hour, using a 12-hour clock from 01 to 12;
"H"-the hour, using a 24-hour clock from 0 to 23;
"HH"- the hour, using a 24-hour clock from 00 to 23;
"m"-the minute, from 0 through 59;
"mm"-the minutes,from 00 though59;
"M"- the month, from 1 through 12;
"MM"- the month, from 01 through 12;
"MMM"-the abbreviated name of the month;
"MMMM"-the full name of the month;
"s"-the second, from 0 through 59;
"ss"-the second, from 00 through 59;
"t"- the first character of the AM/PM designator;
"tt"-the AM/PM designator;
"y"- the year, from 0 to 99;
"yy"- the year, from 00 to 99;
"yyy"-the year, with a minimum of three digits;
"yyyy"-the year as a four-digit number;
- aggregates - array property which determines the column aggregates.
Code Examples
{ text: 'Price', datafield: 'price', cellsalign: 'right', cellsformat: 'c2', aggregates: ['sum', 'avg'] }
Aggregate functions:
- 'avg' - Average aggregate
- 'count' - Count aggregate
- 'min' - Min aggregate
- 'max' - Max aggregate
- 'sum' - Sum aggregate
- 'product' - Product aggregate
- 'stdev' - Standard deviation on a sample.
- 'stdevp' - Standard deviation on an entire population.
- 'varp' - Variance on an entire population.
- 'var' - Variance on a sample.
Custom Aggregate
aggregates: [{ 'In Stock':
function (aggregatedValue, currentValue) {
if (currentValue) {
return aggregatedValue + 1;
}
return aggregatedValue;
}
}
Custom Aggregate which aggregates values from two columns
{ text: 'Price', dataField: 'price', cellsAlign: 'right', cellsFormat: 'c2', aggregates: [{ 'Total':
function (aggregatedValue, currentValue, column, record) {
var total = currentValue * parseInt(record['quantity']);
return aggregatedValue + total;
}
}]
}
'In Stock' - the aggregate's display name.
The function has 2 params - the aggregated value and the current value. It should return an aggregated value.
- aggregatesRenderer - callback function which could be used for customization of the aggregates rendering. It has 1 parameter - the column's aggregates.
Code Example
Apply aggregates.
var data = [ { "id": "1", "name": "Corporate Headquarters", "budget": "1230000", "location": "Las Vegas", "children": [ { "id": "2", "name": "Finance Division", "budget": "423000", "location": "San Antonio", "children": [ { "id": "4", "name": "Investment Department", "budget": "310000", "location": "San Antonio", children: [ { "id": "5", "name": "Banking Office", "budget": "240000", "location": "San Antonio" }, { "id": "6", "name": "Bonds Office", "budget": "70000", "location": "San Antonio" }, ] }, { "id": "3", "name": "Accounting Department", "budget": "113000", "location": "San Antonio" } ] }, { "id": "7", "name": "Operations Division", "budget": "600000", "location": "Miami", "children": [ { "id": "8", "name": "Manufacturing Department", "budget": "300000", "location": "Miami" }, { "id": "9", "name": "Public Relations Department", "budget": "200000", "location": "Miami" }, { "id": "10", "name": "Sales Department", "budget": "100000", "location": "Miami" } ] }, { "id": "11", "name": "Research Division", "budget": "200000", "location": "Boston" } ] } ]; var source = { dataType: "json", dataFields: [ { name: "name", type: "string" }, { name: "budget", type: "number" }, { name: "id", type: "number" }, { name: "children", type: "array" }, { name: "location", type: "string" } ], hierarchy: { root: "children" }, localData: data, id: "id" }; var dataAdapter = new $.jqx.dataAdapter(source, { loadComplete: function () { } }); // create jqxTreeGrid. $( "#treeGrid").jqxTreeGrid( { source: dataAdapter, altRows: true, width: 680, showSubAggregates: true, columnsResize: true, ready: function () { $( "#treeGrid").jqxTreeGrid( 'expandRow', '1'); $( "#treeGrid").jqxTreeGrid( 'expandRow', '2'); }, columns: [ { text: "Name", align: "center", dataField: "name", width: 270 }, { text: "Location", dataField: "location", cellsAlign: "center", align: "center", width: 200 }, { text: "Budget", cellsAlign: "center", align: "center", dataField: "budget", cellsFormat: "c2", aggregates: [{ 'Total': function (aggregatedValue, currentValue, column, record) { return aggregatedValue + currentValue; } }], aggregatesRenderer: function (aggregatesText, column, element, aggregates, type) { if (type == "aggregates") { var renderString = "<div style='margin: 4px; float: right; height: 100%;'>"; } else { var renderString = "<div style='float: right; height: 100%;'>"; } var euro = dataAdapter.formatNumber(0.74 * aggregates.Total, "f2");; var usd = dataAdapter.formatNumber(aggregates.Total, "f2");; renderString += "<table><tr><td rowspan='2'><strong>Total: </strong></td><td>" + usd + " USD</td><tr><td>" + euro + " EUR</td></tr></table>";
- align - string property which determines the alignment of the column's header. Possible values: 'left', 'center' or 'right'
- cellsAlign - string property which determines the alignment of the column's cells. Possible values: 'left', 'center' or 'right'.
- width - numeric property which determines the column's width.
- minWidth - numeric property which determines the column's minimum width. Default value: 25.
- maxWidth - numeric property which determines the column's maximum width.
- resizable - boolean property which determines whether the column is resizable.
- draggable - boolean property which determines whether the column is draggable.
- editable - boolean property which determines whether the column is editable.
- className - string property which sets a custom CSS class for the column's header
- cellClassName - string or function property which sets a custom CSS class for the column's cells. The value could be a "String" or "Function".
Apply a CSS class to all cells in the column.
text: 'Ship Name', datafield: 'ShipName', width: 150, cellclassname: "yellowCell"
Apply a conditional CSS Class depending on the cell's value.
text: 'Ship Name', dataField: 'ShipName', width: 150,
cellClassName: function (row, column, value, data) {
if (value == "Hanari Carnes") {
return "yellowCell";
}
}
- pinned - boolean property which determines whether the column is pinned(frozen).
Code examples
Set the columns property.
$("#table").jqxTreeGrid({ altrows: true, sortable: true, columns: [ { text: 'First Name', dataField: 'First Name', width: 100 }, { text: 'Last Name', dataField: 'Last Name', width: 100 }, { text: 'Product', dataField: 'Product', width: 180 }, { text: 'Unit Price', dataField: 'Price', width: 90, align: 'right', cellsAlign: 'right', cellsFormat: 'c2' }, { text: 'Quantity', dataField: 'Quantity', width: 80, align: 'right', cellsAlign: 'right' }
|
columnGroups
|
Array
|
[]
|
Sets the jqxTreeGrid's column groups.
The columnGroups property enables you to create a jqxTreeGrid with multi column headers.
List of properties:
- parentGroup - string property which determines the parent group's name.
- name - string property which determines the group's name.
- align - string property which determines the column header's alignment. Possible values: 'left', 'center' or 'right'.
Code examples
Set the columnGroups property.
// prepare the datavar source = { dataType: "xml", dataFields: [ { name: 'SupplierName', type: 'string' }, { name: 'Quantity', type: 'number' }, { name: 'OrderDate', type: 'date' }, { name: 'OrderAddress', type: 'string' }, { name: 'Freight', type: 'number' }, { name: 'Price', type: 'number' }, { name: 'City', type: 'string' }, { name: 'ProductName', type: 'string' }, { name: 'Address', type: 'string' } ], url: '../sampledata/orderdetailsextended.xml', root: 'DATA', record: 'ROW'}; var dataAdapter = new $.jqx.dataAdapter(source, { loadComplete: function () { } }); // create jqxTreeGrid. $( "#treeGrid").jqxTreeGrid( { width: 690, height: 400, source: dataAdapter, pageable: true, altRows: true, columnsResize: true, columns: [ { text: 'Supplier Name', cellsAlign: 'center', align: 'center', dataField: 'SupplierName', width: 110 }, { text: 'Name', columngroup: 'ProductDetails', cellsAlign: 'center', align: 'center', dataField: 'ProductName', width: 120 }, { text: 'Quantity', columngroup: 'ProductDetails', dataField: 'Quantity', cellsFormat: 'd', cellsAlign: 'center', align: 'center', width: 80 }, { text: 'Freight', columngroup: 'OrderDetails', dataField: 'Freight', cellsFormat: 'd', cellsAlign: 'center', align: 'center', width: 100 }, { text: 'Order Date', columngroup: 'OrderDetails', cellsAlign: 'center', align: 'center', cellsFormat: 'd', dataField: 'OrderDate', width: 100 }, { text: 'Order Address', columngroup: 'OrderDetails', cellsAlign: 'center', align: 'center', dataField: 'OrderAddress', width: 100 }, { text: 'Price', columngroup: 'ProductDetails', dataField: 'Price', cellsFormat: 'c2', align: 'center', cellsAlign: 'center', width: 70 }, { text: 'Address', columngroup: 'Location', cellsAlign: 'center', align: 'center', dataField: 'Address', width: 120 }, { text: 'City', columngroup: 'Location', cellsAlign: 'center', align: 'center', dataField: 'City', width: 80 } ], columnGroups: [ { text: 'Product Details', align: 'center', name: 'ProductDetails' }, { text: 'Order Details', parentGroup: 'ProductDetails', align: 'center', name: 'OrderDetails' }, { text: 'Location', align: 'center', name: 'Location' }
|
columnsResize
|
Boolean
|
false
|
Sets or gets the jqxTreeGrid's columnsResize.
Code examples
Set the columnsResize property.
$('#treeGrid').jqxTreeGrid({columnsResize: false});
Get the columnsResize property.
var columnsResize = $('#treeGrid').jqxTreeGrid('columnsResize');
|
columnsReorder
|
Boolean
|
false
|
Sets or gets the jqxTreeGrid's columnsReorder.
Code examples
Set the columnsReorder property.
$('#treeGrid').jqxTreeGrid({columnsReorder: false});
Get the columnsReorder property.
var columnsReorder = $('#treeGrid').jqxTreeGrid('columnsReorder');
|
disabled
|
Boolean
|
false
|
Sets or gets whether the jqxTreeGrid is disabled.
Code examples
Set the disabled property.
$('#treeGrid').jqxTreeGrid({ disabled:true });
Get the disabled property.
var disabled = $('#treeGrid').jqxTreeGrid('disabled');
|
editable
|
Boolean
|
false
|
Sets or gets whether the jqxTreeGrid editing is enabled.
Code examples
Set the editable property.
$('#treeGrid').jqxTreeGrid({ editable:true });
Get the editable property.
var editable = $('#treeGrid').jqxTreeGrid('editable');
|
editSettings
|
Object
|
{ saveOnPageChange: true, saveOnBlur: true, saveOnSelectionChange: true, cancelOnEsc: true, saveOnEnter: true, editSingleCell: false, editOnDoubleClick: true, editOnF2: true }
|
Sets or gets the jqxTreeGrid's edit settings.
Code examples
Set the editSettings property.
$('#treeGrid').jqxTreeGrid({ editSettings:{ saveOnPageChange: true, saveOnBlur: true, saveOnSelectionChange: false, cancelOnEsc: true, saveOnEnter: true, editOnDoubleClick: true, editOnF2: true } });
Get the editSettings property.
var editSettings = $('#treeGrid').jqxTreeGrid('editSettings');
|
exportSettings
|
Object
|
{columnsHeader: true, hiddenColumns: false, serverURL: null, characterSet: null, collapsedRecords: false, recordsInView: true,fileName: "jqxTreeGrid"}
|
Determines the Data Export settings used by jqxTreeGrid when exportData is called. See also the exportData method.
List of parameters:
- columnsHeader - Boolean value. Determines whether the columns header is exported. Note that Stacked Headers are not exported.
- hiddenColumns - Boolean value. Determines whether the hidden columns would be exported.
- serverURL - String or Null. Determines the Exporter File's URL.
- characterSet - String value. Determines the character set used by the exporter.
- collapsedRecords - Boolean value. Determines whether the collapsed records would be included in the export.
- recordsInView - Boolean value. Determines whether the filtered/sorted set of records would be exported. Otherwise, the widget would not take into account the filtering and sorting.
- fileName - String value. Determines the export file's name.
Code example
var employees = [{ "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." }];
//// prepare the data
var source =
{
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: employees
};
var dataAdapter = new $.jqx.dataAdapter(source);
// create Tree Grid
$("#treeGrid").jqxTreeGrid(
{
width: 600,
source: dataAdapter,
ready: function () {
$("#treeGrid").jqxTreeGrid('expandRow', '2');
},
columns: [
{ text: 'First Name', dataField: 'FirstName', width: 150 },
{ text: 'Last Name', dataField: 'LastName', width: 120 },
{ 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', width: 120 }
]
});
$("#excelExport").jqxButton();
$("#xmlExport").jqxButton();
$("#csvExport").jqxButton();
$("#tsvExport").jqxButton();
$("#htmlExport").jqxButton();
$("#jsonExport").jqxButton();
$("#excelExport").click(function () {
$("#treeGrid").jqxTreeGrid('exportData', 'xls');
});
$("#xmlExport").click(function () {
$("#treeGrid").jqxTreeGrid('exportData', 'xml');
});
$("#csvExport").click(function () {
$("#treeGrid").jqxTreeGrid('exportData', 'csv');
});
$("#tsvExport").click(function () {
$("#treeGrid").jqxTreeGrid('exportData', 'tsv');
});
$("#htmlExport").click(function () {
$("#treeGrid").jqxTreeGrid('exportData', 'html');
});
$("#jsonExport").click(function () {
$("#treeGrid").jqxTreeGrid('exportData', 'json');
});
|
enableHover
|
Boolean
|
true
|
Sets or gets whether row highlighting is enabled.
Code examples
Set the enableHover property.
$('#treeGrid').jqxTreeGrid({enableHover: false });
Get the enableHover property.
var enableHover = $('#treeGrid').jqxTreeGrid('enableHover');
|
enableBrowserSelection
|
Boolean
|
false
|
Enables or disables the default text selection of the web browser.
Code examples
Set the enableBrowserSelection property.
$('#treeGrid').jqxTreeGrid({enableBrowserSelection: true });
Get the enableBrowserSelection property.
var enableBrowserSelection = $('#treeGrid').jqxTreeGrid('enableBrowserSelection');
|
filterable
|
Boolean
|
false
|
Enables/Disables the filtering feature.
Code examples
Set the filterable property.
$('#treeGrid').jqxTreeGrid({filterable: true});
Get the filterable property.
var filterable = $('#treeGrid').jqxTreeGrid('filterable');
|
filterHeight
|
Number
|
30
|
Sets or gets the Filter Element's height.
Code examples
Set the filterHeight property.
$('#treeGrid').jqxTreeGrid({filterHeight: 40});
Get the filterHeight property.
var filterHeight = $('#treeGrid').jqxTreeGrid('filterHeight');
|
filterMode
|
String
|
"default"
|
Determines the Filter's mode. Possible values: "default" , "simple" and "advanced"
Code examples
Set the filterMode property.
$('#treeGrid').jqxTreeGrid({filterMode: "advanced"});
Get the filterMode property.
var filterMode = $('#treeGrid').jqxTreeGrid('filterMode');
|
height
|
Number/String
|
null
|
Sets or gets the jqxTreeGrid's height.
Code examples
Set the height property.
$('#treeGrid').jqxTreeGrid({height:"400px"});
Get the height property.
var height = $('#treeGrid').jqxTreeGrid('height');
|
hierarchicalCheckboxes
|
Boolean
|
false
|
Determines whether changing a checkbox state affects the parent/child records check state. Note: "checkboxes" property value is expected to be true.
Code examples
Set the hierarchicalCheckboxes property.
$('#treeGrid').jqxTreeGrid({hierarchicalCheckboxes:true, checkboxes: true});
Get the hierarchicalCheckboxes property.
var hierarchicalCheckboxes = $('#treeGrid').jqxTreeGrid('hierarchicalCheckboxes');
|
icons
|
Boolean
|
false
|
Determines whether icons are displayed or not.
Code examples
Set the icons property.
$('#treeGrid').jqxTreeGrid({icons: true});
You can also set the icons property to a function. The function's result should be the Icon's URL or false (in case you do not want an Icon to be displayed).
List of parameters:
- Row Key/ID - unique ID which identifies the row.
- Row Data - the row as a set of Key/Value pairs.
icons: function (rowKey, dataRow) {
var level = dataRow.level;
if (level == 0) {
return "../../images/img1.png";
}
return false;
}
Get the icons property.
var icons = $('#treeGrid').jqxTreeGrid('icons');
|
incrementalSearch
|
Boolean
|
true
|
Determines whether the incremental search is enabled. The feature allows you to quickly find and select data records by typing when the widget is on focus.
Code examples
Set the incrementalSearch property.
$('#treeGrid').jqxTreeGrid({incrementalSearch:false});
Get the incrementalSearch property.
var incrementalSearch = $('#treeGrid').jqxTreeGrid('incrementalSearch');
|
localization
|
Object
|
default localization strings.
|
Applies a localization to the jqxTreeGrid's Strings.
Default localization object:
{ // separator of parts of a date (e.g. '/' in 11/05/1955) '/': "/", // separator of parts of a time (e.g. ':' in 05:44 PM) ':': ":", // the first day of the week (0 = Sunday, 1 = Monday, etc) firstDay: 0, days: { // full day names names: [ "Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"], // abbreviated day names namesAbbr: [ "Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"], // shortest day names namesShort: [ "Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"] }, months: { // full month names (13 months for lunar calendards -- 13th month should be "" if not lunar) names: [ "January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December", ""], // abbreviated month names namesAbbr: [ "Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec", ""] }, // AM and PM designators in one of these forms: // The usual view, and the upper and lower case versions // [standard,lowercase,uppercase] // The culture does not use AM or PM (likely all standard date formats use 24 hour time) // null AM: [ "AM", "am", "AM"], PM: [ "PM", "pm", "PM"], eras: [ // eras in reverse chronological order. // name: the name of the era in this culture (e.g. A.D., C.E.) // start: when the era starts in ticks (gregorian, gmt), null if it is the earliest supported era. // offset: offset in years from gregorian calendar { "name": "A.D.", "start": null, "offset": 0 } ], twoDigitYearMax: 2029, patterns: { // short date pattern d: "M/d/yyyy", // long date pattern D: "dddd, MMMM dd, yyyy", // short time pattern t: "h:mm tt", // long time pattern T: "h:mm:ss tt", // long date, short time pattern f: "dddd, MMMM dd, yyyy h:mm tt", // long date, long time pattern F: "dddd, MMMM dd, yyyy h:mm:ss tt", // month/day pattern M: "MMMM dd", // month/year pattern Y: "yyyy MMMM", // S is a sortable format that does not vary by culture S: "yyyy\u0027-\u0027MM\u0027-\u0027dd\u0027T\u0027HH\u0027:\u0027mm\u0027:\u0027ss", // formatting of dates in MySQL DataBases ISO: "yyyy-MM-dd hh:mm:ss", ISO2: "yyyy-MM-dd HH:mm:ss", d1: "dd.MM.yyyy", d2: "dd-MM-yyyy", d3: "dd-MMMM-yyyy", d4: "dd-MM-yy", d5: "H:mm", d6: "HH:mm", d7: "HH:mm tt", d8: "dd/MMMM/yyyy", d9: "MMMM-dd", d10: "MM-dd", d11: "MM-dd-yyyy" }, percentSymbol: "%", currencySymbol: "$", currencySymbolposition: "before", decimalSeparator: '.', thousandsSeparator: ',', pagerGoToPageString: "Go to page:", pagerShowRowsString: "Show rows:", pagerRangeString: " of ", pagerPreviousButtonString: "previous", pagerNextButtonString: "next", pagerFirstButtonsSring: "first", pagerLastButtonString: "last", filterApplyString: "Apply", filterCancelString: "Cancel", filterClearString: "Clear Filter", filterString: "advanced", filterSearchString: "Search:", filterStringComparisonOperators: [ 'empty', 'not empty', 'contains', 'contains(match case)', 'does not contain', 'does not contain(match case)', 'starts with', 'starts with(match case)', 'ends with', 'ends with(match case)', 'equal', 'equal(match case)', 'null', 'not null'], filterNumericComparisonOperators: [ 'equal', 'not equal', 'less than', 'less than or equal', 'greater than', 'greater than or equal', 'null', 'not null'], filterDateComparisonOperators: [ 'equal', 'not equal', 'less than', 'less than or equal', 'greater than', 'greater than or equal', 'null', 'not null'], filterBooleanComparisoOoperators: [ 'equal', 'not equal'], validationString: "Entered value is not valid", emptyDataString: "No data to display", filterSelectString: "Select Filter", loadText: "Loading...", clearString: "Clear", todayString: "Today", loadingErrorMessage: "The data is still loading and you cannot set a property or call a method. You can do that once the data binding is completed. jqxTreeGrid raises the 'bindingComplete' event when the binding is completed."
Code examples
Set the localization property.
<!DOCTYPE html><html lang="en"><head> <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" /> <script type="text/javascript" src="../../scripts/jquery-1.11.1.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/jqxbuttons.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxlistbox.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxdropdownlist.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxmenu.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxpanel.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxcalendar.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxdatetimeinput.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxTreeGrid.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxnumberinput.js"></script> <script type="text/javascript" src="../../scripts/demos.js"></script> <script type="text/javascript" src="../../jqwidgets/globalization/globalize.js"></script> <script type="text/javascript" src="../sampledata/generatedata.js"></script> <script type="text/javascript"> $(document).ready(function () { var data = generatedata(250); var source = { localdata: data, dataFields: [ { name: 'name', type: 'string' }, { name: 'productname', type: 'string' }, { name: 'available', type: 'bool' }, { name: 'date', type: 'date'}, { name: 'quantity', type: 'number' }, { name: 'price', type: 'number' } ], datatype: "array" }; var dataAdapter = new $.jqx.dataAdapter(source); var getLocalization = function () { var localizationobj = {}; localizationobj.pagerGoToPageString = "Gehe zu:"; localizationobj.pagerShowRowsString = "Zeige Zeile:"; localizationobj.pagerRangeString = " von "; localizationobj.pagerNextButtonString = "voriger"; localizationobj.pagerFirstButtonString = "first"; localizationobj.pagerLastButtonString = "last"; localizationobj.pagerPreviousButtonString = "nächster"; localizationobj.sortAscendingString = "Sortiere aufsteigend"; localizationobj.sortDescendingString = "Sortiere absteigend"; localizationobj.sortRemoveString = "Entferne Sortierung"; localizationobj.firstDay = 1; localizationobj.percentSymbol = "%"; localizationobj.currencySymbol = "€"; localizationobj.currencySymbolPosition = "after"; localizationobj.decimalSeparator = "."; localizationobj.thousandsSeparator = ","; var days = { // full day names names: [ "Sonntag", "Montag", "Dienstag", "Mittwoch", "Donnerstag", "Freitag", "Samstag"], // abbreviated day names namesAbbr: [ "Sonn", "Mon", "Dien", "Mitt", "Donn", "Fre", "Sams"], // shortest day names namesShort: [ "So", "Mo", "Di", "Mi", "Do", "Fr", "Sa"] }; localizationobj.days = days; var months = { // full month names (13 months for lunar calendards -- 13th month should be "" if not lunar) names: [ "Januar", "Februar", "März", "April", "Mai", "Juni", "Juli", "August", "September", "Oktober", "November", "Dezember", ""], // abbreviated month names namesAbbr: [ "Jan", "Feb", "Mär", "Apr", "Mai", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dez", ""] }; var patterns = { d: "dd.MM.yyyy", D: "dddd, d. MMMM yyyy", t: "HH:mm", T: "HH:mm:ss", f: "dddd, d. MMMM yyyy HH:mm", F: "dddd, d. MMMM yyyy HH:mm:ss", M: "dd MMMM", Y: "MMMM yyyy" } localizationobj.patterns = patterns; localizationobj.months = months; return localizationobj; } $( "#treeGrid").jqxTreeGrid( { width: 685, source: dataAdapter, filterable: true, pageable: true, editable: true, localization: getLocalization(), columns: [ { text: 'Name', dataField: 'name', width: 115 }, { text: 'Produkt', dataField: 'productname', width: 220 }, { text: 'Datum', dataField: 'date', width: 210, cellsAlign: 'right', cellsFormat: 'd'}, { text: 'Qt.', dataField: 'quantity', cellsAlign: 'right', width: 60 }, { text: 'Preis', dataField: 'price', cellsFormat: "c2", cellsAlign: 'right' }
Get the localization property.
var localization = $('#treeGrid').jqxTreeGrid('localization');
|
pagerHeight
|
Number
|
28
|
Sets or gets the height of the jqxTreeGrid's Pager(s). Pager(s) is(are) displayed after setting pageable to true.
Code examples
Set the pagerHeight property.
$('#treeGrid').jqxTreeGrid({ pagerHeight: 35 });
Get the pagerHeight property.
var pagerHeight = $('#treeGrid').jqxTreeGrid('pagerHeight');
|
pageSize
|
Number
|
10
|
Sets or gets the rows count per page when paging is enabled.
Code examples
Set the pageSize property.
$('#treeGrid').jqxTreeGrid({ pageSize: 20 });
Get the pageSize property.
var pageSize = $('#treeGrid').jqxTreeGrid('pageSize');
|
pageSizeOptions
|
Array
|
['5', '10', '20']
|
Sets or gets the jqxTreeGrid's page size options when paging is enabled and the pagerMode property is set to "advanced" .
Code examples
Set the pageSizeOptions property.
$('#treeGrid').jqxTreeGrid({ pageSizeOptions: ['15', '20', '30'] });
Get the pageSizeOptions property.
var pageSizeOptions = $('#treeGrid').jqxTreeGrid('pageSizeOptions');
|
pageable
|
Boolean
|
false
|
Determines whether the jqxTreeGrid is in paging mode.
Code examples
Set the pageable property.
$('#treeGrid').jqxTreeGrid({ pageable:true });
Get the pageable property.
var pageable = $('#treeGrid').jqxTreeGrid('pageable');
|
pagerPosition
|
String
|
"bottom"
|
Sets or gets the Pager's position. Possible values: 'top' , 'bottom' and 'both'
Code examples
Set the pagerPosition property.
$('#treeGrid').jqxTreeGrid({ pagerPosition:'top' });
Get the pagerPosition property.
var pagerPosition = $('#treeGrid').jqxTreeGrid('pagerPosition');
|
pagerMode
|
String
|
"default"
|
Sets or gets the Pager's mode. Possible values: "default" and "advanced"
Code examples
Set the pagerMode property.
$('#treeGrid').jqxTreeGrid({pagerMode: "advanced" });
Get the pagerMode property.
var pagerMode = $('#treeGrid').jqxTreeGrid('pagerMode');
|
pageSizeMode
|
String
|
"default"
|
Sets or gets the Pager Size's mode. Possible values: "default" and "root"
Code examples
Set the pagerMode property.
$('#treeGrid').jqxTreeGrid({pageSizeMode: "root" });
Get the pageSizeMode property.
var pagerMode = $('#treeGrid').jqxTreeGrid('pagerMode');
|
pagerButtonsCount
|
Number
|
5
|
Sets or gets the count of the buttons displayed on the Pager when pagerMode is set to "default" .
Code examples
Set the pagerButtonsCount property.
$('#treeGrid').jqxTreeGrid({pagerButtonsCount: 10 });
Get the pagerButtonsCount property.
var pagerButtonsCount = $('#treeGrid').jqxTreeGrid('pagerButtonsCount');
|
pagerRenderer
|
Function
|
null
|
Enables custom rendering of the Pager.
Code examples
Set the pagerRenderer property.
$('#treeGrid').jqxTreeGrid({pagerRenderer: function(){"do something here and return a HTML Element as a result." });
Get the pagerRenderer property.
var pagerRenderer = $('#treeGrid').jqxTreeGrid('pagerRenderer');
|
ready
|
Function
|
null
|
Callback function which is called when the jqxTreeGrid is rendered and data binding is completed..
Code examples
Set the ready property.
$('#treeGrid').jqxTreeGrid({ready:function(){ // your code here.}});
Get the ready property.
var ready = $('#treeGrid').jqxTreeGrid('ready');
|
rowDetails
|
Boolean
|
false
|
Sets or gets whether the jqxTreeGrid rows have details. See the rowDetailsRenderer for rendering of the row details.
Code examples
Set the rowDetails property.
$('#treeGrid').jqxTreeGrid({rowDetails: true});
Get the rowDetails property.
var rowDetails = $('#treeGrid').jqxTreeGrid('rowDetails');
|
rowDetailsRenderer
|
Function
|
null
|
Callback function which is used for rendering of the row's details.
List of parameters:
- id/key - row's id/key.
- dataRow - the row as a set of Key/Value pairs.
If rowDetailsRenderer returns false, the row's details would be collapsed.
Code examples
Set the rowDetailsRenderer property.
<!DOCTYPE html><html lang="en"><head> <title id="Description">jqxTreeGrid allows you to create an extra row for each tree-grid data record. </title> <meta name="description" content="Data Row Details - JavaScript Tree Grid Demo | jQWidgets"> <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" /> <script type="text/javascript" src="../../scripts/jquery-1.11.1.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/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="../../scripts/demos.js"></script> <script type="text/javascript"> $(document).ready(function () { var employees = [{ "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." }]; //// prepare the data var source = { 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: employees }; var dataAdapter = new $.jqx.dataAdapter(source, { beforeLoadComplete: function (records) { var notes = [ "Education includes a BA in psychology from Colorado State University in 1970. She also completed 'The Art of the Cold Call.' Nancy is a member of Toastmasters International.", "Andrew received his BTS commercial in 1974 and a Ph.D. in international marketing from the University of Dallas in 1981. He is fluent in French and Italian and reads German. He joined the company as a sales representative, was promoted to sales manager in January 1992 and to vice president of sales in March 1993. Andrew is a member of the Sales Management Roundtable, the Seattle Chamber of Commerce, and the Pacific Rim Importers Association.", "Janet has a BS degree in chemistry from Boston College (1984). She has also completed a certificate program in food retailing management. Janet was hired as a sales associate in 1991 and promoted to sales representative in February 1992.", "Margaret holds a BA in English literature from Concordia College (1958) and an MA from the American Institute of Culinary Arts (1966). She was assigned to the London office temporarily from July through November 1992.", "Steven Buchanan graduated from St. Andrews University, Scotland, with a BSC degree in 1976. Upon joining the company as a sales representative in 1992, he spent 6 months in an orientation program at the Seattle office and then returned to his permanent post in London. He was promoted to sales manager in March 1993. Mr. Buchanan has completed the courses 'Successful Telemarketing' and 'International Sales Management.' He is fluent in French.", "Michael is a graduate of Sussex University (MA, economics, 1983) and the University of California at Los Angeles (MBA, marketing, 1986). He has also taken the courses 'Multi-Cultural Selling' and 'Time Management for the Sales Professional.' He is fluent in Japanese and can read and write French, Portuguese, and Spanish.", "Robert King served in the Peace Corps and traveled extensively before completing his degree in English at the University of Michigan in 1992, the year he joined the company. After completing a course entitled 'Selling in Europe,' he was transferred to the London office in March 1993.", "Laura received a BA in psychology from the University of Washington. She has also completed a course in business French. She reads and writes French.", "Anne has a BA degree in English from St. Lawrence College. She is fluent in French and German."]; for (var i = 0; i < records.length; i++) { var imgUrl = '../../images/' + records[i].FirstName.toLowerCase() + '.png'; records[i].icon = imgUrl; records[i].notes = notes[i]; } return records; } } ); // create Tree Grid $( "#treeGrid").jqxTreeGrid( { width: 600, pageable: true, pageSize: 3, source: dataAdapter, rowDetails: true, rowDetailsRenderer: function (rowKey, row) { var indent = (1+row.level) * 20; var details = "<table style='margin: 10px; margin-left: " + indent + "px;'><tr><td>" + "<img height='60' src='" + row.icon + "'/></td><td>" + row.notes + "</td></tr></table>"; return details; }, ready: function () { $( "#treeGrid").jqxTreeGrid('expandRow', "2"); }, columns: [ { text: 'FirstName', dataField: 'FirstName', width: 150 }, { text: 'LastName', dataField: 'LastName', width: 120 }, { text: 'City', dataField: 'City', width: 120 }, { text: 'Country', dataField: 'Country' }
Get the rowDetailsRenderer property.
var rowDetailsRenderer = $('#treeGrid').jqxTreeGrid('rowDetailsRenderer');
|
renderToolbar
|
Function
|
null
|
Enables custom rendering of the Toolbar.
Code examples
Set the renderToolbar property.
$('#treeGrid').jqxTreeGrid({renderToolbar: function(toolBar){"toolBar - The jQuery selection of the Toolbar HTML Element" });
Get the renderToolbar property.
var renderToolbar = $('#treeGrid').jqxTreeGrid('renderToolbar');
|
renderStatusbar
|
Function
|
null
|
Enables custom rendering of the Statusbar.
Code examples
Set the renderStatusbar property.
$('#treeGrid').jqxTreeGrid({renderStatusbar: function(statusBar){"statusBar - The jQuery selection of the Statusbar HTML Element" });
Get the renderStatusbar property.
var renderStatusbar = $('#treeGrid').jqxTreeGrid('renderStatusbar');
|
rendering
|
Function
|
null
|
Callback function which is called before the rendering of the jqxTreeGrid's rows.
Code examples
Set the rendering property.
<!DOCTYPE html><html lang="en"><head> <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" /> <script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script> <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" src="../../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxtooltip.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxinput.js"></script> <script type="text/javascript"> var that = this; $(document).ready(function () { var data = [ { "id": "1", "name": "Corporate Headquarters", "budget": "1230000", "location": "Las Vegas", "children": [ { "id": "2", "name": "Finance Division", "budget": "423000", "location": "San Antonio", "children": [ { "id": "3", "name": "Accounting Department", "budget": "113000", "location": "San Antonio" }, { "id": "4", "name": "Investment Department", "budget": "310000", "location": "San Antonio", children: [ { "id": "5", "name": "Banking Office", "budget": "240000", "location": "San Antonio" }, { "id": "6", "name": "Bonds Office", "budget": "70000", "location": "San Antonio" }, ] } ] }, { "id": "7", "name": "Operations Division", "budget": "600000", "location": "Miami", "children": [ { "id": "8", "name": "Manufacturing Department", "budget": "300000", "location": "Miami" }, { "id": "9", "name": "Public Relations Department", "budget": "200000", "location": "Miami" }, { "id": "10", "name": "Sales Department", "budget": "100000", "location": "Miami" } ] }, { "id": "11", "name": "Research Division", "budget": "200000", "location": "Boston" } ] } ]; var source = { dataType: "json", dataFields: [ { name: "name", type: "string" }, { name: "budget", type: "number" }, { name: "id", type: "number" }, { name: "children", type: "array" }, { name: "location", type: "string" } ], hierarchy: { root: "children" }, localData: data, id: "id" }; var dataAdapter = new $.jqx.dataAdapter(source, { loadComplete: function () { } }); this.editrow = -1; $( "#treeGrid").jqxTreeGrid( { width: 670, source: dataAdapter, altrows: true, autoRowHeight: false, ready: function() { // Expand rows with ID = 1, 2 and 7 $( "#treeGrid").jqxTreeGrid( 'expandRow', 1); $( "#treeGrid").jqxTreeGrid( 'expandRow', 2); $( "#treeGrid").jqxTreeGrid( 'expandRow', 7); }, editable: true, editSettings: { saveOnPageChange: true, saveOnBlur: true, saveOnSelectionChange: false, cancelOnEsc: true, saveOnEnter: true, editOnDoubleClick: false, editOnF2: false }, // called when jqxTreeGrid is going to be rendered. rendering: function() { // destroys all buttons. if ($( ".editButtons").length > 0) { $( ".editButtons").jqxButton( 'destroy'); } if ($( ".cancelButtons").length > 0) { $( ".cancelButtons").jqxButton( 'destroy'); } }, // called when jqxTreeGrid is rendered. rendered: function () { if ($( ".editButtons").length > 0) { $( ".cancelButtons").jqxButton(); $( ".editButtons").jqxButton(); var editClick = function (event) { var target = $(event.target); // get button's value. var value = target.val(); // get clicked row. var rowKey = event.target.getAttribute( 'data-row'); if (value == "Edit") { // begin edit. $( "#treeGrid").jqxTreeGrid( 'beginRowEdit', rowKey); target.parent().find( '.cancelButtons').show(); target.val( "Save"); } else { // end edit and save changes. target.parent().find( '.cancelButtons').hide(); target.val( "Edit"); $( "#treeGrid").jqxTreeGrid( 'endRowEdit', rowKey); } } $( ".editButtons").on( 'click', function (event) { editClick(event); }); $( ".cancelButtons").click(function (event) { // end edit and cancel changes. var rowKey = event.target.getAttribute( 'data-row'); $( "#treeGrid").jqxTreeGrid( 'endRowEdit', rowKey, true); }); } }, columns: [ { text: 'ID', editable: false, dataField: 'id', width: 100 }, { text: 'Name', dataField: 'name', width: 200 }, { text: 'Budget', align: 'right', cellsAlign: 'right', cellsFormat: 'c2', dataField: 'budget', width: 150 }, { text: 'Location', dataField: 'location', width: 100 }, { text: 'Edit', cellsAlign: 'center', align: "center", columnType: 'none', editable: false, sortable: false, dataField: null, cellsRenderer: function (row, column, value) { // render custom column. return "<button data-row='" + row + "' class='editButtons'>Edit</button><button style='display: none; margin-left: 5px;' data-row='" + row + "' class='cancelButtons'>Cancel</button>";
Get the rendering property.
var renderer = $('#treeGrid').jqxTreeGrid('renderer');
|
rendered
|
Function
|
null
|
Callback function which is called after the rendering of the jqxTreeGrid's row.
Code examples
Set the rendered property.
<!DOCTYPE html><html lang="en"><head> <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" /> <script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script> <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" src="../../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxtooltip.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxinput.js"></script> <script type="text/javascript"> var that = this; $(document).ready(function () { var data = [ { "id": "1", "name": "Corporate Headquarters", "budget": "1230000", "location": "Las Vegas", "children": [ { "id": "2", "name": "Finance Division", "budget": "423000", "location": "San Antonio", "children": [ { "id": "3", "name": "Accounting Department", "budget": "113000", "location": "San Antonio" }, { "id": "4", "name": "Investment Department", "budget": "310000", "location": "San Antonio", children: [ { "id": "5", "name": "Banking Office", "budget": "240000", "location": "San Antonio" }, { "id": "6", "name": "Bonds Office", "budget": "70000", "location": "San Antonio" }, ] } ] }, { "id": "7", "name": "Operations Division", "budget": "600000", "location": "Miami", "children": [ { "id": "8", "name": "Manufacturing Department", "budget": "300000", "location": "Miami" }, { "id": "9", "name": "Public Relations Department", "budget": "200000", "location": "Miami" }, { "id": "10", "name": "Sales Department", "budget": "100000", "location": "Miami" } ] }, { "id": "11", "name": "Research Division", "budget": "200000", "location": "Boston" } ] } ]; var source = { dataType: "json", dataFields: [ { name: "name", type: "string" }, { name: "budget", type: "number" }, { name: "id", type: "number" }, { name: "children", type: "array" }, { name: "location", type: "string" } ], hierarchy: { root: "children" }, localData: data, id: "id" }; var dataAdapter = new $.jqx.dataAdapter(source, { loadComplete: function () { } }); this.editrow = -1; $( "#treeGrid").jqxTreeGrid( { width: 670, source: dataAdapter, altrows: true, autoRowHeight: false, ready: function() { // Expand rows with ID = 1, 2 and 7 $( "#treeGrid").jqxTreeGrid( 'expandRow', 1); $( "#treeGrid").jqxTreeGrid( 'expandRow', 2); $( "#treeGrid").jqxTreeGrid( 'expandRow', 7); }, editable: true, editSettings: { saveOnPageChange: true, saveOnBlur: true, saveOnSelectionChange: false, cancelOnEsc: true, saveOnEnter: true, editOnDoubleClick: false, editOnF2: false }, // called when jqxTreeGrid is going to be rendered. rendering: function() { // destroys all buttons. if ($( ".editButtons").length > 0) { $( ".editButtons").jqxButton( 'destroy'); } if ($( ".cancelButtons").length > 0) { $( ".cancelButtons").jqxButton( 'destroy'); } }, // called when jqxTreeGrid is rendered. rendered: function () { if ($( ".editButtons").length > 0) { $( ".cancelButtons").jqxButton(); $( ".editButtons").jqxButton(); var editClick = function (event) { var target = $(event.target); // get button's value. var value = target.val(); // get clicked row. var rowKey = event.target.getAttribute( 'data-row'); if (value == "Edit") { // begin edit. $( "#treeGrid").jqxTreeGrid( 'beginRowEdit', rowKey); target.parent().find( '.cancelButtons').show(); target.val( "Save"); } else { // end edit and save changes. target.parent().find( '.cancelButtons').hide(); target.val( "Edit"); $( "#treeGrid").jqxTreeGrid( 'endRowEdit', rowKey); } } $( ".editButtons").on( 'click', function (event) { editClick(event); }); $( ".cancelButtons").click(function (event) { // end edit and cancel changes. var rowKey = event.target.getAttribute( 'data-row'); $( "#treeGrid").jqxTreeGrid( 'endRowEdit', rowKey, true); }); } }, columns: [ { text: 'ID', editable: false, dataField: 'id', width: 100 }, { text: 'Name', dataField: 'name', width: 200 }, { text: 'Budget', align: 'right', cellsAlign: 'right', cellsFormat: 'c2', dataField: 'budget', width: 150 }, { text: 'Location', dataField: 'location', width: 100 }, { text: 'Edit', cellsAlign: 'center', align: "center", columnType: 'none', editable: false, sortable: false, dataField: null, cellsRenderer: function (row, column, value) { // render custom column. return "<button data-row='" + row + "' class='editButtons'>Edit</button><button style='display: none; margin-left: 5px;' data-row='" + row + "' class='cancelButtons'>Cancel</button>";
Get the rendered property.
var rendered = $('#treeGrid').jqxTreeGrid('rendered');
|
rtl
|
Boolean
|
false
|
Sets or gets a value indicating whether widget's elements are aligned to support locales using right-to-left fonts.
Code example
Set the rtl property.
$('#treeGrid').jqxTreeGrid({rtl : true});
Get the rtl property.
var rtl = $('#treeGrid').jqxTreeGrid('rtl');
|
source
|
Object
|
null
|
Determines the jqxTreeGrid's data source. The source property is expected to point to an instance of jqxDataAdapter. For more information about jqxDataAdapter, visit: jquery-data-adapter.htm. To clear the data source, set the source property to null.
Code examples
Set the source property.
- Binding to Nested JSON. In order to use a nested JSON as a data source, you will have to do the following:
1. Add the sub-collection to the "dataFields" array and set its "type" to "array".
2. Add a "hierarchy" object as a member of the "source" object.
3. Add a member called "root" to the "hierarchy" object.
4. Set the "root" to the sub-collection name.
var employees = [
{
"EmployeeID": 2, "FirstName": "Andrew", "LastName": "Fuller", "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", "expanded": "true",
children: [
{ "EmployeeID": 8, "FirstName": "Laura", "LastName": "Callahan", "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": 1, "FirstName": "Nancy", "LastName": "Davolio", "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": 3, "FirstName": "Janet", "LastName": "Leverling", "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", "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", "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", "expanded": "true",
children: [
{ "EmployeeID": 6, "FirstName": "Michael", "LastName": "Suyama", "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", "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": 9, "FirstName": "Anne", "LastName": "Dodsworth", "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." }
]
}
]
}
];
// prepare the data
var source =
{
dataType: "json",
dataFields: [
{ name: 'EmployeeID', 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: 'children', type: 'array' },
{ name: 'expanded', type: 'bool' },
{ name: 'BirthDate', type: 'date' }
],
hierarchy:
{
root: 'children'
},
id: 'EmployeeID',
localData: employees
};
var dataAdapter = new $.jqx.dataAdapter(source);
// create Tree Grid
$("#treeGrid").jqxTreeGrid(
{
width: 600,
source: dataAdapter,
sortable: true,
columns: [
{ text: 'FirstName', dataField: 'FirstName', width: 150 },
{ text: 'LastName', dataField: 'LastName', width: 120 },
{ 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' }
]
});
- Binding to JSON. Items in the data source must contain information on the parent-child relationships. Using this information, the TreeGrid will create records and organize them into a hierarchical structure.
Information on parent-child relationships must be implemented in the data source by two data fields. One field must store the records' unique IDs. The other data field must contain the parent record's ID for each record. To specify these data fields for the jqxTreeGrid, use the "keyDataField" and "parentDataField" members of the "hierarchy" object.
1. Add a "hierarchy" object as a member of the "source" object.
2. Add a member called "keyDataField" and a member called "parentDataField" to the "hierarchy" object.
3. Set the "keyDataField" and "parentDataField" to point to the data fields in the data source that contain information about the parent-child relationships.
var employees =
[
{
"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."
}
];
// prepare the data
var source =
{
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: employees
};
var dataAdapter = new $.jqx.dataAdapter(source);
// create Tree Grid
$("#treeGrid").jqxTreeGrid(
{
width: 600,
source: dataAdapter,
sortable: true,
ready: function()
{
$("#treeGrid").jqxTreeGrid('expandRow', '2');
},
columns: [
{ text: 'FirstName', columnGroup: 'Name', dataField: 'FirstName', width: 150 },
{ text: 'LastName', columnGroup: 'Name', dataField: 'LastName', width: 120 },
{ 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' }
],
columnGroups: [
{ text: 'Name', name: 'Name' }
]
});
- Binding to XML. The approach is similar to binding to JSON with the only difference that the source object's "dataType" should be set to "xml" and you muse set the
source object's "root", "record" and "id" members. Items in the data source must contain information on the parent-child relationships. Using this information, the TreeGrid will create records and organize them into a hierarchical structure.
Information on parent-child relationships must be implemented in the data source by two data fields. One field must store the records' unique IDs. The other data field must contain the parent record's ID for each record. To specify these data fields for the jqxTreeGrid, use the "keyDataField" and "parentDataField" members of the "hierarchy" object.
1. Add a "hierarchy" object as a member of the "source" object.
2. Add a member called "keyDataField" and a member called "parentDataField" to the "hierarchy" object.
3. Set the "keyDataField" and "parentDataField" to point to the data fields in the data source that contain information about the parent-child relationships.
XML Data - employees.xml
<?xml version="1.0"?><Employees> <Employee EmployeeID="5"> <LastName>Buchanan </LastName> <FirstName>Steven </FirstName> <Title>Sales Manager </Title> <TitleOfCourtesy>Mr. </TitleOfCourtesy> <BirthDate>1955-03-04 </BirthDate> <HireDate>1993-10-17 </HireDate> <Address>14 Garrett Hill </Address> <City>London </City> <Region/> <PostalCode>SW1 8JR </PostalCode> <Extension>3453 </Extension> <ReportsTo>2 </ReportsTo> </Employee> <Employee EmployeeID="8"> <LastName>Callahan </LastName> <FirstName>Laura </FirstName> <Title>Inside Sales Coordinator </Title> <TitleOfCourtesy>Ms. </TitleOfCourtesy> <BirthDate>1958-01-09 </BirthDate> <HireDate>1994-03-05 </HireDate> <Address>4726 - 11th Ave. N.E. </Address> <City>Seattle </City> <Region>WA </Region> <PostalCode>98105 </PostalCode> <Extension>2344 </Extension> <ReportsTo>2 </ReportsTo> </Employee> <Employee EmployeeID="1"> <LastName>Davolio </LastName> <FirstName>Nancy </FirstName> <Title>Sales Representative </Title> <TitleOfCourtesy>Ms. </TitleOfCourtesy> <BirthDate>1948-12-08 </BirthDate> <HireDate>1992-05-01 </HireDate> <Address> 507 - 20th Ave. E. Apt. 2A </Address> <City>Seattle </City> <Region>WA </Region> <PostalCode>98122 </PostalCode> <Extension>5467 </Extension> <ReportsTo>2 </ReportsTo> </Employee> <Employee EmployeeID="9"> <LastName>Dodsworth </LastName> <FirstName>Anne </FirstName> <Title>Sales Representative </Title> <TitleOfCourtesy>Ms. </TitleOfCourtesy> <BirthDate>1966-01-27 </BirthDate> <HireDate>1994-11-15 </HireDate> <Address>7 Houndstooth Rd. </Address> <City>London </City> <Region/> <PostalCode>WG2 7LT </PostalCode> <Extension>452 </Extension> <ReportsTo>5 </ReportsTo> </Employee> <Employee EmployeeID="2"> <LastName>Fuller </LastName> <FirstName>Andrew </FirstName> <Title>Vice President, Sales </Title> <TitleOfCourtesy>Dr. </TitleOfCourtesy> <BirthDate>1952-02-19 </BirthDate> <HireDate>1992-08-14 </HireDate> <Address>908 W. Capital Way </Address> <City>Tacoma </City> <Region>WA </Region> <PostalCode>98401 </PostalCode> <Extension>3457 </Extension> <ReportsTo>0 </ReportsTo> </Employee> <Employee EmployeeID="7"> <LastName>King </LastName> <FirstName>Robert </FirstName> <Title>Sales Representative </Title> <TitleOfCourtesy>Mr. </TitleOfCourtesy> <BirthDate>1960-05-29 </BirthDate> <HireDate>1994-01-02 </HireDate> <Address> Edgeham Hollow Winchester Way </Address> <City>London </City> <Region/> <PostalCode>RG1 9SP </PostalCode> <Extension>465 </Extension> <ReportsTo>5 </ReportsTo> </Employee> <Employee EmployeeID="3"> <LastName>Leverling </LastName> <FirstName>Janet </FirstName> <Title>Sales Representative </Title> <TitleOfCourtesy>Ms. </TitleOfCourtesy> <BirthDate>1963-08-30 </BirthDate> <HireDate>1992-04-01 </HireDate> <Address>722 Moss Bay Blvd. </Address> <City>Kirkland </City> <Region>WA </Region> <PostalCode>98033 </PostalCode> <Extension>3355 </Extension> <ReportsTo>2 </ReportsTo> </Employee> <Employee EmployeeID="4"> <LastName>Peacock </LastName> <FirstName>Margaret </FirstName> <Title>Sales Representative </Title> <TitleOfCourtesy>Mrs. </TitleOfCourtesy> <BirthDate>1937-09-19 </BirthDate> <HireDate>1993-05-03 </HireDate> <Address>4110 Old Redmond Rd. </Address> <City>Redmond </City> <Region>WA </Region> <PostalCode>98052 </PostalCode> <Extension>5176 </Extension> <ReportsTo>2 </ReportsTo> </Employee> <Employee EmployeeID="6"> <LastName>Suyama </LastName> <FirstName>Michael </FirstName> <Title>Sales Representative </Title> <TitleOfCourtesy>Mr. </TitleOfCourtesy> <BirthDate>1963-07-02 </BirthDate> <HireDate>1993-10-17 </HireDate> <Address> Coventry House Miner Rd. </Address> <City>London </City> <Region/> <PostalCode>EC2 7JR </PostalCode> <Extension>428 </Extension>
var source =
{
dataType: "xml",
dataFields: [
{ name: 'EmployeeID', type: 'number' },
{ name: 'ReportsTo', type: 'number' },
{ name: 'FirstName', type: 'string' },
{ name: 'LastName', 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',
root: 'Employees',
record: 'Employee',
url: "employees.xml"
};
var dataAdapter = new $.jqx.dataAdapter(source);
// create Tree Grid
$("#treeGrid").jqxTreeGrid(
{
width: 680,
source: dataAdapter,
pageable: true,
columnsResize: true,
ready: function()
{
// expand row with 'EmployeeKey = 2'
$("#treeGrid").jqxTreeGrid('expandRow', 2);
},
columns: [
{ text: 'FirstName', dataField: 'FirstName', minWidth: 100, width: 150 },
{ text: 'LastName', dataField: 'LastName', width: 150 },
{ text: 'Title', dataField: 'Title', width: 300 },
{ text: 'Address', dataField: 'Address', width: 200 },
{ text: 'City', dataField: 'City', width: 150 },
{ text: 'Birth Date', dataField: 'BirthDate', cellsFormat: 'd', width: 120 },
{ text: 'Hire Date', dataField: 'HireDate', cellsFormat: 'd', width: 120 }
]
});
- Binding to Nested XML. In order to use a nested XML as a data source, you will have to do the following:
1. Set the "root", "record" and "id" members of the source object. For more information about these members, visit: jquery-data-adapter.htm.
2. Add a "hierarchy" object as a member of the "source" object.
3. Add "root" and "record" members to the "hierarchy" object to specify the nested sequence.
XML Data - employees.xml
<?xml version="1.0"?><Employees> <Employee EmployeeID="2"> <LastName>Fuller </LastName> <FirstName>Andrew </FirstName> <Title>Vice President, Sales </Title> <TitleOfCourtesy>Dr. </TitleOfCourtesy> <BirthDate>1952-02-19 </BirthDate> <HireDate>1992-08-14 </HireDate> <Address>908 W. Capital Way </Address> <City>Tacoma </City> <Region>WA </Region> <PostalCode>98401 </PostalCode> <Extension>3457 </Extension> <Notes>Andrew received his BTS commercial in 1974 and a Ph.D. in international marketing from the University of Dallas in 1981. He is fluent in French and Italian and reads German. He joined the company as a sales representative, was promoted to sales manager in January 1992 and to vice president of sales in March 1993. Andrew is a member of the Sales Management Roundtable, the Seattle Chamber of Commerce, and the Pacific Rim Importers Association. </Notes> <Employees> <Employee EmployeeID="8"> <LastName>Callahan </LastName> <FirstName>Laura </FirstName> <Title>Inside Sales Coordinator </Title> <TitleOfCourtesy>Ms. </TitleOfCourtesy> <BirthDate>1958-01-09 </BirthDate> <HireDate>1994-03-05 </HireDate> <Address>4726 - 11th Ave. N.E. </Address> <City>Seattle </City> <Region>WA </Region> <PostalCode>98105 </PostalCode> <Extension>2344 </Extension> <Notes>Laura received a BA in psychology from the University of Washington. She has also completed a course in business French. She reads and writes French. </Notes> </Employee> <Employee EmployeeID="1"> <LastName>Davolio </LastName> <FirstName>Nancy </FirstName> <Title>Sales Representative </Title> <TitleOfCourtesy>Ms. </TitleOfCourtesy> <BirthDate>1948-12-08 </BirthDate> <HireDate>1992-05-01 </HireDate> <Address> 507 - 20th Ave. E. Apt. 2A </Address> <City>Seattle </City> <Region>WA </Region> <PostalCode>98122 </PostalCode> <Extension>5467 </Extension> <Notes>Education includes a BA in psychology from Colorado State University in 1970. She also completed "The Art of the Cold Call." Nancy is a member of Toastmasters International. </Notes> </Employee> <Employee EmployeeID="5"> <LastName>Buchanan </LastName> <FirstName>Steven </FirstName> <Title>Sales Manager </Title> <TitleOfCourtesy>Mr. </TitleOfCourtesy> <BirthDate>1955-03-04 </BirthDate> <HireDate>1993-10-17 </HireDate> <Address>14 Garrett Hill </Address> <City>London </City> <Region/> <PostalCode>SW1 8JR </PostalCode> <Extension>3453 </Extension> <Notes>Steven Buchanan graduated from St. Andrews University, Scotland, with a BSC degree in 1976. Upon joining the company as a sales representative in 1992, he spent 6 months in an orientation program at the Seattle office and then returned to his permanent post in London. He was promoted to sales manager in March 1993. Mr. Buchanan has completed the courses "Successful Telemarketing" and "International Sales Management." He is fluent in French. </Notes> <Employees> <Employee EmployeeID="9"> <LastName>Dodsworth </LastName> <FirstName>Anne </FirstName> <Title>Sales Representative </Title> <TitleOfCourtesy>Ms. </TitleOfCourtesy> <BirthDate>1966-01-27 </BirthDate> <HireDate>1994-11-15 </HireDate> <Address>7 Houndstooth Rd. </Address> <City>London </City> <Region/> <PostalCode>WG2 7LT </PostalCode> <Extension>452 </Extension> <Notes>Anne has a BA degree in English from St. Lawrence College. She is fluent in French and German. </Notes> </Employee> <Employee EmployeeID="7"> <LastName>King </LastName> <FirstName>Robert </FirstName> <Title>Sales Representative </Title> <TitleOfCourtesy>Mr. </TitleOfCourtesy> <BirthDate>1960-05-29 </BirthDate> <HireDate>1994-01-02 </HireDate> <Address> Edgeham Hollow Winchester Way </Address> <City>London </City> <Region/> <PostalCode>RG1 9SP </PostalCode> <Extension>465 </Extension> <Notes>Robert King served in the Peace Corps and traveled extensively before completing his degree in English at the University of Michigan in 1992, the year he joined the company. After completing a course entitled "Selling in Europe," he was transferred to the London office in March 1993. </Notes> </Employee> <Employee EmployeeID="6"> <LastName>Suyama </LastName> <FirstName>Michael </FirstName> <Title>Sales Representative </Title> <TitleOfCourtesy>Mr. </TitleOfCourtesy> <BirthDate>1963-07-02 </BirthDate> <HireDate>1993-10-17 </HireDate> <Address> Coventry House Miner Rd. </Address> <City>London </City> <Region/> <PostalCode>EC2 7JR </PostalCode> <Extension>428 </Extension> <Notes>Michael is a graduate of Sussex University (MA, economics, 1983) and the University of California at Los Angeles (MBA, marketing, 1986). He has also taken the courses "Multi-Cultural Selling" and "Time Management for the Sales Professional." He is fluent in Japanese and can read and write French, Portuguese, and Spanish. </Notes> </Employee> </Employees> </Employee> <Employee EmployeeID="3"> <LastName>Leverling </LastName> <FirstName>Janet </FirstName> <Title>Sales Representative </Title> <TitleOfCourtesy>Ms. </TitleOfCourtesy> <BirthDate>1963-08-30 </BirthDate> <HireDate>1992-04-01 </HireDate> <Address>722 Moss Bay Blvd. </Address> <City>Kirkland </City> <Region>WA </Region> <PostalCode>98033 </PostalCode> <Extension>3355 </Extension> <Notes>Janet has a BS degree in chemistry from Boston College (1984). She has also completed a certificate program in food retailing management. Janet was hired as a sales associate in 1991 and promoted to sales representative in February 1992. </Notes> </Employee> <Employee EmployeeID="4"> <LastName>Peacock </LastName> <FirstName>Margaret </FirstName> <Title>Sales Representative </Title> <TitleOfCourtesy>Mrs. </TitleOfCourtesy> <BirthDate>1937-09-19 </BirthDate> <HireDate>1993-05-03 </HireDate> <Address>4110 Old Redmond Rd. </Address> <City>Redmond </City> <Region>WA </Region> <PostalCode>98052 </PostalCode> <Extension>5176 </Extension> <Notes>Margaret holds a BA in English literature from Concordia College (1958) and an MA from the American Institute of Culinary Arts (1966). She was assigned to the London office temporarily from July through November 1992. </Notes>
var source =
{
dataType: "xml",
dataFields: [
{ name: 'EmployeeID', type: 'number' },
{ name: 'ReportsTo', type: 'number' },
{ name: 'FirstName', type: 'string' },
{ name: 'LastName', type: 'string' },
{ name: 'City', type: 'string' },
{ name: 'Address', type: 'string' },
{ name: 'Title', type: 'string' },
{ name: 'HireDate', type: 'date' },
{ name: 'BirthDate', type: 'date' }
],
hierarchy:
{
// defines the root and record of each hiearchy level.
root: 'Employees',
record: 'Employee'
},
id: 'EmployeeID',
root: 'Employees',
record: 'Employee',
url: "employees.xml"
};
var dataAdapter = new $.jqx.dataAdapter(source);
// create Tree Grid
$("#treeGrid").jqxTreeGrid(
{
width: 680,
source: dataAdapter,
columnsResize: true,
ready: function () {
// expand row with 'EmployeeKey = 2'
$("#treeGrid").jqxTreeGrid('expandRow', 2);
},
columns: [
{ text: 'FirstName', dataField: 'FirstName', minWidth: 100, width: 150 },
{ text: 'LastName', dataField: 'LastName', width: 150 },
{ text: 'Title', dataField: 'Title', width: 300 },
{ text: 'Address', dataField: 'Address', width: 200 },
{ text: 'City', dataField: 'City', width: 150 },
{ text: 'Birth Date', dataField: 'BirthDate', cellsFormat: 'd', width: 120 },
{ text: 'Hire Date', dataField: 'HireDate', cellsFormat: 'd', width: 120 }
]
});
- Binding to CSV/TSV. The source object's "dataType" should be set to "csv" or "tab". Items in the data source must contain information on the parent-child relationships. Using this information, the TreeGrid will create records and organize them into a hierarchical structure.
Information on parent-child relationships must be implemented in the data source by two data fields. One field must store the records' unique IDs. The other data field must contain the parent record's ID for each record. To specify these data fields for the jqxTreeGrid, use the "keyDataField" and "parentDataField" members of the "hierarchy" object.
1. Add a "hierarchy" object as a member of the "source" object.
2. Add a member called "keyDataField" and a member called "parentDataField" to the "hierarchy" object.
3. Set the "keyDataField" and "parentDataField" to point to the data fields in the data source that contain information about the parent-child relationships.
Tab Data - locations.tsv
1 Aruba 37 1030002 Afghanistan 35 22720000 3 Angola 36 12878000 4 Anguilla 37 8000 5 Albania 34 3401200 6 Andorra 34 78000 7 Netherlands Antilles 37 217000 8 United Arab Emirates 35 2441000 9 Argentina 38 37032000 10 Armenia 35 3520000 11 Antigua and Barbuda 37 68000 12 Austria 34 8091800 13 Azerbaijan 35 7734000 14 Burundi 36 6695000 15 Belgium 34 10239000 16 Benin 36 6097000 17 Spain 34 39441700 18 Estonia 34 1439200 19 Ethiopia 36 62565000 20 Finland 34 5171300 22 Falkland Islands 38 2000 23 France 34 59225700 24 Faroe Islands 34 43000 26 Gabon 36 1226000 27 United Kingdom 34 59623400 28 Georgia 35 4968000 29 Ghana 36 20212000 30 Gibraltar 34 25000 31 Guinea 36 7430000 32 Guadeloupe 37 456000 33 Gambia 36 1305000 34 Europe null 731000000.00 35 Asia null 3879000000.00 36 Africa null 922011000.00 37 North America null 528720588.00 21 Australia null 23300000 25 Antarctica null 1323 38 South America null 382000000.00 39 Lithuania 34 3698500 40 Luxembourg 34 435700 41 Latvia 34 2424200 42 Monaco 34 34000 43 Moldova 34 4380000 44 Mexico 37 98881000 45 Macao 35 473000 46 Morocco 36 28351000 47 Madagascar 36 15942000 48 Maldives 35 286000 49 United States 37 278357000 50 South Korea 35 46844000 51 India 35 1013662000 52 Canada 37 31147000 53 Brazil 38 170115000 54 Russian Federation 34 146934000
// prepare the data
var source =
{
dataType: "tab",
dataFields: [
{ name: "Id", type: "number" },
{ name: "Name", type: "string" },
{ name: "ParentID", type: "number" },
{ name: "Population", type: "number" }
],
hierarchy:
{
keyDataField: { name: 'Id' },
parentDataField: { name: 'ParentID' }
},
id: 'Id',
url: 'locations.tsv'
};
var dataAdapter = new $.jqx.dataAdapter(source);
// create Tree Grid
$("#treeGrid").jqxTreeGrid(
{
width: 500,
height: 400,
source: dataAdapter,
ready: function()
{
$("#treeGrid").jqxTreeGrid('expandRow', '34');
},
columns:
[
{ text: 'Location Name', dataField: "Name", align: 'center', width: '50%' },
{ text: 'Population', dataField: "Population", align: 'center', width: '50%'}
]
});
- Virtual Mode(Load on Demand) - you can load data into jqxTreeGrid dynamically, by using callback functions. For each record only when required, jqxTreeGrid calls
virtualModeCreateRecords function and this allows you to provide records on demand. During the initialization of each record, jqxTreeGrid calls virtualModeRecordCreating which allows you to update some record settings.
var generateTasks = function (rowsCount) {
var rowsCount = !rowsCount ? 1 + Math.floor(Math.random() * 5) : rowsCount;
var data = new Array();
var generatekey = function () {
var S4 = function () {
return (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1);
};
return (S4() + S4() + "-" + S4() + "-" + S4() + "-" + S4() + "-" + S4() + S4() + S4());
};
for (var i = 0; i < rowsCount; i++) {
var row = {};
var tasks = ["Shopping", "Housewares", "Kitchen supplies", "Groceries", "Cleaning supplies", "Office supplies", "Remodeling", "Paint bedroom", "Paint wall", "Fitness", "Decorate living room",
"Fix lights", "Fix front door", "Clean kitchen"];
var firstNames =
[
"Andrew", "Nancy", "Shelley", "Regina", "Yoshi", "Antoni", "Mayumi", "Ian", "Peter", "Lars", "Petra", "Martin", "Sven", "Elio", "Beate", "Cheryl", "Michael", "Guylene"
];
var lastNames =
[
"Fuller", "Davolio", "Burke", "Murphy", "Nagase", "Saavedra", "Ohno", "Devling", "Wilson", "Peterson", "Winkler", "Bein", "Petersen", "Rossi", "Vileid", "Saylor", "Bjorn", "Nodier"
];
row["id"] = generatekey();
row["firstname"] = firstNames[Math.floor(Math.random() * firstNames.length)];
row["lastname"] = lastNames[Math.floor(Math.random() * lastNames.length)];
row["name"] = row["firstname"] + " " + row["lastname"];
var taskindex = Math.floor(Math.random() * tasks.length);
row["task"] = tasks[taskindex];
row["duration"] = 1+Math.floor(Math.random() * 10);
data.push(row);
}
return data;
}
// create Tree Grid
$("#treeGrid").jqxTreeGrid(
{
width: 600,
pageable: true,
altRows: true,
virtualModeCreateRecords: function(expandedRecord, done)
{
// expandedRecord is equal to null when the function is initially called, because there is still no record to be expanded.
// prepare the data
var source =
{
dataType: "array",
dataFields: [
{ name: "id", type: "string" },
{ name: "name", type: "string" },
{ name: "duration", type: "number" },
{ name: "task", type: "number" }
],
localData: expandedRecord === null ? generateTasks(3000) : generateTasks(),
id: 'id'
}
var dataAdapter = new $.jqx.dataAdapter(source, {
loadComplete: function () {
done(dataAdapter.records);
}
});
dataAdapter.dataBind();
},
virtualModeRecordCreating: function(record)
{
if (record.level == 2) {
// by setting the record's leaf member to true, you will define the record as a leaf node.
record.leaf = true;
}
},
columns: [
{ text: 'Task', dataField: "task", align: 'center', width: 250 },
{ text: 'Person Name', dataField: "name", cellsAlign: 'center', align: 'center', width: 200 },
{
text: 'Duration', dataField: "duration", cellsAlign: 'center', align: 'center', cellsRenderer: function (row, column, value) {
var hour = value > 1 ? " hours" : " hour";
return value + hour;
}
}
]
});
|
sortable
|
Boolean
|
false
|
Enables/Disables the sorting feature.
Code examples
Set the sortable property.
$('#treeGrid').jqxTreeGrid({sortable: true});
Get the sortable property.
var sortable = $('#treeGrid').jqxTreeGrid('sortable');
|
showAggregates
|
Boolean
|
false
|
Determines whether the jqxTreeGrid's Aggregates bar is visible.
Code examples
Set the showAggregates property.
$('#treeGrid').jqxTreeGrid({showAggregates: true});
Apply aggregates.
var data = [ { "id": "1", "name": "Corporate Headquarters", "budget": "1230000", "location": "Las Vegas", "children": [ { "id": "2", "name": "Finance Division", "budget": "423000", "location": "San Antonio", "children": [ { "id": "4", "name": "Investment Department", "budget": "310000", "location": "San Antonio", children: [ { "id": "5", "name": "Banking Office", "budget": "240000", "location": "San Antonio" }, { "id": "6", "name": "Bonds Office", "budget": "70000", "location": "San Antonio" }, ] }, { "id": "3", "name": "Accounting Department", "budget": "113000", "location": "San Antonio" } ] }, { "id": "7", "name": "Operations Division", "budget": "600000", "location": "Miami", "children": [ { "id": "8", "name": "Manufacturing Department", "budget": "300000", "location": "Miami" }, { "id": "9", "name": "Public Relations Department", "budget": "200000", "location": "Miami" }, { "id": "10", "name": "Sales Department", "budget": "100000", "location": "Miami" } ] }, { "id": "11", "name": "Research Division", "budget": "200000", "location": "Boston" } ] } ]; var source = { dataType: "json", dataFields: [ { name: "name", type: "string" }, { name: "budget", type: "number" }, { name: "id", type: "number" }, { name: "children", type: "array" }, { name: "location", type: "string" } ], hierarchy: { root: "children" }, localData: data, id: "id" }; var dataAdapter = new $.jqx.dataAdapter(source, { loadComplete: function () { } }); // create jqxTreeGrid. $( "#treeGrid").jqxTreeGrid( { source: dataAdapter, altRows: true, width: 680, showSubAggregates: true, columnsResize: true, ready: function () { $( "#treeGrid").jqxTreeGrid( 'expandRow', '1'); $( "#treeGrid").jqxTreeGrid( 'expandRow', '2'); }, columns: [ { text: "Name", align: "center", dataField: "name", width: 270 }, { text: "Location", dataField: "location", cellsAlign: "center", align: "center", width: 200 }, { text: "Budget", cellsAlign: "center", align: "center", dataField: "budget", cellsFormat: "c2", aggregates: [{ 'Total': function (aggregatedValue, currentValue, column, record) { return aggregatedValue + currentValue; } }], aggregatesRenderer: function (aggregatesText, column, element, aggregates, type) { if (type == "aggregates") { var renderString = "<div style='margin: 4px; float: right; height: 100%;'>"; } else { var renderString = "<div style='float: right; height: 100%;'>"; } var euro = dataAdapter.formatNumber(0.74 * aggregates.Total, "f2");; var usd = dataAdapter.formatNumber(aggregates.Total, "f2");; renderString += "<table><tr><td rowspan='2'><strong>Total: </strong></td><td>" + usd + " USD</td><tr><td>" + euro + " EUR</td></tr></table>";
Get the showAggregates property.
var showAggregates = $('#treeGrid').jqxTreeGrid('showAggregates');
|
showSubAggregates
|
Boolean
|
false
|
Determines whether jqxTreeGrid would calculate summary values for all values within
a group of records and would display the result inside footer cell after each group.
Code examples
Set the showSubAggregates property.
$('#treeGrid').jqxTreeGrid({showSubAggregates: true});
Apply aggregates.
var data = [ { "id": "1", "name": "Corporate Headquarters", "budget": "1230000", "location": "Las Vegas", "children": [ { "id": "2", "name": "Finance Division", "budget": "423000", "location": "San Antonio", "children": [ { "id": "4", "name": "Investment Department", "budget": "310000", "location": "San Antonio", children: [ { "id": "5", "name": "Banking Office", "budget": "240000", "location": "San Antonio" }, { "id": "6", "name": "Bonds Office", "budget": "70000", "location": "San Antonio" }, ] }, { "id": "3", "name": "Accounting Department", "budget": "113000", "location": "San Antonio" } ] }, { "id": "7", "name": "Operations Division", "budget": "600000", "location": "Miami", "children": [ { "id": "8", "name": "Manufacturing Department", "budget": "300000", "location": "Miami" }, { "id": "9", "name": "Public Relations Department", "budget": "200000", "location": "Miami" }, { "id": "10", "name": "Sales Department", "budget": "100000", "location": "Miami" } ] }, { "id": "11", "name": "Research Division", "budget": "200000", "location": "Boston" } ] } ]; var source = { dataType: "json", dataFields: [ { name: "name", type: "string" }, { name: "budget", type: "number" }, { name: "id", type: "number" }, { name: "children", type: "array" }, { name: "location", type: "string" } ], hierarchy: { root: "children" }, localData: data, id: "id" }; var dataAdapter = new $.jqx.dataAdapter(source, { loadComplete: function () { } }); // create jqxTreeGrid. $( "#treeGrid").jqxTreeGrid( { source: dataAdapter, altRows: true, width: 680, showSubAggregates: true, columnsResize: true, ready: function () { $( "#treeGrid").jqxTreeGrid( 'expandRow', '1'); $( "#treeGrid").jqxTreeGrid( 'expandRow', '2'); }, columns: [ { text: "Name", align: "center", dataField: "name", width: 270 }, { text: "Location", dataField: "location", cellsAlign: "center", align: "center", width: 200 }, { text: "Budget", cellsAlign: "center", align: "center", dataField: "budget", cellsFormat: "c2", aggregates: [{ 'Total': function (aggregatedValue, currentValue, column, record) { return aggregatedValue + currentValue; } }], aggregatesRenderer: function (aggregatesText, column, element, aggregates, type) { if (type == "aggregates") { var renderString = "<div style='margin: 4px; float: right; height: 100%;'>"; } else { var renderString = "<div style='float: right; height: 100%;'>"; } var euro = dataAdapter.formatNumber(0.74 * aggregates.Total, "f2");; var usd = dataAdapter.formatNumber(aggregates.Total, "f2");; renderString += "<table><tr><td rowspan='2'><strong>Total: </strong></td><td>" + usd + " USD</td><tr><td>" + euro + " EUR</td></tr></table>";
Get the showSubAggregates property.
var showSubAggregates = $('#treeGrid').jqxTreeGrid('showSubAggregates');
|
showToolbar
|
Boolean
|
false
|
Determines whether the jqxTreeGrid's Toolbar is visible.
Code examples
Set the showToolbar property.
$('#treeGrid').jqxTreeGrid({showToolbar: true});
Get the showToolbar property.
var showToolbar = $('#treeGrid').jqxTreeGrid('showToolbar');
|
showStatusbar
|
Boolean
|
false
|
Determines whether the jqxTreeGrid's Statusbar is visible.
Code examples
Set the showStatusbar property.
$('#treeGrid').jqxTreeGrid({showStatusbar: true});
Get the showStatusbar property.
var showStatusbar = $('#treeGrid').jqxTreeGrid('showStatusbar');
|
statusBarHeight
|
Number
|
34
|
Sets or gets the height of the Statusbar. Statusbar is displayed after setting showStatusbar to true.
Code examples
Set the statusBarHeight property.
$('#treeGrid').jqxTreeGrid({statusBarHeight: 40});
Get the statusBarHeight property.
var statusBarHeight = $('#treeGrid').jqxTreeGrid('statusBarHeight');
|
scrollBarSize
|
Number
|
17
|
Sets or gets the size of the scrollbars.
Code examples
Set the scrollBarSize property.
$('#treeGrid').jqxTreeGrid({scrollBarSize: 15});
Get the scrollBarSize property.
var scrollBarSize = $('#treeGrid').jqxTreeGrid('scrollBarSize');
|
selectionMode
|
String
|
"multipleRows"
|
Sets or gets the selection mode. Possible values: "multipleRows" , "singleRow" and "custom" . In the "custom" mode, rows could be selected/unselected only through the API.
Code examples
Set the selectionMode property.
$('#treeGrid').jqxTreeGrid({selectionMode: "singleRow" });
Get the enableBrowserSelection property.
var selectionMode = $('#treeGrid').jqxTreeGrid('selectionMode');
|
showHeader
|
Boolean
|
true
|
Sets or gets the jqxTreeGrid's columns visibility.
Code examples
Set the showHeader property.
$('#treeGrid').jqxTreeGrid({showHeader: false});
Get the showHeader property.
var showHeader = $('#treeGrid').jqxTreeGrid('showHeader');
|
theme
|
String
|
''
|
Sets the widget's theme.
jQWidgets uses a pair of css files - jqx.base.css and jqx.[theme name].css. The base stylesheet creates the styles related to the widget's layout like margin, padding, border-width, position. The second css file applies the widget's colors and backgrounds. The jqx.base.css should be included before the second CSS file.
In order to set a theme, you need to do the following:
|
toolbarHeight
|
Number
|
34
|
Sets or gets the height of the Toolbar. Toolbar is displayed after setting showToolbar to true.
Code examples
Set the toolbarHeight property.
$('#treeGrid').jqxTreeGrid({toolbarHeight: 40});
Get the toolbarHeight property.
var toolbarHeight = $('#treeGrid').jqxTreeGrid('toolbarHeight');
|
width
|
Number/String
|
null
|
Sets or gets the jqxTreeGrid's width.
Code examples
Set the width property.
$('#treeGrid').jqxTreeGrid({width:"200px"});
Get the width property.
var width = $('#treeGrid').jqxTreeGrid('width');
|
virtualModeCreateRecords
|
Function
|
null
|
By defining that function you can load data into jqxTreeGrid dynamically. For each record only when required, jqxTreeGrid calls virtualModeCreateRecords function and this allows you to provide records on demand. In order to enable the load on demand feature, you should also define the virtualModeRecordCreating function.
List of parameters:
- Row Key/ID - unique ID. If null is passed, that the function's result would be the records of the first hierarchy level.
- Done - callback function. Call it when data is loaded and pass the loaded data as an Array.
Code examples
Set the virtualModeCreateRecords property.
var generateTasks = function (rowsCount) {
var rowsCount = !rowsCount ? 1 + Math.floor(Math.random() * 5) : rowsCount;
var data = new Array();
var generatekey = function () {
var S4 = function () {
return (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1);
};
return (S4() + S4() + "-" + S4() + "-" + S4() + "-" + S4() + "-" + S4() + S4() + S4());
};
for (var i = 0; i < rowsCount; i++) {
var row = {};
var tasks = ["Shopping", "Housewares", "Kitchen supplies", "Groceries", "Cleaning supplies", "Office supplies", "Remodeling", "Paint bedroom", "Paint wall", "Fitness", "Decorate living room",
"Fix lights", "Fix front door", "Clean kitchen"];
var firstNames =
[
"Andrew", "Nancy", "Shelley", "Regina", "Yoshi", "Antoni", "Mayumi", "Ian", "Peter", "Lars", "Petra", "Martin", "Sven", "Elio", "Beate", "Cheryl", "Michael", "Guylene"
];
var lastNames =
[
"Fuller", "Davolio", "Burke", "Murphy", "Nagase", "Saavedra", "Ohno", "Devling", "Wilson", "Peterson", "Winkler", "Bein", "Petersen", "Rossi", "Vileid", "Saylor", "Bjorn", "Nodier"
];
row["id"] = generatekey();
row["firstname"] = firstNames[Math.floor(Math.random() * firstNames.length)];
row["lastname"] = lastNames[Math.floor(Math.random() * lastNames.length)];
row["name"] = row["firstname"] + " " + row["lastname"];
var taskindex = Math.floor(Math.random() * tasks.length);
row["task"] = tasks[taskindex];
row["duration"] = 1+Math.floor(Math.random() * 10);
data.push(row);
}
return data;
}
// create Tree Grid
$("#treeGrid").jqxTreeGrid(
{
width: 600,
pageable: true,
altRows: true,
virtualModeCreateRecords: function(expandedRecord, done)
{
// expandedRecord is equal to null when the function is initially called, because there is still no record to be expanded.
// prepare the data
var source =
{
dataType: "array",
dataFields: [
{ name: "id", type: "string" },
{ name: "name", type: "string" },
{ name: "duration", type: "number" },
{ name: "task", type: "number" }
],
localData: expandedRecord === null ? generateTasks(3000) : generateTasks(),
id: 'id'
}
var dataAdapter = new $.jqx.dataAdapter(source, {
loadComplete: function () {
done(dataAdapter.records);
}
});
dataAdapter.dataBind();
},
virtualModeRecordCreating: function(record)
{
if (record.level == 2) {
// by setting the record's leaf member to true, you will define the record as a leaf node.
record.leaf = true;
}
},
columns: [
{ text: 'Task', dataField: "task", align: 'center', width: 250 },
{ text: 'Person Name', dataField: "name", cellsAlign: 'center', align: 'center', width: 200 },
{
text: 'Duration', aggregates: ['sum'], dataField: "duration", cellsAlign: 'center', align: 'center', cellsRenderer: function (row, column, value) {
var hour = value > 1 ? " hours" : " hour";
return value + hour;
}
}
]
});
|
virtualModeRecordCreating
|
Function
|
null
|
By defining that function you can initialize the dynamic data that you load into jqxTreeGrid. In order to enable the load on demand feature, you should also define virtualModeCreateRecords function.
List of parameters:
- Row - Object with the following reserved members:
- checked - Boolean value. Determines the row's checked state.
- expanded - Boolean value. Determines the row's expanded state.
- icon - String value. Determines the row's icon url.
- leaf - Boolean value. Determines whether the row is a leaf in the hierarchy. When you set
leaf to true, the expand/collapse button would not be displayed.
- level - Integer value. Returns the row's hierarchy level.
- selected - Boolean value. Determines the row's selected state.
Code examples
Set the virtualModeRecordCreating property.
var generateTasks = function (rowsCount) {
var rowsCount = !rowsCount ? 1 + Math.floor(Math.random() * 5) : rowsCount;
var data = new Array();
var generatekey = function () {
var S4 = function () {
return (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1);
};
return (S4() + S4() + "-" + S4() + "-" + S4() + "-" + S4() + "-" + S4() + S4() + S4());
};
for (var i = 0; i < rowsCount; i++) {
var row = {};
var tasks = ["Shopping", "Housewares", "Kitchen supplies", "Groceries", "Cleaning supplies", "Office supplies", "Remodeling", "Paint bedroom", "Paint wall", "Fitness", "Decorate living room",
"Fix lights", "Fix front door", "Clean kitchen"];
var firstNames =
[
"Andrew", "Nancy", "Shelley", "Regina", "Yoshi", "Antoni", "Mayumi", "Ian", "Peter", "Lars", "Petra", "Martin", "Sven", "Elio", "Beate", "Cheryl", "Michael", "Guylene"
];
var lastNames =
[
"Fuller", "Davolio", "Burke", "Murphy", "Nagase", "Saavedra", "Ohno", "Devling", "Wilson", "Peterson", "Winkler", "Bein", "Petersen", "Rossi", "Vileid", "Saylor", "Bjorn", "Nodier"
];
row["id"] = generatekey();
row["firstname"] = firstNames[Math.floor(Math.random() * firstNames.length)];
row["lastname"] = lastNames[Math.floor(Math.random() * lastNames.length)];
row["name"] = row["firstname"] + " " + row["lastname"];
var taskindex = Math.floor(Math.random() * tasks.length);
row["task"] = tasks[taskindex];
row["duration"] = 1+Math.floor(Math.random() * 10);
data.push(row);
}
return data;
}
// create Tree Grid
$("#treeGrid").jqxTreeGrid(
{
width: 600,
pageable: true,
altRows: true,
virtualModeCreateRecords: function(expandedRecord, done)
{
// expandedRecord is equal to null when the function is initially called, because there is still no record to be expanded.
// prepare the data
var source =
{
dataType: "array",
dataFields: [
{ name: "id", type: "string" },
{ name: "name", type: "string" },
{ name: "duration", type: "number" },
{ name: "task", type: "number" }
],
localData: expandedRecord === null ? generateTasks(3000) : generateTasks(),
id: 'id'
}
var dataAdapter = new $.jqx.dataAdapter(source, {
loadComplete: function () {
done(dataAdapter.records);
}
});
dataAdapter.dataBind();
},
virtualModeRecordCreating: function(record)
{
if (record.level == 2) {
// by setting the record's leaf member to true, you will define the record as a leaf node.
record.leaf = true;
}
},
columns: [
{ text: 'Task', dataField: "task", align: 'center', width: 250 },
{ text: 'Person Name', dataField: "name", cellsAlign: 'center', align: 'center', width: 200 },
{
text: 'Duration', aggregates: ['sum'], dataField: "duration", cellsAlign: 'center', align: 'center', cellsRenderer: function (row, column, value) {
var hour = value > 1 ? " hours" : " hour";
return value + hour;
}
}
]
});
|
|
bindingComplete
|
Event
|
|
This event is triggered when the jqxTreeGrid binding is completed.
*Bind to that event before the jqxTreeGrid's initialization. Otherwise, if you are populating the widget from a local data source and bind to bindingComplete after the initialization, the event could be already raised when you attach an event handler to it.
Code examples
Bind to the bindingComplete event by type: jqxTreeGrid.
$('#treeGrid').on('bindingComplete', function (event) { // Some code here. });
|
cellBeginEdit
|
Event
|
|
This is triggered when a cell edit begins. Note: To turn on cell editing, you should set the editSettings property and make sure that its editSingleCell sub property is set to true .
Code examples
Bind to the cellBeginEdit event by type: jqxTreeGrid.
$('#treeGrid').on('cellBeginEdit',
function (event)
{
var args = event.args;
// row key
var rowKey = args.key;
// row's data.
var row = args.row;
// column's data field.
var columnDataField = args.dataField;
// column's display field.
var columnDisplayField = args.displayField;
// cell's value.
var value = args.value;
});
|
cellEndEdit
|
Event
|
|
This is triggered when a cell edit ends. Note: To turn on cell editing, you should set the editSettings property and make sure that its editSingleCell sub property is set to true .
Code examples
Bind to the cellEndEdit event by type: jqxTreeGrid.
$('#treeGrid').on('cellEndEdit',
function (event)
{
var args = event.args;
// row key
var rowKey = args.key;
// row's data.
var row = args.row;
// column's data field.
var columnDataField = args.dataField;
// column's display field.
var columnDisplayField = args.displayField;
// cell's value.
var value = args.value;
});
|
cellValueChanged
|
Event
|
|
This event is triggered when a cell value is changed.
Code examples
Bind to the cellValueChanged event by type: jqxTreeGrid.
$('#treeGrid').on('cellValueChanged',
function (event)
{
// event args.
var args = event.args;
// cell value.
var value = args.value;
// old cell value.
var oldValue = args.oldValue;
// row data.
var row = args.row;
// row key.
var rowKey args.key;
// column data field.
var dataField = args.dataField;
});
|
columnResized
|
Event
|
|
This event is triggered when a column is resized.
Code examples
Bind to the columnResized event by type: jqxTreeGrid.
$('#treeGrid').on('columnResized',
function (event)
{
// event args.
var args = event.args;
// column data field.
var dataField = args.dataField;
// old width.
var oldWidth = args.oldWidth;
// new width.
var newWidth = args.newWidth;
});
|
columnReordered
|
Event
|
|
This event is triggered when the column's order is changed.
Code examples
Bind to the columnReordered event by type: jqxTreeGrid.
$('#treeGrid').on('columnReordered',
function (event)
{
// event args.
var args = event.args;
// column data field.
var dataField = args.dataField;
// old index.
var oldIndex = args.oldIndex;
// new index.
var newIndex = args.newIndex;
});
|
filter
|
Event
|
|
This event is triggered when the jqxTreeGrid's rows filter is changed.
Code examples
Bind to the filter event by type: jqxTreeGrid.
$('#treeGrid').on('filter',
function (event)
{
var args = event.args;
// array of filters. Each filter in that array has 2 members - "datafield" and "filter". "datafield" is the filter column's bound field,
// "filter" is an object with key/value pairs which represents a filter group applied to a column. It has a "getfilters" method which returns an Array of the individual filters.
// each individual filter has the following members: "condition", "value", "type" and "operator".
// For more information about "condition" see the "localization" property.
// "type" could be "stringfilter", "numberfilter", "datefilter" or "booleanfilter".
// "operator" could be "0" or "1" depending on the relation between the filter with the other filters within the filter group.
// "value" represents the filter's value.
var filters = args.filters;
});
|
pageChanged
|
Event
|
|
This is triggered when the jqxTreeGrid's current page is changed.
Code examples
Bind to the pageChanged event by type: jqxTreeGrid.
$('#treeGrid').on('pageChanged',
function (event)
{
// event args.
var args = event.args;
// page num.
var pageNum = args.pagenum;
// old page num.
var oldPageNum = args.oldpagenum;
// page size.
var pageSize args.pagesize;
});
|
pageSizeChanged
|
Event
|
|
This is triggered when the jqxTreeGrid's page size is changed.
Code examples
Bind to the pageSizeChanged event by type: jqxTreeGrid.
$('#treeGrid').on('pageSizeChanged',
function (event)
{
// event args.
var args = event.args;
// page num.
var pageNum = args.pagenum;
// old page size.
var oldPageSize = args.oldpagesize;
// page size.
var pageSize = args.pagesize;
});
|
rowClick
|
Event
|
|
This is triggered when a row is clicked.
Code examples
Bind to the rowClick event by type: jqxTreeGrid.
$('#treeGrid').on('rowClick',
function (event)
{
// event args.
var args = event.args;
// row data.
var row = args.row;
// row key.
var key = args.key;
// data field
var dataField = args.dataField;
// original click event.
var clickEvent = args.originalEvent;
});
|
rowDoubleClick
|
Event
|
|
This is triggered when a row is double-clicked.
Code examples
Bind to the rowDoubleClick event by type: jqxTreeGrid.
$('#treeGrid').on('rowDoubleClick',
function (event)
{
// event args.
var args = event.args;
// row data.
var row = args.row;
// row key.
var key = args.key;
// data field
var dataField = args.dataField;
// original double click event.
var clickEvent = args.originalEvent;
});
|
rowSelect
|
Event
|
|
This is triggered when a row is selected.
Code examples
Bind to the rowSelect event by type: jqxTreeGrid.
$('#treeGrid').on('rowSelect',
function (event)
{
// event args.
var args = event.args;
// row data.
var row = args.row;
// row key.
var key = args.key;
});
|
rowUnselect
|
Event
|
|
This is triggered when a row is unselected.
Code examples
Bind to the rowUnselect event by type: jqxTreeGrid.
$('#treeGrid').on('rowUnselect',
function (event)
{
// event args.
var args = event.args;
// row data.
var row = args.row;
// row key.
var key = args.key;
});
|
rowBeginEdit
|
Event
|
|
This is triggered when a row edit begins.
Code examples
Bind to the rowBeginEdit event by type: jqxTreeGrid.
$('#treeGrid').on('rowBeginEdit',
function (event)
{
// event args.
var args = event.args;
// row data.
var row = args.row;
// row key.
var key = args.key;
});
|
rowEndEdit
|
Event
|
|
This is triggered when a row edit ends.
Code examples
Bind to the rowEndEdit event by type: jqxTreeGrid.
$('#treeGrid').on('rowEndEdit',
function (event)
{
// event args.
var args = event.args;
// row data.
var row = args.row;
// row key.
var key = args.key;
});
|
rowExpand
|
Event
|
|
This is triggered when a row is expanded.
Code examples
Bind to the rowExpand event by type: jqxTreeGrid.
$('#treeGrid').on('rowExpand',
function (event)
{
// event args.
var args = event.args;
// row data.
var row = args.row;
// row key.
var key = args.key;
});
|
rowCollapse
|
Event
|
|
This is triggered when a row is collapsed.
Code examples
Bind to the rowCollapse event by type: jqxTreeGrid.
$('#treeGrid').on('rowCollapse',
function (event)
{
// event args.
var args = event.args;
// row data.
var row = args.row;
// row key.
var key = args.key;
});
|
rowCheck
|
Event
|
|
This is triggered when a row is checked.
Code examples
Bind to the rowCheck event by type: jqxTreeGrid.
$('#treeGrid').on('rowCheck',
function (event)
{
// event args.
var args = event.args;
// row data.
var row = args.row;
// row key.
var key = args.key;
});
|
rowUncheck
|
Event
|
|
This is triggered when a row is unchecked.
Code examples
Bind to the rowUncheck event by type: jqxTreeGrid.
$('#treeGrid').on('rowUncheck',
function (event)
{
// event args.
var args = event.args;
// row data.
var row = args.row;
// row key.
var key = args.key;
});
|
sort
|
Event
|
|
This event is triggered when the jqxTreeGrid sort order or sort column is changed.
Code examples
Bind to the sort event by type: jqxTreeGrid.
$('#treeGrid').on('sort', function (event) {
var args = event.args;
// column's data field.
var sortcolumn = args.sortcolumn;
// sort order. { 'ascending': true or false, 'descending': true or false }
var sortdirection = args.sortdirection;
});
|
|
addRow
|
Method
|
|
Adds a new row. For synchronization with a server, please look also the jqxDataAdapter plug-in's help documentation.
List of parameters:
- Row Key/ID - unique ID which identifies the row. If null is passed, the jqxTreeGrid will generate an unique.
- Row Data - Object with Key/Value pairs. To add an empty row, pass {}.
- Row Position - string with two possible values - "last" and "first". By default "last" is used.
Parameter |
Type |
Description |
rowKey |
String |
|
rowData |
Object |
|
rowPosition |
String |
|
Return Value
None
Code example
Invoke the addRow method.
$("#treeGrid").jqxTreeGrid('addRow', null, {});
|
addFilter
|
Method
|
|
Adds a new filter.
List of parameters:
- Data Field - column's data field.
- filter - a filter group.
Definitions:
- filterGroup - The filter group represents a group of one or more filters.
Code Example
// creates a new filter group.
var filterGroup = new $.jqx.filter();
- filter - a filter added to the filter group. Each filter has value and condition. The filter condition specifies the way the filter will evaluate each value with the filter's value. The filter condition depends on the filter’s type.
To create a filter, use the
createfilter method of the filterGroup. It has 3 parameters - filter type("stringfilter", "datefilter", "booleanfilter" and "numericfilter"), filter value and filter's condition.
Code Example
var filtervalue = 'Beate';
var filtercondition = 'contains';
// possible conditions for string filter: 'EMPTY', 'NOT_EMPTY', 'CONTAINS', 'CONTAINS_CASE_SENSITIVE',
// 'DOES_NOT_CONTAIN', 'DOES_NOT_CONTAIN_CASE_SENSITIVE', 'STARTS_WITH', 'STARTS_WITH_CASE_SENSITIVE',
// 'ENDS_WITH', 'ENDS_WITH_CASE_SENSITIVE', 'EQUAL', 'EQUAL_CASE_SENSITIVE', 'NULL', 'NOT_NULL'
// possible conditions for numeric filter: 'EQUAL', 'NOT_EQUAL', 'LESS_THAN', 'LESS_THAN_OR_EQUAL', 'GREATER_THAN', 'GREATER_THAN_OR_EQUAL', 'NULL', 'NOT_NULL'
// possible conditions for date filter: 'EQUAL', 'NOT_EQUAL', 'LESS_THAN', 'LESS_THAN_OR_EQUAL', 'GREATER_THAN', 'GREATER_THAN_OR_EQUAL', 'NULL', 'NOT_NULL'
var filter1 = filtergroup.createfilter('stringfilter', filtervalue, filtercondition);
filtervalue = 'Andrew';
filtercondition = 'starts_with';
var filter2 = filtergroup.createfilter('stringfilter', filtervalue, filtercondition);
- filter operator - determines the relation between filters within a filter group. The operator could be 0(AND) or 1(OR).
In the code example below, we added two filters to a filter group with operator ‘or’. By doing that, each value will be evaluated by
filter1 and filter2 and the evaluation result will be true, if the filter1 evaluation result is true or filter2 evaluation result is true.
var filter_or_operator = 1;
filtergroup.addfilter(filter_or_operator, filter1);
filtergroup.addfilter(filter_or_operator, filter2);
Parameter |
Type |
Description |
dataField |
String |
|
filerGroup |
Object |
|
Return Value
None
Code example
Invoke the addFilter method.
var filtertype = 'stringfilter';
// create a new group of filters.
var filtergroup = new $.jqx.filter();
var filter_or_operator = 1;
var filtervalue = "Empty";
var filtercondition = 'equal';
var filter = filtergroup.createfilter(filtertype, filtervalue, filtercondition);
filtergroup.addfilter(filter_or_operator, filter);
// add the filters.
$("#treeGrid").jqxTreeGrid('addFilter', dataField, filtergroup);
// apply the filters.
$("#treeGrid").jqxTreeGrid('applyFilters');
|
applyFilters
|
Method
|
|
Applies the added/removed filters.
Parameter |
Type |
Description |
None |
|
|
Return Value
None
Code example
Invoke the applyFilters method.
$("#treeGrid").jqxTreeGrid('applyFilters');
|
beginUpdate
|
Method
|
|
Begins an update and stops all refreshes.
Parameter |
Type |
Description |
None |
|
|
Return Value
None
Code example
Invoke the beginUpdate method.
$("#treeGrid").jqxTreeGrid('beginUpdate');
|
beginRowEdit
|
Method
|
|
Begins a row edit operation when editable is set to true.
Parameter |
Type |
Description |
rowKey |
String |
Unique ID which identifies the row |
Return Value
None
Code example
Invoke the beginRowEdit method.
$("#treeGrid").jqxTreeGrid('beginRowEdit', 'ALFKI');
|
beginCellEdit
|
Method
|
|
Begins a cell edit operation when editable is set to true.
Parameter |
Type |
Description |
rowKey |
String |
Unique ID which identifies the row |
dataField |
String |
|
Return Value
None
Code example
Invoke the beginCellEdit method.
$("#treeGrid").jqxTreeGrid('beginCellEdit', 'ALFKI', 'FirstName');
|
clearSelection
|
Method
|
|
Clears the selection.
Parameter |
Type |
Description |
None |
|
|
Return Value
None
Code example
Invoke the clearSelection method.
$("#treeGrid").jqxTreeGrid('clearSelection');
|
clearFilters
|
Method
|
|
Clears the filters.
Parameter |
Type |
Description |
None |
|
|
Return Value
None
Code example
Invoke the clearFilters method.
$("#treeGrid").jqxTreeGrid('clearFilters');
|
clear
|
Method
|
|
Clears the jqxTreeGrid.
Parameter |
Type |
Description |
None |
|
|
Return Value
None
Code example
Invoke the clear method.
$("#treeGrid").jqxTreeGrid('clear');
|
checkRow
|
Method
|
|
Checks a row when checkboxes is set to true.
Parameter |
Type |
Description |
rowKey |
String |
Unique ID which identifies the row |
Return Value
None
Code example
Invoke the checkRow method.
$("#treeGrid").jqxTreeGrid('checkRow', 'ALFKI');
|
collapseRow
|
Method
|
|
Collapses a row.
Parameter |
Type |
Description |
rowKey |
String |
Unique ID which identifies the row |
Return Value
None
Code example
Invoke the collapseRow method.
$("#treeGrid").jqxTreeGrid('collapseRow', 'ALFKI');
|
collapseAll
|
Method
|
|
Collapses all rows.
Parameter |
Type |
Description |
None |
|
|
Return Value
None
Code example
Invoke the collapseAll method.
$("#treeGrid").jqxTreeGrid('collapseAll');
|
destroy
|
Method
|
|
Destroys jqxTreeGrid and removes it from the DOM.
Parameter |
Type |
Description |
None |
|
|
Return Value
None
Code example
Invoke the destroy method.
$("#treeGrid").jqxTreeGrid('destroy');
|
deleteRow
|
Method
|
|
Deletes a row. For synchronization with a server, please look also the jqxDataAdapter plug-in's help documentation.
Parameter |
Type |
Description |
rowKey |
String |
Unique ID which identifies the row |
Return Value
None
Code example
Invoke the deleteRow method.
$("#treeGrid").jqxTreeGrid('deleteRow', 'ALFKI');
|
expandRow
|
Method
|
|
Expands a row.
Parameter |
Type |
Description |
rowKey |
String |
Unique ID which identifies the row |
Return Value
None
Code example
Invoke the expandRow method.
$("#treeGrid").jqxTreeGrid('expandRow', 'ALFKI');
|
expandAll
|
Method
|
|
Expands all rows.
Parameter |
Type |
Description |
None |
|
|
Return Value
None
Code example
Invoke the expandAll method.
$("#treeGrid").jqxTreeGrid('expandAll');
|
endUpdate
|
Method
|
|
Ends the update and resumes all refreshes.
Parameter |
Type |
Description |
None |
|
|
Return Value
None
Code example
Invoke the endUpdate method.
$("#treeGrid").jqxTreeGrid('endUpdate');
|
ensureRowVisible
|
Method
|
|
Moves the vertical scrollbar to a row.
Parameter |
Type |
Description |
rowKey |
String |
Unique ID which identifies the row |
Return Value
None
Code example
Invoke the ensureRowVisible method.
$("#treeGrid").jqxTreeGrid('ensureRowVisible', 'ALFKI');
|
endRowEdit
|
Method
|
|
Ends a row edit when editable is set to true.
Parameter |
Type |
Description |
rowKey |
String |
Unique ID which identifies the row |
cancelChanges(optional) |
Boolean |
|
Return Value
None
Code example
Invoke the endRowEdit method.
$("#treeGrid").jqxTreeGrid('endRowEdit', 'ALFKI');
Invoke the endRowEdit method and cancel changes.
$("#treeGrid").jqxTreeGrid('endRowEdit', 'ALFKI', true);
|
endCellEdit
|
Method
|
|
Ends a cell edit operation when editable is set to true.
Parameter |
Type |
Description |
rowKey |
String |
Unique ID which identifies the row |
dataField |
String |
|
cancelChanges(optional) |
Boolean |
Determines whether the changes would be canceled or confirmed. Default: false |
Return Value
None
Code example
Invoke the endCellEdit method.
$("#treeGrid").jqxTreeGrid('endCellEdit', 'ALFKI', 'FirstName');
|
exportData
|
Method
|
|
Exports TreeGrid Data to Excel, HTML, XML, JSON, CSV or TSV. See also the exportSettings property
Parameter |
Type |
Description |
exportDataType |
String |
'xls', 'html', 'xml', 'json', 'csv', 'tsv' or 'pdf' |
Return Value
Object(optional) - depends on whether the export is to a file or not.
Code example
var employees = [{ "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." }];
//// prepare the data
var source =
{
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: employees
};
var dataAdapter = new $.jqx.dataAdapter(source);
// create Tree Grid
$("#treeGrid").jqxTreeGrid(
{
width: 600,
source: dataAdapter,
ready: function () {
$("#treeGrid").jqxTreeGrid('expandRow', '2');
},
columns: [
{ text: 'First Name', dataField: 'FirstName', width: 150 },
{ text: 'Last Name', dataField: 'LastName', width: 120 },
{ 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', width: 120 }
]
});
$("#excelExport").jqxButton();
$("#xmlExport").jqxButton();
$("#csvExport").jqxButton();
$("#tsvExport").jqxButton();
$("#htmlExport").jqxButton();
$("#jsonExport").jqxButton();
$("#excelExport").click(function () {
$("#treeGrid").jqxTreeGrid('exportData', 'xls');
});
$("#xmlExport").click(function () {
$("#treeGrid").jqxTreeGrid('exportData', 'xml');
});
$("#csvExport").click(function () {
$("#treeGrid").jqxTreeGrid('exportData', 'csv');
});
$("#tsvExport").click(function () {
$("#treeGrid").jqxTreeGrid('exportData', 'tsv');
});
$("#htmlExport").click(function () {
$("#treeGrid").jqxTreeGrid('exportData', 'html');
});
$("#jsonExport").click(function () {
$("#treeGrid").jqxTreeGrid('exportData', 'json');
});
|
focus
|
Method
|
|
Focus jqxTreeGrid.
Parameter |
Type |
Description |
None |
|
|
Return Value
None
Code example
Invoke the focus method.
$("#treeGrid").jqxTreeGrid('focus');
|
getColumnProperty
|
Method
|
|
Gets a property value of a column.
Parameter |
Type |
Description |
dataField |
String |
|
propertyName |
String |
|
Return Value
Object
Code example
Invoke the getColumnProperty method.
$("#treeGrid").jqxTreeGrid('getColumnProperty', 'firstName', 'width');
|
goToPage
|
Method
|
|
Navigates to a page when pageable is set to true.
Parameter |
Type |
Description |
pageIndex |
Number |
|
Return Value
None
Code example
Invoke the goToPage method.
$("#treeGrid").jqxTreeGrid('goToPage', 2);
|
goToPrevPage
|
Method
|
|
Navigates to a previous page when pageable is set to true.
Parameter |
Type |
Description |
None |
|
|
Return Value
None
Code example
Invoke the goToPrevPage method.
$("#treeGrid").jqxTreeGrid('goToPrevPage');
|
goToNextPage
|
Method
|
|
Navigates to a next page when pageable is set to true.
Parameter |
Type |
Description |
None |
|
|
Return Value
None
Code example
Invoke the goToNextPage method.
$("#treeGrid").jqxTreeGrid('goToNextPage');
|
getSelection
|
Method
|
|
Returns an array of selected rows.
Parameter |
Type |
Description |
None |
|
|
Return Value
Array
Code example
Invoke the getSelection method.
$("#treeGrid").jqxTreeGrid('getSelection');
Invoke the getSelection and loop through the selected rows
var selection = $("#table").jqxTreeGrid('getSelection');
for (var i = 0; i < selection.length; i++) {
// get a selected row.
var rowData = selection[i];
}
|
getKey
|
Method
|
|
Returns the Row's Key. If the row's key is not found, returns null.
Parameter |
Type |
Description |
row |
Object |
|
Return Value
String
Code example
Invoke the getKey method.
var key = $("#table").jqxTreeGrid('getKey', row);
|
getRow
|
Method
|
|
Returns an Object. If the row is not found, returns null.
List of reserved members of the returned object:
- checked - Boolean value. Returns the row's checked state.
- expanded - Boolean value. Returns the row's expanded state.
- icon - String value. Returns the row's icon url.
- leaf - Boolean value. Returns whether the row is a leaf in the hierarchy.
- level - Integer value. Returns the row's hierarchy level.
- parent - Object. Returns null for root rows. Otherwise, returns the parent row's object
- records - Array. Returns the row's sub-rows collection.
- selected - Boolean value. Returns the row's selected state.
- uid - Number/String value. Returns the row's unique ID/Key.
Parameter |
Type |
Description |
rowKey |
String |
|
Return Value
Object
Code example
Invoke the getRow method.
var row = $("#table").jqxTreeGrid('getRow', "1.2");
|
getRows
|
Method
|
|
Returns an array of all rows loaded into jqxTreeGrid.
List of reserved Row members:
- checked - Boolean value. Returns the row's checked state.
- expanded - Boolean value. Returns the row's expanded state.
- icon - String value. Returns the row's icon url.
- leaf - Boolean value. Returns whether the row is a leaf in the hierarchy.
- level - Integer value. Returns the row's hierarchy level.
- parent - Object. Returns null for root rows. Otherwise, returns the parent row's object
- records - Array. Returns the row's sub-rows collection.
- selected - Boolean value. Returns the row's selected state.
- uid - Number/String value. Returns the row's unique ID/Key.
Parameter |
Type |
Description |
None |
|
|
Return Value
Array
Code example
Invoke the getRows method.
$("#treeGrid").jqxTreeGrid('getRows');
Invoke the getRows and loop through the rows
var firstLevelRows = $("#treeGrid").jqxTreeGrid('getRows');
for (var i = 0; i < firstLevelRows.length; i++) {
// get a row.
var rowData = firstLevelRows[i];
}
|
getCheckedRows
|
Method
|
|
Returns a flat array of all checked rows.
List of reserved Row members:
- checked - Boolean value. Returns the row's checked state.
- expanded - Boolean value. Returns the row's expanded state.
- icon - String value. Returns the row's icon url.
- leaf - Boolean value. Returns whether the row is a leaf in the hierarchy.
- level - Integer value. Returns the row's hierarchy level.
- parent - Object. Returns null for root rows. Otherwise, returns the parent row's object
- records - Array. Returns the row's sub-rows collection.
- selected - Boolean value. Returns the row's selected state.
- uid - Number/String value. Returns the row's unique ID/Key.
Parameter |
Type |
Description |
None |
|
|
Return Value
Array
Code example
Invoke the getCheckedRows method.
$("#treeGrid").jqxTreeGrid('getCheckedRows');
Invoke the getCheckedRows and loop through the rows
var checkedRows = $("#treeGrid").jqxTreeGrid('getCheckedRows');
for (var i = 0; i < checkedRows.length; i++) {
// get a row.
var rowData = checkedRows[i];
}
|
getView
|
Method
|
|
Returns an array of all rows loaded into jqxTreeGrid. The method takes into account the applied Filtering and Sorting.
List of reserved Row members:
- checked - Boolean value. Returns the row's checked state.
- expanded - Boolean value. Returns the row's expanded state.
- icon - String value. Returns the row's icon url.
- leaf - Boolean value. Returns whether the row is a leaf in the hierarchy.
- level - Integer value. Returns the row's hierarchy level.
- parent - Object. Returns null for root rows. Otherwise, returns the parent row's object
- records - Array. Returns the row's sub-rows collection.
- selected - Boolean value. Returns the row's selected state.
- uid - Number/String value. Returns the row's unique ID/Key.
Parameter |
Type |
Description |
None |
|
|
Return Value
Array
Code example
Invoke the getView method.
$("#treeGrid").jqxTreeGrid('getView');
Invoke the getView and loop through the rows
var firstLevelRows = $("#table").jqxTreeGrid('getView');
for (var i = 0; i < rows.length; i++) {
// get a row.
var rowData = rows[i];
}
|
getCellValue
|
Method
|
|
Returns a value of a cell.
Parameter |
Type |
Description |
rowKey |
String |
Unique ID which identifies the row |
dataField |
String |
|
Return Value
Object
Code example
Invoke the getCellValue method.
var value = $("#treeGrid").jqxTreeGrid('getCellValue', 0, 'firstName');
|
hideColumn
|
Method
|
|
Hides a column.
List of parameters:
- data field - column's data field.
Parameter |
Type |
Description |
dataField |
String |
|
Return Value
None
Code example
Invoke the hideColumn method.
$("#treeGrid").jqxTreeGrid('hideColumn','firstName');
|
isBindingCompleted
|
Method
|
|
Returns whether the binding is completed and if the result is true, this means that you can invoke methods and set properties. Otherwise, if the binding is not completed and you try to set a property or invoke a method, the widget will throw an exception.
List of parameters:
Parameter |
Type |
Description |
None |
|
|
Return Value
Boolean
Code example
Invoke the isBindingCompleted method.
var isCompleted = $("#grid").jqxTreeGrid('isBindingCompleted');
|
lockRow
|
Method
|
|
Locks a row i.e editing of the row would be disabled.
Parameter |
Type |
Description |
rowKey |
String |
Unique ID which identifies the row |
Return Value
None
Code example
Invoke the lockRow method.
$("#treeGrid").jqxTreeGrid('lockRow', 'ALFKI');
|
refresh
|
Method
|
|
Performs a layout and updates the HTML elements position and size.
Parameter |
Type |
Description |
None |
|
|
Return Value
None
Code example
Invoke the refresh method.
$("#treeGrid").jqxTreeGrid('refresh');
|
render
|
Method
|
|
Renders jqxTreeGrid.
Parameter |
Type |
Description |
None |
|
|
Return Value
None
Code example
Invoke the render method.
$("#treeGrid").jqxTreeGrid('render');
|
removeFilter
|
Method
|
|
Removes a filter.
List of parameters:
- data field - column's data field.
Parameter |
Type |
Description |
dataField |
String |
|
Return Value
None
Code example
Invoke the removeFilter method.
$("#treeGrid").jqxTreeGrid('removeFilter','firstName');
|
scrollOffset
|
Method
|
|
Scrolls to a position or gets the scroll position.
Parameter |
Type |
Description |
top |
Number |
vertical scrollbar value |
left |
Number |
horizontal scrollbar value |
Return Value
Object - object.left and object.top
Code example
Invoke the scrollOffset method.
$("#treeGrid").jqxTreeGrid('scrollOffset', 10, 10);
Get the scroll position.
var offset = $("#treeGrid").jqxTreeGrid('scrollOffset');
var left = offset.left;
var top = offset.top;
|
setColumnProperty
|
Method
|
|
Sets a property of a column. See the columns property for more information.
Parameter |
Type |
Description |
dataField |
String |
|
propertyName |
String |
|
propertyValue |
Object |
|
Return Value
None
Code example
Invoke the setColumnProperty method.
$("#treeGrid").jqxTreeGrid('setColumnProperty', 'firstName', 'width', 200);
|
showColumn
|
Method
|
|
Shows a column.
Parameter |
Type |
Description |
dataField |
String |
|
Return Value
None
Code example
Invoke the showColumn method.
$("#treeGrid").jqxTreeGrid('showColumn', 'firstName');
|
selectRow
|
Method
|
|
Selects a row.
Parameter |
Type |
Description |
rowId |
String |
Unique ID which identifies the row |
Return Value
None
Code example
Invoke the selectRow method.
$("#treeGrid").jqxTreeGrid('selectRow', 'ALFKI');
|
setCellValue
|
Method
|
|
Sets a value of a cell.
Parameter |
Type |
Description |
rowId |
String |
|
dataField |
String |
|
cellValue |
Object |
|
Return Value
None
Code example
Invoke the setCellValue method.
$("#treeGrid").jqxTreeGrid('setCellValue', 'ALFKI', 'firstName', 'New Value');
|
sortBy
|
Method
|
|
Sorts a column, if sortable is set to true.
Parameter |
Type |
Description |
dataField |
String |
|
sortOrder |
String |
'asc', 'desc' or null |
Return Value
None
Code example
Invoke the sortBy method.
$("#treeGrid").jqxTreeGrid('sortBy', 'firstName', 'asc');
|
updating
|
Method
|
|
Gets a boolean value which determines whether jqxTreeGrid is in update state i.e the beginUpdate method was called and the endUpdate method is not called yet.
Parameter |
Type |
Description |
None |
|
|
Return Value
Boolean
Code example
Invoke the updating method.
var isUpdating = $("#treeGrid").jqxTreeGrid('updating');
|
updateBoundData
|
Method
|
|
Performs a data bind and updates jqxTreeGrid with the new data.
Parameter |
Type |
Description |
None |
|
|
Return Value
None
Code example
Invoke the updateBoundData method.
$("#treeGrid").jqxTreeGrid('updateBoundData');
|
unselectRow
|
Method
|
|
Unselects a row.
Parameter |
Type |
Description |
rowId |
String |
Unique ID which identifies the row |
Return Value
None
Code example
Invoke the unselectRow method.
$("#treeGrid").jqxTreeGrid('unselectRow', 'ALFKI');
|
uncheckRow
|
Method
|
|
Unchecks a row when checkboxes is set to true.
Parameter |
Type |
Description |
rowId |
String |
Unique ID which identifies the row |
Return Value
None
Code example
Invoke the uncheckRow method.
$("#treeGrid").jqxTreeGrid('uncheckRow', 'ALFKI');
|
updateRow
|
Method
|
|
Updates the row's data. For synchronization with a server, please look also the jqxDataAdapter plug-in's help documentation.
Parameter |
Type |
Description |
rowId |
String |
Unique ID which identifies the row |
data |
Object |
|
Return Value
None
Code example
Invoke the updateRow method.
$("#treeGrid").jqxTreeGrid('updateRow', 'ALFKI', {firstName: "New First Name", lastName: "New Last Name"});
|
unlockRow
|
Method
|
|
Unlocks a row.
Parameter |
Type |
Description |
rowId |
String |
Unique ID which identifies the row |
Return Value
None
Code example
Invoke the unlockRow method.
$("#treeGrid").jqxTreeGrid('unlockRow', 'ALFKI');
|