Tree View component, which belongs to SMART datagrid module, is a UI tool displays or handles the data rows having hierarchical relations of parent and child logically. It is the same as Grid View except hierarchical relations.
(In order to execute the example, SMART datagrid script should be ready. Please refer to Product Installation and Preparation page.)
In other words, the tree view of Row displays Data Rows connected hierarchically to Data Set, and the data column has DataField values as much as the number of the data set fields. In addition, the tree view consists of one or more columns, and each column is connected to the field of the data set. Eventually, like Grid Rows, each Row of the tree view is made up of the data cells which display the field value of the data row connected to those columns.
Of course, you can implement with appending the data rows in the empty tree view in which are only defined the data field set and column set during the run time, but usually, you will start from the initialized data set. Please refer to Load Tree Data example topic about how to initialize the data set from the external data source existing as a text file. Since the data set transferred from HTTP server is also a text, you can apply as the same.
Also, please refer to the Example about Tree Data Set.
In the tree view above, it has initialized the data set from arrays as below.
var rows = [
[0,"1","IBRD00010","France","4.25","USD","P037383","250","000","001.00","11/01/1952","05/01/1977"],
[0,"1.1","IBRD00020","Netherlands","4.25","USD","P037452","191","044","211.75","04/01/1952","10/01/1972"],
[0,"1.2","IBRD00021","Netherlands","4.25","USD","P037452","3","955","788.25","04/01/1953","04/01/1954"],
[0,"1.2.1","IBRD00030","Denmark","4.25","USD","P037362","40","000","000.00","02/01/1953","08/01/1972"],
[0,"1.2.2","IBRD00040","Luxembourg","4.25","USD","P037451","12","000","000.00","07/15/1949","07/15/1972"],
...
[1,"2","IBRD00060","Chile","3.75","USD","P006577","2","500","000.00","07/01/1950","01/01/1955"],
[1,"2.1","IBRD00070","Netherlands","3.56","USD","P037453","2","000","000.00","01/15/1949","07/15/1958"],
...
[2,"3","IBRD00100","Netherlands","3.56","USD","P037456","2","000","000.00","01/15/1949","07/15/1958"],
...
];
In order to organize an array in a tree structure, you need the value of tree information contained in each row. In the example above, the second 'tree' field is used as treeField of the data set. Tree field value should be a string, and it searches the prior row which has the same value as the first part of the current row value and appends it as a child row of that row. It will become the top data row without previous rows.
The items used as the tree value are basically not added in the data set, but the corresponding items can be added in the field by specifying useTreeField parameter as true through TreeDataSet.setRows and setting the field list through setFields.
// It means the third parameter will use the tree field which has been specified by the second parameter as an actual data field.
dsMain.setRows(rows, 1, true);
The first value of each row of the example is used as iconIndex. iconIndex is not a value of the data set but the one used in the tree view, and sometimes it may be kept in the data source. You can specify the icon of the tree row by directly specifying TreeRow.iconIndex property value or TreeOptions.iconCallback callback function. If the icon value is contained in the data set like this example, you can specify through TreeOptions.iconField and use that value.
However, if a value which is not undefined has been set in TreeRow.iconIndex once, others will be ignored.
tree.setOptions{
iconCallback: function (row) {
var idx = row.iconIndex();
if (idx === undefined) {
switch (row.getValue('country')) {
case 'France':
idx = 'fr.png';
break;
...
default:
idx = 0;
break;
}
row.setIconIndex(idx);
}
return idx;
},
...
});