Binding Kendo grid with data source does not show data

1
votes

I am trying to learn Kendo Grid using following references.

  1. Grid / Binding to local data
  2. How to use SetDataSource Method of the Kendo UI Grid
  3. How-To: Use the DataSource
  4. How-To: Bind the Grid to Remote Data

I have a data source named “localDataSource”. The grid need to display data from this source. I tried defining dataSource: localDataSource inside kendoGrid definition. And then I tried explicitly setting datasource grid.setDataSource(localDataSource);

Both these approaches didn’t render the data though there is no javascript errors. What is the missing point here?

Fiddle

CODE

<head>
    <title>Grid with DataSource</title>
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script src="http://cdn.kendostatic.com/2013.2.716/js/kendo.all.min.js"></script>


    <style type="text/css">
        table, th, td
        {
            border: 1px solid black;
        }
    </style>

</head>
<body>


        <div id="example" class="k-content">

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

            <script>
                $(document).ready(function () {

                    var products = [
                            { title: "Nylon", year: 1977 },
                            { title: "Fabric Material", year: 1980 },
                            { title: "Yards UOM", year: 1983 }
                          ];

                    var localDataSource = new kendo.data.DataSource({ data: products });

                    //console.log(localDataSource);

                    $("#grid").kendoGrid({
                        dataSource: localDataSource,
                        height: 430,
                        columns: [
                                    { field: "Title", title: "Title", format: "{0:c}", width: "130px" },
                                    { field: "Year", title: "Year", width: "130px" }
                                ]
                    });

                    var grid = $('#grid').data("kendoGrid");
                    grid.setDataSource(localDataSource);
                });
            </script>

        </div>


</body>
2
javascriptkendo-ui

2 Answers

1
votes

You have wrong definition for the columns. The field options is case sensitive and you are using capital letters instead of low ones.

columns: [
         { field: "title", title: "Title", format: "{0:c}", width: "130px" },
         { field: "year", title: "Year", width: "130px" }
]

Fiddle

1
votes

Kendo Grid - jsFiddle gave good sample code for this -exactly what I was looking for.

Following two approaches works

var products = [
                            { FirstName: "Nylon", LastName: 1977 },
                            { FirstName: "Yards", LastName: 1983 }
                          ];

var localDataSource = new kendo.data.DataSource({ data: products })

Approach 1

          $("#grid").kendoGrid({
                   dataSource: localDataSource,
                   columns: [
                        { field: "FirstName", title: "FirstName" },
                        { field: "LastName", title: "LastName" }
                            ]
                    });

Approach 2

    var grid = $("#grid").kendoGrid({
    dataSource: localDataSource,
    columns: [
        {field: "FirstName", title: "First Name"},
        {field: "LastName",title: "Last Name"}
             ]    
}).data("kendoGrid");

fiddle 1 and fiddle 2