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

7 posts, 0 answers
  1. OmarOrnelas
    OmarOrnelas avatar
    10 posts
    Member since:
    Sep 2010

    Posted 21 Dec 2012 Link to this post

    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.
  2. Petur Subev
    Admin
    Petur Subev avatar
    1882 posts

    Posted 24 Dec 2012 Link to this post

    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!
  3. OmarOrnelas
    OmarOrnelas avatar
    10 posts
    Member since:
    Sep 2010

    Posted 10 Jan 2013 Link to this post

    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.
  4. Andrea Biancolilla
    Andrea Biancolilla avatar
    3 posts
    Member since:
    Jul 2012

    Posted 14 Jan 2013 Link to this post

    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
  5. Daniel
    Admin
    Daniel avatar
    2224 posts

    Posted 14 Jan 2013 Link to this post

    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!
  6. Andrea Biancolilla
    Andrea Biancolilla avatar
    3 posts
    Member since:
    Jul 2012

    Posted 14 Jan 2013 Link to this post

    Well!
    Thank you very much

    Andrea

  7. OmarOrnelas
    OmarOrnelas avatar
    10 posts
    Member since:
    Sep 2010

    Posted 15 Jan 2013 Link to this post

    Thank you guys!
Back to Top