Binding a kendo ui grid to a json file without gen

Question

I'm trying to bind a kendo ui grid to a json file with no luck.

All the examples I found were when creating the grid in code. I need to do it declaratively.

Is it the same to put the dataSource separately in the scope as I did, or inside the "options"?

If I set the "myDataSrc" to a simple array in code, the binding works. But as a " kendo.data.DataSource" from a file, it does not.

<div kendo-grid k-options="options" k-data-source="myDataSrc"></div>


        $scope.myDataSrc = new kendo.data.DataSource({
            transport: {
                read: {
                    url: "test.json",
                    dataType: "json"
                }
            }
        });

        $scope.options = {
            sortable: true,
            pageable: true,
            columns: [{
                field: "firstName",
                title: "First Name"
            },{
                field: "lastName",
                title: "Last Name"

            },{
                field: "country"
            },{
                field: "City"
            },{
                field: "Title"
            }]
        };


[
    { "firstName":"John" , "lastName":"Doe", "country": "country1" },
    { "firstName":"Anna" , "lastName":"Smith", "country": "country2" },
    { "firstName":"Peter" , "lastName":"Jones", "country": "country3" }
]

Thanks!

Answer 1

This finally worked for me:

<div kendo-grid k-options="options"></div>


        $scope.options = {
            dataSource: {
                type: "json",
                transport: {
                    read: "app/data/test.json"
                },
                pageSize: 10
            },
            sortable: true,
            pageable: true,
            columns: [{
                field: "firstName",
                title: "First Name"
            },{
                field: "lastName",
                title: "Last Name"

            },{
                field: "country"
            }]
        };