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:
The template is as follows:
I used USERS.USERNAME as when $expand=USERS, the USERS collection is included.
Thanks.
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 kendo.data.HierarchicalDataSource({ type: "odata", transport: { read: { // See http://www.odata.org/documentation/odata-v2-documentation/uri-conventions/ 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 = kendo.data.transports.odata.parameterMap(options); //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) { console.log('detailInit'); // detailInit, }, dataBound: function () { this.expandRow(this.tbody.find("tr.k-master-row").first()); } });The template is as follows:
<body> <div> User Groups: <div id="grid"></div> <script type="text/x-kendo-template" id="template"> <div class="tabstrip"> <ul> <li class="k-state-active"> Users </li> </ul> <div> <div class='user-details'> <ul> <li><label>User Name:</label>#= USERS.USERNAME #</li> <li><label>First Name:</label>#= USERS.FIRSTNAME #</li> <li><label>Last Name:</label>#= USERS.LASTNAME #</li> </ul> </div> </div> </div> </script> </div></body>I used USERS.USERNAME as when $expand=USERS, the USERS collection is included.
Thanks.
1 Answer, 1 is accepted
0
Hello,
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 dataSource.data() method.
Here is an example how the detailInit handler should look like.
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
Telerik
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 dataSource.data() 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 = e.data; detailGrid.dataSource.data(dataItem.Projects);}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
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!