Javascript Error in Grid

[Garry]

Running Kendo UI 2012.2.710.340 in a MVC 4 .NET Web App.

When the page posts I get a java script error of

0x800a01b6 - Microsoft JScript runtime error: Object doesn't support this property or method

Rendered Java Script that is throwing the error

<div class="k-widget k-grid" id="gridDocumentType"><div class="k-toolbar k-grid-toolbar k-grid-top"><a class="k-button k-button-icontext k-grid-add" href="/DocumentType?gridDocumentType-mode=insert"><span class="k-icon k-add"></span>Add new item</a></div><div class="k-grid-header"><div class="k-grid-header-wrap"><table cellspacing="0"><colgroup><col /></colgroup><tr><th class="k-header k-filterable" data-field="Name" data-title="Name" scope="col"><a class="k-grid-filter"><span class="k-icon k-filter"></span></a><a class="k-link" href="/DocumentType?gridDocumentType-sort=Name-asc">Name</a></th></tr></table></div></div><div class="k-grid-content" style="height:200px"><table cellspacing="0"><colgroup><col /></colgroup><tbody><tr><td>Adoption Assistance</td></tr><tr class="k-alt"><td>CPS Child Fatality</td></tr><tr><td>CPS Non-Fatality</td></tr><tr class="k-alt"><td>CSA Case Manager</td></tr><tr><td>CWBC</td></tr><tr class="k-alt"><td>Education</td></tr><tr><td>Family</td></tr><tr class="k-alt"><td>Home County Child</td></tr><tr><td>Resource Home</td></tr></tbody></table></div><div class="k-pager-wrap k-grid-pager"><a class="k-link k-state-disabled" data-page="1" href="#" title="Go to the first page"><span class="k-icon k-i-seek-w">seek-w</span></a><a class="k-link k-state-disabled" data-page="0" href="#" title="Go to the previous page"><span class="k-icon k-i-arrow-w">arrow-w</span></a><ul class="k-pager-numbers k-reset"><li><span class="k-state-selected" data-page="1">1</span></li></ul><a class="k-link k-state-disabled" data-page="2" href="#" title="Go to the next page"><span class="k-icon k-i-arrow-e">arrow-e</span></a><a class="k-link k-state-disabled" data-page="1" href="#" title="Go to the last page"><span class="k-icon k-i-seek-e">seek-e</span></a><span class="k-pager-info k-label">1 - 9 of 9 items</span></div></div><script>

    jQuery(function(){jQuery("#gridDocumentType").kendoGrid({columns:[{title:"Name",field:"Name",encoded:true,editor:null}],pageable:{},sortable:true,filterable:true,editable:{confirmation:"Are you sure you want to delete this item?",mode:"popup",template:"\u003cdiv class=\"editor-label\"\u003e\u003clabel for=\"ID\"\u003eID\u003c/label\u003e\u003c/div\u003e\u003cdiv class=\"editor-field\"\u003e\u003cinput class=\"text-box\u0026\\#32;single-line\" data-val=\"true\" data-val-number=\"The\u0026\\#32;field\u0026\\#32;ID\u0026\\#32;must\u0026\\#32;be\u0026\\#32;a\u0026\\#32;number.\" data-val-required=\"The\u0026\\#32;ID\u0026\\#32;field\u0026\\#32;is\u0026\\#32;required.\" id=\"ID\" name=\"ID\" type=\"number\" value=\"0\" /\u003e \u003cspan class=\"field-validation-valid\" data-valmsg-for=\"ID\" data-valmsg-replace=\"true\"\u003e\u003c/span\u003e\u003c/div\u003e\u003cdiv class=\"editor-label\"\u003e\u003clabel for=\"DispositionRuleID\"\u003eDispositionRuleID\u003c/label\u003e\u003c/div\u003e\u003cdiv class=\"editor-field\"\u003e\u003cinput class=\"text-box\u0026\\#32;single-line\" data-val=\"true\" data-val-number=\"The\u0026\\#32;field\u0026\\#32;DispositionRuleID\u0026\\#32;must\u0026\\#32;be\u0026\\#32;a\u0026\\#32;number.\" data-val-required=\"The\u0026\\#32;DispositionRuleID\u0026\\#32;field\u0026\\#32;is\u0026\\#32;required.\" id=\"DispositionRuleID\" name=\"DispositionRuleID\" type=\"number\" value=\"0\" /\u003e \u003cspan class=\"field-validation-valid\" data-valmsg-for=\"DispositionRuleID\" data-valmsg-replace=\"true\"\u003e\u003c/span\u003e\u003c/div\u003e\u003cdiv class=\"editor-label\"\u003e\u003clabel for=\"Name\"\u003eName\u003c/label\u003e\u003c/div\u003e\u003cdiv class=\"editor-field\"\u003e\u003cinput class=\"text-box\u0026\\#32;single-line\" data-val=\"true\" data-val-required=\"The\u0026\\#32;Name\u0026\\#32;field\u0026\\#32;is\u0026\\#32;required.\" id=\"Name\" name=\"Name\" type=\"text\" value=\"\" /\u003e \u003cspan class=\"field-validation-valid\" data-valmsg-for=\"Name\" data-valmsg-replace=\"true\"\u003e\u003c/span\u003e\u003c/div\u003e\u003cdiv class=\"editor-label\"\u003e\u003clabel for=\"rowguid\"\u003erowguid\u003c/label\u003e\u003c/div\u003e\u003cdiv class=\"editor-field\"\u003e\u003cinput class=\"text-box\u0026\\#32;single-line\" data-val=\"true\" data-val-required=\"The\u0026\\#32;rowguid\u0026\\#32;field\u0026\\#32;is\u0026\\#32;required.\" id=\"rowguid\" name=\"rowguid\" type=\"text\" value=\"00000000-0000-0000-0000-000000000000\" /\u003e \u003cspan class=\"field-validation-valid\" data-valmsg-for=\"rowguid\" data-valmsg-replace=\"true\"\u003e\u003c/span\u003e\u003c/div\u003e\u003cdiv class=\"editor-label\"\u003e\u003clabel for=\"HasValue\"\u003eHasValue\u003c/label\u003e\u003c/div\u003e\u003cdiv class=\"editor-field\"\u003e\u003cinput class=\"check-box\" data-val=\"true\" data-val-required=\"The\u0026\\#32;HasValue\u0026\\#32;field\u0026\\#32;is\u0026\\#32;required.\" id=\"HasValue\" name=\"HasValue\" type=\"checkbox\" value=\"true\" /\u003e\u003cinput name=\"HasValue\" type=\"hidden\" value=\"false\" /\u003e \u003cspan class=\"field-validation-valid\" data-valmsg-for=\"HasValue\" data-valmsg-replace=\"true\"\u003e\u003c/span\u003e\u003c/div\u003e",window:{modal:true,draggable:true,resizable:false}},toolbar:{command:[{name:null,buttonType:"ImageAndText",text:"Add new item"}]},dataSource:{transport:{read:{url:"/DocumentType"},update:{url:"/DocumentType/Edit"},create:{url:"/DocumentType/Create"},destroy:{url:"/DocumentType/Delete"}},pageSize:10,page:1,total:9,serverPaging:true,serverSorting:true,serverFiltering:true,serverGrouping:true,serverAggregates:true,type:"aspnetmvc-ajax",filter:[],error:error,schema:{data:"Data",total:"Total",errors:"Errors",model:{id:"ID",fields:{ID:{type:"number"},DispositionRuleID:{type:"number"},Name:{type:"string"},rowguid:{type:"object"},HasValue:{editable:false,type:"boolean"}}}},data:{Data:[{"ID":1,"DispositionRuleID":7,"Name":"Adoption Assistance","rowguid":"19adf557-b31e-4c81-a9f2-abac883059f5","HasValue":true},{"ID":5,"DispositionRuleID":2,"Name":"CPS Child Fatality","rowguid":"6ca6be67-b96a-482a-864c-f0fa57eb364a","HasValue":true},{"ID":6,"DispositionRuleID":2,"Name":"CPS Non-Fatality","rowguid":"430c28aa-b05c-482f-8250-a83cca375504","HasValue":true},{"ID":3,"DispositionRuleID":2,"Name":"CSA Case Manager","rowguid":"d49942f9-9677-4e2c-8614-651e957f69d7","HasValue":true},{"ID":4,"DispositionRuleID":2,"Name":"CWBC","rowguid":"c265db91-2c10-415d-80ba-8f62eb24f9b1","HasValue":true},{"ID":9,"DispositionRuleID":2,"Name":"Education","rowguid":"1495df11-8192-4596-aa2d-93c0d76d03aa","HasValue":true},{"ID":8,"DispositionRuleID":2,"Name":"Family","rowguid":"3207a8ce-589d-44d9-993f-49f1c7f37770","HasValue":true},{"ID":2,"DispositionRuleID":2,"Name":"Home County Child","rowguid":"600987f3-56b9-4338-bf33-49b46c3e9990","HasValue":true},{"ID":7,"DispositionRuleID":2,"Name":"Resource Home","rowguid":"8a7a12f8-c84b-4096-bbce-4dd03499863c","HasValue":true}],Total:9}}});});

