Kendo Grid equivalent of onEditComplete

l46kok picture l46kok · May 10, 2013 · Viewed 14.9k times · Source

Is there an event equivalent to onEditComplete for Kendo Grid where the event fires only after the content of the cell has been edited?

Documentation mentions "edit" event, but this fires as soon as the cell goes into edit mode (So this is equivalent to onBeginEdit).

The closest event with the desired behavior I found was the "save" event, but this event only fires when the content of the cell has been changed. I want an event that fires as soon as the cell goes out of the edit mode.

The grid's editmode is set to incell.

Answer

Quinton Bernhardt picture Quinton Bernhardt · Jun 6, 2013

So due to the comment i've removed my previous answer - using the blur event on the input boxes (or other elements) seems to work :

On the grid.edit event, use jquery to bind to the textbox (or any other inline edit control)'s blur event which is fired when focus is lost. Append this to the grid definition...and obviously replace the alert with your code.

edit: function (e) {
        alert('Edit Fired');
        $('input.k-input.k-textbox').blur(function () {
            alert('blur event called');
        });
    },

I've tested this by modifying the sample inline edit code here

My full local source of the edit - see only the edit event on the grid def:

<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: 20,
                    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 } }
                            }
                        }
                    }
                });

            $("#grid").kendoGrid({
                dataSource: dataSource,
                pageable: true,
                height: 430,
                toolbar: ["create"],
                // added in hook to here to bind to edit element events.  
                // blur is fired when an element loses focus
                edit: function (e) {
                    alert('Edit Fired');
                    $('input.k-input.k-textbox').blur(function (e) {
                        alert('blur event called');
                    });
                },
                columns: [
                    "ProductName",
                    { field: "UnitPrice", title: "Unit Price", format: "{0:c}", width: "100px" },
                    { field: "UnitsInStock", title: "Units In Stock", width: "100px" },
                    { field: "Discontinued", width: "100px" },
                    { command: ["edit", "destroy"], title: "&nbsp;", width: "172px" }],
                editable: "inline"
            });
        });
    </script>
</div>