Correct Usage of kendoToggleButton

[George]

So I wanted to know if there was an easier way to find the current state of the toggle button. I used a global variable defined in the scope of the .js file I am using.

var isSelected = false.

Then for extra safety and really embarrassingly enough we just kind of blindly follow this pattern, we put this variable in a kendo.observable:

function initControls() {
//More initialization stuff before...
    _view = kendo.observable({

        intervalList: _intervalList,
        layoutDataList: _layoutDataList,
          noCustoms: _noCustoms,
        isSelected: _isSelected, //<--------[ADDED]
   })
)
//More initialization code after

}

then in the initialization:

    //Percent button:
    $("#my-toggle-btn").kendoToggleButton({
        icon: "null", // using Font Awesome for an icon.
        enable: true,
        selected: false,
        togglable: true,
        click: function () {
            // on the click change current state of the percentSelected:
            _view.set("isSelected", !_view.get("isSelected"));
            let perSelected = _view.get("isSelected");
            console.log("percentSelected toggled to: " + perSelected);
            if (perSelected) {
                console.log("...button should be BLUE.");
            } else {
                console.log("...button should be GREY.");
            }
        }

    });

And then depending on the Boolean value of the _view observable isSelected it controls whether a mathematical operation is a regular number or a percentage of the number being operated on (multiply, add, subtract):

    var number = $("#numberInput").data("kendoNumericTextBox").value();
    // Detect if percentage toggle is active -- GREY not selected and BLUE == selected.
    var isPercent = _view.get("isSelected");

    //... later in the code this is evaluated like:

    //If the percent toggle button in true/BLUE then convert.
     //Ergo...modify to make the number in the input a percent value 30 is percent then it needs to be converted to .30.
                    var modifier = isPercent ? val * (number / 100) : number;//ternary operator.

    // then later in the code the percentage value or the non-percentage value is inserted into a simple 
    // mathematical formula that loops through an array of numeric values...

My question is ... is there a more direct way to capturing the current state of the button?. I tried selected and selected and my understanding is it doesn't capture the current state (true or false of the button)...so after that I hacked it like this.Maybe this is NOT a good use for the toggle button.(?)..but damn it I wanted a toggle button.

Again the toggle button in question simple allows the user to convert an numeric input to a percentage value of a number operated on (add, subtract, multiply)... ergo  secondary color = BLUE, then number is a percent, if its the initial or color = GRAY then the number is just it's face value. I couldn't capture any examples of  a real use case. I later found the onToggle event handler and yeah you can read the current value thorugh that...but thought it was overkill...still I am confused on how to use it to flag options...or correct usage.

[Jay]

I see three ways to do it.

1. Set a flag in the toggle event handler, using the e.checked property
2. When the toggle is on, it gets a k-selected class added to it, so you can check for its presence or absence.
3. Delve into the internals and look at the _selected flag.

Here is a dojo demonstrating these approaches.

[Neli]

Hi,

Thank you for the suggested approach it is indeed a suitable one. The toggle event can be utilizied and it provides the current state directly via e.checked:

$("#my-toggle-btn").kendoToggleButton({
    togglable: true,
    toggle: function(e) {
        // e.checked: true if selected, false if not
        console.log("ToggleButton is now selected:", e.checked);
        // You can use e.checked directly in your logic
    }
});

Regards,

Neli