为 Telerik MVC Grid 的每一行初始化 Combobox

Question

我正在使用两个 Telerik MVC 网格，并按照以下方式将一个网格的选定值添加到另一个网格

        var dataItem = this.dataItem($(e.currentTarget).closest("tr")); // This is selected row of Grid One 

// Now i am going to add this to second Grid 
          var grid = $("#SecondGrid").data("kendoGrid");
                     grid.dataSource.add(dataItem);

我想为第二个网格的每一行显示组合框。我已成功添加并在 DataBound 上执行 JS 函数，但这会将组合框添加到仅第一行

// Hows second Grid looking 

@(Html.Kendo().Grid<MyModel>()
                      .Name("SecondGrid")
                      .Columns(columns =>
                      {
                          columns.Bound(p => p.Id).Hidden(true);
                          columns.Bound(p => p.ForeName).Title("First Name");
                          columns.Bound(p => p.SurName).Title("Last Name");
                          columns.Bound(p => p.Dept);
                          columns.Bound(p => p.Dob).Format("{0:dd/mm/yyyy}");
                          columns.Bound(p => p.Relationshiptype).Title("Relationship").Template(@<text></text>).HtmlAttributes(new { @class = "templateCell" }).ClientTemplate(

                                                                            Html.Kendo().ComboBox()
                                                                                      .Name("Relationshiptype")
                                                                                      .Placeholder("Select relationship...")
                                                                                      .DataTextField("Text")
                                                                                      .DataValueField("Value")
                                                                                      .BindTo(new List<SelectListItem>() {
                                                                                          new SelectListItem() {
                                                                                            Text = "Husband", Value = "1"
                                                                                          },
                                                                                          new SelectListItem() {
                                                                                            Text = "Wife", Value = "2"
                                                                                          },
                                                                                          new SelectListItem() {
                                                                                            Text = "Other relative", Value = "3"
                                                                                          },
                                                                                          new SelectListItem() {
                                                                                            Text = "Other non relative ", Value = "4"
                                                                                          }
                                                                                      }).ToClientTemplate().ToString());

                          columns.Command(command => command.Custom("Deselect").Click("removePupil")).Width(180);
                         })
                                             .Events(ev => ev.DataBound("initCombo"))



                )




// Here is my InitCombo function 

 function initCombo(e) {
    $(".templateCell").each(function () {
        eval($(this).children("script").last().html());
    });
}

请帮我解决这个问题。其次，我将如何遍历并获取组合的选定值以及其他行值。

谢谢

Answer 1

我建议您只使用模板方法创建模板。就像在 Kendo 文档中一样—How to Customize the Way Properties Are Displayed in Grid-Bound Column.

接下来，请注意您应该为页面上创建的每个小部件使用唯一的 ID。因此，每一行的名称值应该是唯一的。通过将其分配给字符串，呈现的 DOM 个元素将具有相同的 ID。

论坛主题中提供了更详细的回复和示例，其中提出了相同的问题—Initialize Combobox for each row of Telerik MVC Grid