GroupName: String;
The GroupName property sets name for a group of wizard panels.
To execute the example, the HTML page must contain the EaxDimBarMaster component named dimBarMaster (see Example of Creating the EaxDimBarMaster Component). In the BODY tag add DIV items with but1, but2, but3 and but4 identifiers. Add buttons to create a group of panels, hide and show this group:
var but1 = new PP.Ui.Button( //for the first and second master panel set group common name { ParentNode: "but1", Content: "Create group", Click: function () { var panel1 = dimBarMaster.getItems()[0]; var panel2 = dimBarMaster.getItems()[1]; panel1.setGroupName("gr1"); panel2.setGroupName("gr1");
console.log("Active group name: " + dimBarMaster.getActiveGroupName()); } }); var but2 = new PP.Ui.Button( //hide group "gr1" { ParentNode: "but3", Content: "Hide group", Click: function () { dimBarMaster.hideGroup("gr1") } }); var but3 = new PP.Ui.Button( //Show group "gr1" { ParentNode: "but3", Content: "Show group", Click: function () { dimBarMaster.showGroup("gr1") } }); var but4 = new PP.Ui.Button(//Show only the "gr1" group { ParentNode: "but4", Content: "Show one group", Click: function () { dimBarMaster.showOnlyGroup("gr1") } });
NOTE. This code must be added to body of Ready() function.
After executing the example clicking the Create Group button sets a common group name for master tabs with the indexes 0 and 1, and name of the active group is displayed in the console. Clicking the Hide Group button hides the first and second master panels. Clicking the Show Group button shows these panels. Clicking the Show One Group button hides all tabs except the tabs of gr1 group.
See also: