How to display child data in a grid detail row?

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

    Posted 06 Aug 2013 Link to this post

    My data structure consists of groups and users with a link table between them.  I have setup an OData data source, where I can do either of the following:


    I want to display a grid with user groups, and the details row to be a grid of users.

    Setting up the grid, I use /api/UserGroups in the data source, and I get all my groups to appear.  Where I am experiencing a problem is displaying the users for a selected group.

    At first glance, the data source method to use seems to be /api/Users?$expand=USERGROUPS.  I wrote a function that takes in the value of the selected group from detailInit(e), where e is the value, and the group's properties can be accessed:

    function userDataSource(groupData) {
        console.log("group data");
        var userDS = new{
            type: "odata",
            transport: {
                read: {
                    //url: "/api/UserGroups?$expand=USERS",
                    url: "/api/Users?$expand=USERGROUPS",           // only need to expand users for the selected group
                    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 =;
                    return parameterMap;
            schema: {
                data: function (data) {
                    return data.value;
                total: function (data) {
                    console.log("user count: " + data["odata.count"]);
                    return data["odata.count"];
                model: {
                    fields: {
                        ITEMID: { type: "string" },
                        USERNAME: { type: "string" },
                        FIRSTNAME: { type: "string" },
                        LASTNAME: { type: "string" },
                        EMAIL: { type: "string" }
            pageSize: 10,
            //filter: { field: "odata.value.USERGROUPS.ID", operator: "eq", value: groupData.ID },                     // filter where the the nav prop ID = group id
            serverPaging: true,
            serverFiltering: true,
            serverSorting: true
        return userDS;

    function detailInit(e) {
            dataSource: userDataSource(,
            scrollable: false,
            sortable: true,
            pageable: true,
            columns: [
                { field: "USERNAME", title: "User Name", width: "130px" },
                { field: "EMAIL", title: "Email", width: "130px" },
                { field: "NETWORKID", title: "Network ID" }
        //var detailRow = e.detailRow;
        //    animation: {
        //        open: { effects: "fadeIn" } 
        //    }

    userDataSource(groupData) returns an array of USERS[], and due to the pageSize attribute, limited to 10.  USERS.  Each USERS element contains a USERGROUPS[] (array) element.

    What I would like to return is a list of users where USERS.USERGROUPS.ID == groupData.ID, and have these all displayed in the details grid.

    I considered using api/UserGroups?$expand=USERS as the datasource.  In that case I would have to return the array of users within a given group.

    Regardless, the filter option I am trying on the data set is not working:
    filter: { field: "odata.value.USERGROUPS.ID", operator: "eq", value: groupData.ID },                     // filter where the the nav prop ID = group id

    I realize that I could write another data source API that only spits out a list of users (which maybe much simpler), but I would like to know how to use this expanded, navigation content data.

    Assistance on this would be appreciated.

  2. Atanas Korchev
    Atanas Korchev avatar
    8462 posts

    Posted 09 Aug 2013 Link to this post


     As far as we know WebAPI doesn't support all OData query options (such as $filter) by default. You may need to install additional packages.

     You could also check with your browser's developer tools if the right $filter expression is submitted to your web api method. The parameterMap function should have generated the proper one provided that the filter option of the data source is set.

    Atanas Korchev
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Answer
    B avatar
    8 posts
    Member since:
    Jul 2013

    Posted 09 Aug 2013 Link to this post

    In response to this, I would like to direct all of your attention to the following article I just wrote:  Using C#, MVC, WebAPI, OData, Entity Framework, DI/IoC, and Kendo UI MVC and Efficient Data Retrieval.

    This includes full front-end and server-side code samples, as well as a QUERYABLE generic repository project, dependency injection (with Simple Injector) and data access through the repository.

    Hope others find this useful. 

Back to Top