Getting DropDown to select item by Model value inside Kendo Template

[Jonathan]

I am trying to get a Kendo DropDownList—declared inside of a Kendo Template script block—to automatically select an item from its list when a data value is provided to the template. I’m not having any luck doing this because I don’t understand how to plumb this particular case. My project has many other Kendo DropDownList controls, and they work just fine, but they are not declared inside of any Kendo Templates.

Basically, I have a parent Kendo Grid with the following declaration (irrelevant Razor omitted for clarity):

@(Html.Kendo().Grid<DocumentUploadViewModel>()
        .ClientDetailTemplateId("documentUploadTemplate")

My intention is to provide an editor template for the grid consisting of a Kendo Template script block. At the moment, that template looks like this:

<script id="documentUploadTemplate" type="text/kendo-tmpl">
    <div>
        <p>ID: ${Id}</p>
        <p>Document Type ID: ${DocumentTypeId}</p>
        <p>Document Type Name: ${DocumentTypeName}</p>
        <p>Path: ${Path}</p>
        <p>FileName: ${FileName}</p>
        <p>MIME Type: ${MimeType}</p>
    </div>
    <div>
        @(Html.Kendo().DropDownList()
            .Name("uxDocumentTypeName#=Id#")
            .OptionLabel("Please Select...")
            .DataValueField("DocumentTypeId")
            .DataTextField("DocumentTypeName")
            .DataSource(s =>
            {
                s.Read(r =>
                {
                    r.Action("GetDocumentTypes", "MyController");
                })
                .ServerFiltering(true);
            })
            .ToClientTemplate()
        )
    </div>
</script>

My parent grid, which is working fine, is bound to a populated DocumentUploadViewModel, and its field values are surfaced in the Kendo Template for debugging purposes. When I invoke my grid’s “edit” button, I see the selected grid item’s bound data appear correctly inside the DIV at the top of the presented template.

The drop-down itself is full of data from the DataSource.Read.Action call, and I can manually make selections. However, I am unsure how to wire the control so that it automatically selects the item specified by the passed-in “DocumentTypeId” field. I do see this field value rendering correctly in the DIV, and the visible ID matches one of the items found in the drop-down’s data.

Normally, I would write @Html.Kendo.DropDownListFor(m => m.DocumentTypeId) but I can’t get at the “model” passed into the Kendo template. I have tried .BindTo("#=DocumentUploadViewModel.DocumentTypeId") as well as other variations, to no avail.

[Peter Milchev]

Hello Jonathan,

I would like to recommend you to check the following resources regarding the Grid's editor templates:

• Grid / Editing custom editor demo. I would like to focus your attention on the UIHint attribute of the field that the editor will use. In the demo it is "Category" and the string passed to the UIHint attribute should be the same as the name of the editor template - ClientCategory. The ClientCategory.cshtml file should be placed in the EditorTemplates folder.
• Create Custom Editors for Bound Properties article 

I would also like to clarify that the Editor templates are different from the Client Details Templates. The client details templates are rather used for displaying additional data or hierarchy.

Give the approach from the examples a try and see how it works for you.

Regards,
Peter Milchev
Telerik by Progress