访问 Kendo UI MVC RadioButtonFor Helper 的 JavaScript 控件答案

【问题标题】：Accessing the JavaScript Control for a Kendo UI MVC RadioButtonFor Helper访问 Kendo UI MVC RadioButtonFor Helper 的 JavaScript 控件
【发布时间】：2017-11-17 20:16:37
【问题描述】：

我正在为 MVC 使用 KendoUI。我使用 RadioButtonFor 助手创建了一些 RadioButtons。所有 KendoUI 都有一个 javascript 控制器，用于管理您可以访问的每个控件的客户端方面。

例如：MVC 网格助手

// MVC HELPER
@(Html.Kendo().Grid<SomeDataItem>().Name("SomeGrid") ...other stuff... )

// Grid
var control = $('#SomeGrid')).data('kendoGrid')

...now I can use "control" to set events or do othjer things for the Grid.

我需要：
我需要为 RadioButton 控件客户端设置一些事件和其他内容。

// MVC HELPER
@(Html.Kendo().RadioButtonFor(model => model.Entity.Meter.FlowTypeId)
              .Label("Initial")
              .Value(1))
@(Html.Kendo().RadioButtonFor(model => model.Entity.Meter.FlowTypeId)
              .Label("Reconnect/Resumed")
              .Value(2))

问题：
如何访问这些单选按钮的“Kendo UI Control”？

正常表示不工作： $('#Entity_Meter_FlowTypeId_1').data() //<-- empty

...这通常会给你一个 DATA 内容列表。

【问题讨论】：

要访问 Kendo 客户端 API，您只需使用 .data('kendo{Control Type}'); 其中 {Control Type} 是控件的类型。因此，对于 RadioButton，它将是 .data('kendoRadioButton');。但是，在您的尝试中，我认为您的控件的 id 可能是错误的 - 我没有看到 ID 为 #Entity_Meter_FlowTypeId_1.... 您有 2 个 ID 为 #Entity_Meter_FlowTypeId 的控件看起来像
您可能没有注意到问题底部的（现在）粗体区域
是的，我确实阅读并看到了这一点，并且我在告诉您为什么它无法帮助您隔离问题。你知道你的控件的 id 是什么吗？
你可以 F12 并选择按钮的容器以获得线索吗？

标签： javascript model-view-controller kendo-ui

【解决方案1】：

Kendo 没有用于单选按钮的客户端 API。

这是因为它只是一个带有标签的单选按钮，因此除了原生 javascript 事件之外，没有可以绑定的自定义事件。您可以使用 javascript/jquery 绑定到这些事件，因此将这些相同的事件添加到 kendo 对象没有任何意义。

设置属性也受到限制（text/checked/?），这些可以再次使用 vanilla JS 轻松处理。

您唯一可以做的另一件事是设置单选按钮的样式，如the Telerik site 所述。

【讨论】：

经过这么多的摆弄......这就是我的想法。谢谢

【解决方案2】：

如前所述，您可以为此使用 JavaScript/jQuery。

为了让后代更具体一点，这里有一个示例，将您的 Kendo 单选按钮与点击事件联系起来：

$("#Entity_Meter_FlowTypeId").on("click", function () {
    // do something
});

这是一个关于如何选择（检查）所述单选按钮的示例；这也将取消选择单选按钮组中的任何其他选定选项：

$("#Entity_Meter_FlowTypeId").prop('checked', true);

【讨论】：