json not loading into grid, using php wrapper

5 posts, 0 answers
  1. Lisandro
    Lisandro avatar
    1 posts
    Member since:
    Aug 2016

    Posted 19 Dec 2016 Link to this post

    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"}]

  2. Stefan
    Admin
    Stefan avatar
    675 posts

    Posted 21 Dec 2016 Link to this post

    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
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  3. Alessio
    Alessio avatar
    9 posts
    Member since:
    Aug 2016

    Posted 01 Feb in reply to Stefan Link to this post

    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"}]}

  4. Alessio
    Alessio avatar
    9 posts
    Member since:
    Aug 2016

    Posted 01 Feb in reply to Alessio Link to this post

    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

  5. Stefan
    Admin
    Stefan avatar
    675 posts

    Posted 02 Feb Link to this post

    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
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top