DropDownList Ajax Binding - Template

[Rene]

Not matter what I try, I cannot get the template working when using ajax binding on a DropDownList() using Razor / MVC and EF.

The dropdownlist is getting the data properly from the json endpoint (returning a generic list of ef objects via json) but it's the drop down template that is not being generated properly.  I get "undefined" for data values in each item's option.

Have tried all kinds of things like:

.Template( " Employee Name : ${ data.empname }")

or

.Template( " Employee Name : ${ #=data.empname# }")

or

.Template( " Employee Name : #=data.empname# ")

and not matter what I try - i get

 "Employee Name:  undefined"

for each item.

Any help appreciated....

[Rene]

I've spent WAY too many hours to get this this to work 100% of the time.

The documentation is poor - extremely poor where ASP.NET MVC, Entity Framework (database first) and anything related to templates.

And half the time - I have to select an item from the drop down, only to have to select it a second time for the value to be set.

I give up on this one.  Back to ddSlick to get a dropdown with images and html template.....

[Georgi Krustev]

Hello Rene,

 
The first and third version of the template text is correct. I prepared a simple test project, which shows how to define the Template. Please note that the used properties should exist in the model.

Regards,
Georgi Krustev
the Telerik team

[Rene]

Thanks Georgi.  I'll give it a go in the morning.

I was just at my wits end trying for about 18 hours trying to get it going.

And believe me - I tried a ton of stuff.

I'll get back to you tomorrow on this.

Thanks.

Rene.

ps. Kendo UI is a wicked library ( aka - AWESOME!).

[Rene]

Ah... couldn't wait.

Not sure if the combobox applies to what I was having a problem with.  I was having problems with the DropDownList and using a template for the items in the drop down to show an image beside each dropdown items' text.  I could not get the template going at all.

It has something to do with the EF model ( I am using DB first/edmx no T4 involved).

Basically - create a table - create an EF model on just that table, and try to get a dropdownlist working with it...

I'm now thinking that the json returned may be more nested than I assume... I'll have to run Fiddler on it (oh yeah - you guys own that fantastic tool also now :-)) (using localhost) to see exactly what's coming back through the pipe from the jsonresult back to the client ..

Will get back to you ...

Thanks again!

[Rene]

I have this working great now.  See below for details.

I'll put my "p.s." at the top here:

p.s. Kendo UI is nothing short of AWESOME.


The view contains the following: (pretty well copied from your online documentation).

  @(Html.Kendo().DropDownList()
          .Name("seriesDropDownList")
          .DataTextField("SERIES_NAME")
          .DataValueField("SERIES_GUID")
          .DataSource(source =>
          {
                 source.Read(read =>
                 {
                      read.Action("GetSeriesTest", "Series");
                 })
                 .ServerFiltering(true);
          })
          .Template("${ SERIES_NAME }<br/><img src='${SERIES_LOGO_IMAGE}' />")
          .Height(820)
          .HtmlAttributes( new { style = "width:400px;" } )
          .SelectedIndex(0)
      )



This is the controller part:

[AcceptVerbs(HttpVerbs.Get)]
   public JsonResult GetSeriesTest() {
     
     // using EF 4.x - Database First.  The model only has 1 table in it. 
     SeriesEntities dbSeries = new SeriesEntities();
     return Json( new { data = dbSeries.Series.ToList<Serie>() },JsonRequestBehavior.AllowGet );    
   }

JSON (from Fiddler) below:

[{"SERIES_GUID":"69b1fa51-3e8a-4102-4e69-39beffab17fb","SERIES_ID":"SPRINT","SERIES_NAME":"Sprint Cup Series","SERIES_ACTIVE":true,"SERIES_LOGO_IMAGE":"/Images/series/nascar-sprint-series-logo.png","SERIES_WEBSITE":"http://www.nascar.com/series/cup/","EntityState":2,"EntityKey":{"EntitySetName":"Series","EntityContainerName":"SeriesEntities","EntityKeyValues":[{"Key":"SERIES_GUID","Value":"69b1fa51-3e8a-4102-4e69-39beffab17fb"}],"IsTemporary":false}},{"SERIES_GUID":"52a3cc91-4dd9-70ec-8bd4-39beffabed58","SERIES_ID":"NATIONWIDE","SERIES_NAME":"Nationwide","SERIES_ACTIVE":true,"SERIES_LOGO_IMAGE":"/Images/series/nascar-nationwide-series-logo.png","SERIES_WEBSITE":"http://www.nationwide.nascar.com/nationwide-series/","EntityState":2,"EntityKey":{"EntitySetName":"Series","EntityContainerName":"SeriesEntities","EntityKeyValues":[{"Key":"SERIES_GUID","Value":"52a3cc91-4dd9-70ec-8bd4-39beffabed58"}],"IsTemporary":false}},{"SERIES_GUID":"6f36a620-0a45-53d8-6604-39beffac2e39","SERIES_ID":"ARCA","SERIES_NAME":"ARCA","SERIES_ACTIVE":true,"SERIES_LOGO_IMAGE":"/Images/series/nascar-arca-series-logo.png","SERIES_WEBSITE":"http://www.arcaracing.com/","EntityState":2,"EntityKey":{"EntitySetName":"Series","EntityContainerName":"SeriesEntities","EntityKeyValues":[{"Key":"SERIES_GUID","Value":"6f36a620-0a45-53d8-6604-39beffac2e39"}],"IsTemporary":false}},{"SERIES_GUID":"a8a5f909-3358-0ceb-3f99-39beffac752d","SERIES_ID":"TRUCK","SERIES_NAME":"Camping World Truck Series","SERIES_ACTIVE":true,"SERIES_LOGO_IMAGE":"/Images/series/nascar-truck-series-logo.png","SERIES_WEBSITE":"http://www.nascar.com/series/truck/","EntityState":2,"EntityKey":{"EntitySetName":"Series","EntityContainerName":"SeriesEntities","EntityKeyValues":[{"Key":"SERIES_GUID","Value":"a8a5f909-3358-0ceb-3f99-39beffac752d"}],"IsTemporary":false}},{"SERIES_GUID":"eb41cc8e-5df1-61f9-7674-39bf08e084a9","SERIES_ID":"CANADIANTIRE","SERIES_NAME":"Canadian Tire Series","SERIES_ACTIVE":true,"SERIES_LOGO_IMAGE":"/Images/series/nascar-canadian-tire-series-logo.png","SERIES_WEBSITE":"http://www.nascarlocalracing.com/series/canadian_tire_series","EntityState":2,"EntityKey":{"EntitySetName":"Series","EntityContainerName":"SeriesEntities","EntityKeyValues":[{"Key":"SERIES_GUID","Value":"eb41cc8e-5df1-61f9-7674-39bf08e084a9"}],"IsTemporary":false}}]