title: Telerik grid not rendering dropdownlist in column MVC3
body: <p>I have a problem with the Telerik grid that I can't seem to find quite the exact problem anywhere. I'm following the demo from their site for Client Side Edit Templates. When going into edit mode it immediately dies saying <code>select</code> method is undefined from this js statement:</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
      function onEdit(e) {
          $(e.form).find('#PageList').data('tDropDownList').select(function (dataItem) {
              return dataItem.Text == e.dataItem['PageName'];
          });
      }
  &lt;/script&gt;
  </code></pre>
  
  <p>Here is my view:</p>
  
  <pre><code>&lt;%@ Control Language="VB" Inherits="System.Web.Mvc.ViewUserControl" %&gt;
  &lt;%@ Import Namespace="Community_Portal_Admin" %&gt;
  
  &lt;div class="gridFrame"&gt;
  
      &lt;% Html.Telerik().Grid(Of IndustryPageContent)() _
              .Name("IndustryPageContent") _
              .DataKeys(Function(k) k.Add(Function(d) d.ID)) _
              .DataBinding(Function(db) db.Ajax() _
                          .Select("_GetPageContent", "Industry") _
                          .Update("_SetPageContent", "Industry")) _
              .Columns(Function(c) c.Bound(Function(d) d.IndustryID)) _
              .Columns(Function(c) c.Bound(Function(d) d.PageID)) _
              .Columns(Function(c) c.Bound(Function(d) d.PageActionID)) _
              .Columns(Function(c) c.Bound(Function(d) d.Content1)) _
              .Columns(Function(c) c.Bound(Function(d) d.Content2)) _
              .Columns(Function(c) c.Bound(Function(d) d.Content3)) _
              .Columns(Function(c) c.Bound(Function(d) d.Content4)) _
              .Columns(Function(c) c.Bound(Function(d) d.Content5)) _
              .Columns(Function(c) c.Command(Function(d) d.Edit().ButtonType(GridButtonType.Image)).Width(60)) _
              .Columns(Function(c) c.Bound(Function(d) d.ID).Hidden()) _
              .ClientEvents(Function(e) e.OnEdit("onEdit")) _
              .Editable(Function(c) c.Mode(GridEditMode.InForm).Enabled(True)) _
              .Scrollable(Function(s) s.Height("350px")) _
              .Pageable() _
              .Selectable() _
              .Render()
      %&gt;
  
      &lt;br /&gt;
  
      &lt;%: Html.ActionLink("Close", "Index", "Configuration", Nothing, New With {.class = "t-button", .Style = "font-size:12px;"})%&gt;
  
  &lt;/div&gt;
  
  &lt;script type="text/javascript"&gt;
  
      function onEdit(e) {
  
          $(e.form).find('#PageList').data('tDropDownList').select(function (dataItem) {
              return dataItem.Text == e.dataItem['PageName'];
          });
      }
  
  &lt;/script&gt;
  </code></pre>
  
  <p>Here is my controller action:</p>
  
  <pre><code>Function GetPageContent() As ActionResult
  
      Try
          ViewData("PageList") = SharedListDataRepository.PageList()
  
          Return PartialView()
  
      Catch ex As Exception
          Throw
      End Try
  
  End Function
  </code></pre>
  
  <p>Here is my helper to load the list data:</p>
  
  <pre><code>Public Shared Function PageList() As IEnumerable(Of ApplicationPage)
  
      Dim l As IEnumerable(Of ApplicationPage)
  
      Try
          l = (From d In New AdminIndustrySetupDataContext(TripleDESSecurity.Decrypt(SharedData.PortalCnx)).AdminApplicationPages Order By d.ID Select New ApplicationPage With {
                  .ID = d.ID,
                  .PageName = d.PageName
          }).AsEnumerable
  
          Return l
  
      Catch ex As Exception
          Throw
      Finally
          If Not l Is Nothing Then
              l = Nothing
          End If
      End Try
  
  End Function 
  </code></pre>
  
  <p>Here is my model: as you can see it is decorated with the <code>UIHint</code> that is supposed to bring the control into the view but because the error is a js error on an "undefined" element that tells me that the list control never makes it onto the page. Which Firebug concurs with, it's just not there in the HTML</p>
  
  <pre><code>Imports System.ComponentModel.DataAnnotations
  Imports System.Runtime.Serialization
  
  &lt;KnownType(GetType(IndustryPageContent))&gt; _
  Public Class IndustryPageContent
  
      &lt;ScaffoldColumn(False)&gt; _
      Public Property ID As Integer = 0
      Public Property IndustryID As Integer = 0
      &lt;UIHint("PageList"), Required()&gt; _
      Public Property PageID As Integer = 0
      Public Property PageActionID As Integer = 0
      Public Property Content1 As String = String.Empty
      Public Property Content2 As String = String.Empty
      Public Property Content3 As String = String.Empty
      Public Property Content4 As String = String.Empty
      Public Property Content5 As String = String.Empty
  
      Public Sub New()
          MyBase.New()
      End Sub
  
  End Class
  </code></pre>
  
  <p>And lastly here is my list control:</p>
  
  <pre><code>&lt;%@ Control Language="vb" Inherits="System.Web.Mvc.ViewUserControl" %&gt;
  
  &lt;% Html.Telerik().DropDownList() _
          .Name("PageList") _
          .BindTo(New SelectList(CType(ViewData("PageList"), IEnumerable), "ID", "PageName"))
  %&gt;
  </code></pre>
  
  <p>So my guess is that the javascript for select method fails because the <code>UIHint</code> isn't binding the control right so the control isn't there to call the select method on.</p>
  
  <p>What am I missing? Are there any successful implementations of the Telerik grid with Ajax binding -  with editing, using VB.NET and aspx, not razor? Or am I the only one painted into a corner with the restrictions I have to work with?</p>
  
  <p>I've had nothing but problems using the Telerik demos, they're consistently incomplete and/or using a contradiction of methods that support eventually says "Oh you can't do that when doing this. Really? So why is it in the demo??</p>
  
  <p><strong>EDIT</strong></p>
  
  <p>This is final code for my grid that got it working:</p>
  
  <pre><code> &lt;% Html.Telerik().Grid(Of IndustryPageContent)() _
          .Name("IndustryPageContent") _
          .DataKeys(Function(k) k.Add(Function(d) d.ID)) _
          .DataBinding(Function(db) db.Ajax() _
                      .Select("_GetPageContent", "Industry") _
                      .Update("_SetPageContent", "Industry")) _
          .Columns(Function(c) c.Bound(Function(d) d.IndustryID)) _
          .Columns(Function(c) c.Bound(Function(d) d.PageID)) _
          .Columns(Function(c) c.Bound(Function(d) d.PageActionID)) _
          .Columns(Function(c) c.Bound(Function(d) d.Content1)) _
          .Columns(Function(c) c.Bound(Function(d) d.Content2)) _
          .Columns(Function(c) c.Bound(Function(d) d.Content3)) _
          .Columns(Function(c) c.Bound(Function(d) d.Content4)) _
          .Columns(Function(c) c.Bound(Function(d) d.Content5)) _
          .Columns(Function(c) c.Command(Function(d) d.Edit().ButtonType(GridButtonType.Image)).Width(60)) _
          .Columns(Function(c) c.Bound(Function(d) d.ID).Hidden()) _
          .Editable(Function(c) c.Mode(GridEditMode.InForm).Enabled(True)) _
          .Scrollable(Function(s) s.Height("350px")) _
          .Pageable() _
          .Selectable() _
          .Render()
  %&gt;
  </code></pre>
  
  <p>The <code>ClientEvents</code> line and the JS is not needed. The "Name" property of the dropdownlist must match the name of the property that it will be the list for. In this case, <code>PageID</code> and <code>PageActionID</code>. This is the code for 2 DDL that I have defined that work:</p>
  
  <pre><code>&lt;%@ Control Language="vb" Inherits="System.Web.Mvc.ViewUserControl" %&gt;
  
  &lt;% Html.Telerik().DropDownList() _
      .Name("PageID") _
      .BindTo(New SelectList(CType(ViewData("PageList"), IEnumerable), "ID", "PageIDandName")) _
      .Render()
  %&gt;
  
  &lt;%@ Control Language="vb" Inherits="System.Web.Mvc.ViewUserControl" %&gt;
  
  &lt;% Html.Telerik().DropDownList() _
          .Name("PageActionID") _
          .BindTo(New SelectList(CType(ViewData("PageActionList"), IEnumerable), "PageActionID", "PageActionIDandAction")) _
          .Render()
  %&gt;
  </code></pre>