This is a migrated thread and some comments may be shown as answers.

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

4 Answers 250 Views
Grid
This is a migrated thread and some comments may be shown as answers.
joseph
Top achievements
Rank 1
joseph asked on 12 Jul 2012, 11:40 PM
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;
    }

4 Answers, 1 is accepted

Sort by
0
Paweł
Top achievements
Rank 2
answered on 13 Jul 2012, 11:52 AM
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)."})";

0
joseph
Top achievements
Rank 1
answered on 13 Jul 2012, 02:09 PM
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.
 
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
----------------------------------------------------------
 
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
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.
0
Paweł
Top achievements
Rank 2
answered on 16 Jul 2012, 08:02 AM
<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.
0
joseph
Top achievements
Rank 1
answered on 18 Jul 2012, 08:05 AM
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
Tags
Grid
Asked by
joseph
Top achievements
Rank 1
Answers by
Paweł
Top achievements
Rank 2
joseph
Top achievements
Rank 1
Share this question
or