Kendo UI 将 DropDownList 添加到 Grid (MVC)

Posted 2023-04-13

【中文标题】Kendo UI 将 DropDownList 添加到 Grid (MVC)

【英文标题】：Kendo UI add DropDownList into Grid (MVC)

【发布时间】：2013-09-17 02:06:19

【问题描述】：

我正在绑定到一个 Grid 类（UserId、FirstName、LastName、Choice）。 有谁知道如何将此代码放在 MVC 4 中剑道网格的列（选择）中：

@(html.Kendo().DropDownList()
      .Name("Test")
      .DataTextField("Text")
      .DataValueField("Value")
      .Events(e => e.Change("change"))
      .BindTo(new List<SelectListItem>()
      
          new SelectListItem()
          
              Text = "Option1",
              Value = "1"
          ,
          new SelectListItem()
          
              Text = "Option2",
              Value = "2"
          
      ))
<script>
    function change() 
        var value = $("#Choice").val();
    
</script>

....

columns.Bound(p=> p.FirsName);
columns.Bound(p => p.LastName);
//How to Bind Choice???

我还需要后端代码中的文本（“Option1”或“Option2”）。 有什么解决办法吗？

已编辑

我完全按照他们说的做了：

查看：

 columns.Bound(p => p.Choice).ClientTemplate("#=Choice#");

控制器：

public ActionResult Index()
    
        PopulateCategories();
        return View();
    
    

.....

 private void PopulateCategories()
        
            var dataContext = new TestDB();
            var categories = dataContext.Peoples
                .Select(c => new People()
                
                    ChoiceID = c.ChoiceID,
                    Choice = c.Choice
                )
                .OrderBy(e => e.Choice);
            ViewData["categories"] = categories;
            ViewData["defaultCategory"] = categories.First();
               
    

但这不起作用...

【问题讨论】：

你能给我们看看你的控制器吗？此外，如果这通常是 MVC4，您将 Option1 Text 来自后面的代码。然后通过 @Model

***.com/questions/9559269/…

the kendo sample is not compelete!your answer is in link

【参考方案1】：

您只需要查看他们提供的文档：http://demos.kendoui.com/web/grid/editing-custom.html

这是一个自定义网格，因此也可能涉及一些 JS 更改。您正在从您的模型中绑定，而 kendo.js 将负责其余部分。

@(Html.Kendo().Grid<Kendo.Mvc.Examples.Models.ClientProductViewModel>()
.Name("grid")
.Columns(columns =>

    columns.Bound(p => p.ProductName);
    columns.Bound(p => p.Category).ClientTemplate("#=Category.CategoryName#").Width(160);
    columns.Bound(p => p.UnitPrice).Width(120);
    columns.Command(command => command.Destroy()).Width(90);
)
.ToolBar(toolBar =>
    
        toolBar.Create();
        toolBar.Save();
    )
.Editable(editable => editable.Mode(GridEditMode.InCell))
.Pageable()
.Sortable()
.Scrollable()
.HtmlAttributes(new  style = "height:430px;" )
.DataSource(dataSource => dataSource
    .Ajax()
    .Batch(true)
    .ServerOperation(false)
    .Events(events => events.Error("error_handler"))
    .Model(model =>
    
        model.Id(p => p.ProductID);
        model.Field(p => p.ProductID).Editable(false);
        model.Field(p => p.Category).DefaultValue(
            ViewData["defaultCategory"] as Kendo.Mvc.Examples.Models.ClientCategoryViewModel);
    )
    .PageSize(20)
    .Read(read => read.Action("EditingCustom_Read", "Grid"))
    .Create(create => create.Action("EditingCustom_Create", "Grid"))
    .Update(update => update.Action("EditingCustom_Update", "Grid"))        
    .Destroy(destroy => destroy.Action("EditingCustom_Destroy", "Grid"))
)
)

您的 csHTML 文件需要绑定触发器上的输入和回传，无论您在做什么。

【讨论】：

我在阅读发布的演示时对自己说了这句话。 ).ClientTemplate("#=Category.CategoryName#"). 定义在哪里。我想它指向一个独立的剑道 ddl，或者我完全错了。只是没有看到那一点代码如何呈现 ddl

代码不会渲染 dll，它将使用 razor 语法和 iis 来根据需要进行绑定。自从我处理剃须刀以来已经有一段时间了，但我会回去仔细检查以确保！如果我没记错的话，我记得 kendo 对 mvc 不是最友好的！

通过查看文档和 HTML 部分，似乎更清楚发生了什么。我知道您的代码直接来自文档，而 ClientTemplate("#=Category.CategoryName#") 给出的代码对我来说毫无意义。

嗯，逻辑选项是 HTML 表单中的参数将是这个 Category.CategoryName 输入，通过 HTTP.POST 值从表单绑定到后端，此时我正在使用 nancy 服务器并拥有很多更多使用通过 ajax 绑定到 C# 后端的发布值（以使其尽可能严格地键入），但这将是合乎逻辑的结果。再次需要仔细检查！

@Pogrindis - 我正在处理同样的问题，除了我想在网格渲染后更新下拉列表的项目列表。当前下拉列表是在渲染网格时定义的。模板只加载一次。那么如何在网格渲染后更新这个列表或模板呢？

【参考方案2】：

我认为这会帮助你实现你所需要的 -->>

http://www.kendoui.com/forums/kendo-ui-web/grid/want-to-add-dropdownlist-in-my-grid.aspx