DHTMLX Little-Known Features: Segmented Button for Toolbar

| Comments (3)

We are glad to share one more DHTMLX tip, and this time you’ll know how to divide the buttons from toolbar into groups (grouped buttons also know as segmented button).

You can create several segmented buttons for a single toolbar. Only one button at a time can be pressed within the group. It provides you more abilities with dhtmlxToolbar: click on the screenshot below to open demo and you’ll see how these groups can be used in practice.

Segmented button in toolbar

Click to open live demo


On contrast to our previous tips, we have more code this time, so “Ctrl+U” and let’s deal with it together.

The files ftypes.css and ftypes.js include description of items for dataview. You can also find them in this demo. Data for dataview are included in docs.xml file, imgs directory contains icons for the components (toolbar, sidebar and files types).

Now we proceed to the needed code which we can find in toolbar_segmented.js file. To provide you the ability to easily use this feature, we moved its code to a separate file-extension of toolbar so you need just follow simple steps to include it in your app:

1) Include the file mentioned above into the page (after dhtmlx.js or after dhtmlxtoolbar.js)

2) Then use myToolbar.addSegmented(groupName, ids, selected) method. Let’s review these parameters in detail:

– groupName – name for group of buttons
– ids – array with ids of the buttons that should be included in the group. Within one group with the name groupName only one button (specified in ids) can be pressed.
– selected – id of the buton which will be pressed by default (otherwise the 1st button from ids list will be pressed).

Note: the buttons should have buttonTwoState type.

Additionally we created onSegmentedChange event which fires when a user changes the status of the button:

myToolbar.attachEvent(“onSegmentedChange”, function(groupName, buttonId, buttonState){})

– groupName – name for group of buttons
– buttonId – pressed button id
– buttonStatetrue for the pressed button, false for the button that was pressed and then automatically unpressed

Now let’s look at the example:

1) At first we init toolbar

var myToolbar = mySidebar.items("documents").attachToolbar({
items: [
        {id: "open", type: "button", img: "open.gif"},
        {id: "copy", type: "button", img: "copy.gif"},
        {type: "separator"},
        {id: "ftiles", type: "buttonTwoState", img: "large.gif"},
        {id: "ficons", type: "buttonTwoState", img: "medium.gif"},
        {id: "flabels", type: "buttonTwoState", img: "small.gif"}
    ]
});

2) Then we add segmentedButton

myToolbar.addSegmented("mode", ["ftiles","ficons","flabels"], "ficons");

3) The next step is to attach the event

myToolbar.attachEvent("onSegmentedChange", function(group, id, state){
    if (state == true && group == "mode") {
        myDataView.define("type", id);
    }
});

All the files mentioned above are included in the demo. You can also contact our support and request for the demo in .zip.

Comments

  1. Brian May 31, 2015 at 1:29 am

    This works great. Just found a place to use it. Very easy, very nice!

    • Brian May 31, 2015 at 6:14 pm

      How do you change the state programmatically? Looks like what’s working is to call it again passing in the selected id:

      myToolbar.addSegmented(“mode”, [“ftiles”,”ficons”,”flabels”], “flabels”);

      Hope this is ok. I tried myToolbar.setItemState(“flabels”, true); this keeps the button always depressed.

      • Ivan (DHTMLX team) June 1, 2015 at 12:51 pm

        Hi Brian, we’ve updated the demo, new functionality was added in toolbar_segmented.js file, just clear you cache, reload demo http://apps.dhtmlx.com/demos/segmented_button/ and try in console myToolbar.setPressed(“mode”, “ftiles”).

        And thank you a lot for your feedback!

Leave a Reply