Cannot get the gris to display

[Dennis]

Dear all,

edit: apologies for the typo in the title

Before we start, I am using the trial version. And I just read: "You should have a valid Kendo site account with an active trial or commercial license attached to it to
post in the Premium Forum." Now me and my manager are very keen to learn in what way KendoUI could help us, and if it is suitable.

I have been looking at KenoUI for the last couple of days to furnish a webbased tool we're working on.

Now I run into the issue that when creating a grid it won't display on the page.

I configured a db file with 1 table "Client" and 3 fields "ClientId", "ClientName" and "ClientKvk".

The render function returns:
<div id="grid"></div>

<script>
      jQuery(function(){jQuery("#grid").kendoGrid({"columns":[{"field":"ClientId","title":"Client Id"},{"field":"ClientName","width":150,"title":"Client Name"},{"field":"ClientKvk","width":150,"title":"KVK number"}],"dataSource":{"transport":{"read":{"url":"index.php","contentType":"application\/json","type":"POST"},"parameterMap":function(data) {
                  return kendo.stringify(data);
              }},"pageSize":20,"serverPaging":true,"serverSorting":true,"serverGrouping":true,"schema":{"data":"data","errors":"errors","groups":"groups","model":{"fields":[{"field":"ClientId","type":"number"},{"field":"ClientName","type":"string"},{"field":"ClientKvk","type":"number"}]},"total":"total"}},"height":400,"sortable":true,"groupable":true,"pageable":true});});
    </script>

and my php file, almost exactly copied from the example php file, just changed the db configuration:

<?php
    $sRootDir = "../..";
    
    require_once $sRootDir.'/lib/Kendo/DataSourceResult.php';
    require_once $sRootDir.'/lib/Kendo/Autoload.php';

    if ($_SERVER['REQUEST_METHOD'] == 'POST') {
        header('Content-Type: application/json');
        echo "Post";
        //DB TO DO json_decode
        //Takes a JSON encoded string and converts it into a PHP variable.
        $request = json_decode(file_get_contents('php://input'));


        //DB TO DO ('sqlite:../../sample.db')
        //SQLite is a relational database management system contained in a small (~350 KB)
        //C programming library. In contrast to other database management systems, SQLite
        //is not a separate process that is accessed from the client application, but an
        //integral part of it.
        //http://www.sqlite.org/
        $result = new DataSourceResult('sqlite:../../db_res/test_client.db');

        //DB TO DO json_encode
        //Returns a string containing the JSON representation of value.
        echo json_encode($result->read('Client', array('ClientId', 'ClientName', 'ClientKvk'), $request));

        exit;
    }

    $transport = new \Kendo\Data\DataSourceTransport();

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

    $read->url('index.php')
         ->contentType('application/json')
         ->type('POST');

    $transport ->read($read)
              ->parameterMap('function(data) {
                  return kendo.stringify(data);
              }');

    $model = new \Kendo\Data\DataSourceSchemaModel();

    $ClientIdField = new \Kendo\Data\DataSourceSchemaModelField('ClientId');
    $ClientIdField->type('number');

    $ClientNameField = new \Kendo\Data\DataSourceSchemaModelField('ClientName');
    $ClientNameField->type('string');

    $ClientKvkField = new \Kendo\Data\DataSourceSchemaModelField('ClientKvk');
    $ClientKvkField->type('number');

    $model->addField($ClientIdField)
          ->addField($ClientNameField)
          ->addField($ClientKvkField);

    $schema = new \Kendo\Data\DataSourceSchema();
    $schema->data('data')
           ->errors('errors')
           ->groups('groups')
           ->model($model)
           ->total('total');

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

    $dataSource->transport($transport)
               ->pageSize(20)
               ->serverPaging(true)
               ->serverSorting(true)
               ->serverGrouping(true)
               ->schema($schema);

    $grid = new \Kendo\UI\Grid('grid');

    $ClientId = new \Kendo\UI\GridColumn();
    $ClientId->field('ClientId')
                ->title('Client Id');

    $ClientName = new \Kendo\UI\GridColumn();
    $ClientName->field('ClientName')
              ->width(150)
              ->title('Client Name');

    $ClientKvk = new \Kendo\UI\GridColumn();
    $ClientKvk->field('ClientKvk')
              ->width(150)
              ->title('KVK number');

    $grid->addColumn($ClientId, $ClientName, $ClientKvk)
         ->dataSource($dataSource)
         ->height(400)
         ->sortable(true)
         ->groupable(true)
         ->pageable(true);

    echo $grid->render();

(DB TO DO are my initials and the parts of the code I need to look into to increase my understanding)

The obvious question is: what am I doing wrong?

[Vladimir Iliev]

Hi Dennis,

I tried to reproduce the problem locally using the provided JavaScript output from the PHP wrappers but to no avail – everything is working as expected on our side (please check this jsBin example). Could you please provide runable project where the issue is reproduced? This would help us pinpoint the exact reason for this behavior.

Kind Regards,
Vladimir Iliev
Telerik

[Dennis]

Hi Vladimir,

Thank you for your reply.

Our development server is not accesible from the outside, so unfortunately I cannot show you the problem occuring. I tried to incorporate Kendo in a running project, and I may have found the cause of the problem. Unfortunately haven't found a solution yet.

Some info:
The framework of the website is
Header
Menu (the Kendo menu, works and looks great!)
and a <div id="content"> </div>

The menu calls a javascript function which uses Ajax to display the pages called in the "content"-div. On two of those pages I would like to use the grid functionality.

I then isolated the page where I wanted the grid, copied the header into the isolated html and when called seperately it works as you showed. I get the same result. Which means the code is ok.

When called through Ajax, it doesn't work.

Is this a known problem?

[Dennis]

I have figured out the (obvious) solution.

When you include the javascript funtion in the ajax-content that wouldn't work of course. Calling the function after the ajax load fixed the issue.

Now I can get cracking on datamanipulation at last!

Thanks for your help Vladimir.