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

2 posts, 0 answers
  1. B
    B avatar
    8 posts
    Member since:
    Jul 2013

    Posted 30 Jul 2013 Link to this post

    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.


  2. Petur Subev
    Petur Subev avatar
    1882 posts

    Posted 01 Aug 2013 Link to this post


    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!
Back to Top