Display related data from Entity Model

[Art Kedzierski]

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.

[Daniel]

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

 

 

[Art Kedzierski]

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.

[Art Kedzierski]

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.

[Art Kedzierski]

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>

[Art Kedzierski]

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 },