title: Kendo dropdown - Template
body: <p>I'm trying to use a kendo dropdownlist and render the options using the Template method as shown <a href="http://demos.kendoui.com/web/dropdownlist/template.html" rel="nofollow">http://demos.kendoui.com/web/dropdownlist/template.html</a> (click ASP.NET MVC > template.cshtml). To simplify the problem I am simply trying to display the AccountDescription only.</p>
  
  <p>Here is my code so far.</p>
  
  <p>cshtml</p>
  
  <pre><code>    ...        
      &lt;div class="editor-field"&gt;
          &lt;script&gt;
              function entityFiltering() {
                  return {
                      entityId: $("#EntityId").val()
                  };
              }
          &lt;/script&gt;
  
          @(Html.Kendo().DropDownListFor(m =&gt; m.AccountNumber)
             .Name("AccountNumber")
             .DataTextField("AccountShortCode")
             .DataValueField("AccountNumber")
              .Template("&lt;table&gt;&lt;tr&gt;&lt;td width='100px'&gt;${ data.AccountDescription } &lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;")
             .OptionLabel("Please select...")
             .DataSource(source =&gt; source.Read(read =&gt; read.Action("ActionName", "ControllerName")
                                                           .Data("entityFiltering"))
                                       .ServerFiltering(true))
             .Enable(false)
             .AutoBind(false)
             .CascadeFrom("EntityId")
                )
          @Html.ValidationMessageFor(m =&gt; m.SourceAccountNumber)
      &lt;/div&gt;
      ...
  </code></pre>
  
  <p>The model looks like</p>
  
  <pre><code>public class Model {
  
      [Required]
      [Display(Name = "Short Code")]
      public string AccountShortCode { get; set; }
  
      [Required]
      [Display(Name = "Account Number")]
      [ScaffoldColumn(false)]
      public int AccountNumber { get; set; }
  
      [Required]
      [Display(Name = "Description")]
      [ScaffoldColumn(false)]
      public string AccountDescription { get; set; }
  }
  </code></pre>
  
  <p>When the dropdown list renders all the options are in the list but they display <code>undefined</code> If I select an option I can see the actual correct value binding on the grid so I think my problem is purely a display issue.</p>