Data pulled from MySQL in JSON is not being displayed.

[Next]

I have been browsing similar problems on these forums for a couple hours now, trying different things but I 
cannot get the Grid to populate with a JSON datasource pulled from MySQL.

The view_inventory.php returns the json correctly if viewed through the browser. (Set to RETURN json, tried print and echo as well)

I know my way around js a bit, but this is getting past my learning point.

Any help would be appreciated.

EDIT: With some fiddling I got the grid to show up, but I only get a spinning "waiting" in the box, no data. Revised code below.

$(document).ready(function() {

     

    $("#grid").kendoGrid({

        dataSource: {

            transport: {

            read: {

            url: "bin/view_inventory.php",

            dataType: "json"

                       }

                    }

                 },

        height: 250,

        scrollable: true,

        sortable: true,

        filterable: true,

        pageable: true,

        columns: [

            {

                field: "id",

                title: "ID"

            },

            {

                field: "type",

                title: "Type"

            },

            {

                field: "name",

                title: "Name"

            },

            {

                field: "descripton",

                title: "Description"

            },

            {

                field: "price",

                title: "Price"

            },

            {

                field: "account",

                title: "Account"

            }

        ]

    });

});

[Nikolay Rusev]

Hello,

The setup of the grid and datasource seems ok. If the server returns valid JSON grid should be bound properly. Can you please inspect the request (may be Fiddler/FireBug) and see whether the serialized data is JSON and if there are some JavaScript errors. This might be one of the reasons.

Could you also post the here the JSON that is returned from the server.

All the best,
Nikolay Rusev
the Telerik team

[Krishna]

Hello,

I have the same problem. I am trying to bind the Grid from Codeigniter controller (PHP). Attached is the code. Try browsing http://yourserver/index.php/Kendoui/

Any help will be nice. 

Warm regards,
Krishna

[Nikolay Rusev]

Hello Krishna,

Here are the changes that I've made to make it work:
 - remove extra "}" from DataSource declaration

<script>
 $(document).ready(function() {
   var dataSource = new kendo.data.DataSource({
    transport: {
     read: {
      // the remote service url - make sure it is correct on your side
      url: ".../index.php/Kendoui/getdata/",
      dataType: "json"
     }
    }
   });

   $("#grid").kendoGrid({
    dataSource: dataSource,
     height: 360,
     groupable: true,
     scrollable: true,
     sortable: true,
     pageable: true,
     autoBind:true
   });
 });
</script>

 - make sure that the controller returns an array of data. In your current implementation it starts from 1, it should start from 0.

public function getdata()
{
 $record = array();
 for ($i = 1; $i < 10; $i++) {
  $arr = array("Id"=>$i, "FirstName"=>"Krishna", "LastName"=>"Mamidanna","City"=>"Hyderabad","Title"=> "Mr","BirthDate"=>"10 December 1990","Age"=>30);
  array_push($record, $arr);
 }
 $this->load->helper('json');
 echo json_encode($record);
}

Regards,
Nikolay Rusev
the Telerik team

[Benjamin]

We have similar issues, below is a screen cast of what I would consider valid JSON not being displayed by the GRID

http://www.screencast.com/t/kLerV3eO


BTW, the code shown in video lists my datahandler called view_users.php, because of real users (names, emails, and passwords) being displayed, I swapped it for a view_zips.php file so that personal data wasn't posted in a public place

[Nikolay Rusev]

Hello Benjamin,

There is a setting of the DataSource to specify from which field of the response to read the data:

schema: { // describe the result format
 data: "results" // the data which the data source will be bound to is in the "results" field
}

You can see its usage on the following demo:
http://demos.kendoui.com/web/datasource/remote-data.html

As far as I can see from the video you will have to set the data property to "data"( data: "data" ) as this seems to be the field which contains the actual data.

All the best,
Nikolay Rusev
the Telerik team

[Krishna]

Thanks Nikolay, the grid binds properly but paging does not work. I have tried setting pageSize in the datasource and also in the grid properties but that would not work. However grouping and sorting work, Any ideas? 

[Nikolay Rusev]

Hello Krishna,

Can you please try applying the following schema for the DataSource and see whether it makes any difference:

schema: {
 data: function(result) {
   return result.results || results
 },
 total: function(data) {
   data = data.results || data;
   return data.length;
 }
}

Regards,
Nikolay Rusev
the Telerik team

[muhammad toori]

