[Solved] "No items to display"

[Steven]

Hi, I'm new to Kendo, but I've gotten the datepicker and droplist/with datasource to work. However, I'm stuck on the grid.

The grid renders fine on the page, but it says "No items to display". There are no errors in the console. In the console, I can see the browser fetch the JSON when I click refresh, and it contains all the JSON data (101 rows). Here is a sample: 

 JSON sample:

[
    {
        "id": 1,
        "email": "[e-mail]",
        "first_name": "Nellie",
        "last_name": "Bogan"
    },
    {
        "id": 2,
        "email": "[e-mail]",
        "first_name": "Jaida",
        "last_name": "West"
    },
    {
        "id": 3,
        "email": "[e-mail]",
        "first_name": "Vito",
        "last_name": "Ortiz"
    },

...and so on.




PHP code:

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

$read->url('/data/users')
->contentType('application/json')
->type('POST');

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

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

$contactFirstNameField = new \Kendo\Data\DataSourceSchemaModelField('first_name');
$contactFirstNameField->type('string');

$contactLastNameField = new \Kendo\Data\DataSourceSchemaModelField('last_name');
$contactLastNameField->type('string');

$contactEmailField = new \Kendo\Data\DataSourceSchemaModelField('email');
$contactEmailField->type('string');

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

$model->addField($contactFirstNameField)
->addField($contactLastNameField)
->addField($contactEmailField)
->addField($contactIdField);

$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(10)
->serverPaging(true)
->serverSorting(true)
->serverGrouping(true)
->schema($schema);

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

$first_name = new \Kendo\UI\GridColumn();
$first_name->field('first_name')
->title('First Name')
->width(140);

$last_name = new \Kendo\UI\GridColumn();
$last_name->field('last_name')
->title('Last Name')
->width(190);

$email = new \Kendo\UI\GridColumn();
$email->field('email')
->title('Email');

$id = new \Kendo\UI\GridColumn();
$id->field('id')
->title('ID')
->width(110);

$pageable = new Kendo\UI\GridPageable();
$pageable->refresh(true)
->pageSizes(true)
->buttonCount(5);

$grid->addColumn($first_name, $last_name, $email, $id)
->dataSource($dataSource)
->sortable(true)
->groupable(true)
->pageable($pageable)
->attr('style', 'height:380px');

?>


<div id="clientsDb">
  <?php
  echo $grid->render();
  ?>
</div>

<style scoped>
  #clientsDb {
    width: 952px;
    height: 396px;
    margin: 20px auto 0;
    padding: 51px 4px 0 4px;
  }
</style>

[Dimo]

Hi Steven,

The current DataSource schema does not correspond to the server response. The DataSource configuration expects a server response, in which the data items are placed inside an array that is a value of a "data" field, which does not exist. In addition, according to the schema, the server response should contain a "total" field, which does not exist either. So either change the schema configuration, or the server response.

http://docs.telerik.com/kendo-ui/framework/datasource/crud#read-remote

$schema->data('data')
->total('total');

Regards,
Dimo
Telerik

 

 

[Steven]

Dimo, that solved it. Since my JSON output is just a plain array, I didn't need that schema definition at all.Thanks for pointing me in the right direction.