DownList ValueTemplate insert problem

3 posts, 1 answers
  1. AP
    AP avatar
    187 posts
    Member since:
    Apr 2010

    Posted 05 Aug 2015 Link to this post

    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

  2. Answer
    Plamen Lazarov
    Admin
    Plamen Lazarov avatar
    135 posts

    Posted 07 Aug 2015 Link to this post

    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

    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
  3. UI for ASP.NET MVC is VS 2017 Ready
  4. AP
    AP avatar
    187 posts
    Member since:
    Apr 2010

    Posted 07 Aug 2015 in reply to Plamen Lazarov Link to this post

    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" })

Back to Top