Hi
My data was getting bound but pager was not showing up. After adding the total in schema pager is now showing up
schema: {

$(

 

"#grid").kendoGrid({

 

dataSource: {

data: getData(),

pageSize: 10,

schema: {

data:

 

'List',

 

total:

 

function (data) {

 

data = data.List || data;

 

 

return data.length;

 

}

}

},

scrollable:

 

true,

 

pageable:

 

true,

 

sortable: {

mode:

 

"single",

 

allowUnsort:

 

false

 

},

columns: [

{ field:

 

"Description", title: "Description" },

 

{ field:

 

"Version", title: "Version" },

 

{ field:

 

"QueryStatusName", title: "Status" },

 

{ field:

 

"QueryType", title: "Query Type" },

 

{ field:

 

"QueryID", title: "Query ID" }

 

]

});

 

//end .kendoGrid

 

[Nimisha]

Hi,

We are facing a similar problem - the data returned from controller in JSON format is not being displayed by Grid. Only column heading/title is displayed and for data it always show spinning wheel.

Here is the JSON string being returned from controller:
[{"Issue":{"id":"10","title":"Create new project folders on 55","sender_id":"4","receiver_id":"3","description":"Create new project folders on 55,\r\n\r\n1) Folder name = tripleit\r\ngrant access to yourself, Ami and Sunil\r\n\r\n2) Folder name = cravecode\r\ngrant access to Ajay, Sunil","comment":"Done,\r\n\r\n1. \/var\/www\/html\/tripleit\r\nusername: tripleit.ftp\r\npassword tripleit123#\r\n\r\n2. \/var\/www\/html\/cravecode\r\nusername: cravecode.ftp\r\npassword cravecode123#\r\n\r\nRegards\r\nMahesh","created":"2011-12-15 14:07:16","modified":"2011-12-15 14:16:42","status":"1"},"sender"}}]

And the Kendo UI Grid code is:
$("#grid1").kendoGrid({
                        dataSource: {
                            type: "json",
                            data: <?php echo $json_issues;?>,
                            schema: {
                                data: "data",
                                model: {
                                    fields: {
                                        id: { type: "number" }
                                    }
                                }
                            },
                            pageSize: 10,
                            serverPaging: true,
                            serverFiltering: true,
                            serverSorting: true
                        },
                        height: 250,
                        filterable: true,
                        sortable: true,
                        pageable: true,
                        columns: [
                            {
                                field:"id",
                                filterable: false
                            }
                        ]
                    });

JavaScript Error Console displays error as:
Error: a is undefined
Source File: http://localhost:8080/smls/js/kendo.all.min.js
Line: 11

We have tried many things to get it worked but not got success. Any help at the earliest will be most appreciated.

[Atanas Korchev]

Hi,

 The datasource is not properly configured for the specified JSON. Since the data is directly serialized you must not set the schema. The grid will look for a field named "data" in your JSON response which does not exist.

Regards,
Atanas Korchev
the Telerik team

[Nimisha]

Thanks for the immediate response and help.

We have removed "data" from schema but now the data is not at all displayed in grid.

Getting Javascript error in console as:
Error: id is not defined
Source File: http://localhost:8080/smls/js/kendo.all.min.js
Line: 11

Modified KendoUI Grid code:
$("#grid1").kendoGrid({
                        dataSource: {
                            type: "json",
                            data: <?php echo json_encode($json_issues);?>,
                            schema: {
                                model: {
                                    fields: {
                                        id: { type: "number" }
                                    }
                                }
                            },
                            pageSize: 10,
                            serverPaging: true,
                            serverFiltering: true,
                            serverSorting: true
                        },
                        height: 250,
                        filterable: true,
                        sortable: true,
                        pageable: true,
                        columns: [
                            {
                                field:"id",
                                filterable: false
                            }
                        ]
                    });

Please correct me where i am doing wrong. Appreciate your help.

[Atanas Korchev]

Hi,

 Your JSON does not contain a field named "id". It contains "Issue" object which has a lot of fields (including id). Please configure the DataSource and grid to match the JSON which you are serializing e.g. id: "Issue.id"

All the best,
Atanas Korchev
the Telerik team

[Nimisha]

Many Thanks. The Grid is showing data now but still Pagination and Sorting is not working. We have set pageSize, sortable and pageable properties. Page numbers are displayed correctly but on clicking of page number it does not do any action and all the data is displayed on a single page. And Sorting is also not working.

Any help is much appreciated.

[Atanas Korchev]

Hello,

Your datasource is still not properly configured. You are binding the grid by providing all data yet you have enabled serverPaging, serverFiltering which means that you will be performing paging sorting and filtering server side. Don't enable serverPaging if you want the datasource to page data client-side.

Regards,
Atanas Korchev
the Telerik team

[Nimisha]

Yup Many Thanks. It makes sense and i have removed that parameter and it seems to be working now.