This is a migrated thread and some comments may be shown as answers.
Display related data from Entity Model
5 Answers 162 Views
This is a migrated thread and some comments may be shown as answers.
Art Kedzierski
Top achievements
Rank 2
Art Kedzierski asked on 17 Mar 2014, 04:40 PM
Just started using Kendo.UI and I can't seem to find any documentation on how to do what I need in JavaScript. I have a ORM Entity Model I'm accessing in the web project via a web service (oData/JSON). I can get the top-level data of any table just fine. But let's say I have a table called Devices (because I do) and it has a association called DeviceHasLocation (because it does) and I want to display the Name of the associated Location in a grid of Devices. What would the code for that look like? 

I need to do something similar for a LOT of these associations, so a reusable methodology would be much appreciated.

5 Answers, 1 is accepted

Sort by
0
Daniel
Telerik team
answered on 19 Mar 2014, 12:12 PM
Hi,

Where should the detail data be displayed? You can show it in a detail as demonstrated in this demo. The approach will be similar if the data is included in the master model. Here is a modified version of the demo that demonstrates this case.

Regards,
Daniel
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Art Kedzierski
Top achievements
Rank 2
answered on 19 Mar 2014, 01:45 PM
I want to display in as a column in the Device grid, for example:

Device.Name | Device.Vendor | Device.Product | Device.Location.Name

I'll take a look at that revised demo.
0
Art Kedzierski
Top achievements
Rank 2
answered on 19 Mar 2014, 02:45 PM
I'm not looking for a detail row as the one-to-many relationship is the other direction; one Location has many Devices. I want columns from the parent record displayed with the child record in a grid.
0
Art Kedzierski
Top achievements
Rank 2
answered on 19 Mar 2014, 05:38 PM
I figured it out from the following demo: http://jsbin.com/OVOCAmu/2/edit. here's is the code I ended up using:

<div id="grid_devices" style="height: 380px"></div>
<script>
    $(document).ready(function () {
        var locationsDataSource = new kendo.data.DataSource({
            type: "odata",
            schema: {
                data: function (data) {
                    if (data.value) {
                        return data.value;
                    }
                    delete data["odata.metadata"];
                    return [data];
                },
                total: function (data) {
                    return data["odata.count"];
                }
            },
            sort: { field: "Name", dir: "asc" },
            transport: {
                read: "/GLMEntitiesModelService.svc/Locations"
            }
        });
 
        locationsDataSource.read();
        locationsDataSource.one("change", function () {
            var values = [],
                    data = this.data();
            for (var i = 0 ; i < data.length; i++) {
                values.push({ value: data[i].ID, text: data[i].Name });
            }
 
            initGrid(values);
        });
 
        function initGrid(values) {
            var gridDataSource = new kendo.data.DataSource({
                type: "odata",
                schema: {
                    data: function (data) {
                        if (data.value) {
                            return data.value;
                        }
                        delete data["odata.metadata"];
                        return [data];
                    },
                    total: function (data) {
                        return data["odata.count"];
                    }
                },
                sort: { field: "Name", dir: "asc" },
                transport: {
                    read: "/GLMEntitiesModelService.svc/Devices"
                }
            });
 
            $("#grid_devices").kendoGrid({
                dataSource: gridDataSource,
                filterable: true,
                selectable: "row",
                sortable: true,
                columns: [
                    { field: "Name", title: "Device", width: 250 },
                    { field: "Vendor", title: "Vendor", width: 175 },
                    { field: "Product", title: "Product", width: 250 },
                    { field: "Component", title: "Component" },
                    { field: "LocationFK", title: "Location", values: values }]
            });
        };
    });
</script>

0
Art Kedzierski
Top achievements
Rank 2
answered on 20 Mar 2014, 03:39 PM
And I figured out the $expand option (documentation on that is SCARCE).

var gridDataSource = new kendo.data.DataSource({
    type: "odata",
    schema: {
        data: function (data) {
            if (data.value) {
                return data.value;
            }
            delete data["odata.metadata"];
            return [data];
        },
        total: function (data) {
            return data["odata.count"];
        }
    },
    pageSize: 10,
    scrollable: false,
    sort: { field: "Name", dir: "asc" },
    transport: {
        read: {
            url: "/GLMEntitiesModelService.svc/Devices",
            data: { $expand: "Location" }
        }
    }
});

And then in my grid columns descriptors:

{ field: "Location.Name", title: "Location", width: 250 },
Asked by
Art Kedzierski
Top achievements
Rank 2
Answers by
Daniel
Telerik team
Art Kedzierski
Top achievements
Rank 2
Share this question
or