how to catch kendo grid cell out of focus event?

问题:

In my kendo grid, I want to put some value in a cell & then after leaving the cell, based on the value of that cell, I need to put some other value on the adjascent cell. How can I do that?

I have studied the following jsfiddle, the problem is its triggering the event everytime I'm getting out of any cell, but I need to fire the event for only one column's cell.

http://jsfiddle.net/latenightcoder/6ZNqN/1/

here is my grid:

//To Define Columns for Yearly Holiday Kendo Grid
        var YearlyHolidayGrid = $("#YearlyHolidayGrid").kendoGrid({
            dataSource: YearlyHolidayDataSource,
            pageable: true,
            editable: true,
            edit: function (e) {
                var input = e.container.find(".k-input");
                var value = input.val();
                input.keyup(function () {
                    value = input.val();
                });
                input.blur(function () {
                    //$("#log").html(input.attr('name') + " blurred : " + value);
                    //var a = new Date();
                    //a = value;
                    //var day = a.getDay();
                    //alert(day);
                    alert(value);
                });
            },
            selectable: "row",
            navigatable: true,
            filterable: true,
            sortable: true,
            height: 200,
            columns: [
                  { field: "HLDY_SLNO", title: "SL", width: "50px" },
                  { field: "HLDY_DATE", title: "Date", width: "100px" },
                  { field: "HLDY_DAY", title: "Day", width: "100px" },
                  { field: "HLDY_NAME", title: "Holiday Name", width: "100px" },
                  { field: "HLDY_TYPE", title: "Holiday Type", width: "100px" },
                  { field: "HLDY_STATUS", title: "Holiday Status", width: "100px", editor: YearlyHolidayStatus },
                  { field: "HLDY_DFIN_TYPE", title: "Defined as", width: "100px", editor: YearlyHolidayDefinedAs },
                  { field: "HLDY_REM", title: "Remarks", width: "100px" },
                  { command: [{ name: "DeltedRow", text: "Delete"}], title: "Delete", width: 100 }
            ]
            //change: function () {
            //    var row = this.select();
            //    var id = row.data("id");

            //  //  $("#log")
            //  //      .html("selected row with id= " + id + " \
            //  //, for ShipName = " + dataSource.get(id).get("ShipName"));
            //}
        });

Plz help.

回答1:

You should change the selector when you define the blur event handler to choose only the column that you want.

In the JSFiddle that you say that you have studied, it is originally defined as:

edit: function(e) {
    var input = e.container.find(".k-input");
    var value = input.val();
    input.keyup(function(){
        value = input.val();
    });
    input.blur(function(){
        $("#log").html(input.attr('name') + " blurred : " + value);
    });
},

You should define it as:

edit: function(e) {
    var input = e.container.find(".k-input");
    var value = input.val();
    input.keyup(function(){
        value = input.val();
    });
    $("[name='ShipName']", e.container).blur(function(){
        var input = $(this);
        $("#log").html(input.attr('name') + " blurred : " + value);
    });
},

Where I use as selector [name='ShipName'] i.e. set blur only for an HTML input with the attribute name equals ShipName.

If you play now with the modified version (here) you will see that only displays in the log the value when the column is ShipName.

EDIT: If you need to get all the items in your model so you can change another column, you might use dataItem. The steps are:

// Find the row being edited:
var row = $(this).closest("tr");

// Get the item using `dataItem`:
var item = grid.dataItem(row);

The modified Fiddle to display the ShipCity when ShipName is blurred here: http://jsfiddle.net/OnaBai/6ZNqN/116/

回答2:

function onCellEdit(e) {
    try {
        $('.text-box.single-line').change(function () {
            hasUnSavedChange = true;
        });
    }
    catch (err) {
        error_handler(err);
    }
}