kendo asp.net mvc 中的切换按钮

Question

我有一个kendo开关按钮，像这样：

<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                    
    }
});

我有一个数字文本框：

<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>

现在我想在欧元和百分比之间切换，这样您就会在数字文本框中看到欧元符号 (€) 或 % 符号。

我该怎么做？

谢谢

好的，我现在是这样的：

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

        });

这是我的 kendo 数字文本框：

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

但这行不通。

Answer 1

我了解到您在更新 kendoNumericTextBox 的格式时遇到问题。

您可以使用以下命令更新它

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

看看我创建的这个dojo。

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

更多参考：Change format and decimals at runtime

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

Answer 2

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
 });

它的作用是：对 % 进行转义，这样数字文本框就不会进行算术运算。将 value 设置为本身的原因是强制 kendo 使用新过滤器更新数字文本框（没有现成的功能可以做到这一点。）。

请参阅我的简单 Dojo 功能示例。

编辑：

由于您使用 MVC 生成数字文本框，因此需要从脚本中删除以下代码：

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

下面一行也必须更改：

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

ID 必须与小部件的 MVC 名称匹配。

kendo asp.net mvc 中的切换按钮

kendo switch button in asp.net mvc

c#

kendo-ui

kendo-asp.net-mvc