如何捕获kendo网格单元格的焦点事件?

时间:2013-12-31 06:45:54

标签: javascript jquery kendo-ui kendo-grid

在我的剑道网格中,我想在一个单元格中加入一些值。然后在离开单元格后,根据该单元格的值,我需要在相邻单元格上加上一些其他值。我怎么能这样做?

我研究过以下的jsfiddle,问题是每当我离开任何单元格时它都会触发事件,但是我需要只为一个列的单元格触发事件。

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

这是我的网格:

//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帮助。

2 个答案:

答案 0 :(得分:3)

在定义selector事件处理程序时,应更改blur以仅选择所需的列。

在JSFiddle中,你说你已经学过,它最初被定义为:

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

您应该将其定义为:

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

我用作选择器[name='ShipName']的位置,即仅为属性blur等于input的HTML name设置ShipName

如果您现在使用修改后的版本(here),您会看到只有日志显示列ShipName时的值。

编辑:如果您需要获取模型中的所有项目以便更改其他列,则可以使用dataItem。步骤是:

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

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

修改后的小提琴在ShipName模糊时显示ShipCity:http://jsfiddle.net/OnaBai/6ZNqN/116/

答案 1 :(得分:0)

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