[Solved] How to display child data in a grid detail row?

[B]

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:

/api/Users?$expand=USERGROUPS
or 
/api/UserGroups?$expand=USERS

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 USERGROUP.data value, and the group's properties can be accessed:

function userDataSource(groupData) {
    console.log("group data");
    console.log(groupData);
    var userDS = new kendo.data.DataSource({
        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 = kendo.data.transports.odata.parameterMap(options);
                return parameterMap;
            }
        },
        schema: {
            data: function (data) {
                console.log("USERS");
                console.log(data.value);
                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 user.group nav prop ID = group id
        serverPaging: true,
        serverFiltering: true,
        serverSorting: true
    });

    return userDS;

}

function detailInit(e) {

 

    $("<div/>").appendTo(e.detailCell).kendoGrid({

        dataSource: userDataSource(e.data),

        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;

 

    //detailRow.find(".tabstrip").kendoTabStrip({

    //    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 user.group 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.

[Atanas Korchev]

Hello,

 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.

Regards,
Atanas Korchev
Telerik

[B]

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.