Before executing the example see recommendations for code writing. A file named treeImagesIcons.png must be stored at the same level with the HTML page.
To create the TreeList component, use HTML code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>TreeList</title>
<script src="../build/PP.js" type="text/javascript"></script>
<link href="../build/PP.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="simpl"></div>
<script type="text/javascript">
var treeListSett = new PP.Ui.TreeList({
// Set HTML container for component
ParentNode: document.getElementById('simpl'),
// Enable displaying of column headers
CaptionVisible: true,
// Disable selected tree areas
AreaSelect: false,
// Enable text wrap
WordWrap: true,
// Enable column width change
EnableResizeColumn: true,
// Enable displaying of column headers
ShowColumns: true,
// Enable editing table cell values
EnableEdit: true,
// Select edited text
SelectEditorText: true,
// Disable multiple selection
MultiSelect: false,
// Enable multiple moving for Drag&Drop mode
DragAndDropMode: "MultiDrag",
// Set menu icon visibility to be able to edit column visibility
EnableColumnsMenu: true,
// Disable case sensitivity on filtering
FilterCaseSensitive: false,
// Set selection reset on filtering
FilterDeSelect: true,
// Disable mode, during which the first click with hold down SHIFT key deselects all selected elements but the current one
FirstShiftSelectClearing: false,
// Set ignoring of the right padding inside object
IgnoreRightPadding: true,
// Set changing of tree displaying and changing the hasChild property for nodes during Drag&Drop mode
KeepHasChild: true,
// Set time interval before tree loading
LoadingTimeout: 1000,
// Set images
ImageList: new PP.ImageList({
Source: "treeImagesIcons.png",
IconHeight: 20,
IconWidth: 18
}),
// Enable displaying of connecting line between node and child elements
ShowLines: true,
Height: 150,
Width: 400,
// Enable displaying of checkboxes
CheckBoxes: true,
// Disable node expanding on double click
DblClickExpand: false,
// Enable node dragging
EnableDragAndDrop: true,
// Set 1 second time delay before dragging mode activation
DragAndDropDelay: 1000,
// Enable tree element search
EnableSearch: true,
// Enable multiple selection by holding down the SHIFT or CTRL key
IsCSMultiSelect: true,
// Enable element selection on right click
RightButtonSelect: true,
SortSequence: [2,1,0], // sorting order: descending - ascending - no sorting
// Set columns
Columns: [{
Caption: "Country",
Width: 200,
MinWidth: 50,
Visible: true
}, {
Caption: "Population, total",
Width: 100,
MinWidth: 50,
Visible: true
}, {
Caption: "GDP, PPP",
Width: 100,
MinWidth: 50,
Visible: false
}, {
Caption: "GPD per capita, PPP",
Width: 100,
MinWidth: 10,
Visible: false
}],
// Set nodes:
Nodes: [{
Text: "World",
Columns: ["", "", ""],
ImageIndex: 1,
Selected: false,
CanSelect: true,
Value: "TestValue",
Expanded: true,
Checked: true,
Nodes: [{
Text: "Africa",
Columns: [],
Selected: false,
CanSelect: true,
Value: "TestValue",
Expanded: true,
Checked: false,
Nodes: [{
Text: "South Africa",
Columns: ["460297895012,55", "9332,86", "49320150,00"],
ImageUrl: null,
ImageIndex: 0,
Selected: false,
CanSelect: true,
Value: "TestValue",
Expanded: true,
Checked: false
}, {
Text: "Egypt",
Columns: ["427532757687,93", "5151,03", "82999393,00"],
ImageUrl: null,
ImageIndex: 1,
Selected: false,
CanSelect: true,
Value: "TestValue",
Expanded: true,
Checked: false
}, {
Text: "Algeria",
Columns: ["258963578613,94", "7421,12", "34895470,00"],
ImageUrl: null,
ImageIndex: 2,
Selected: false,
CanSelect: true,
Value: "TestValue",
Expanded: true,
Checked: false
},]
}]
}]
})
</script>
</body>
</html>
After executing the example the TreeList component is placed on the HTML page:
See also: