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 301 Views
Grid
This is a migrated thread and some comments may be shown as answers.
OmarOrnelas
Top achievements
Rank 1
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

Sort by
0
Petur Subev
Telerik team
answered on 24 Dec 2012, 03:56 PM
Hello Omar,

Could you share more details about the issue? Does the problem exist in our online demos (which one if it does), if it does not could you share JSBin example? What version do you use and does the problem exist in every browser?

Kind Regards,
Petur Subev
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
OmarOrnelas
Top achievements
Rank 1
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.
0
Andrea Biancolilla
Top achievements
Rank 1
answered on 14 Jan 2013, 11:05 AM
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: "&nbsp;", 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
0
Daniel
Telerik team
answered on 14 Jan 2013, 01:28 PM
Hi,

This problem when the navigation is enabled is now fixed in the latest internal build(2012.3.1304) that is available for download from your account. Please update the version you are using and let me know if the error is still thrown.

Regards,
Daniel
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Andrea Biancolilla
Top achievements
Rank 1
answered on 14 Jan 2013, 01:32 PM

Well!
Thank you very much

Andrea

0
OmarOrnelas
Top achievements
Rank 1
answered on 15 Jan 2013, 03:52 PM
Thank you guys!
Tags
Grid
Asked by
OmarOrnelas
Top achievements
Rank 1
Answers by
Petur Subev
Telerik team
OmarOrnelas
Top achievements
Rank 1
Andrea Biancolilla
Top achievements
Rank 1
Daniel
Telerik team
Share this question
or