Binding Complex Datasource to Kendogrid in Angular

[Talha]

Background: I have a Model that I bind to my partialview in C# MVC.

@model = List<Vimeo.Models.Album>

my Model is a c# List of Albums. Each Album is an object that contains a Title and another c# List<Vimeo.Models.Video> Videos. 

public class Album
    {
        public string Title { get; set; }
        public List<Video> Videos { get; set; }

        public Album()
        {
            Videos = new List<Video>();
        }
    }

Each Video is an object as well.

public class Video
    {
            public string VideoId { get; set; }
            public string VideoUrl { get; set; }
            public string Album { get; set; }
            public List<string> Tags { get; set; }
}

I convert my C# Model to a javascript object. 

I then try to bind my model to a KendoGrid however it does not work. I have tried defining a Schema for the DataSource and tried using a HierarchicalDataSource as well. What am I doing wrong?

Entire View: 

@model List<Vimeo.Models.Album>

<div ng-controller="GridController">
    <kendo-grid options="mainGridOptions"></kendo-grid>
</div>

<script id="template" type="text/x-kendo-template">
    <tr data-uid="#= uid #">
        <td class="videoThumbnail"><iframe id="embed" src="#: VideoUrl #" width="WIDTH" height="HEIGHT" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe></td>
        <td>#: VideoId #</td>
        <td>#: VideoUrl #</td>
        <td>#: Album #</td>
    </tr>
</script>

<script>
    var model = @Html.Raw(@Json.Encode(Model));
    var albums = {
        album: {
            "Title": "title",
            "Videos": [{
            "VideoId":"VideoId",
            "VideoUrl": "VideoUrl",
            "Album": "Album",
            "Tags": [
                "safety"
            ]}]
        }};
    var dataSource = new kendo.data.HierarchicalDataSource({
        schema: albums,
        data: model
    });
        angular.module("app", ["kendo.directives"])
            .controller('GridController', function($scope) {
                $scope.mainGridOptions = {
                    dataSource: dataSource,
                    columns: [
                    {
                        field: "VideoUrl",
                        title: "Video",
                        width: "200px"
                    },{
                        field: "VideoId",
                        title: "Video Id",
                        width: "120px"
                    },
                    {
                        field: "VideoUrl",
                        title: "Video Url",
                        width: "120px"
                    },
                    {
                        field: "Album",
                        title: "Album",
                        width: "120px"
                    }],
                    rowTemplate: kendo.template($("#template").html())
                }
        });

</script>

[Nikolay Rusev]

Hello Talha,

Please excuse us for the late replay.

The Grid widget doesn't support binding to `HierarchicalDataSource `. As dataSource configuration it expects instance of kendo.data.DataSource instead.

On a side note - the current setup of the grid columns will expect that the actual data in the data source is a collection of `Video` objects instead of `Album`. For example the following column setting
`field: "VideoUrl"` assumes that the data item for the row should have field named `VideoUrl`.

Regards,
Nikolay Rusev
Telerik