To run this example in the HEAD tag activate the links to the component library PP.js and visual style table PP.css. In the BODY tag add a DIV element with the identfier smpl. A file named treeImagesIcons.png must be stored at the same level with the HTML page.
var treeListSett = new PP.Ui.TreeList(
{ //html container for component
ParentNode: document.getElementById('smpl'),
//column titles are displayed
CaptionVisible: true,
//Disable selection of tree area
AreaSelect: false,
//Word wrap is enabled
WordWrap: true,
//Column width can be changed EnableResizeColumn: true, //Column titles are displayed ShowColumns: true, //Table cell values can be edited: EnableEdit: true, //edited text is selected SelectEditorText: true, //Multiple selection is disabled
MultiSelect: false, // Enable multiple dragging for drag-and-drop mode DragAndDropMode: "MultiDrag", // Set menu icon visibility for ability to edit column visibility EnableColumnsMenu: true, // Disable case-sensitiveness on filtering FilterCaseSensitive: false, // Set selection reset on filtering FilterDeSelect: true,
// Disable the mode, at which the first click with the held down SHIFT key deselects all selected elements except the current one FirstShiftSelectClearing: false, // Set ignoring of the right margin within the object IgnoreRightPadding: true, // Set changing of tree displaying and changing the hasChild property of nodes during the drag-and-drop mode KeepHasChild: true, // Set time interval before tree loading LoadingTimeout: 1000, //Set of images ImageList: new PP.ImageList(
{
Source: "treeImagesIcons.png",
IconHeight: 20,
IconWidth: 18
}),
//Connecting line between node and children is displayed
ShowLines: true,
Height: 150,
Width: 400,
//Checkboxes are displayed
CheckBoxes: true,
//node is not expanded on double click DblClickExpand: false, //enable node dragging EnableDragAndDrop: true, //delay before dragging mode activation - 1 second DragAndDropDelay: 1000, //enable tree element search mode EnableSearch: true, //multiple selection with holding down the SHIFT or CTRL key is available IsCSMultiSelect: true, //element is selected on the right mouse click RightButtonSelect: true, SortSequence: [2,1,0],//sorting order: descending - ascending - no sorting //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
}],
//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 }] }] }] });
After executing the example the HTML page will contain the TreeList component that looks as follows:
See also: