Kendo Grid equivalent of onEditComplete

Question

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.

Solution 1

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>

Solution 2

Use the Save event

(fired when the focus is moved outside of the cell being edited and before the cell is closed)

http://www.kendoui.com/forums/kendo-ui-web/grid/is-there-an-event-that-first-after-a-user-edits-a-cell-but-before-they-save-in-a-grid-with-batch-edit-and-incell-editing-.aspx.

Solution 3

Why are you not using the "blur" event?

http://www.kendoui.com/forums/ui/window/possible-to-close-window-when-it-loses-focus-.aspx

    $("#window").blur(function(){
      if ($(document.activeElement).closest(".k-window").length == 0) {
        $("#window").data("kendoWindow").close();
      }
    });

http://api.jquery.com/blur/

Solution 4

Have you tried the Change Event

"change

Fired when the user selects a table row or cell in the grid."

Example - get the selected data item(s) when using cell selection

<div id="grid"></div>
<script>
function grid_change(e) {
  var selectedCells = this.select();
  var selectedDataItems = [];
  for (var i = 0; i < selectedCells.length; i++) {
    var dataItem = this.dataItem(selectedCells[i].parentNode);
    if ($.inArray(dataItem, selectedDataItems) < 0) {
      selectedDataItems.push(dataItem);
    }
  }
  // selectedDataItems contains all selected data items
}
$("#grid").kendoGrid({
  columns: [
    { field: "name" },
    { field: "age" }
  ],
  dataSource: [
    { name: "Jane Doe", age: 30 },
    { name: "John Doe", age: 33 }
  ],
  selectable: "multiple, cell"
});
var grid = $("#grid").data("kendoGrid");
grid.bind("change", grid_change);
</script>

View more solutions

Comments

[Rolf]

Since this issue seems to be open for three years now, and Telerik didn't provide an official solution - did you open a feature request at Telerik? There is an "itemChange" event in the Grid, but it's undocumented and it doesn't tell you the column name.

[TtT23]

Again, as explicitly specified in the OP, I need an event that fires upon the edit being complete on the cell. What you suggested is more or less similar to onBeginEdit. What I need is onEditComplete.

[TtT23]

I bound the datasource remotely and using this would mean that the event is fired when the datasource itself is changed. I want the datasource to be intact, I literally just need the event to fire if the cell goes out of the edit mode.

[user23031988]

From what i know there are no events like "onEditComplete". but you can get the element with a css selector and set the blur function. This: ".k-grid-content>table>tbody>tr>td" will be the css selector for demos.kendoui.com/web/grid/editing-custom.html

[Quinton Bernhardt]

i managed to hook into the blur event on the textbox, that should only fire when the text box loses focus - i've tested. if you want to hook into any other element other than textbox, just change the jquery selector in the grid.edit event code - see my edit