TreeColumn.FormatMethod

Syntax

FormatMethod: Function

Description

The FormatMethod property sets function intended for column elements formatting.

Comments

Use JSON or the setFormatMethod method to set the property value and the getFormatMethod method to get the property value.

Example

Executing the example requires links to the PP.js scenario file and the PP.css styles file in the <body> tag of HTML page of the <div> element with the «treeList» identifier. It is required to determine calling of the createTreeList() function in the onload event of the <body> tag. Create hierarchical tree:

function createTreeList() {
    column = new PP.Ui.TreeColumn({
        // Set formatting method for column contents
        FormatMethod: function (value) {
            return value + &quot;!&quot;
        },
        // Set that column is editable
        Editable: true,
        // Set that column could be hidden
        Hideable: true,
        // Set that column is active
        IsEnabled: true,
        // Set column contents type
        Type: PP.Ui.TreeColumnType.string,
        Caption: &quot;Country&quot;,
        Width: 200,
        MinWidth: 50,
        Visible: true,
    });    
    treeList = new PP.Ui.TreeList({
        // Set parent element
        ParentNode: document.getElementById('treeList'),
        // Set column headers displaying
        CaptionVisible: true,
        // Enable node checkbox displaying
        CheckBoxes: true,
        // Set column width resizing
        EnableResizeColumn: true,
        // Set column displaying
        ShowColumns: true,
        // Set that menu icon is visible to edit column visibility
        EnableColumnsMenu: true,
        // Set component sizes
        Height: 125,
        Width: 400,
        // Columns
        Columns: [
            column, {
                Caption: &quot;Population, total&quot;,
                Width: 100,
                MinWidth: 50,
                Visible: true
            }, {
                Caption: &quot;GDP, PPP&quot;,
                Width: 100,
                MinWidth: 50,
                Visible: false
            }, {
                Caption: &quot;GPD per capita, PPP&quot;,
                Width: 100,
                MinWidth: 10,
                Visible: false
            }
        ],
        // Nodes:
        Nodes: [{
            Text: &quot;World&quot;,
            Columns: [&quot;&quot;, &quot;&quot;, &quot;&quot;],
            ImageIndex: 1,
            Selected: false,
            CanSelect: true,
            Value: &quot;TestValue&quot;,
            Expanded: false,
            Checked: true,
            Nodes: [{
                Text: &quot;Africa&quot;,
                Columns: [],
                Selected: false,
                CanSelect: true,
                Value: &quot;TestValue&quot;,
                Expanded: true,
                Checked: false,
                Nodes: [{
                    Text: &quot;South Africa&quot;,
                    Columns: [&quot;460297895012,55&quot;, &quot;9332,86&quot;, &quot;49320150,00&quot;],
                    ImageUrl: null,
                    ImageIndex: 0,
                    Selected: false,
                    CanSelect: true,
                    Value: &quot;TestValue&quot;,
                    Expanded: true,
                    Checked: false
                }, {
                    Text: &quot;Egypt&quot;,
                    Columns: [&quot;427532757687,93&quot;, &quot;5151,03&quot;, &quot;82999393,00&quot;],
                    ImageUrl: null,
                    ImageIndex: 1,
                    Selected: false,
                    CanSelect: true,
                    Value: &quot;TestValue&quot;,
                    Expanded: true,
                    Checked: false
                }, {
                    Text: &quot;Algeria&quot;,
                    Columns: [&quot;258963578613,94&quot;, &quot;7421,12&quot;, &quot;34895470,00&quot;],
                    ImageUrl: null,
                    ImageIndex: 2,
                    Selected: false,
                    CanSelect: true,
                    Value: &quot;TestValue&quot;,
                    Expanded: true,
                    Checked: false
                }]
            }]
        }],
    });
    // Open all tree nodes
    column.getOwner().expandAll();
}

As the result, hierarchical tree is created where all column elements named «Country» have the «!» character in the name: