Simple KendoUI Grid Not Populating

Question

Several different questions on this topic, but none of the answers helped, so thought I'd try and see if anyone can figure this out..

So I have a simple grid, here is the HTML/PHP:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title><?php echo PROPERTY_TITLE; ?></title>

<!-- LOAD KENDO CSS -->
<link rel="stylesheet" type="text/css" href="css/kendo.bootstrap.min.css"/>
<link rel="stylesheet" type="text/css" href="css/kendo.common.min.css"/>
<link rel="stylesheet" type="text/css" href="css/kendo.default.min.css"/>

<!-- -------------- -->

<link rel="stylesheet" type="text/css" href="css/style.css" />
<link rel="stylesheet" type="text/css" href="<?php echo BASE_URL; ?>css/style.css" />
<script src="js/jquery.js"> // REQUIRED FOR THIS APPLICATION TO FUNCTION </script>

<!-- LOAD KENDO -->
<script type="text/javascript" src="js/kendo.all.min.js"> // REQUIRED FOR THIS APPLICATION TO FUNCTION </script>
<!-- ---------- -->
</head>

<body class="bg">
<div class="grid-box7 box2close min_height_700" style="display: none;">

    <script>
        // Function to build the grid
        function generateRawDataGrid() {
            var from = $("#fromDate").val();
            var to = $("#toDate").val();

            <? if ( isset($_GET['source']) && is_numeric($_GET['source']) ) { ?>
            var source = <? echo trim($_GET['source']); ?>;
            <? } else { ?>
            var source = '';
            <? } ?>




            $(".li_current_report").html("Raw Statistical Data");
            $("#rawDataGrid").kendoGrid({
                columns: [
                    {   title: "Action",
                        field: "comment"
                    }
                ],
                dataSource: {
                    transport: {
                        read: {
                            url: "data/get_stats.php?from=" + from + "&to=" + to + "&source=" + source + "&rt=3"
                        }
                    },
                    schema: {
                        data: "data"
                    },
                    type: "json"
                },
                pageable: {
                    refresh: true,
                    pageSize: 15,
                    pageSizes: [
                        15,30,60,100
                    ]
                },
                sortable: true,
                filterable: true,
                scrollable: false,
                selectable: "row",
                reorderable: true
            }); // END: Report Grid

        } // END: Function generateGrid()

    </script>

    <div id="rawDataGrid" >
        <!-- Grid is here -->
    </div>
</div>

</body>
</html>

Here is the datasource code:

// Build SQL statement
        $SQL_STATS = "
                    SELECT      comment
                    FROM        stats_tracking
                    WHERE       date_entered between '" . $FROM . "' AND '" . $TO . "'  AND
                                action_detail1 NOT In(" . $excludeIPs . ") AND active = 1";

        if ( is_numeric($_GET['source']) && trim($_GET['source']) != "" ){
            $SQL_STATS .= "
                            AND source = '" . $_GET['source'] . "'";
        }
        $SQL_STATS .= "
                    ORDER BY    date_entered DESC
                ";

        // Get the data
        $statResult = mysql_query($SQL_STATS); // Run the actual query.

        $dataOut = array(); // Create empty array for temp data to store in main output array

        while ( $stat = mysql_fetch_object($statResult) ) {
            $dataOut[] = $stat;
        }

        header("Content-type: application/json");
        echo "{\"data\":" . json_encode($dataOut). "}";

The output seems fine - and LINTs fine as well, here's a piece of it:

{"data":[{"comment":"Site Visit"},{"comment":"Site Visit"},{"comment":"Site Visit"},{"comment":"View Contact Information"},{"comment":"View Contact Information"},{"comment":"View Contact Information"},{"comment":"View Contact Information"},{"comment":"View Contact Information"},{"comment":"Site Visit"},{"comment":"View Contact Information"},{"comment":"Site Visit"},{"comment":"View Contact Information"},{"comment":"Doctor Site Visit"},{"comment":"View Contact Information"},{"comment":"View Contact Information"},{"comment":"Doctor Site Visit"},{"comment":"View Contact Information"},{"comment":"Site Visit"},{"comment":"View Contact Information"},{"comment":"View Contact Information"},{"comment":"View Contact Information"},{"comment":"View Contact Information"},{"comment":"Doctor Site Visit"},{"comment":"View Contact Information"},{"comment":"Doctor Site Visit"}]}

But the grid isn't rendering. I've used several JSON validators. And the browser is seeing this output as APPLICATION/JSON.

Any ideas?

Thanks to all in advance!

I don't see where you are calling this method. generateRawDataGrid() — Rick S
And you're right.. there wasn't in that code. There was in the new page I created - and I copied and pasted the wrong one 8/. That said, I found it. The call to the method had only "generateRawData()". Jeez.. it sometimes only takes another pair of eyes. Thanks Rick! — Lee Fuller
@RickS Put your comment in an answer and I'll accept it. Thanks again. — Lee Fuller

Rick S Rick S · Accepted Answer · 2014-06-19T13:31:44

I don't see where you are calling this method. generateRawDataGrid()

Perhaps you need to create a document.ready() function and call it from there.

$(document).ready(function () {
   generateRawDataGrid();
});

Simple KendoUI Grid Not Populating

1 Answers