Question

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 select method is undefined from this js statement:

<script type="text/javascript">
    function onEdit(e) {
        $(e.form).find('#PageList').data('tDropDownList').select(function (dataItem) {
            return dataItem.Text == e.dataItem['PageName'];
        });
    }
</script>

Here is my view:

<%@ Control Language="VB" Inherits="System.Web.Mvc.ViewUserControl" %>
<%@ Import Namespace="Community_Portal_Admin" %>

<div class="gridFrame">

    <% 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()
    %>

    <br />

    <%: Html.ActionLink("Close", "Index", "Configuration", Nothing, New With {.class = "t-button", .Style = "font-size:12px;"})%>

</div>

<script type="text/javascript">

    function onEdit(e) {

        $(e.form).find('#PageList').data('tDropDownList').select(function (dataItem) {
            return dataItem.Text == e.dataItem['PageName'];
        });
    }

</script>

Here is my controller action:

Function GetPageContent() As ActionResult

    Try
        ViewData("PageList") = SharedListDataRepository.PageList()

        Return PartialView()

    Catch ex As Exception
        Throw
    End Try

End Function

Here is my helper to load the list data:

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 

Here is my model: as you can see it is decorated with the UIHint 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

Imports System.ComponentModel.DataAnnotations
Imports System.Runtime.Serialization

<KnownType(GetType(IndustryPageContent))> _
Public Class IndustryPageContent

    <ScaffoldColumn(False)> _
    Public Property ID As Integer = 0
    Public Property IndustryID As Integer = 0
    <UIHint("PageList"), Required()> _
    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

And lastly here is my list control:

<%@ Control Language="vb" Inherits="System.Web.Mvc.ViewUserControl" %>

<% Html.Telerik().DropDownList() _
        .Name("PageList") _
        .BindTo(New SelectList(CType(ViewData("PageList"), IEnumerable), "ID", "PageName"))
%>

So my guess is that the javascript for select method fails because the UIHint isn’t binding the control right so the control isn’t there to call the select method on.

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?

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??

EDIT

This is final code for my grid that got it working:

 <% 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()
%>

The ClientEvents 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, PageID and PageActionID. This is the code for 2 DDL that I have defined that work:

<%@ Control Language="vb" Inherits="System.Web.Mvc.ViewUserControl" %>

<% Html.Telerik().DropDownList() _
    .Name("PageID") _
    .BindTo(New SelectList(CType(ViewData("PageList"), IEnumerable), "ID", "PageIDandName")) _
    .Render()
%>

<%@ Control Language="vb" Inherits="System.Web.Mvc.ViewUserControl" %>

<% Html.Telerik().DropDownList() _
        .Name("PageActionID") _
        .BindTo(New SelectList(CType(ViewData("PageActionList"), IEnumerable), "PageActionID", "PageActionIDandAction")) _
        .Render()
%>

Answer 1

Which is the right OnEdit method implementation? You have pasted two different code snippets:

function onEdit(e) {
  $(e.form).find('#ProductCategoryName').data('tDropDownList').select(function (dataItem) {
        return dataItem.Text == e.dataItem['ProductCategoryName'];
   });
}

and

function onEdit(e) {
   $(e.form).find('#PageList').data('tDropDownList').select(function (dataItem) {
        return dataItem.Text == e.dataItem['PageName'];
   });
}

The first will not work because the dropdownlist’s name is “PageList” not “ProductCategoryName”. jQuery returns empty result and .data(“tDropDownList”) returns null. That’s why there is no “select” method.

On a side note we have released a new code library project which may help you implement the dropdown in grid scenario. You can check it here.

UPDATE:
I think I saw what the problem is. Your DropDownList is never output because you are using a <% %> block instead of <%: %> or calling the Render(); method. Please change your code like this

<% Html.Telerik().DropDownList() _
        .Name("PageList") _
        .BindTo(New SelectList(CType(ViewData("PageList"), IEnumerable), "ID", "PageName")) _
        .Render()
%>

or this:

<%: Html.Telerik().DropDownList() _
        .Name("PageList") _
        .BindTo(New SelectList(CType(ViewData("PageList"), IEnumerable), "ID", "PageName"))
%>