Issue using grid/ajax/remote data , data not showing but no error

[joseph]

Hello Good People,

i've been fan of telerix product for so long but honestly this kendo ui has blown my mind. Kudos to the team behind it.I choose kendo over wijmo and pure jquery ui especially because of component as the grid.BUT my first attempt to the grid has turn out be a challenge for me.so many hours trying to figure out why my code is not working. am using,php 5.3.5, kohana 3.2 with mysql jquery 1.7.2., firefox 9.0.1, chrome 20.0.1132.57 m .So am pulling data from mysql . with firebug activated i could not find any reason why my codo should not work. i even copy the code from one of the example file just to be sure am not the cause of it. the data is returned as one would expect , a valid json format string as shown on the attached file. i use northwind database for my trial.

Can anyone give a hand? there is something am not doing right ?

here is a snippet of the clientside file. 

<div style="height: 35px"></div>

<div id="clientsDb"> 

    <div id="grid"></div>

</div> 

<script type="text/javascript">

    $(function(){

        $("#grid").kendoGrid({

            dataSource: {

                type: "odata",

                transport: {

                    read: {url: "read", datatype: "json", contentType: 'application/json'}

                },

                schema: {

                    model: {

                        fields: { 

                              CompanyName: {type: "string"},

                              ContactName: {type: "string"}                       

                        }

                    }

                },

                pageSize: 10,

                serverPaging: true,

                serverFiltering: true,

                serverSorting: true

            },

            height: 250,

            filterable: true,

            sortable: true,

            pageable: true,

            columns: [

 

                  {field: "CompanyName", title: "Company Name"},

                  {field: "ContactName", title: "Contact Name"}

            ]

 

        });

    });

</script>

here is my php/kohana/mvc action 

public function action_read()
{ 

        $query = DB::select("ContactName","CompanyName")->from("customers")->offset(0)->limit(10);

        $accounts = $query->execute("northwind");

        $toSend = array();

        foreach($accounts as $acc){

            $toSend[] = $acc;

        }

//        $data = "{\"results\":". json_encode($toSend)."}";

        $data =  json_encode($toSend);

        $this->auto_render = false;

        echo $data;

    }


[Paweł]

Download Live HTTP headers to Firefox. Will help you to work.

In the background is sent using the GET variable $ callback.
Download it and view in response to feedback.

$data = $callback . "({\"results\":". json_encode($toSend)."})";

[joseph]

Hello Pawet, thanks for responding, 

