Kendo Grid not displaying data

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

    Posted 07 Apr Link to this post

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

     

    HTML

    <head>
        <title></title>
        <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" />
    </head>
    <body>
        <div id="grid">
            <div class="demo-section k-content wide">
                <div>
                    <h4>Add or update a record</h4>
                    <div data-role="grid"
                         data-editable="true"
                         data-toolbar="['create', 'save']"
                         data-columns="[
                                     { 'field': 'CourseID' },
                                     { 'field': 'CourseName' },
                                     { 'field': 'IsActive' },
                                  ]"
                         data-bind="source: courses,
                                visible: isVisible,
                                events: {
                                  save: onSave
                                }"
                         style="height: 200px"></div>
                </div>
            </div>

            <script>
                
                var viewModel = kendo.observable( {          
                        
                   
                        isVisible: true,
                        onSave: function(e) {
                            kendoConsole.log("event :: save(" + kendo.stringify(e.values, null, 4) + ")");
                        },
                            
                        courses: new kendo.data.DataSource({
                            schema: {
                                model: {
                                    id: "CourseID",
                                    fields: {
                                        CourseID: { type: "number" },
                                        CourseName: { type: "string" },
                                        IsActive:{type:"boolean"}
                                    }
                                }
                            },
                            batch: true,
                            transport: {
                                read: {
                                    type:"GET",
                                    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);
            </script>
        </div>

    </body>

     

     

    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
    Admin
    Rosen avatar
    3234 posts

    Posted 11 Apr 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.

    Regards,
    Rosen
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  3. Kendo UI is VS 2017 Ready
  4. Simpson
    Simpson avatar
    2 posts
    Member since:
    Apr 2016

    Posted 14 Apr 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