This is a migrated thread and some comments may be shown as answers.

Deleting only row on Grid generates a javascript error and doesn't execute the call to the server

6 Answers 320 Views

Grid

This is a migrated thread and some comments may be shown as answers.

OmarOrnelas asked on 21 Dec 2012, 07:49 PM

Hi,

I'm having this problem that only happens in a particular situation. If I have a grid with only one row and I try to delete it, there is a javascript error here.

l._current.closest("table")[0].focus()

Unhandled exception at line 16, column 31418 in http://localhost/zzz/Scripts/kendo/2012.3.1114/kendo.web.min.js
0x800a138f - Microsoft JScript runtime error: Unable to get value of the property 'closest': object is null or undefined

When there is more than one row on the grid, deletes work perfectly fine. I believe it might have to do with the grid trying to set focus to the closest row available...when there are no rows available at all. This is what I'm using to generate the grid. Thanks in advance.

@(Html.Kendo().Grid<MyNamespace.MyModel>()
      .Name("myGrid")
      .Columns(columns =>
      {
          columns.Bound(c => c.Name);
          columns.Command(c =>
          {
               c.Edit();
               c.Destroy();
          });
      })
      .ToolBar(toolbar => {
            toolbar.Create();    
        })
      .Sortable()
      .Selectable()
      .Reorderable(r => r.Columns(true))
      .Resizable(r => r.Columns(true))
      .Navigatable()
      .Filterable()
      .Scrollable(scroll => scroll.Height(500))
      .Editable(editable => editable.Mode(GridEditMode.InLine))
      .DataSource(dataSource => dataSource
        .Ajax()
        .Read(read => read
                    .Type(HttpVerbs.Get)
                    .Url(Url.RouteUrl("DefaultApi", new { httproute = "", controller = "mycontroller" }))
             )
        .Create(create => create
                    .Type(HttpVerbs.Post)
                    .Url(Url.RouteUrl("DefaultApi", new { httproute = "", controller = "mycontroller" }))
             )
        .Update(update => update
                    .Type(HttpVerbs.Put)
                    .Url(Url.RouteUrl("DefaultApi", new { httproute = "", controller = "mycontroller" }))
             )
        .Destroy(destroy => destroy
                    .Type(HttpVerbs.Delete)
                    .Url(Url.RouteUrl("DefaultApi", new { httproute = "", controller = "mycontroller" }))
             )
        .Model(m => {
                    m.Id(c => c.Id);
                    }
               )
        .ServerOperation(false))
)

UPDATE: Since it was apparently just trying to find a row to focus, I added a check to see if the object was null. I wrapped
the call like this.
 function(){if(l._current)l._current.closest("table")[0].focus();}



Seems to be working now for both a single row on the grid or multiple rows. Hope this gets fixed in a future release.

6 Answers, 1 is accepted

answered on 10 Jan 2013, 08:06 PM

Hi Petur,

No, I could not replicate the issue with your examples, mainly because there are no examples where the grid is selectable and with a delete button, also I don't see this issue running with pure client side code (http://jsfiddle.net/xMtFX/1/) but for some reason when tied to a remote data source and the grid being selectable and you delete the last element, it tries to find the nearest element on the grid when there are none. I don't really want to invest more time building a whole project to show you this since I found a way around it, just basically letting you guys know.

Thanks for following up.

answered on 14 Jan 2013, 11:05 AM

editing-inline-modified.zip

Hi,
I've same problem in a web kendo grid (ver. kendoui.complete.2012.3.1114.commercial).
I noticed that the problem occurs if you set the navigatable = true.
I was able to replicate the error by adjusting your page "editing-inline.html" as follows:

<!DOCTYPE html>
<html>
<head>
<title>Inline editing</title>

<link href="../../content/shared/styles/examples-offline.css" rel="stylesheet">
<link href="../../../styles/kendo.common.min.css" rel="stylesheet">
<link href="../../../styles/kendo.default.min.css" rel="stylesheet">

<script src="../../../js/jquery.min.js"></script>
<script src="../../../src/js/kendo.all.js"></script>
<script src="../../content/shared/js/console.js"></script>
</head>
<body>
<a class="offline-button" href="../index.html">Back</a>
<div id="example" class="k-content">
<div id="grid"></div>

<script>
$(document).ready(function () {
var crudServiceBaseUrl = "http://demos.kendoui.com/service",
dataSource = new kendo.data.DataSource({
transport: {
read: {
url: crudServiceBaseUrl + "/Products",
dataType: "jsonp"
},
update: {
url: crudServiceBaseUrl + "/Products/Update",
dataType: "jsonp"
},
destroy: {
url: crudServiceBaseUrl + "/Products/Destroy",
dataType: "jsonp"
},
create: {
url: crudServiceBaseUrl + "/Products/Create",
dataType: "jsonp"
},
parameterMap: function(options, operation) {
if (operation !== "read" && options.models) {
return {models: kendo.stringify(options.models)};
}
}
},
batch: true,
pageSize: 5,
schema: {
model: {
id: "ProductID",
fields: {
ProductID: { editable: false, nullable: true },
ProductName: { validation: { required: true } },
UnitPrice: { type: "number", validation: { required: true, min: 1} },
Discontinued: { type: "boolean" },
UnitsInStock: { type: "number", validation: { min: 0, required: true } }
}
}
},
sort: { field: "ProductName", dir: "asc" }
});

$("#grid").kendoGrid({
dataSource: dataSource,
navigatable: true,
filterable: true,
sortable: true,
groupable: true,
scrollable: true,
reorderable: true,
resizable: true,
pageable: {
pageSizes: [5, 10, 15, 20, 25, 30]
},
height: 400,
toolbar: ["create"],
columns: [
"ProductName",
{ field: "UnitPrice", title: "Unit Price", format: "{0:c}", width: "150px" },
{ field: "UnitsInStock", title:"Units In Stock", width: "150px" },
{ field: "Discontinued", width: "100px" },
{ command: ["edit", "destroy"], title: " ", width: "210px" }],
editable: "inline"
});
});
</script>
</div>

</body>
</html>

As you can see, eliminating the property "navigatable", everything works correctly.
I accidentally some setting or is it a bug?

Thanks for the support
Andrea