We have recently downloaded a trial version of the Kendo UI suite with a view to making a purchase at the end of the trial. We are using the Kendo grid control in Ajax binding mode and have noticed a few problems. The main issue is that the following script error occurs when deleting the last record in the model that is bound to the grid:
Unhandled exception at line 18, column 31059 in http://**/Scripts/kendo/2012.3.1114/kendo.web.js 0x800a138f - Microsoft JScript runtime error: '_current' is null or not an object
We cannot replicate this in Chrome. We are interested in Kendo as it is marketed as being compatible with IE8. This doesn't appear to be the case.
Here is the grid in our .cshtml file:
@(Html.Kendo().Grid(Model)
.Name("UserGrid")
.HtmlAttributes(new { style = "height:500px" })
.Columns(columns =>
{
columns.Bound(p => p.ReferenceNumber).Groupable(false);
columns.Bound(p => p.Title).Title("Title");
columns.Bound(p => p.AgreementDate).Title("Agreement Date");
columns.Bound(p => p.Superseded).ClientTemplate(
"<input type='checkbox' disabled='disabled' value='#= Superseded #' " +
"# if (Superseded) { #" +
"checked='checked'" +
"# } #" +
"/>");
//columns.Bound(p => p.Parties.Count);
columns.Bound(p => p.SourceDocumentLink);
columns.Bound(p => p.RelationshipLeadDirector);
columns.Bound(p => p.Owner);
columns.Bound(p => p.LegalContact);
columns.Command(command => command.Destroy()).Width(100);
columns.Template(@<text></text>).ClientTemplate("<a class='k-button k-button-icontext k-edit-button' href='" + Url.Action("Update", "Agreement") + "/#=Id#'><span class='k-icon k-edit'></span>Edit</a>");
})
.DataSource(dataSource => dataSource
.Ajax()
//.Server()
//.Events(events => events.RequestStart("requeststart_handler"))
//.Events(events => events.Error("error_handler"))
.Model(model => model.Id(p => p.Id))
.Destroy("Delete", "Agreement")
.Update("Update","Agreement")
.Read(read => read.Action("ListAgreements", "Agreement")
))
.Navigatable()
.Scrollable()
.Resizable(s=>s.Columns(true))
.Selectable(selectable => selectable.Mode(GridSelectionMode.Single))
.Sortable()
.Pageable(builder => builder.PageSizes(true))
)
And here is the action on our controller that takes care of a delete:
[HttpAjaxPost]
public JsonResult Delete([DataSourceRequest] DataSourceRequest request, AgreementData agreement)
{
try
{
_agreementService.DeleteAgreement(agreement);
ModelState.Clear();
}
catch (Exception ex)
{
Logger.GetLog(Logger.ServiceLog).Error(ex);
ModelState.AddModelError("errors", "Delete failed");
}
return Json(ModelState.ToDataSourceResult());
}
Is this a bug with the Kendo grid or have we missed something obvious? Just to recap..the script error only occurs when deleting the last record in the grid.

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Login.aspx.cs" Inherits="Namespace.Login" %><%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %><!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head runat="server"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Login</title> <link href="Content/Styles/login.css" rel="stylesheet" /></head><body> <form id="formLogin" runat="server"> <telerik:RadScriptManager ID="RadScriptManager1" runat="server"></telerik:RadScriptManager> <div id="rfd-demo-zone"> <div class="vlaidationSummary"> <telerik:RadAjaxPanel ID="RadAjaxPanel1" runat="server" LoadingPanelID="RadAjaxLoadingPanel1"> <telerik:RadFormDecorator ID="RadFormDecorator1" runat="server" DecoratedControls="All" DecorationZoneID="rfd-demo-zone" /> <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" Skin="Default"></telerik:RadAjaxLoadingPanel> <div class="groupWrapper"> <asp:Login ID="Login1" runat="server" Width="100%" EnableViewState="false" OnLoggingIn="Login1_LoggingIn"> <LayoutTemplate> <table cellpadding="1" cellspacing="0" width="100%"> <tr> <td> <table cellpadding="0" width="100%"> <tr> <td> <asp:Label ID="UserNameLabel" runat="server" AssociatedControlID="UserName">Username:</asp:Label> </td> <td> <asp:TextBox ID="UserName" runat="server"></asp:TextBox> <asp:RequiredFieldValidator ID="UserNameRequired" runat="server" ControlToValidate="UserName" ErrorMessage="Required" ToolTip="Required" ValidationGroup="Login1"></asp:RequiredFieldValidator> </td> </tr> <tr> <td> <asp:Label ID="PasswordLabel" runat="server" AssociatedControlID="Password">Password:</asp:Label> </td> <td> <asp:TextBox ID="Password" runat="server" TextMode="Password" Text="caffe"></asp:TextBox> <asp:RequiredFieldValidator ID="PasswordRequired" runat="server" ControlToValidate="Password" ErrorMessage="Required" ToolTip="Required" ValidationGroup="Login1"></asp:RequiredFieldValidator> </td> </tr> <tr> <td> </td> <td> <asp:CheckBox ID="RememberMe" runat="server" Text="Remember"></asp:CheckBox> </td> </tr> <tr> <td align="center" colspan="2" style="color: Red;"> <asp:Literal ID="FailureText" runat="server" EnableViewState="False"></asp:Literal> </td> </tr> <tr> <td colspan="2" style="text-align: right;"> <asp:Button ID="LoginButton" runat="server" CommandName="Login" Text="Log In" ValidationGroup="Login1"></asp:Button> </td> </tr> </table> </td> </tr> </table> </LayoutTemplate> </asp:Login> <asp:Label ID="lblRisultato" Text="" Font-Size="Large" ForeColor="Green" runat="server"></asp:Label> <div style="margin-top: 5px;"> <asp:LoginName ID="LoginName1" runat="server" Width="300px" EnableViewState="false"></asp:LoginName> </div> <div style="margin-top: 5px;"> <asp:LoginStatus ID="LoginStatus1" runat="server" Width="300px" EnableViewState="false"></asp:LoginStatus> </div> <div style="margin-top: 5px;"> <asp:LoginView ID="LoginView1" runat="server" EnableViewState="false"> <AnonymousTemplate> <div style="height: 100px"> This is displayed if the user is NOT logged in! </div> </AnonymousTemplate> <LoggedInTemplate> <div style="color: #fff; background-color: #015914; -moz-border-radius: 4px; padding: 4px;"> This is displayed if the user is LOGGED in! </div> </LoggedInTemplate> </asp:LoginView> </div> </div> </telerik:RadAjaxPanel> </div> </div> </form></body></html>