Kendo Grid in Telerik Platform

4 posts, 1 answers
  1. Devon
    Devon avatar
    6 posts
    Member since:
    Jan 2016

    Posted 20 Jul Link to this post

    Perhaps this is a silly question, but I've been struggling with this for a little too long. I want to add a Kendo Grid to the app that I've been creating in the Telerik Platform. I follow every piece of documentation that I can find to and all that I can get is an ugly looking table of my data. I want that pretty grid with all it's functionality! Do the grid and Telerik Platform not play well together or am I just confused?

    Sorry, I know this is a lot of stuff, but I'm going stir crazy over here!

    Thanks in advance!

    Here are the files that I've included in my index.html:

    <script type="text/javascript" src="cordova.js"></script>
    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script type="text/javascript" src="js/kendo.all.min.js"></script>
    <script type="text/javascript" src="js/kendo.grid.min.js"></script>
     
    <script type="text/javascript" src="js/index.js"></script>
    <script src="components/tempGrid/tempGrid.js"></script>

    The tempGrid.js file contains the js for the grid that I want. Here is what's in it:

    (function(temp,$){
        var tempGrid = null,
            app = temp.app = temp.app || {};
             
        app.tempGrid = {
            onShow: function() {
                $("#temp-grid").kendoGrid({
                    dataSource: {
                        type: "jsdo",
                        transport: {
                            jsdo: app.reportJSDO
                        },
                        pageSize: 10,
                        groupable: true,
                        sortable: true,
                        columns: [
                            {
                                field: "LOCATION_NAME",
                                title: "Location Name"
                            },
                            {
                                field: "TEMP",
                                title: "Recorded Temperature"
                            },
                            {
                                field: "IN_RANGE",
                                title: "In Range?"
                            },
                            {
                                field: "EMPLOYEE",
                                title: "Employee"
                            },
                            {
                                field: "STAMP_DT",
                                title: "Date"
                            },
                            {
                                field: "STAMP_TM",
                                title: "Time"
                            }
                        ]
                    }
                });
            }
        }
    })(window, jQuery);

    Here is the HTML in the view where I want the grid to appear:

    <div id="home"
        data-role="view"
        data-title="Temperature Data"
        data-layout="views-layout"
        data-show="app.tempGrid.onShow">
         
        <div id="temp-grid">
             
        </div>
     
    </div>     

  2. Devon
    Devon avatar
    6 posts
    Member since:
    Jan 2016

    Posted 20 Jul in reply to Devon Link to this post

    Also, I realize there is a curly brace missing in that code, but I couldn't figure out how to go back an edit the post. Just wanted to let you know that's not what's causing the problem.
  3. Answer
    Preslav
    Admin
    Preslav avatar
    49 posts

    Posted 25 Jul Link to this post

    Hi Devon,

    Thank you for contacting us.

    I checked the code snippet and was able to reproduce the issue. I believe the problem comes from the fact that there is no "kendo.default.min.css" file included. I would also suggest to include "kendo.common.min.css" and  
    "kendo.mobile.all.min.css".

    Further, you can take a look at our Kendo UI mobile Grid example, Kendo UI Grid documentation and the API reference. I have also prepared a sample app with the code you shared with us (you can find it attached to this message). 

    I hope this helps. Let me know if you need any further assistance.

    Regards,
    Preslav
    Telerik by Progress
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  4. Devon
    Devon avatar
    6 posts
    Member since:
    Jan 2016

    Posted 26 Jul in reply to Preslav Link to this post

    Thank you! It works now.
Back to Top