Getting DropDown to select item by Model value inside Kendo Template

2 posts, 0 answers
  1. Jonathan
    Jonathan avatar
    7 posts
    Member since:
    May 2011

    Posted 26 Aug 2016 Link to this post

    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):


    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">
            <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>
                .OptionLabel("Please Select...")
                .DataSource(s =>
                    s.Read(r =>

    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.

  2. Peter Milchev
    Peter Milchev avatar
    276 posts

    Posted 30 Aug 2016 Link to this post

    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.

    Peter Milchev
    Telerik by Progress
    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
Back to Top