Remote Binding

This article shows how to bind Kendo UI Grid for PHP to a JSON response. Remote binding means that all data operations—paging, sorting, filtering, etc.—happen on the server side.

Important

The following demos are using the sample SQLite database shipped with the Telerik UI for PHP demos (/wrappers/php/sample.db).

Bind to PDO-Returned Arrays

Configuration

Below are listed the steps for you to follow when configuring the Kendo UI Grid for PHP for remote binding.

Step 1 Make sure you followed all the steps from the introductory article on Telerik UI for PHP—include the autoloader, JavaScript, and CSS files.

Step 2 Create a data source for the tasks and set its transport and schema.

    <?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('products.php')
         ->type('POST');

    $transport->read($read);

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

    $productNameField = new \Kendo\Data\DataSourceSchemaModelField('ProductName');
    $productNameField->type('string');

    $unitPriceField = new \Kendo\Data\DataSourceSchemaModelField('UnitPrice');
    $unitPriceField->type('number');

    $unitsInStockField = new \Kendo\Data\DataSourceSchemaModelField('UnitsInStock');
    $unitsInStockField->type('number');

    $model->addField($productNameField)
          ->addField($unitPriceField)
          ->addField($unitsInStockField);

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

    $schema->model($model);

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

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

Step 3 Create a Grid, configure its columns and set its data source.

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

    $productNameColumn = new \Kendo\UI\GridColumn();
    $productNameColumn->field('ProductName');

    $unitPriceColumn = new \Kendo\UI\GridColumn();
    $unitPriceColumn->field('UnitPrice');

    $discontinuedColumn = new \Kendo\UI\GridColumn();
    $discontinuedColumn->field('Discontinued');

    // Configure columns, enable paging, filtering, sorting and grouping
    $grid->addColumn($productNameColumn, $unitPriceColumn, $discontinuedColumn)
         ->filterable(true)
         ->sortable(true)
         ->pageable(true)
         ->groupable(true);
    ?>

Step 4 Output the Grid by echoing the result of the render method.

    <?php
    echo $grid->render();
    ?>

JSON-Returning File Creation

Step 1 Create a new PHP file called products.php. This file will return data in JSON format. The data source is configured to request it via the url setting.

Step 2 Create a PDO connection.

    <?php
    $db = new PDO('sqlite:../sample.db');
    ?>

Step 3 Retrieve all records from the Products table.

    <?php
    $statement = $db->prepare('SELECT * FROM Products');
    $statement->execute();
    $products = $statement->fetchAll(PDO::FETCH_ASSOC);
    ?>

Step 4 Return the records as JSON.

    <?php
    // Set response content type
    header('Content-Type: application/json');
    // Return JSON

    echo json_encode($products);
    ?>

Use DataSourceResult Helpers

The DataSourceResult class is a helper utility on top of PDO which simplifies common CRUD operations. The DataSourceResult can also perform paging, sorting, filtering, grouping and aggregate calculations on the server side by generating SQL executed via PDO. It is distributed with the Telerik UI for PHP demos and can be found in the /wrappers/php/lib/ directory of the Telerik UI for PHP distribution.

First, configure a Kendo UI Grid for PHP binding and then implement the remote service which will return JSON.

Configuration (DataSourceResult)

Below are listed the steps for you to follow when configuring the Grid for remote binding, using DataSourceResult.

Step 1 Follow the steps from the introductory article on Telerik UI for PHP—include the autoloader, JavaScript and CSS files.

Step 2 Create a data source and configure it.

    <?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('products.php')
         ->contentType('application/json')
         ->type('POST');

    // Configure the transport to send the data source parameters as JSON.
    // This is required by the DataSourceResult helper.
    $transport->read($read)
              ->parameterMap('function(data) {
                  return kendo.stringify(data);
              }');

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

    $productNameField = new \Kendo\Data\DataSourceSchemaModelField('ProductName');
    $productNameField->type('string');

    $unitPriceField = new \Kendo\Data\DataSourceSchemaModelField('UnitPrice');
    $unitPriceField->type('number');

    $unitsInStockField = new \Kendo\Data\DataSourceSchemaModelField('UnitsInStock');
    $unitsInStockField->type('number');

    $model->addField($productNameField)
          ->addField($unitPriceField)
          ->addField($unitsInStockField);

    $schema = new \Kendo\Data\DataSourceSchema();
    // Configure the schema to accept the format returned by DataSourceResult
    $schema->model($model)
           ->data('data')
           ->errors('errors')
           ->groups('groups')
           ->aggregates('aggregates')
           ->total('total');

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

    // Configure data source and enable server operations - paging, sorting etc.
    $dataSource->transport($transport)
               ->pageSize(10)
               ->schema($schema)
               ->serverFiltering(true)
               ->serverSorting(true)
               ->serverGrouping(true)
               ->serverPaging(true);
    ?>

Step 3 Create a Grid, configure its columns and set its data source.

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

    $productNameColumn = new \Kendo\UI\GridColumn();
    $productNameColumn->field('ProductName');

    $unitPriceColumn = new \Kendo\UI\GridColumn();
    $unitPriceColumn->field('UnitPrice');

    $discontinuedColumn = new \Kendo\UI\GridColumn();
    $discontinuedColumn->field('Discontinued');

    // Configure columns, enable paging, filtering, sorting and grouping
    $grid->addColumn($productNameColumn, $unitPriceColumn, $discontinuedColumn)
         ->filterable(true)
         ->sortable(true)
         ->pageable(true)
         ->groupable(true);
    ?>

Step 4 Output the Grid by echoing the result of the render method.

    <?php
    echo $grid->render();
    ?>

JSON-Returning File Creation (DataSourceResult)

Step 1 Create a new PHP file called products.php. This file will return data in JSON format. The data source is configured to request it via the url setting.

Step 2 Copy /wrappers/php/lib/DataSourceResult.php to your website root and include it.

    <?php require_once 'lib/DataSourceResult.php'; ?>

Step 3 Read the request body and parse it as JSON. In the previous example, the Kendo UI DataSource is configured to submit its parameters as JSON via the parameterMap.

    <?php
    $request = json_decode(file_get_contents('php://input'));
    ?>

Step 4 Create a new instance of the DataSourceResult class and call its read method.

    <?php
    $result = new DataSourceResult('sqlite:../sample.db');

    // The 'read' method accepts table name, array of columns to select and request parameters as array
    $data = $result->read('Products', array('ProductName', 'UnitPrice', 'UnitsInStock'), $request));
    ?>

Step 5 Return the result of the read method as JSON.

    <?php
    // Set response content type
    header('Content-Type: application/json');

    // Return JSON
    echo json_encode($data);
    ?>

See Also

In this article