[Solved] Grid Datasource of Class with child class

[Coty]

Hello,

This is just an example, but assume I have an object in this format:

object type = Person

Person has these fields: personid, name, dob, title, roles

Roles in a child class with fields:  roleid, name, securitylevel

So in my javascript I can access a role field like this:   person.roles[0].name or person.roles[1].roleid etc.

I want my grid to have the following columns:  name, dob, title, roles with the roles column to list all of their roles.  i don't want it to be a subquery that goes back to the database since I already have the data available.  maybe that column should just run a function that passes in the current person.roles list and loops through them building out a template field for that column?  Thanks for any help.

Coty

[Coty]

The solution ended up being using a function call within a template column to loop through each of my child items.  I'll post my solution here just in case any others stumble upon it with the same issues.

My datasourse is an IEnumerable<classname> in JSON format that has an IEnumerable<classname2> as one of it's properties.

Add grid tag to HTML:

<div id="grid"></div>

Get the datasource, and initialize/format the grid with the datasourse (agenda field is my template field to deal with the child class list)

$.ajax({
                url: "/api/AM/GetMeetingList/" + myUserInfo.UserId + "/" + myUserInfo.CurrentAccountId + "/" + myUserInfo.DefaultGroupId + "/" + myUserInfo.AgendaDateRangeId + "/" + start.value() + "/" + end.value() + "/" + myUserInfo.key,
                type: "get",
                contentType: "application/json",
                success: function (myReturn) {

                        //load date ranges
                        var myMeetings = myReturn.myMeetingIEnumerable;
                        var meetingcount = myMeetings.length;

                        if (meetingcount > 0) {
                            $("#grid").kendoGrid({
                                dataSource: myMeetings,
                                groupable: true,
                                sortable: true,
                                filterable: true,
                                pageable: {
                                    refresh: false,
                                    pageSizes: [10, 20, 50, 100],
                                    buttonCount: 5,
                                    pageSize: 20
                                },
                                columns: [{
                                    field: "MeetingName",
                                    title: "Name",
                                    template: "<a href='/${URLBase}/meetings/${MeetingId}/'>${MeetingName}</a>",
                                    filterable: true
                                }, {
                                    field: "MeetingDate",
                                    title: "Date",
                                    template: "${MeetingDate} <a style='float: right;' data-mid='${MeetingId}' title='Add this Meeting to your calendar' class='ical iCalendarLink'>Add to your calendar</a>",
                                    width: 114,
                                    filterable: true
                                }, {
                                    field: 'StartTime',
                                    title: "Start Time",
                                    width: 90,
                                    filterable: true
                                }, {
                                    field: "Location",
                                    title: "Location",
                                    filterable: true
                                }, {
                                    field: 'agenda',
                                    template: kendo.template($("#agendas-template").html()),
                                    title: "Agendas",
                                    filterable: false,
                                    sortable: false,
                                    groupable: false
                                }]
                            });
                    }
                },
                error: function (err) {
                    alert(err.responseText);
                },
                complete: function () {
                }
            });

Script tag with javascript/html template for agenda column:

<script id="agendas-template" type="text/x-kendo-tmpl">
    <div>
           # $.each(agenda, function(data) { if (typeof this.Name !== "undefined") {#
           <div>
             <span><a href="/caiu/agenda/#: this.Id #">#: this.Name #</a></span>
           </div>
        # } }); #
    </div>
</script>

that's pretty much it.  Awesome product by the way, works great.