</script>

Razor Code

@model IEnumerable<WitWiyD.Models.DocumentType>

 

@{

    ViewBag.Title = "Index";

}

 

<h2>Index</h2>

 

<p>

    @Html.ActionLink("Create New", "Create")

</p>

 

@(Html.Kendo().Grid(Model)

    .Name("gridDocumentType")

    .ToolBar(toolbar => {

        toolbar.Create();   

    })

    .Columns(columns =>

    {

        columns.Bound(p => p.Name);

    })

    .Editable(editable => editable.Mode(GridEditMode.PopUp))

    .Pageable()

    .Sortable()

    .Scrollable()

    .Filterable()   

    .DataSource(dataSource => dataSource

        .Ajax()

        .Model(model => model.Id(p => p.ID))

        .Events(events => events.Error("error"))

        .Read(read => read.Action("Index", "DocumentType"))

        .Create(create => create.Action("Create","DocumentType"))

        .Destroy(destroy => destroy.Action("Delete","DocumentType"))

        .Update(update => update.Action("Edit","DocumentType"))     

     )

)

 

@*<table>

    <tr>

        <th>

            @Html.DisplayNameFor(model => model.Name)

        </th>

        <th>

            @Html.DisplayNameFor(model => model.rowguid)

        </th>

        <th>

            @Html.DisplayNameFor(model => model.HasValue)

        </th>

        <th></th>

    </tr>

 

