CODEWITHSUNDEEP
phpjsonkendo-uikendo-grid
Lee Fuller
Lee Fuller

Reputation: 2176

Simple KendoUI Grid Not Populating

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!

Upvotes: 0

Views: 66

Answers (1)

Rick S
Rick S

Reputation: 6586

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();
});

Upvotes: 1

Related Questions