Initialize Combobox for each row of Telerik MVC Grid

2 posts, 0 answers
  1. Saadat
    Saadat avatar
    2 posts
    Member since:
    Oct 2015

    Posted 22 Apr Link to this post

    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

  2. Ianko
    Admin
    Ianko avatar
    1535 posts

    Posted 26 Apr Link to this post

    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
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  3. UI for ASP.NET MVC is VS 2017 Ready
Back to Top