Getting Started

jqxTreeGrid is a lightweight jQuery widget which represents data in a tree-like structure. The TreeGrid(also known as TreeList) widget supports multi column display of hierarchical data, data paging, sorting and filtering, data editing, columns resizing, fixed columns, conditional formatting, aggregates and rows selection. It can read and display the data from your data sources like XML, JSON, Array, CSV or TSV. jqxTreeGrid has intuitive and easy to use APIs and works across devices and browsers.

Every UI widget from jQWidgets toolkit needs its JavaScript files to be included in order to work properly.

The first step is to create html page and add links to the javascript files and css dependencies to your project. The TreeGrid widget requires the following files:

jqxTreeGrid uses jQuery for basic JavaScript tasks like elements selection and events handling. You need to include the jQuery javascript file, the jQWidgets core framework file - jqxcore.js, the jQWidgets data binding file - jqxdata.js, the main jqxTreeGrid plug-in file - jqxtreegrid.js file, the jQWidgets DataTable file - jqxdatatable.js, the jQWidgets Scrollbar plug-in - jqxbutton.js and jqxscrollbar.js(used for the TreeGrid scrolling), jQWidgets DropDownList plug-in(used in the TreeGrid's Pager and Filtering panel) - jqxlistbox.js and jqxdropdownlist.js, and the base jQWidgets stylesheet - jqx.base.css:

The next step is to create a DIV element within the body of the html document.
The last step is to initialize the widget. In order to initialize the TreeGrid, you need to set its source and columns properties. Add the following script to the html document:
To set a property(option), you need to pass the property name and value(s) to the jqxTreeGrid's constructor.

 $("#treeGrid").jqxTreeGrid({ disabled: true});
 

To get a property(option), you need to pass the property name to the jqxTreeGrid's constructor.

 var disabled = $("#treeGrid").jqxTreeGrid('disabled');

To call a function, you need to pass the function name and parameters(if any).

 $("#treeGrid").jqxTreeGrid('selectRow', 1);

To attach an event handler function to the jqxTreeGrid widget, you can use the jQuery's .on() method. Let’s suppose that you want to write code which does something when the user selects a row. The example code below demonstrates how to bind to the ‘rowSelect’ event of jqxTreeGrid.

 $("#treeGrid").on('rowSelect', function (event) {
 // event arguments
 var args = event.args;
 // row data
 var rowData = args.row;
 // row key
 var rowKey = args.key;
 });

Most of the browser events bubble from the element(the event target) where they occur up to the body and the document element. By default, most events bubble up from the original event target to the document element. At each element along the way, jQuery calls any matching event handlers that have been attached. An event handler can prevent the event from bubbling further up the document tree (and thus prevent handlers on those elements from running) by calling event.stopPropagation(). Any other handlers attached on the current element will run however. To prevent that, call event.stopImmediatePropagation(). (Event handlers bound to an element are called in the same order that they were bound.)

The code sample below illustrates how to stop the rowSelect event from bubbling using the .stopPropagation() method.

 $("#treeGrid").on('rowSelect', function (event) {
 // event arguments
 var args = event.args;
 // row data
 var rowData = args.row;
 // row key
 var rowKey = args.key;
 
 event.stopPropagation();
 });

Basic TreeGrid Sample

The result of the above code is:

[フレーム]