CODEWITHSUNDEEP
kendo-uikendo-grid
user2488071
user2488071

Reputation:

Data binding issue with Kendo Widgets

I am using Kendo UI Library.

Trying to bind the data to Grid. But the grid is not getting populated with data.

I have referred required js libraries and styles as well.

<head>
    Referred necessary Styles and Scripts are in order
    <script src="scripts/jquery.min.js" type="text/javascript"></script>
    <script src="scripts/kendo.web.min.js" type="text/javascript"></script>
</head>
<body>
<div id="courses"></div>
<script type="text/javascript">
    $(document).ready(function () {
        var Courses = [
            {Name: "Theory of computation", Credit: 10},
            {Name: "Probability and Statistics", Credit: 20},
            {Name: "Discrete Maths", Credit: 10},
            {Name: "Modern Physics", Credit: 25},
            {Name: "Management Information System", Credit: 15 },
            {Name: "Game Theory", Credit: 5 }
        ];

        var courseDataSource = new kendo.data.DataSource({datasource: Courses, PageSize: 5});
        courseDataSource.read();
        $("#courses").kendoGrid({
            dataSource: courseDataSource,
            columns   : [
                { field: "Name", title: "Course Name"} ,
                { field: "Credit", title: "Credits" }
            ],
            scrollable: false,
            pageable  : true
        });
    });
</script>
</body>

Could you please help me in fixing the code.

Upvotes: 0

Views: 76

Answers (1)

user2488066
user2488066

Reputation:

Please change datasource to data and PageSize to pageSize

 var courseDataSource = 
new kendo.data.DataSource({datasource: Courses, PageSize: 5});

The correct implementation is 

var courseDataSource = 
    new kendo.data.DataSource({data: Courses, pageSize: 5});

Thanks.

Upvotes: 1

Related Questions