Recommended approach using Kendo UI widget in Grid Client column template only works for the first row

[Thomas]

I'm using the recommended approach to using Kendo Widgets in a grid Column ClientTemplate from here: https://docs.telerik.com/aspnet-mvc/helpers/grid/faq#how-do-i-use-a-kendo-ui-widget-inside-a-grid-client-column-template

PROBLEM: The DropDownList I am attempting to use only appears for the first row - all other rows simply show a textbox.  In addition, when I attempt to select an item in the DropDownList, I get a select menu, and a textbox above it with the value "0."

 

VIEW:

@(Html.Kendo().Grid(Model.ProjectViewModels)
    .Name("projectsGrid")
    .ToolBar(tools => tools.Create().Text("Add Project"))
    .Editable(editable => editable.Mode(GridEditMode.InCell).CreateAt(GridInsertRowPosition.Bottom))
    .Columns(columns =>
    {
        columns.Bound(p => p.Id).Hidden();
        columns.Bound(a => a.ProjectCategoryTypeId)
            .Title("High Level Category")
            .ClientTemplate(
                Html.Kendo().DropDownList()
                    .Name("ProjectCategoryTypeId")
                    .DataValueField("Value")
                    .DataTextField("Text")
                    .BindTo(Model.ProjectCategoryTypes)
                    .HtmlAttributes(new { @class = "templateCell" })
                    .ToClientTemplate()
                    .ToHtmlString())
            .Sortable(true);



        columns.Command(command => command.Destroy()).Width(100);
    })
    .Events(ev => ev.DataBound("initTemplates"))
    .DataSource(dataSource => dataSource
        .Ajax()
        //.Events(e => e.Change("initTemplates"))
        .Model(model =>
        {
            model.Id(p => p.Id);
            model.Field(p => p.Id).Editable(false);
        })
        .ServerOperation(false)
    )
)

 

SCRIPT:

// this approach works, but only for the first row...
function initTemplates(e) {
    $(".templateCell").each(function () {
        eval($(this).children("script").last().html());
    });
}

[Thomas]

I've attached some screenshots of the issue. 

[Stefan]

Hello, Thomas,

Thank you for the code and the screenshots.

Based on the provided code I can assume that the issue occurs because all of the elements are made with the same Id which is creating a scenario where there are multiple DOM elements with the same ID which has to be unique.

Please notice how in the linked article the menu is initialized with a different name based on the field value. Note that the name is later set as the ID of the widget, that is why this is creating multiple widgets with the same ID.

Html.Kendo().Menu()
  .Name("menu_#=OrderID#")

Also, if the Grid is editable, we recommend using the DropDown as an editor, as using it in the ClientTemplate will not directly edit the value. Please check our example with DropDown editor:

http://demos.telerik.com/aspnet-mvc/grid/editing-custom

https://docs.telerik.com/aspnet-mvc/helpers/grid/templating/editor-templates

I hope this is helpful.

Regards,
Stefan
Progress Telerik