<?php

require_once '../lib/Kendo/Autoload.php';
?>
<div role="application">
<script>

    window.dataSource1 = new kendo.data.DataSource({
        type: "odata",
        transport: {
            read: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Customers"
        },
        pageSize: 20
    });

    dataSource1.fetch(function () {
        var grid = $("#grid").data("kendoGrid");
        grid.setDataSource(this);
        filter = $("#filter").data("kendoFilter");
        filter.dataSource = this;
    });

</script>
<?php
    $filter = new \Kendo\UI\Filter("filter");
    $filter->applyButton(true);
    $filter->expressionPreview(true);

    $nameField = new \Kendo\UI\FilterField();

    $nameField->name("ContactName")
                    ->label("Contact Name");

    $companyField = new \Kendo\UI\FilterField();

    $companyField->name("CompanyName")
                    ->label("Company Name");

    $titleField = new \Kendo\UI\FilterField();

    $titleField->name("ContactTitle")
                  ->label("Contact Title");

    $country = new \Kendo\UI\FilterField();

    $country->name("Country")
                  ->label("Country");

    $filter->addField($nameField)
        ->addField($titleField)
        ->addField($country)
        ->addField($companyField);

    echo $filter->render();

?>

<br />
<br />
<br />

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

    $contactName = new \Kendo\UI\GridColumn();
    $contactName->field('ContactName')
                ->template("<div class='customer-photo'style='background-image: url(../content/web/Customers/#:data.CustomerID#.jpg);'></div><div class='customer-name'>#: ContactName #</div>")
                ->title('Contact Name')
                ->width(240);

    $contactTitle = new \Kendo\UI\GridColumn();
    $contactTitle->field('ContactTitle')
                ->title('Contact Title');

    $companyName = new \Kendo\UI\GridColumn();
    $companyName->field('CompanyName')
                ->title('Company Name');

    $Country = new \Kendo\UI\GridColumn();
    $Country->field('Country')
            ->width(150);

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

    $grid->addColumn($contactName, $contactTitle, $companyName, $Country)
         ->pageable($pageable)
         ->attr('style', 'height:550px');

    echo $grid->render();
    ?>
</div>

<style type="text/css">
    .customer-photo {
        display: inline-block;
        width: 32px;
        height: 32px;
        border-radius: 50%;
        background-size: 32px 35px;
        background-position: center center;
        vertical-align: middle;
        line-height: 32px;
        box-shadow: inset 0 0 1px #999, inset 0 0 10px rgba(0,0,0,.2);
        margin-left: 5px;
    }

    .customer-name {
        display: inline-block;
        vertical-align: middle;
        line-height: 32px;
        padding-left: 3px;
    }
</style>