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

How to display child data in a grid detail row?

2 Answers 57 Views
This is a migrated thread and some comments may be shown as answers.
Top achievements
Rank 1
B asked on 06 Aug 2013, 05:38 PM
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 Answers, 1 is accepted

Sort by
Atanas Korchev
Telerik team
answered on 09 Aug 2013, 11:30 AM

 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!
Top achievements
Rank 1
answered on 09 Aug 2013, 07:32 PM
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. 

Asked by
Top achievements
Rank 1
Answers by
Atanas Korchev
Telerik team
Top achievements
Rank 1
Share this question