TreeListBase.DataMappers

Syntax

DataMappers: Object;

Description

The DataMappers property determines data mapping parameters.

Comments

Use JSON or the setDataMappers method to set the property value and the getDataMappers method to get the property value.

Data mappings of nodes correspond to their properties for example, the 'Content' data mapping corresponds to the TreeListBase.NodeContent property.

List of available mappings: 'Key', 'Index', 'Parent', 'Children', 'ChildrenCount', 'ChildrenSelected', 'Selected', 'Expanded', 'Checked', 'FixedSelected', 'FixedExpanded', 'FixedChecked', 'FixedFocused', 'ImageIndex', 'Editable', 'Content', 'Controls', 'Class', 'Style', 'Visible', 'ChildrenVisible', 'Data'.

Example

To execute the example, in the HEAD tag add links to component library PP.js and visual style tables PP.css. Add a DIV element with the "container" identifier in the BODY tag. The example differs from the Example of Creating the SimpleTreeList Component by setting source data: the Con user parameters is used instead of the the Content parameter. For correct tree displaying it is required to set data mapping:

// Create  tree contents
json = [
  { Key: '0', Con: ['Node0', 'Node0 - Col2'] },
  { Key: '1', Con: ['Node1', 'Node1 - Col2'], Selected: true },
  { Key: '2', Con: 'Node2' },
  { Key: '3', Con: 'Node3' },
    { Key: '4', Con: 'Node4', Parent: '0' },
    { Key: '5', Con: 'Node5', Parent: '0' },
    { Key: '6', Con: 'Node6', Parent: '0' }
]
// Create tree
Tree = new PP.Ui.SimpleTreeList({
  ParentNode: container,
  Width: 400,
  Height: 400,
  Captions:  [{
    Content: 'Frst',
    Width: '40%'
    },{
    Content: 'Second',
    Width: '60%'
    }],
  ShowCheckBoxes: true,
  ShowCaptions: true,
  ShowTree: true,
  DataObject: json,
  // Set data mapping for the Content parameter
  DataMappers: { Content: 'Con'},
});

After executing the example the SimpleTreeList component is created.

See also:

TreeListBase