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

3 posts, 0 answers
  1. Thomas
    Thomas avatar
    3 posts
    Member since:
    Nov 2013

    Posted 18 Oct 2017 Link to this post

    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());
        });
    }
  2. Stefan
    Admin
    Stefan avatar
    2880 posts

    Posted 20 Oct 2017 Link to this post

    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
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top