![\"Segmented](\"https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2015\/04\/toolbar-segmented.png\")
<\/p>\n
\nOn contrast to our previous tips, we have more code this time, so \u201cCtrl+U\u201d and let’s deal with it together.<\/p>\n
The files ftypes.css<\/strong> and ftypes.js<\/strong> include description of items for dataview. Data for dataview are included in docs.xml<\/strong> file, imgs<\/strong> directory contains icons for the components (toolbar, sidebar and files types).<\/p>\n Now we proceed to the needed code which we can find in toolbar_segmented.js<\/strong> 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:<\/p>\n 1) Include the file mentioned above into the page (after dhtmlx.js or after dhtmlxtoolbar.js) <\/p>\n 2) Then use myToolbar.addSegmented(groupName, ids, selected) method. Let\u2019s review these parameters in detail:<\/p>\n – groupName<\/strong> – name for group of buttons Note:<\/strong> the buttons should have buttonTwoState type.<\/p>\n Additionally we created onSegmentedChange<\/em> event which fires when a user changes the status of the button:<\/p>\n myToolbar.attachEvent(“onSegmentedChange”, function(groupName, buttonId, buttonState){})<\/p>\n – groupName<\/strong> – name for group of buttons Now let’s look at the example:<\/p>\n 1) At first we init toolbar<\/p>\n 2) Then we add segmentedButton<\/p>\n 3) The next step is to attach the event<\/p>\n You can also contact our support and request for the demo in .zip.<\/p>\n","protected":false},"excerpt":{"rendered":" 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 known as segmented …<\/p>\n","protected":false},"author":2,"featured_media":3302,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[17,71,1,38],"tags":[33,43,14],"class_list":["post-2791","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-posts-for-codeproject-com","category-tutorials","category-uncategorized","category-visible","tag-all-posts","tag-dhtmlx-tips","tag-tips"],"_links":{"self":[{"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/posts\/2791","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/comments?post=2791"}],"version-history":[{"count":1,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/posts\/2791\/revisions"}],"predecessor-version":[{"id":11403,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/posts\/2791\/revisions\/11403"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/media\/3302"}],"wp:attachment":[{"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/media?parent=2791"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/categories?post=2791"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/tags?post=2791"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
\n – ids<\/strong> – 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.
\n – selected<\/strong> – id of the buton which will be pressed by default (otherwise the 1st button from ids list will be pressed).<\/p>\n
\n – buttonId<\/strong> – pressed button id
\n – buttonState<\/strong> – true<\/em> for the pressed button, false<\/em> for the button that was pressed and then automatically unpressed<\/p>\n
\nitems:<\/span> [<\/span>
\n {<\/span>id:<\/span> "open"<\/span>,<\/span> type:<\/span> "button"<\/span>,<\/span> img:<\/span> "open.gif"<\/span>}<\/span>,<\/span>
\n {<\/span>id:<\/span> "copy"<\/span>,<\/span> type:<\/span> "button"<\/span>,<\/span> img:<\/span> "copy.gif"<\/span>}<\/span>,<\/span>
\n {<\/span>type:<\/span> "separator"<\/span>}<\/span>,<\/span>
\n {<\/span>id:<\/span> "ftiles"<\/span>,<\/span> type:<\/span> "buttonTwoState"<\/span>,<\/span> img:<\/span> "large.gif"<\/span>}<\/span>,<\/span>
\n {<\/span>id:<\/span> "ficons"<\/span>,<\/span> type:<\/span> "buttonTwoState"<\/span>,<\/span> img:<\/span> "medium.gif"<\/span>}<\/span>,<\/span>
\n {<\/span>id:<\/span> "flabels"<\/span>,<\/span> type:<\/span> "buttonTwoState"<\/span>,<\/span> img:<\/span> "small.gif"<\/span>}<\/span>
\n ]<\/span>
\n}<\/span>)<\/span>;<\/span><\/div><\/div>\n
\n if<\/span> (<\/span>state ==<\/span> true<\/span> &&<\/span> group ==<\/span> "mode"<\/span>)<\/span> {<\/span>
\n myDataView.define<\/span>(<\/span>"type"<\/span>,<\/span> id)<\/span>;<\/span>
\n }<\/span>
\n}<\/span>)<\/span>;<\/span><\/div><\/div>\n