在asp.net MVC剑道开关按钮(kendo switch button in asp.net

我有一个剑道开关按钮，如下所示：

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

这是jQuery的：

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

我有一个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>

现在我想欧元和百分之之间进行切换，这样您将看到欧元符号（€）或％符号在numerictextbox。

我怎样才能做到这一点？

谢谢

奥凯，我现在有这样的：

 $("#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

        });

这是我的剑道numerictextbox：

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

但是，这是行不通的。

Answer 1:

Paritosh的例子是没有充分发挥作用。 因此，这里是我会怎么做。

 $("#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
 });

它的作用是：转义％这样的数字文本框不会做算术运算。 之所以设定值本身是迫使剑道更新与新的过滤器数字文本框（没有的功能开箱做到这一点的。）。

见我简单的Dojo功能性的例子。

编辑：

因为你使用MVC生成数字文本框，你需要从脚本删除下面的代码：

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

以下线必须变过：

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

ID必须为小部件匹配您的MVC的名字。

Answer 2:

我明白你是指有问题的更新格式kendoNumericTextBox 。

你可以用下面的命令更新

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

看看这个道场我创建。

    $("#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);
  }

更多参考： 更改格式和小数在运行时

PS：这不是您的方案的最终解决方案，但希望您能从这得到一些帮助

文章来源: kendo switch button in asp.net mvc