NavigationItem.HeaderControl

Syntax

HeaderControl: Object

Description

The HeaderControl property sets a control to be displayed in the tab heading.

Comments

By default an instance of the CheckBox component is set in the panel title. To display the specified control, the IsHeaderControlVisible property must be set to True.

Example

To execute the example enable the hyperlinks to the PP.js libraries and the table of the PP.css visual styles. See below Javascript code used to place the NavigationBar component consisting of three panels to the HTML page. Set controls for titles of each panel.

var ComboB = new PP.Ui.ComboBox({ //Create the ComboBox component         
    ListBox: {
         Items:
        [{
            Content: "1"
        }, {
            Content: "2"
        }]
    },
  Width: 22
});
var Rb = new PP.Ui.RadioButton(); //Create the RadioButton component
var BTN = new PP.Ui.Button({ //Create the Button component
             Content: "1",
             Height: 22
});   
var NB = new PP.Ui.NavigationBar({ //Create a navigator          
    ParentNode: document.getElementById("NB1"),
           Items: //Top navigator panel
           [{
             Title: "List"
           }],
           Width: 200,
           IsAlwaysExpanded: False
});
var NI = new PP.Ui.NavigationItem({ //Middle panel          
    Title: "Text"
});
var NI1 = new PP.Ui.NavigationItem({ //Bottom panel         
    Title: "Button"
});
//Add middle and bottom panels to the navigator
NB.addItem(NI);
NB.addItem(NI1);
NB.getItem(0).setHeaderControl(BTN); //Set the Button control for
//the top panel
NB.getItem(1).setHeaderControl(ComboB); //Set the ComboBox control
//for the middle panel
NB.getItem(2).setHeaderControl(Rb); //Set the RadioButton control for the bottom panel

After executing the example navigator panel titles will contain standard controls (CheckBox) replaced with new ones: