[Solved] Javascript runtime error with grid

[Donna Stewart]

I have a grid in which I am using Ajax binding, and it works fine until I add the Filterable attribute.  I get this javascript runtime error in telerik.grid.min.js - Microsoft JScript runtime error: 'b[...]' is null or not an object.  I am using the mvc extensions version 2010.3.1318.235.  Any ideas as to what I am doing wrong?  Your help is very much appreciated!

Here is the code:
View:

<%@ Control Language="VB" Inherits="System.Web.Mvc.ViewUserControl(Of GMC_Hub_and_Spoke.ReportIndexViewModel)" %>
<%@ Import Namespace="com.gmcps" %>
    <script language="javascript" type="text/javascript">
        function getReports(e) {

            var reportTree = $('#Reports').data('tTreeView');
            var selectedValue = reportTree.getItemValue(e.item);
            var treeView = $(this);
            var item = $(e.item);
            var checkbox = item.find('.t-checkbox:first [type=checkbox]');
            var shouldCheck = !checkbox.is(':checked');

            checkbox.attr('checked', shouldCheck);
            //treeView.nodeCheck(item, shouldCheck);
            var grid = $('#ReportGrid').data('tGrid');

            $.post('<%= Url.Action("GetCustomerReports", "Report") %>', // The url of the /Home/Grid action method
                 {
                 id: selectedValue
             },  // arguments which need to be passed to the Grid action method
                 function (result, textStatus) { //JavaScript callback executed when the ajax request finishes
                     if (result.length < 1) {

                     }
                     else {
                         grid.dataBind(result); // update the grid
                     }
                 },
                 'json'
            );
        }

</script>
    <div>
        <div class="userindexleft">
            <span class="listbox-label">Customer Reports</span><br />
                <%= Html.Telerik().TreeView().Name("Reports").ShowCheckBox(True).HtmlAttributes(New With {.style = "font-size:1em; height:550px;"}) _
                                    .ClientEvents(Function(evt) evt.OnSelect("getReports")) _
                                                .BindTo(CType(Model.reportGroupNames, IEnumerable(Of SelectListItem)),
                                                        Sub(mappings)
                                                            mappings.For(Of SelectListItem)(
                                                            Sub(binding)
                                                                binding _
                                                                    .ItemDataBound(
                                                                        Sub(item, rpt)
                                                                            item.Text = rpt.Text
                                                                            item.Value = rpt.Value
                                                                            item.LoadOnDemand = True
                                                                        End Sub)
                                                            End Sub)
                                                        End Sub) _
                                                .DataBinding(Function(dataBinding) dataBinding.Ajax().Select("GetUserGroupsForReportGroups", "Report"))
                %>
            <br />
            <a href="#" id="newUser">New</a>
            <a href="#" id="editUser" onclick = "editUser()">Edit</a>
            <a href="#" id="deleteUser" onclick = "deleteUser()">Delete</a>
            <div class="error" id="UserError"></div>
        </div>
        <div class="reportindexright">
            <%= Html.Telerik().Grid(Of ReportLineItem).Name("ReportGrid") _
                    .Filterable() _
                            .Columns(Function(col) col.Bound(Function(p) p.ReportType)) _
                            .Columns(Function(col) col.Bound(Function(p) p.FileName)) _
                            .Columns(Function(col) col.Bound(Function(p) p.Description)) _
                            .DataBinding(Function(binding) binding.Ajax().Select("GetCustomerReportsAjax", "Report", New With {.id = Model.reportGroupNames.ElementAt(0).Value}))
            %>
        </div>

    </div>

Controller

Imports com.gmcps
Imports com.gmcps.GMCDataModel
Imports com.gmcps.GMCPermissions
Imports com.gmcps.Membership
Imports com.gmcps.GreenMtnDataModel
Imports Telerik.Web.Mvc.UI
Imports GMC_Hub_and_Spoke.Utilities

Public Class ReportController
    Inherits System.Web.Mvc.Controller

    '
    ' GET: /Report

    Function ReportIndex() As ActionResult
        Dim gmcPermissions As New GMCPermissions
        Dim listOfCustReportGroupNames As New List(Of SelectListItem)
        Dim rptGrpNameList As List(Of CustomerReportGroupName) = gmcPermissions.GetCustomerReportGroupNames()
        For Each rpt In rptGrpNameList
            listOfCustReportGroupNames.Add(New SelectListItem With {.Text = rpt.ReportGroupName, .Value = rpt.ReportGroupNameKey})
        Next
        Dim reportIndexViewModel As New ReportIndexViewModel
        reportIndexViewModel.reportGroupNames = listOfCustReportGroupNames
        Return PartialView(reportIndexViewModel)
    End Function

    <AcceptVerbs(HttpVerbs.Post)> _
    Function GetUserGroupsForReportGroups(ByVal node As TreeViewItem) As ActionResult
        Dim gmcPermissions As New GMCPermissions
        Dim usrGrps As List(Of WebUserGroupName) = gmcPermissions.GetWebUserGroupNamesForReportGroupName(node.Value)
        Dim nodes As New List(Of TreeViewItem)
        For Each usrGrp In usrGrps
            nodes.Add(New TreeViewItem With {.Text = "<span style='font-size:1em;'>" + usrGrp.UserGroupName + "</span>", .Value = usrGrp.UserGroupNameKey, .Encoded = False})
        Next
        Return New JsonResult() With {.Data = nodes}
    End Function

    Function GetCustomerReports(ByVal id As Integer) As JsonResult
        Dim gmcPermissions As New GMCPermissions
        Dim custReportList As New List(Of ReportLineItem)
        custReportList = gmcPermissions.GetCustomerReports(id)
        Return New JsonResult With {.Data = custReportList}
    End Function

    <Telerik.Web.Mvc.GridAction()>
    Function GetCustomerReportsAjax(ByVal id As Integer) As JsonResult
        Dim gmcPermissions As New GMCPermissions
        Dim custReportList As New List(Of ReportLineItem)
        custReportList = gmcPermissions.GetCustomerReports(id)
        Return Json(custReportList)
    End Function

