Kendo UI Grid - 页脚按钮

时间:2013-10-01 05:47:29

标签: jquery kendo-ui kendo-grid

我有一个具有内部网格的Kendo UI网格

        var gridAwaitingForApproval = $("#gridAwaitingForApproval").kendoGrid({
            dataSource: dsAwaitingTimeSheets,
            sortable: true,
            pageable: true,
            detailTemplate: kendo.template($("#awaiting-template").html()),
            detailInit: detailInit,
            dataBound: dataBound,
            columns: [
                {
                    field: "Name",
                    title: "Name",
                    width: "120px"
                },
                {
                    field: "Position",
                    title: "Position",
                    width: "120px"
                },
                {
                    field: "Site",
                    width: "120px"
                }
            ]
        });

        function dataBound() {
            var grid = this;

            //expand all detail rows
            grid.tbody.find("tr.k-master-row").each(function() {
                grid.expandRow($(this));
            });

            //remove hierarchy cells and column
            $(".k-hierarchy-cell").remove();
            $(".k-hierarchy-col").remove();

        }

        function detailInit(e) {

            var detailRow = e.detailRow;

            var grid = detailRow.find(".entries").kendoGrid({
                dataSource:
                {
                    data: timeSheetEntries,
                    pageSize: 5,
                    filter: { field: "CandidateId", operator: "eq", value: e.data.CandidateId }
                },
                columns: [
                    { field: "CandidateId", title: "CandidateId", width: "56px" },
                    { field: "Date", title: "Date", width: "56px" },
                    { field: "MinutesWorked", title: "Minutes Worked", width: "56px" },
                    { field: "MinutesBreak", title: "Minutes Break", width: "56px" },
                    { field: "AbsenceDetails", title: "Absence Details", width: "56px" }
                ]
            });

现在,我需要在每个内部网格视图的页脚中放置命令按钮,所以我所做的是在寻呼机的div中附加html

 grid.find(".k-pager-info")
                .append('<span class="approve" style="margin-left:2em;float:right;"><a class="btn-approve btn btn-primary btn-small">Approve</a></span>')
                .delegate(".approve a", "click", function(e) {
                    console.debug(e);
                    alert("I NEED TO GET THE CandidateId IN HERE");
                });

现在,我的问题是,如何从按钮的click事件访问特定内部网格上的数据?

.delegate(".approve a", "click", function(e) {
                        console.debug(e);
                        alert("NEED TO ACCESS DATA OF THE GRID like CandidateId");
                    });

是否有解决方法如何执行此操作?请注意,我没有使用内置工具栏,因为它不那么灵活。

http://jsfiddle.net/lincx/BSQyd/79/

更新:我现在在这里......

   grid.find(".k-pager-info")
                .append('<span class="approve" style="margin-left:2em;float:right;"><a class="btn-approve btn btn-primary btn-small">Approve</a></span>')
                .delegate(".approve a", "click", function(e) {

                    var gridData = grid.data("kendoGrid");
                    //var newrowdata = grid.dataItem();

                    var selection = grid.select();
                    console.debug(selection);
                    var rowData = gridData.dataItem(selection); // UNDEFINED
                    console.log(rowData.CandidateId);// UNDEFINED
                });

1 个答案:

答案 0 :(得分:1)

var selection = grid.select();应为var selection = gridData.select();