How to open a kendo Pop Up window when a particular kendo grid column cell is in focus?

Question

I have a kendo grid & a kendo window. I need to open the window when a particular grid column cell is in focus. I also need to carry some values from pop up window grid to the page grid's particular cell. Here is my grid:

//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();
        });

I was able to select values from Pop up grid but unable to bring it down & to open the pop up from within the page grid. Please help.

Answer 1

Ok I sorted it out, We can set a class name to every grid column by using the attributes property, & then by using that class name you can trigger any event. Sample code is here:

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
            }

        });