javascript - 当特定的剑道网格列单元格处于焦点状态时，如何打开剑道弹出窗口？

Question

我有一个剑道网格和一个剑道窗口。当特定网格列单元格处于焦点时，我需要打开窗口。我还需要将一些值从弹出窗口网格传递到页面网格的特定单元格。这是我的网格:

//Page Grid
var YearlyHolidayGrid = $("#YearlyHolidayGrid").kendoGrid({
            dataSource: YearlyHolidayDataSource,
            pageable: true,
            editable: true,
            edit: function (e) {
                var day = 0;
                var input = e.container.find(".k-input");
                var value = input.val();
                input.keyup(function () {
                    value = input.val();
                });
                $("[name='HLDY_DATE']", e.container).blur(function (e) {


                    var input = $(this);
                    var a = value.split("/");
                    var date = new Date(a[2], (a[1] - 1), a[0]);
                    day = date.getDay();
                    var grid = $("#YearlyHolidayGrid").data("kendoGrid");
                    var row = $(this).closest("tr");
                    var item = grid.dataItem(row);
                    if (day == 0)
                        item.HLDY_DAY = "Sunday";
                    else if (day == 1)
                        item.HLDY_DAY = "Monday";
                    else if (day == 2)
                        item.HLDY_DAY = "Tuesday";
                    else if (day == 3)
                        item.HLDY_DAY = "Wednesday";
                    else if (day == 4)
                        item.HLDY_DAY = "Thursday";
                    else if (day == 5)
                        item.HLDY_DAY = "Friday";
                    else if (day == 6)
                        item.HLDY_DAY = "Saturday";

                });




            },
            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", attributes: { "class": "HolidayName"} },
                  { 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 }
            ]

        });

//Window Grid
var HolidayNameGrid = $("#HolidayNameWindowGrid").kendoGrid({
            dataSource: HolidayNameDataSource,
            pageable: true,
            editable: true,
            selectable: "row",
            navigatable: true,
            filterable: true,
            sortable: true,

            columns: [
                  { field: "HLDY_NAME", title: "Holiday Name", width: "100px" },
                  { field: "HLDY_TYPE", title: "Holiday Type", width: "50px" },
            ]
        });

//This is my pop up window
 var HolidayNameWindow = $('#HolidayNameListOfValueWindow').kendoWindow({
            actions: ["Minimize", "Maximize", "Close"],
            visible: false,
            width: "500px",
            height: "auto",
            title: "List Of Value",
            position: { top: 100, left: 400 },
            modal: true,
            draggable: true
        }).data('kendoWindow');

//Code to open my window
$(document.body).keypress(function (e) {
            if ($(".HolidayName").is(":focus")) {
                //Key Press F9
                if (e.keyCode == 120) {

                    SelectedItemOfListOfValue('HolidayNameWindowGrid');
                    HolidayNameWindow.open(); //Open Popup
                }
            }
        });

//Here is code to select data in pop up window & bring it down to page grid
 $('#btnHolidayNameWindowOK').click(function () {
            ClearOperationMsgTextBoxRedColor();

            var WindowGrid = $("#HolidayNameWindowGrid").data("kendoGrid");
            var WindowRow = WindowGrid.select();
            var WindowItem = WindowGrid.dataItem(WindowRow);


            var PageGrid = $("#YearlyHolidayGrid").data("kendoGrid");
            var PageRow = $(this).closest("tr");



            var PageItem = PageGrid.dataItem(PageRow);

            PageItem.HLDY_NAME.val(WindowItem.HLDY_NAME);
            alert("bingo");


            //ListOfValueGridEvent('GradeWindowGrid');
            HolidayNameWindow.close();
        });

我能够从弹出网格中选择值，但无法将其下拉并从页面网格内打开弹出窗口。请帮忙。

Answer 1

好的，我已经整理好了，我们可以使用 attribute 属性为每个网格列设置一个类名，然后使用该类名可以触发任何事件。示例代码在这里:

columns: [

                  { field: "HLDY_NAME", title: "Holiday Name", width: "200px", attributes: { "class": "HolidayName"} },

            ]    

// To Open Holiday Name List of Value
        $(document).on('keyup', '.HolidayName', function (e) {
            if (e.which == 120) {
                SelectedItemOfListOfValue('HolidayNameWindowGrid');
                HolidayNameWindow.open(); //Open Popup
            }

        });