Question

i’m working with kendo ui to create rich user interface, but i’m stuck t the following:
I want a Grid with a subgrid, the first one displays customer info, like name, etc the second shows the available shipping-adresses, the customer saved. Now my problem is, that in the subgrid is not data, although firebug shows, that the data was returned. This is my source:

$(function() {
var main = $("#customer-grid").kendoGrid({
    dataSource: {
        transport:{
            read      :"data/users.php",
            update    :{
                url :"data/users.php?action=update",
                type:"POST",
                data: function (data) {
                    data.birthday = kendo.toString(data.birthday, "yyyy-MM-dd");
                    return data;
                    }
            },
            destroy:{
                url :"data/users.php?action=destroy",
                type:"POST"
            }
        },
        schema: {
            data: "data",
            model: {
                id: "id",
                fields: {
                    id: {editable: false},
                    activated: { type: "boolean" },
                    birthday: {type: "date"},
                    gender: {defaultValue: "W"}
                }
            }
        }
    },
    height: 250,
    filterable: true,
    sortable: true,
    pageable: true,
    detailInit: detailInit,
    dataBound: function() {
        this.expandRow(this.tbody.find("tr.k-master-row").first());
    },
    columns: [{ 
                field: "id",
                title: "ID",
                width: "50px"
            }, { 
                field: "gender",
                title: "Geschlecht",
                width: "100px",
                values: data
            }, {
                field: "firstname",
                title: "Vorname"
            }, {
                field: "lastname",
                title: "Nachname"
            }, {
                field: "birthday",
                title: "Geburtstag",
                width: "100px",
                format: "{0:dd.MM.yyyy}"
            },{
                field: "mail",
                title: "E-Mail"
            },{
                field: "activated",
                title: "Aktiviert",
                width: "100px",
                values: actval                  
            }, { 
                command: ["edit", "destroy"], 
                title: " ", 
                width: "210px" 
            }],
            editable:{
                mode: "popup"
            }
});
});

function detailInit(e) {
    $("<div/>").appendTo(e.detailCell).kendoGrid({
        dataSource: {
            transport: {
                read: "data/adress.php?uid="+e.data.id
            },
            serverPaging: true,
            serverSorting: true,
            serverFiltering: true,
            pageSize:6
        },
        scrollable: false,
        sortable: true,
        pageable: true,
        columns: [
            { field: "id", width: 70 },
            { field: "zipcode", title:"Ship Country", width: 100 },
            { field: "city", title:"Ship Address" },
            { field: "street", title: "Ship Name", width: 200 }
        ]
    });
}

The function gets its data from a php page, which does a mysql-query and then gives back the data as application/json. But nothing is shown.

Hopefully you guys can help me.

Regards

Answer 1

I tested your code and it works fine.

Check:

1. e parameter format. I’ve used: detailInit({ detailCell : $("#grid"), data : { id : 1}});
2. JSON returned by data/adress.php. I’ve returned:

[
    {"city":"Madrid", "id":"1", "zipcode":"31000", "street":"my street 1", "number":5},
    {"city":"Sofia", "id":"2", "zipcode":"32000", "street":"my street 2", "number":4},
    {"city":"London", "id":"3", "zipcode":"33000", "street":"my street 3", "number":3},
    {"city":"San Francisco", "id":"4", "zipcode":"34000", "street":"my street 4", "number":2},
    {"city":"Berlin", "id":"5", "zipcode":"35000", "street":"my street 5", "number":1}
]

Using the following (hardcoded) php response:

<?php
header('Content-type: application/json');
$named_array = array(
    array("city" => "Madrid", "id" => "1", "zipcode" => "31000", "street" => "my street 1", "number" => 5),
    array("city" => "Sofia", "id" => "2", "zipcode" => "32000", "street" => "my street 2", "number" => 4),
    array("city" => "London", "id" => "3", "zipcode" => "33000", "street" => "my street 3", "number" => 3),
    array("city" => "San Francisco", "id" => "4", "zipcode" => "34000", "street" => "my street 4", "number" => 2),
    array("city" => "Berlin", "id" => "5", "zipcode" => "35000", "street" => "my street 5", "number" => 1)
);
echo json_encode($named_array);
?>

EDIT: This is the definition of the grid containing the subgrid.

var outer = $("#outer").kendoGrid({
    dataSource:{
        type:"json",
        transport:{
            read:"names.php"
        },
        pageSize:5
    },
    sortable:true,
    columns:[
        { field:"id", width:70 },
        { field:"name", title:"Name", width:100 },
        { field:"lastname", title:"LastName", width:100 },
        { title:"Address", width:300, attributes:{ class:"ob-address"}}
    ]
}).data("kendoGrid");

and then on a button click, I run:

$(".ob-address", outer.tbody).each(function (idx, elem) {
    detailInit({ detailCell:elem, data:{ id:1}});
});

As you can see I marked a column in the outer grid with a CSS class named ob-address and the function selects all the cell in the body of the outer table for inserting the inner table (subgrid).