Initialize Combobox for each row of Telerik MVC Grid

[Darren]

I am adding selected row of a grid to another . My issue is my Grid has a combo box which is being initialized for first row only. Detail is in following link.

 

http://stackoverflow.com/questions/36793242/initialize-combobox-for-each-row-of-telerik-mvc-grid

[Ianko]

Hi Saadat,

I am not sure why the template is implemented in a such complex way. You can simply initialize a combo box just by using the Template helper. 

The exact issue—combobox is rendered only for the first row—is because each combobox rendered has the same Name (Relationshiptype). That renders DOM elements with the same ID. Thus, only the first one found is assigned to KendoComboBox and initialized. 

To resolve, make sure that the Name value (ID of the DOM element) is indeed unique. This example shows an example for that by using different, custom model, but still you can follow that code and implement similar approach on your end:

@(Html.Kendo().Grid<CustomModel>()
    .Name("SecondGrid")
    .Columns(columns =>
    {
    columns.Bound(p => p.ID).Hidden(true);
    columns.Bound(p => p.FieldOne).Title("First Name");
    columns.Bound(p => p.FieldTwo).Title("Last Name");
    columns.Bound(p => p.FieldThree).Title("Relationship")
        .Template(@<text>
        @(Html.Kendo().ComboBox()
            .Name("Relationshiptype" + @item.ID)
            .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"
                    }
                    }))
        </text>);
        columns.Command(command => command.Custom("Deselect").Click("removePupil")).Width(180);
    })
                            .Events(ev => ev.DataBound("initCombo"))


    .BindTo(new List<CustomModel>() {
        new CustomModel() { ID=1, FieldOne=1, FieldTwo=2, FieldThree=3 },
        new CustomModel() { ID=12, FieldOne=12, FieldTwo=22, FieldThree=32 }
    })
)

Regards,
Ianko
Telerik