End Class

Site.Master

<%@ Master Language="VB" Inherits="System.Web.Mvc.ViewMasterPage" %>
<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title><asp:ContentPlaceHolder ID="TitleContent" runat="server" /></title>
    <script src="<%= Url.Content("~/Scripts/jquery-1.4.3.min.js") %>" type="text/javascript"></script>
    <script src="<%= Url.Content("~/Scripts/jquery-ui-1.8.5.custom.min.js") %>" type="text/javascript"></script>
    <script src="<%= Url.Content("~/Scripts/ui.dropdownchecklist-1.2qa-min.js") %>" type="text/javascript"></script>
    <script src="<%= Url.Content("~/Scripts/jquery.json-2.2.js") %>" type="text/javascript"></script>
    <link media="screen" rel="stylesheet" type="text/css" href="<%= Url.Content("~/Content/css/admin.css") %>"  />
    <!--[if lte IE 6]><link media="screen" rel="stylesheet" type="text/css" href="<%= Url.Content("~/Content/css/admin-ie.css") %>" /><![endif]-->

    <script type="text/javascript" src="<%= Url.Content("~/Scripts//behaviour.js") %>"></script>
</head>
<body>
    <%= Html.Telerik().StyleSheetRegistrar() _
                                                    .DefaultGroup(Function(group) group.Add("telerik.common.min.css")) _
                                                    .DefaultGroup(Function(group) group.Add("Site.css")) _
                                                    .DefaultGroup(Function(group) group.Add("ui.dropdownchecklist.standalone.css")) _
                                                    .DefaultGroup(Function(group) group.Add("telerik.windows7.min.css")) _
                                                    .DefaultGroup(Function(group) group.Add("jquery.fastconfirm.css")) _
                                                    .DefaultGroup(Function(group) group.Add("css/admin.css"))
     %>
   <form id="form1" runat="server">
    <div id="wrapper">
    <div id="container">
        <asp:ContentPlaceHolder ID="MainContent" runat="server" />
        <div id="footer">
            Copyright 2010 Green Mountain Consulting, All Rights Reserved
            <img alt="mountains" src="<%= Url.Content("~/Content/Images/ClassicSiteIcon.png") %>" style="float:none"/>
            <a href="">Privacy Policy</a>
        </div>

    <div>
        <%  Html.Telerik().Window().Name("LogOnWindow") _
        .LoadContentFrom("LogOn", "Account") _
        .Buttons(Function(buttons) buttons.Refresh().Maximize().Close()) _
        .Draggable(True) _
        .Height(575) _
        .Width(550) _
        .Resizable() _
        .Title("Log In") _
        .Visible(False) _
        .Render()
            %>
    </div>
    </div>
    </div>
    <%= Html.Telerik.ScriptRegistrar().jQuery(False).DefaultGroup(Function(addGroup) addGroup.Add("telerik.common.min.js")) _
                                                                                                    .DefaultGroup(Function(addGroup) addGroup.Add("telerik.combobox.min.js")) _
                                                                                                    .DefaultGroup(Function(addGroup) addGroup.Add("telerik.list.min.js")) _
                                                                                                    .DefaultGroup(Function(addGroup) addGroup.Add("telerik.treeview.min.js")) _
                                                                                                    .DefaultGroup(Function(addGroup) addGroup.Add("telerik.grid.min.js")) _
                                                                                                    .DefaultGroup(Function(addGroup) addGroup.Add("telerik.calendar.min.js")) _
                                                                                                    .DefaultGroup(Function(addGroup) addGroup.Add("telerik.datepicker.min.js")) _
                                                                                                    .DefaultGroup(Function(addGroup) addGroup.Add("jquery.cascadingDropDown.js")) _
                                                                                                    .DefaultGroup(Function(addGroup) addGroup.Add("jquery.fastconfirm.js")) _
                                                                                                    .DefaultGroup(Function(addGroup) addGroup.Add("jquery.cookie.js")) _
                                        .OnDocumentReady("$('#login').bind('click', function openWindow(e){ $('#LogOnWindow').data('tWindow').center().open().refresh();})")
     %>

   </form>
</body>
</html>

[Atanas Korchev]

Hi Donna Stewart,

I see two problems with your code:
   1) you are including an older version of jQuery - 1.4.3 whereas Telerik Extensions for ASP.NET MVC need jquery 1.4.4. Please include that version and see if it solves the problem.
   2) You don't seem to include telerik.grid.filtering.js which is required for filtering. I suggest you check the required JavaScript files help topic.

Regards,
Atanas Korchev
the Telerik team

[Donna Stewart]

That was it!  Thank you!  I have to remember to check that document next time!  I've seen you tell people that so many times in the forum.  Sorry!  Thanks again for all of your help!

Donna