i've made some progress, even though it's still not working. i've copied another example remove the dataSource.type, it was "oData" and i've removed the file from any framework context and use plain pdo to access the data and normal http calls. no MVC et al. now i am having "a is undefined " error. i thought it's from the jquery v 1.7.2 i was using, i've changed it to the jquery.min.js which came with the kendo package , but the error wasn't changed. i am still getting an "a is undefined". i could also see clearly what variables i was passing via the query string it's like "http://localhost/mtbadmin/subscribers/read?take=10&skip=0&page=1&pageSize=10"

 so am attaching the stripped version of my application so that who ever had time and wants to help can run it and give me some hint. I would really love to use kendo  an make a decision about it during a presentation. i've done some on datatable and jqGrid already but i think kendo make sense to me more, and i can't explain why i m doing through this. Please help me solve it :(

P.S msyql connection is in read.php remember to change to your password.
i've included the northwind database file.
i've upgraded firefox to 13
FF Http LiveData is bellow.

http://localhost/admin/subscribers.php

 

GET /admin/subscribers.php HTTP/1.1

Host: localhost

User-Agent: Mozilla/5.0 (Windows NT 6.1; WOW64; rv:13.0) Gecko/20100101 Firefox/13.0.1 FirePHP/0.7.0

Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8

Accept-Language: en-us,en;q=0.5

Accept-Encoding: gzip, deflate

Connection: keep-alive

Cookie: authautologin=58f065d7350c2ca1bab5077a2929b78d95c940d4%7Eca301c00d76b33b564a63872c6bd893978ab7299

x-insight: activate

 

HTTP/1.1 200 OK

Date: Fri, 13 Jul 2012 13:58:29 GMT

Server: Apache/2.2.17 (Win32) mod_ssl/2.2.17 OpenSSL/0.9.8o PHP/5.3.4 mod_perl/2.0.4 Perl/v5.10.1

X-Powered-By: PHP/5.3.5

Content-Length: 2162

Keep-Alive: timeout=5, max=100

Connection: Keep-Alive

Content-Type: text/html

----------------------------------------------------------

http://localhost/admin/read.php?take=10&skip=0&page=1&pageSize=10

 

GET /admin/read.php?take=10&skip=0&page=1&pageSize=10 HTTP/1.1

Host: localhost

User-Agent: Mozilla/5.0 (Windows NT 6.1; WOW64; rv:13.0) Gecko/20100101 Firefox/13.0.1 FirePHP/0.7.0

Accept: */*

Accept-Language: en-us,en;q=0.5

Accept-Encoding: gzip, deflate

Connection: keep-alive

Content-Type: application/json

X-Requested-With: XMLHttpRequest

Referer: http://localhost/admin/subscribers.php

Cookie: authautologin=58f065d7350c2ca1bab5077a2929b78d95c940d4%7Eca301c00d76b33b564a63872c6bd893978ab7299

x-insight: activate

 

HTTP/1.1 200 OK

Date: Fri, 13 Jul 2012 13:58:30 GMT

Server: Apache/2.2.17 (Win32) mod_ssl/2.2.17 OpenSSL/0.9.8o PHP/5.3.4 mod_perl/2.0.4 Perl/v5.10.1

X-Powered-By: PHP/5.3.5

Content-Length: 999

Keep-Alive: timeout=5, max=99

Connection: Keep-Alive

Content-Type: text/html

----------------------------------------------------------

 thanks again.

[Paweł]

<script type="text/javascript">

    $(function(){

        $("#grid").kendoGrid({

            dataSource: {

                type: "odata",

                transport: {

                    read: "/read.php"

                },

                schema: {

                    data: "results",

                    model: {

                        fields: {

                              CompanyName: { type: "string" },

                              ContactName: { type: "string" }

                        }

                    }

                },

                pageSize: 10,

                serverPaging: true,

                serverFiltering: true,

                serverSorting: true

            },

            filterable: true,

            sortable: true,

            pageable: true,

            columns: [

                  { field: "CompanyName", title: "Company Name" },

                  { field: "ContactName", title: "Contact Name" }

            ]

        });

    });

</script>

<?php

       

        $pdo = new PDO("mysql:host=localhost;dbname=northwind",'root','yourpassword');

         

            $pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);

            $pdo->setAttribute(PDO::ATTR_DEFAULT_FETCH_MODE, PDO::FETCH_BOTH);

             if(!$pdo)

            die("Error connecting to the database ");

        $callback = $_GET['callback'];

         

        $query = "select ContactName, CompanyName from customers limit 10";

        $results = $pdo->query($query);

        $accounts=$results->fetchAll();

        $data = $callback . "({\"d\" :{\"results\":". json_encode($accounts)."}})";

        echo $data;

 

?>

and edit the last line in the php file:

$data = $callback . "({\"d\" :{\"results\":". json_encode($accounts)."}})";

Of course, before that capture the

$ _GET ['callback'];

Sample header sent by Kendo:

GET /service/Northwind.svc/Orders?$callback=jQuery17105110466166815079_1342424186657&%24inlinecount=allpages&%24format=json&%24top=10

unique callback for each query: jQuery17105110466166815079_1342424186657

An example of a response from the server:

http://demos.kendoui.com/service/Northwind.svc/Orders?$callback=jQuery17105110466166815079_1342424186657&%24inlinecount=allpages&%24format=json&%24top=10

*corrected in a notebook on his knee, so there may be errors small.

[joseph]

Hello!!!

 Thanks for helping me. you've actually shown me certain techniques with the callback.But my mistake was due to a typo
in the transport variable, i've written "datatype" instead of "dataType" i've corrected it, it's fine now.

thanks again