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

时间:2016-04-22 11:57:26

标签: telerik telerik-grid telerik-mvc

我正在使用两个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());
    });
}

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

由于

1 个答案:

答案 0 :(得分:1)

我建议您仅使用Template方法创建模板。与Kendo文档中一样 - How to Customize the Way Properties Are Displayed in Grid-Bound Column

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

提供示例的更详细回复可在论坛帖子中找到,其中提出相同的问题 - Initialize Combobox for each row of Telerik MVC Grid