kendo switch button in asp.net mvc

Question

I have a kendo switch button, like this:

<div class="col-md-2 form-group">
    <input id="euro-switch" aria-label="euro Switch" />
</div>

and this is the jquery:

$("#euro-switch").kendoMobileSwitch({
    onLabel: "€",
    offLabel: "%",
    change: function (e) {
        $('kendoNumericTextBox').value                    
    }
});

and I have a numerictextbox:

<div class="col-md-2 form-group">
        @(Html.Kendo().NumericTextBox()
            .Name("SignalThreshold")
            .Value(0)
            .Step(10)
            .Min(0)
            .Events(e => e.Change("FilterThresholdChange"))
            .Format("'€' ##.00")
        )
</div>

Now I want to toggle between euro and percent so that you will see euro sign (€) or % sign in the numerictextbox.

How can I do that?

Thank you

oke, I have it now like this:

 $("#euro-switch").kendoMobileSwitch({


            onLabel: "€",
            offLabel: "%",
            change: function (e) {

                var label = e.sender.value() ? e.sender.options.onLabel : e.sender.options.offLabel.toString();
                var inpbox = $('#SignalThreshold').data("kendoNumericTextBox");
                console.log(inpbox)
                inpbox.setOptions(
                    {
                        format: "\\" + label + "\\ #",
                        decimals: 3
                    });
                inpbox.value(inpbox.value());
            }

        });


        $("#SignalThreshold").kendoNumericTextBox({
            format: "\\%\\ #",
            decimals: 3,
            value: 1

        });

and this is my kendo numerictextbox:

 @(Html.Kendo().NumericTextBox()
                                    .Name("SignalThreshold")
                                    .Value(0)
                                    .Step(10)
                                    .Min(0)
                                    .Events(e => e.Change("FilterThresholdChange"))
                                    .Format("'€' ##.00")
        )

But this doesn't work.

Answer 1

Paritosh's example isn't fully functional. So here's how I would do it.

 $("#euro-switch").kendoMobileSwitch({
     onLabel: "€",
     offLabel: "%",
     change: function(e) {

         var label = e.sender.value() ? e.sender.options.onLabel : e.sender.options.offLabel.toString();

         var inpbox = $('#currency').data("kendoNumericTextBox");

         inpbox.setOptions({
             format: "\\" + label + "\\ #",
             decimals: 3
         });

         inpbox.value(inpbox.value());
     }

 });


 $("#currency").kendoNumericTextBox({
     format: "\\%\\ #",
     decimals: 3
 });

What it does is: escapes the % so the numeric textbox doesn't do arithmetic operations. The reason for setting value as itself is to force kendo to update the numeric textbox with new filter (there isn't functionality out of the box to do it.).

See my simple Dojo for functional example.

Edit:

Because you generate the numeric textbox using MVC, you need to remove the following code from the script:

 $("#currency").kendoNumericTextBox({
     format: "\\%\\ #",
     decimals: 3
 });

The following line must be changed too:

var inpbox = $('#currency').data("kendoNumericTextBox");

The ID must match your MVC name for the widget.

Answer 2

I understand you are having issue updating format for the kendoNumericTextBox.

You can update it with below command

$("#abc").data('kendoNumericTextBox').setOptions({format : '__', decimals: __ });

Have a look at this dojo I've created.

    $("#mail-switch").kendoMobileSwitch({
        onLabel: "%",
        offLabel: "€",
        change: changed
    });
    $("#abc").kendoNumericTextBox({
      format: "€ ##"
    });

  function changed(e){
    var control = $("#abc").data('kendoNumericTextBox');
    if(e.checked) control.setOptions({format : '##.## %', decimals: 2 });
    else control.setOptions({format : '$ ##', decimals: 0 });
    console.log(control.options.format);
  }

More reference: Change format and decimals at runtime

PS: this is not the end solution for your scenario, but hope you get some help from this