CODEWITHSUNDEEP
kendo-uikendo-grid
abhijeet gupta
abhijeet gupta

Reputation: 45

How to get selected row data of kendo detail grid

I am able to get the selected row in kendo grid ( master grid), But I am unable to get the selected row data in detail grid. Please provide me a code sample. Thanks, abhi

Upvotes: 4

Views: 14707

Answers (2)

Corne
Corne

Reputation: 646

Here a somewhat simpler example on how to get to the data of the clicked row: http://jsfiddle.net/Corne/AQqMH/5/

This is the code where the magic happens:

change: function (arg) {            
    var selectedData = this.dataItem(this.select());

    // selectedData now points to the selected dataSource item!

    alert("Clicked id: " + selectedData.id);
}

Upvotes: 0

OnaBai
OnaBai

Reputation: 40917

It is like for the main grid. Being childgrid the grid corresponding to details, do:

var row = childgrid.select();
var data = childgrid.dataItem(row);
console.log("row", row);
console.log("data", data);

Where I defined master grid as:

$("#grid").kendoGrid({
    ...
    detailInit: detailInit,
    ...
});

And details grid is created using the following function when a row in master grid is expanded:

function detailInit(e) {
    childgrid = $("<div/>").appendTo(e.detailCell).kendoGrid({
        dataSource: {
            type: "odata",
            transport: {
                read: "http://demos.kendoui.com/service/Northwind.svc/Orders"
            },
            serverPaging: true,
            serverSorting: true,
            serverFiltering: true,
            pageSize: 5,
            filter: { field: "EmployeeID", operator: "eq", value: e.data.EmployeeID }
        },
        scrollable: false,
        sortable: false,
        selectable: true,
        pageable: true,
        columns:
                [
                    { field: "OrderID", width: "70px" },
                    { field: "ShipCountry", title: "Ship Country", width: "110px" },
                    { field: "ShipAddress", title: "Ship Address" },
                    { field: "ShipName", title: "Ship Name", width: "200px" }
                ]
    }).data("kendoGrid");
}

Running example here : http://jsfiddle.net/OnaBai/2M86L/ (When you click on Show button, its displays in the console of your browser the selected row and its data).

Upvotes: 7

Related Questions