Initialize Combobox for each row of Telerik MVC Grid

Question

I am using two Telerik MVC grids and adding selected value of one Grid to other in following way

        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);

I want to display combobox for each row of second grid. I have successfully added that and executing JS function on DataBound, but this adds combo box to only first row

// 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());
    });
}

Please help me sort this issue. Secondly how would i be able to traverse and get selected value of combo along with other row values .

Thanks

Answer 1

I suggest you creating template only by using the Template method. Like in Kendo documentation—How to Customize the Way Properties Are Displayed in Grid-Bound Column.

Next, note that you should use a unique ID for each widget created on the page. Thus, the Name value should be unique for each row. By assigning it to a string, the DOM elements rendered will have the same ID.

More detailed response with example provided is available in a forum thread, where the same questions is asked—Initialize Combobox for each row of Telerik MVC Grid