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

Data pulled from MySQL in JSON is not being displayed.

15 Answers 538 Views
Data Source
This is a migrated thread and some comments may be shown as answers.
This question is locked. New answers and comments are not allowed.
Next
Top achievements
Rank 1
Next asked on 12 Dec 2011, 09:35 PM
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"
            }
        ]
    });
});

15 Answers, 1 is accepted

Sort by
0
Nikolay Rusev
Telerik team
answered on 13 Dec 2011, 11:08 AM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Krishna
Top achievements
Rank 1
answered on 14 Dec 2011, 05:53 PM
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
0
Nikolay Rusev
Telerik team
answered on 15 Dec 2011, 10:51 AM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Benjamin
Top achievements
Rank 1
answered on 15 Dec 2011, 08:27 PM
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
0
Nikolay Rusev
Telerik team
answered on 16 Dec 2011, 10:03 AM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Krishna
Top achievements
Rank 1
answered on 22 Dec 2011, 08:56 AM
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? 
0
Nikolay Rusev
Telerik team
answered on 22 Dec 2011, 10:50 AM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
muhammad toori
Top achievements
Rank 1
answered on 28 Dec 2011, 06:39 PM
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

 

0
Nimisha
Top achievements
Rank 1
answered on 02 Jan 2012, 01:22 PM
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.
0
Atanas Korchev
Telerik team
answered on 02 Jan 2012, 01:28 PM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Nimisha
Top achievements
Rank 1
answered on 02 Jan 2012, 01:34 PM
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.


0
Atanas Korchev
Telerik team
answered on 02 Jan 2012, 01:38 PM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Nimisha
Top achievements
Rank 1
answered on 02 Jan 2012, 01:52 PM
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.
0
Atanas Korchev
Telerik team
answered on 02 Jan 2012, 02:02 PM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Nimisha
Top achievements
Rank 1
answered on 02 Jan 2012, 02:19 PM
Yup Many Thanks. It makes sense and i have removed that parameter and it seems to be working now.

Tags
Data Source
Asked by
Next
Top achievements
Rank 1
Answers by
Nikolay Rusev
Telerik team
Krishna
Top achievements
Rank 1
Benjamin
Top achievements
Rank 1
muhammad toori
Top achievements
Rank 1
Nimisha
Top achievements
Rank 1
Atanas Korchev
Telerik team
Share this question
or