Kendo Grid in Telerik Platform

[Devon]

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>

[Devon]

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.

[Preslav]

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

[Devon]

Thank you! It works now.