Kendo Grid not displaying data

3 posts, 0 answers
  1. Simpson
    Simpson avatar
    2 posts
    Member since:
    Apr 2016

    Posted 07 Apr 2016 Link to this post

    My grid keeps on coming up empty. What could I be doing wrong?



        <script src="include/libraries/jquery/jquery-1.12.3.min.js"></script>
        <link href="include/libraries/kendo/css/kendo.bootstrap.min.css" rel="stylesheet" />
        <link href="include/libraries/kendo/css/kendo.common-bootstrap.min.css" rel="stylesheet" />

        <script src="include/libraries/kendo/js/kendo.all.js"></script>
        <script src="include/libraries/kendo/js/kendo.all.min.js"></script>
        <script src="include/libraries/kendo/js/kendo.aspnetmvc.min.js"></script>
        <script src="include/libraries/kendo/js/kendo.custom.min.js"></script>
        <script src="include/libraries/kendo/js/kendo.timezones.min.js"></script>

        <meta charset="utf-8" />
        <div id="grid">
            <div class="demo-section k-content wide">
                    <h4>Add or update a record</h4>
                    <div data-role="grid"
                         data-toolbar="['create', 'save']"
                                     { 'field': 'CourseID' },
                                     { 'field': 'CourseName' },
                                     { 'field': 'IsActive' },
                         data-bind="source: courses,
                                visible: isVisible,
                                events: {
                                  save: onSave
                         style="height: 200px"></div>

                var viewModel = kendo.observable( {          
                        isVisible: true,
                        onSave: function(e) {
                            kendoConsole.log("event :: save(" + kendo.stringify(e.values, null, 4) + ")");
                        courses: new{
                            schema: {
                                model: {
                                    id: "CourseID",
                                    fields: {
                                        CourseID: { type: "number" },
                                        CourseName: { type: "string" },
                            batch: true,
                            transport: {
                                read: {
                                    url: "http://localhost:51447/api/Courses",
                                    dataType: "jsonp"

                                parameterMap: function(options, operation) {
                                    if (operation !== "read" && options.models) {
                                        return {models: kendo.stringify(options.models)};
                    kendo.bind($("#grid"), viewModel);




    Controller Code

    // GET: api/Courses

            public IQueryable<object> GetCourses()
                return db.Courses.Select(
                   o => new
                       CourseID = o.CourseID,
                       CourseName = o.CourseName,
                      IsActive = o.IsActive

            //}).Where(l => l.IsActive == false);


    JSON returned

    [{"CourseID":1,"CourseName":"Beauty Therapy","IsActive":true},{"CourseID":2,"CourseName":"Software Development","IsActive":true},{"CourseID":3,"CourseName":"Bookkeeping and Accounting","IsActive":true}]


  2. Rosen
    Rosen avatar
    3253 posts

    Posted 11 Apr 2016 Link to this post

    Hello Simpson,

    Are there any JavaScript errors on the page? Looking at the pasted code snippets I have noticed that the type of the read configuration is set to be JSONP, however it does not seems like the server method is returning the result as JSONP. Thus, you should set it to be JSON instead if the service is in the same domain as the consumer. Otherwise, you should enable the CORS for WebAPI.

    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Simpson
    Simpson avatar
    2 posts
    Member since:
    Apr 2016

    Posted 14 Apr 2016 in reply to Rosen Link to this post

    I got it fixed thanks. Yes the service and the consumer are in the same domain and enabling CORS in my WebAPI did the trick.
Back to Top