kendo 网格控件中的 DropDownList（通过 ClientTemplate）

Posted 2023-05-07

【中文标题】kendo 网格控件中的 DropDownList（通过 ClientTemplate）

【英文标题】：DropDownList in kendo grid control (by ClientTemplate)

【发布时间】：2014-06-06 17:27:27

【问题描述】：

我需要像对待 EditorTemplateName 一样对待 ClientTemplate。 所以我想做这样的事情：

模板：

@(
     html.Kendo().DropDownListFor(m => m)        
            .BindTo((SelectList)ViewData["ExamResults"])
                .Template("#:Value# #:Text#")
                .DataTextField("Text")
                .DataValueField("Value")
            .Events(e => e
                .Change("examResultOnDropDownChange")
                .Open("examResultOnOpen"))
 )

并将列添加到网格中：.EditorTemplateName("ExamResultGridForeignKey")

但我想：.ClientTemplate("ExamResultGridForeignKey") 或类似的东西（但它不起作用）：

.ClientTemplate(
                Html.Kendo()
                    .DropDownList()
                    .Name("#=Id#")
                    .BindTo((SelectList)ViewData["ExamResults"])
                    .Template("#:Value# #:Text#")
                    .DataTextField("Text")
                    .DataValueField("Value")
 )

我需要在不可编辑模式下（当我们显示值时）使用 DropDownList 制作字段看起来像可编辑的 DropDownList。

【参考方案1】：

这就是我的下拉列表的呈现方式。 IsInForecast 是一个布尔字段。 If else 所做的只是根据 IsInForecast 属性的值选择正确的 ddl 值（真/假）。您必须根据自己的需要对其进行调整。

columns.Bound(m => m.IsInForecast).Title("Is Forecasted").ClientTemplate(

   "# if (IsInForecast == true)  #" +

                          "<select id='#= OrderId #' onchange=save('#= OrderId #'); style='Width: 80px; color: 'navy' > " +
                            "<option id='yes' selected value='1'>Yes</option>" +
                            "<option id='no' value='0'>No</option>" +

                            "</select>" +
                     "#  else  #" +
                          "<select id='#= OrderId #' onchange=save('#= OrderId #'); style='Width: 80px; color: 'navy' > " +
                            "<option id='yes'  value='1'>Yes</option>" +
                            "<option id='no' selected value='0'>No</option>" +
                         "#  #" 
            );             

您在哪里看到 "<select id='#= OrderId #' 将 ddl ID 字段设置为，以便您知道您正在编辑哪个下拉列表/记录。 onchange=save('#= OrderId #'); 正在调用一个将模型属性 OrderId 传递给方法的 JS 函数。要获得您刚刚更改的正确 ddl 的选定值，您可以这样做。

save(orderId) function
  var ddl = # + orderId;
  var getSelectedValue = $(ddl).val();
  

这将呈现标准 DDL。您可以在此处查看文档

 http://demos.telerik.com/kendo-ui/web/grid/editing-custom.html

【讨论】：

昨天我尝试对 GridColumnFactory 上的通用参数进行一些扩展方法。但是我遇到了一个错误（Kendo 无法解析他们拥有的 MVVM，如果我尝试使用该模板创建 Name 参数'#=Id#'）...

所以现在我认为你的方式是唯一的。不生成JS，而是手写。