This is a migrated thread and some comments may be shown as answers.

How to display details of a navigation property in a grid?

1 Answer 88 Views
This is a migrated thread and some comments may be shown as answers.
Top achievements
Rank 1
B asked on 30 Jul 2013, 09:15 PM
I have an OData datasource of UserGroups, called with /api/UserGroups?$expand=USERS.  In Fiddler, I see 1..* users in each user group.

I would like to know how to display this in a data grid as a part of a details view per group.  I would like to accomplish this with data set, rather than making a secondary call to something like /api/Users?$filter....  as the data is all there in the primary data set.

Here is my main data set - I was initially working with the detailInit() to make a secondary call, but as I mentioned, this isn't necessary:

$(function () {
    var dataSource = new{
        type: "odata",
        transport: {
            read: {
                // See for OData URI conventions
                // OData: ~/api/Users?$inlinecount=allpages&top=2
                // OData: ~/api/Users?$inlinecount=allpages - includes odata.count
                // OData: inline filtering: ~/api/Users?$filter=USERNAME eq 'asgro'
                // to include hierarchical data, use the OData /api/UserGroups?$expand=USER
                // To reduce the payload sice, the query ~/api/UserGroups will only include the USERGROUP entities, and not any navigation property content
                url: "/api/UserGroups?$expand=USERS",
                dataType: "json"                                // the default result type is JSONP, but WebAPI does not support JSONP
            parameterMap: function (options, type) {
                // this is optional - if we need to remove any parameters (due to partial OData support in WebAPI
                var parameterMap =;
                //delete parameterMap.$inlinecount;               // remove inlinecount parameter
                //delete parameterMap.$format;                    // remove format parameter
                return parameterMap;
        schema: {
            data: function (data) {
                return data.value;
            total: function (data) {
                console.log("count: " + data["odata.count"]);
                return data["odata.count"];
            model: {
                fields: {
                    ID: { type: "string" },
                    NETWORKID: { type: "string" },
                    GROUPNAME: { type: "string" },
                    DESCRIPTION: { type: "string" },
                    DATECREATED: { type: "date" },
                    DATEMODIFIED: { type: "date" },
                    //ROLESSTRING: { type: "string" },
                    SUBSCRIPTIONSTRING: { type: "string" }
        pageSize: 10,
        serverPaging: true,
        serverFiltering: true,
        serverSorting: true,
        detailTemplate: kendo.template($("#template").html()),
        detailInit: function(e) {
            // detailInit,
        dataBound: function () {

The template is as follows:

        User Groups:
        <div id="grid"></div>       
        <script type="text/x-kendo-template" id="template">
            <div class="tabstrip">
                    <li class="k-state-active">
                    <div class='user-details'>
                            <li><label>User Name:</label>#= USERS.USERNAME #</li>
                            <li><label>First Name:</label>#= USERS.FIRSTNAME #</li>
                            <li><label>Last Name:</label>#= USERS.LASTNAME #</li>

I used USERS.USERNAME as when $expand=USERS, the USERS collection is included.


1 Answer, 1 is accepted

Sort by
Petur Subev
Telerik team
answered on 01 Aug 2013, 12:02 PM

Indeed using the detailInit event you should be able to bind the inner Grid with the navigation property from the master model. This should be done with the method.

Here is an example how the detailInit handler should look like.

function initChildGrid(e) {
    var detailGrid = e.detailCell.find('>.k-grid').data().kendoGrid;
    var dataItem =;;

Also do not forget to set the AutoBind option of the inner grid to false - because as shown above the items are bound manually with the data method of the dataSource.

Kind Regards,
Petur Subev
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Asked by
Top achievements
Rank 1
Answers by
Petur Subev
Telerik team
Share this question