This is a migrated thread and some comments may be shown as answers.

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

2 Answers 205 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Thomas
Top achievements
Rank 1
Thomas asked on 18 Oct 2017, 06:33 PM

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 Answers, 1 is accepted

Sort by
0
Thomas
Top achievements
Rank 1
answered on 18 Oct 2017, 06:40 PM
0
Stefan
Telerik team
answered on 20 Oct 2017, 01:53 PM
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.
Tags
Grid
Asked by
Thomas
Top achievements
Rank 1
Answers by
Thomas
Top achievements
Rank 1
Stefan
Telerik team
Share this question
or