@foreach (var item in Model) {

    <tr>

        <td>

            @Html.DisplayFor(modelItem => item.Name)

        </td>

        <td>

            @Html.DisplayFor(modelItem => item.rowguid)

        </td>

        <td>

            @Html.DisplayFor(modelItem => item.HasValue)

        </td>

        <td>

            @Html.ActionLink("Edit", "Edit", new { id=item.ID }) |

            @Html.ActionLink("Details", "Details", new { id=item.ID }) |

            @Html.ActionLink("Delete", "Delete", new { id=item.ID })

        </td>

    </tr>

}

 

</table>*@

<script>

function error(e) {

    if (e.errors) {

        var message = "Errors:\n";

        $.each(e.errors, function (key, value) {

            if ('errors' in value) {

                $.each(value.errors, function() {

                    message += this + "\n";

                });

            }

        });

 

 

    alert(message);

}

 

 

}

</script>

Any ideas?

[Paul]

I am having the same issue. The issue can be repeated with the MVC demos from the download.

NOTE: I had to fix the demo with the editor templates. The razor views were trying to rendor the .ascx views. I winded up removing the editor templates to get the demos working.

How did the MVC wrappers get released with this obviously not working?

EDIT: I blogged a workaround.

http://pknopf.com/blog/kendo-ui-editor-templates-for-asp-net