在 Kendo Grid 中添加下拉菜单

Posted 2023-05-07

【中文标题】在 Kendo Grid 中添加下拉菜单

【英文标题】：Adding a Dropdown inside Kendo Grid

【发布时间】：2014-03-28 15:38:25

【问题描述】：

我正在尝试在剑道网格中添加一个下拉菜单，但它显示一个文本框

 @(html.Kendo().Grid((IEnumerable<Doc.Web.Models.Vendor.DocumentsDetails>)Model.documents_lst)
    .Name("grid").Scrollable()

    .Columns(columns =>
    

        columns.Bound(o => o.DocumentRevisionID).Visible(false);
        columns.Bound(o => o.Documentnumber).Title("Document #").Width(150);
        columns.Bound(o => o.Revision).Title("Revision").Width(80);
        columns.Bound(o => o.RevisionDate).Format("0:dd/MM/yyyy").Title("Rev Date").Width(85);
        columns.Bound(o => o.RevisionStatus).Title("Revision</br> Status").Width(100);
        columns.Bound(s => s.DocNumberPurpose).ClientTemplate((@Html.Kendo().DropDownList()
     .BindTo((System.Collections.IEnumerable)ViewData["Purpose"])
      .Name("DocNumberPurpose")
       .DataTextField("Text")
          .DataValueField("Value")
          .ToClientTemplate()).ToHtmlString());

    )
    .DataSource(dataSource => dataSource
        .Ajax()
        .Model(model => model.Id(o => o.DocumentRevisionID))
        .Model(model=>model.Field(o=>o.DocNumberPurpose).Editable(false))
    )

    .Events(ev=>ev.DataBound("onGridDataBound"))
    .Pageable()
    .Sortable()
    .Filterable()
    .DataSource(dataSource => dataSource
        .Ajax()
        .PageSize(5)
        .Events(events => events.Error("error_handler"))
        .Model(model => model.Id(p => p.DocumentRevisionID))
        .Read(read => read.Action("EditingInline_Read", "DesignCoverSheet").Data("additionalInfo"))

    )

     )

 <script>

         function onGridDataBound(e) 
             $('#grid script').appendTo(document.body);
         

 </script>  

【问题讨论】：

问题不太清楚，能不能多用文字解释一下。

@NitinRawat 嗨！我需要的是在网格内添加一个 DropDownList 。我认为不可能使用 ForeignKey 列，因为 DropDown 的 DataSet 是完全独立的，与 Grid 数据源没有关系

@chamara 请确保所需的脚本文件存在且顺序正确。

【参考方案1】：

实际上你很接近：

columns.Bound(property => property.neatProperty).Width(38).EditorTemplateName("neatPropertyDropDownList").Title("NeatProperty")

然后在一个名为“neatPropertyDropDownList.cshtml”的单独视图中

@using System.Collections;

@(Html.Kendo().DropDownList()
            .Name("NeatProperty")       
            .DataTextField("Value")
            .DataValueField("Text")
            .BindTo("don't forget to bind!")
 )

【讨论】：

这不会映射视图模型下拉列表的选定值。

【参考方案2】：

查看this article 以获取有关您正在尝试做什么的详细示例，特别是在第 3 步中

第 3 步 - 嵌入 Kendo 下拉列表

基本上你可以通过以下方式做到这一点：

在 Kendo 网格内，模型的属性外键必须链接到接受模板名称的 EditorTemplateName。举个例子：

 columns.Bound(e => e.CompanyId).EditorTemplateName("CompaniesList").Title("Company").ClientTemplate("#:CompanyName#");

以上示例中的模板名称是“CompaniesList”，它将是 EditorTemplates 文件夹中的一个 cshtml 视图文件。

根据上面的文章：

EditorTemplateName 向网格指定当处于创建或编辑模式时，模板应放置在名为“CompaniesList”的数据文件中，该文件位于以 EditorTemplates 目录名称的目录中。因此，后续步骤涉及创建一个名为“EditorTemplates”的文件夹，并在其中放置一个名为“CompaniesList”的空视图。代码位“ClientTemplate(“#:CompanyName#”)”表示当显示处于查看模式时，（即不创建或编辑）CompanyName 必须显示（在本例中为“Microsoft”）。完成后，剩下要做的就是创建将在视图中使用的下拉列表。

创建“CompaniesList”编辑器模板文件后，在其中定义 Kendo 下拉列表，如下所示：

@using System.Collections

@model System.Int32

@(Html.Kendo().DropDownList()

.BindTo((IEnumerable)ViewBag.Companies)

.OptionLabel("- Select Company - ")

.DataValueField("Id")

.DataTextField("Name")

.Name("CompanyId")

)

请注意，下拉名称必须与网格中的列属性“CompanyId”完全相同

【参考方案3】：

您可以查看 Kendo Grid ForeignKey Column 概念。它可以用作

columns.ForeignKey(p => p.CategoryID, (System.Collections.IEnumerable)ViewData["categories"], "CategoryID", "CategoryName").Title("Category").Width(150);

详情可以在这里找到http://demos.telerik.com/kendo-ui/web/grid/foreignkeycolumn.html