Kendo UI Grid - Button in footer

Question

I have a Kendo UI Grid that has inner grid

        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" }
                ]
            });

Now, I need to put command buttons in the footer of each inner grid view, so what I did is append html in the pager's div

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

Now, my problem is, how can I access the data on the particular inner grid from the click event of the button?

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

Is there workaround on how to do this? Please note that I did not use the built in toolbar because it's not that flexible.

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

UPDATE: Im now here...

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

Bishnu Rawal Bishnu Rawal · Accepted Answer · 2013-10-02T08:54:19

var selection = grid.select(); should be var selection = gridData.select();.

Kendo UI Grid - Button in footer

1 Answers