How to disable one or more "segments" of a Segmented control

Webix JS
1

Hello,
Could someone tell me whether it is possible to disable a segment of a segmented control? I’m using a segmented control to act as a series of buttons to control a multiview. I would like to be able to enable and disable the discrete “segments” (buttons) but cannot work out how. Any suggestions would be very welcome
Thanks - SrvrSide

2

Hello,

“segmented” control does not allow to disable options. But you can change the structure of this button:

http://webix.com/snippet/74f9eb6c

3

Thanks very much Maria, sadly that does not align with the UI design.
Thanks anyway - SrvrSide

4

You can try to set onBeforeTabClick event handler to block option selection and apply css rules for the html element of the “segmented” button.

http://webix.com/snippet/4335cfb7

5

Thanks Maria, that’s brilliant - I’ll try and implement it

  • SrvrSide
6

Maria, if I have half a dozen “buttons” in a “segmented” button, how do i get them to have discrete “.webix_segment_X” assignments, where X is the index? Even using the example you kindly provided the first “segment” is index 0 the last segment is index N and all between (be it one as in your original example or three in a simple expansion) have index 1.
I altered your example to have five segments and “disable(1)” then disabled the middle three segments… Did I misunderstand the required approach?
Thanks - SrvrSide

7

You can try to use nth-child() css selector:

http://webix.com/snippet/48421b2f

8

Thank you Maria,
I implemented a test based precisely on your code and get the following error (on the line “disabledOptions[id] = 1;”)
“Uncaught TypeError: Cannot set property ‘xxxxxx’ of undefined”
Where xxxxx is the ‘id’ of the segment (and linked multiview frame).
Can you offer any insight? The code is identical to yours
Thanks - SrvrSide

9

My demo uses disabledOptions object. Please check whether it is defined in your implementation.

10

Hello Maria, Thank you for the reply. I had the line
var disabledOptions = {};
above the relevant code, but moving it to the very top of the script resolved the issue. Am I correct in the understanding that the line
return !disabledOptions[id];
is attempting to “cancel” the default action of the click on the segment?
Thank you again - SrvrSide

11

Hello,

Yes, you are correct.