Display related data from Entity Model

6 posts, 0 answers
  1. Art Kedzierski
    Art Kedzierski avatar
    107 posts
    Member since:
    Nov 2009

    Posted 17 Mar 2014 Link to this post

    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.
  2. Daniel
    Admin
    Daniel avatar
    2117 posts

    Posted 19 Mar 2014 Link to this post

    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!
     
  3. Kendo UI is VS 2017 Ready
  4. Art Kedzierski
    Art Kedzierski avatar
    107 posts
    Member since:
    Nov 2009

    Posted 19 Mar 2014 in reply to Daniel Link to this post

    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.
  5. Art Kedzierski
    Art Kedzierski avatar
    107 posts
    Member since:
    Nov 2009

    Posted 19 Mar 2014 Link to this post

    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.
  6. Art Kedzierski
    Art Kedzierski avatar
    107 posts
    Member since:
    Nov 2009

    Posted 19 Mar 2014 in reply to Art Kedzierski Link to this post

    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>

  7. Art Kedzierski
    Art Kedzierski avatar
    107 posts
    Member since:
    Nov 2009

    Posted 20 Mar 2014 in reply to Art Kedzierski Link to this post

    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 },
Back to Top
Kendo UI is VS 2017 Ready