Date Format for creating grids from arrays in PHP

[Sam]

I'm looking to use Kendo to enhance an existing PHP web app at the company I work for. Currently all of the data in the app is extracted from a MySQL database, processed and setup as an array, then output as an HTML table.

I'd like to use Kendo as a 'drop-in' replacement for the tables, which means all the data will come from PHP arrays. I've read the docco and got started using the PHP Wrapper, and the following code:
$dataSource = new \Kendo\Data\DataSource();
$dataSource->data($my_array)

Most things are working great, and I'm very impressed. However there's one problem - dates aren't sortable. This is a pretty killer issue for the web app, given that it has a lot of inventory and sales information.

I think the problem is the format of the dates - currently they are 'raw' dates in d/MM/yyy format (no leading  0 on days). But I have also experimented with injecting them them as dd/MM/yyyy, yyyy-mm-dd, and unix time stamps (second since the epoch, otherwise know as date('u') in PHP). But no matter what I do, the dates always sort as if they are just numbers.

Does anyone know what date format is acceptable to Kendo UI's PHP Wrapper, when coming from a PHP array?

I've succesfully used format({0:c}) to represent currency information, and I've read that format({0:d}) can accomplish something with dates, but I've had no luck. I've also tried format({0:d/MM/yyyy}) and a handful of others, but it doesn't change the data.

Does the ->format() function have any relationship to sorting? Or does it just change the visual output of the columns? 

I'm aware that I can hook Kendo up to the data sources directly (and that this is a preferred option), but as I said I'm attempting to use this as a 'drop-in' replacement for tables right now. It's not worth the effort of rewriting so much of the app at this stage, I'm just evaluating. Further, both Easy UI and dHTMLxGrid are capable of taking a PHP array that includes a date and treating it correctly, so I'd be very surprised if Kendo couldn't.

I would have thought this was a pretty common use case, but I can't find anything specific to this example in the docs, tutorials, API etc. Can anyone assist?

Regards,
Sam Miller

[Alexander Valchev]

Hi Sam,

I believe that the problem is connected with the model field definitions.

Does the ->format() function have any relationship to sorting? Or does it just change the visual output of the columns?

The format affect only the way values are displayed. In order to sort values as dates you should set the field type to date. For example:

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

$shipNameField = new \Kendo\Data\DataSourceSchemaModelField('ShipName');
$shipNameField->type('string');

$orderDateField = new \Kendo\Data\DataSourceSchemaModelField('OrderDate');
$orderDateField->type('date');

$model->addField($shipNameField)
      ->addField($orderDateField);

$schema = new \Kendo\Data\DataSourceSchema();
$schema->model($model);

In this way the DataSource will parse date string into JavaScript Date Object which will fix the sorting. You can test the behaviour in this demo:

• http://demos.kendoui.com/web/grid/remote-data.html
  
  

Regards,
Alexander Valchev
Telerik

[Sam]

Hello Alexander

Thank you for your assistance. Unfortunately, as I specified in the question I am not using a Data Source. I am creating this grid from a PHP array, and therefore not using the 'DataSourceSchemaModelField' column type

My code looks like this at present:
$grid =
\Kendo\UI\Grid::Get('grid')
->dataSource(\Kendo\Data\DataSource::Get()->data($grid_data))
->pageable(\Kendo\UI\GridPageable::Get()->pageSize(10)->input(true)->numeric(false))
->sortable(true)
->columnMenu(true)
->filterable(true)
->addColumn(
\Kendo\UI\GridColumn::Get()->field('name')->title('Movie Title'),
\Kendo\UI\GridColumn::Get()->field('director')->title('Director'),
\Kendo\UI\GridColumn::Get()->field('gross')->title('Gross ($)')->format('{0:c}'),
\Kendo\UI\GridColumn::Get()->field('runtime')->title('Runtime (mins)'),
\Kendo\UI\GridColumn::Get()->field('rating')->title('IMDB Rating'),
\Kendo\UI\GridColumn::Get()->field('release')->title('Release Date')->format('{0:d}'),
\Kendo\UI\GridColumn::Get()->field('genre')->title('Genre(s)')
);

The ::Get() commands are a method chaining add-on I utilise, that allows for more fluent syntax. Functionaly item::Get()->doSomething is the same as '$item = new item(); $item->doSomething()', it just allows for cleaner method chaining.

As you can see I am using \Kendo\UI\GridColumn, not \Kendo\Data\DataSourceSchemaModelField. The GridColumn does not have a 'type' attribute or method according to the PHP Wrapper API (http://docs.kendoui.com/api/wrappers/php/Kendo/UI/GridColumn#methods-attributes). So how would I specify the type of data going into the GridColumn labelled 'release' is 'date'?

Or have I misunderstood, and you are suggesting that this command should be applied elsewhere?

Regards,
Sam

[Alexander Valchev]

Hello Sam,

There is no way to specify the type in the column settings. Field types are defined in the schema. It is possible to specify the schema when the grid is bound to local data array too. Please check this demo:

$dataSource->data($data)
        ->schema($schema);

• http://demos.kendoui.com/web/grid/local-data.html
  
  

Regards,
Alexander Valchev
Telerik