DownList ValueTemplate insert problem

[AP]

I have an editor template set up, used in conjunction with a kendo grid.  It contains two drop-downlists which use templates and value templates to display images as well as text.

 The model contains an ID, which is a foreign key to a separate table, where the images are pulled from. The drop-down source controller creates the image path, and passes this to the drop-down list.

The mark up of one of the drop-downs  is:-

 

<p>


                    <span class="fieldlabel2">Trend:</span>@(Html.Kendo().DropDownList()
                      .Name("Trend")
                     .OptionLabel("Select trend")
          .DataValueField("ID")
          .DataTextField("ImageDescription")

        .DataSource(src => src.Read(rd => rd.Action("GetTrendsList", "MetricsInput")))
        .Template("#=ImagePath#<span style='margin-left:5px;'>#=ImageDescription #</span>")
        .ValueTemplate("#=ImagePath#<span style='margin-left:5px;'>#=ImageDescription #</span>")
                    )
                </p>

 

When used for editing existing records, the drop-downs work fine. However the insert button on the grid is used, a javascript error is thrown, complaining about 'ImagePath' being undefined.

 If the ValueTemplate is commented out, the drop-downs and the edit form work.

What do I need to do to fix this?

 

Thanks

[Plamen Lazarov]

Hello,

The described behavior is expected because the used field in the template is not defined in the DataTextField. Thus the generated OptionLabel object does not contain it and respectively the Kendo Template throws exception. In order to use "ImagePath" in the template the OptionLabel should have the same structure as  "GetTrendsList". E.g.: 

.OptionLabel(new {
    ImagePath: "",

    ...

    ...

})

Let me know if I can be of a further assistance.

Regards,

Plamen Lazarov

Telerik

[AP]

Thanks for the response.

However, I think you're getting slightly confused with the JavaScript syntax. I had to use the following

 

.OptionLabel(new {ImagePath="", ImageDescription="Select Status" })