json not loading into grid, using php wrapper

[Lisandro]

I followed all the steps, but my grid remains empty. Any help greatly appreciated.

<?php
$transport = new \Kendo\Data\DataSourceTransport();

$read = new \Kendo\Data\DataSourceTransportRead();

// Specify the url of the PHP page which will act as the remote service
$read->url('14streamPDO.php')
     ->type('POST');

$transport->read($read);

// Configure the model
$model = new \Kendo\Data\DataSourceSchemaModel();

$idField = new \Kendo\Data\DataSourceSchemaModelField('id');
$idField->type('number');

$apynoField = new \Kendo\Data\DataSourceSchemaModelField('apyno');
$apynoField->type('string');

$edadField = new \Kendo\Data\DataSourceSchemaModelField('edad');
$edadField->type('number');

$model->addField($idField)
      ->addField($apynoField)
      ->addField($edadField);

$schema = new \Kendo\Data\DataSourceSchema();

$schema->model($model);

$dataSource = new \Kendo\Data\DataSource();

// Configure data source
$dataSource->transport($transport)
           ->schema($schema);
?>


<!-- Create a kendo grid, configure its columns and set its data source.
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
<?php
$grid = new \Kendo\UI\Grid('grid');

$idColumn = new \Kendo\UI\GridColumn();
$idColumn->field('id');

$apynoColumn = new \Kendo\UI\GridColumn();
$apynoColumn->field('apyno');

$edadColumn = new \Kendo\UI\GridColumn();
$edadColumn->field('edad');

// Configure columns, enable paging, filtering, sorting and grouping
$grid->addColumn($idColumn, $apynoColumn, $edadColumn)
     ->sortable(true);
?>


<!-- Output the widget echoing the render method
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
<?php
  echo $grid->render();
?>

 

Code for the connection:

<?php
// set up for using PDO
$user = 'root';
$pass = 'root';
$host = 'localhost';
$db_name = 'garchazon';

// set up DSN
$dsn = "mysql:host=$host;dbname=$db_name";

$db = new PDO($dsn, $user, $pass);

$query = "SELECT id, apyno, edad FROM Employee";

$stmt = $db->prepare($query);

$stmt->execute();

$products = $stmt->fetchAll(PDO::FETCH_ASSOC);

// Set response content type
header('Content-Type: application/json');
// Return JSON
echo json_encode($products);
?>

 

and my json output:

[{"id":"1","apyno":"Rosa Melroso","edad":"18","deporte":"Running"},{"id":"2","apyno":"Debora Melo","edad":"22","deporte":"Gym"},{"id":"3","apyno":"Debora Teste","edad":"23","deporte":"Mountain Bike"},{"id":"4","apyno":"Debora Dora de Cabezas","edad":"66","deporte":"Gym"},{"id":"5","apyno":"Rita Lazo","edad":"33","deporte":"Running"},{"id":"6","apyno":"Aquiles Bailoyo","edad":"28","deporte":"Running"},{"id":"7","apyno":"Omar Icon","edad":"21","deporte":"Running"},{"id":"8","apyno":"Paty Tasalhombro","edad":"27","deporte":"Mountain Bike"},{"id":"9","apyno":"Elber Galarga","edad":"34","deporte":"Gym"},{"id":"10","apyno":"Analisa Melchoto","edad":"55","deporte":"Gym"},{"id":"11","apyno":"Ester Mosobicho","edad":"44","deporte":"Mountain Bike"},{"id":"12","apyno":"Cindy Entes","edad":"36","deporte":"Running"},{"id":"13","apyno":"Lucila Tanga","edad":"32","deporte":"Running"},{"id":"14","apyno":"Marcelo Metio","edad":"53","deporte":"Mountain Bike"},{"id":"15","apyno":"Andy Arrea","edad":"29","deporte":"Running"},{"id":"16","apyno":"Jean Pier Napeluda","edad":"38","deporte":"Mountain Bike"},{"id":"17","apyno":"Jesica Galindo","edad":"21","deporte":"Running"},{"id":"18","apyno":"Monica Galindo","edad":"21","deporte":"Gym"},{"id":"19","apyno":"Rebeca Galindo","edad":"21","deporte":"Running"},{"id":"20","apyno":"Rosa Mile\u00f1o Ardiente","edad":"64","deporte":"Gym"},{"id":"21","apyno":"Elvio Lador","edad":"33","deporte":"Gym"},{"id":"22","apyno":"Debora Dora Dejapis","edad":"34","deporte":"Mountain Bike"},{"id":"23","apyno":"Aquiles Baeza Parada","edad":"23","deporte":"Gym"}]

[Stefan]

Hello Lisandro,

After inspecting the example the configuration looks good.

Please confirm if the Grid is successfully rendered but the data is not there.

If this is the case, please check if setting the JSON data directly using the data method will show it correctly. If the data is shown correctly with the data method that means that it is not received correctly from the server:

http://docs.telerik.com/kendo-ui/api/php/Kendo/Data/DataSource#methods-data

http://docs.telerik.com/kendo-ui/api/javascript/data/datasource#configuration-data

Also, as the data is in JSON format check if using the contentType method and setting it to application/json will resolve the issue:

http://docs.telerik.com/kendo-ui/api/php/Kendo/Data/DataSourceTransportRead#methods-contentType

If this does not resolve it, please provide a runnable example so I can investigate further.

Regards,
Stefan
Telerik by Progress

[Alessio]

Hello guys, we have the same problem, the contentType is set correctly, but the second call ( the POST one ) of php file return this : 

the part before json .. don't have to be there i think 

Regards

<!DOCTYPE html>
<html>
<head>
    <title>Test </title>
    <link rel="stylesheet" href="styles/kendo.common.min.css" />
    <link rel="stylesheet" href="styles/kendo.default.min.css" />
    <link rel="stylesheet" href="styles/kendo.default.mobile.min.css" />

    <script src="js/jquery.min.js"></script>
    <script src="js/kendo.all.min.js"></script>
</head>
<body>
    {"total":148,"data":[{"phonenumber":"393488178","idmessage":"3EB0147E1FDF0B12EA38","text":"Guarda che seri!","image":"c5xwib60SrmAX_xPiJwG4w_3EB0147E1FDF0B12EA38_large.jpg","updatetime":"2016-11-09 15:53:48"},{"phonenumber":"39348................................:09:43"}]}

[Alessio]

I found the solution, 

on your example in this page http://demos.telerik.com/php-ui/grid/remote-data-binding  , u have to move the 

<!DOCTYPE html><html><head><title></title><link rel="stylesheet" href="styles/kendo.common.min.css" /><link rel="stylesheet" href="styles/kendo.default.min.css" /><link rel="stylesheet" href="styles/kendo.default.mobile.min.css" /><script src="js/jquery.min.js"></script><script src="js/kendo.all.min.js"></script></head><body>

pice of html code just after php statement 

if ($_SERVER['REQUEST_METHOD'] == 'POST') {

.....

.....

}

Regards

[Stefan]

Hello Alessio,

Thank you for sharing this with the Kendo UI community.

I will look into the example as it should work as expected without this modification.

Regards,
Stefan
Telerik by Progress