This is a migrated thread and some comments may be shown as answers.

how to replace dropdown list by date picker for filter grid in toolbar

2 Answers 193 Views
Date/Time Pickers
This is a migrated thread and some comments may be shown as answers.
Ismael Senateur
Top achievements
Rank 1
Ismael Senateur asked on 21 Dec 2016, 10:47 AM
<script id="toolbar" type="text/x-kendo-template">

<div class="toolbar">
    <label class="category-label" for="category">Show products by category:</label>

    <?php

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

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

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

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

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

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

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




        $dropDownList = new \Kendo\UI\DropDownList('category');
        $dropDownList->dataSource($dataSource)
                ->dataTextField('RDV')
                ->dataValueField('ClientID')
                ->autoBind(false)
                ->change('categoryChange')
                ->optionLabel('All');

        echo $dropDownList->renderInTemplate();
    ?>

</div>

</script>

<script>
    function categoryChange() {
        var value = this.value(),
            grid = $("#grid").data("kendoGrid");

        if (value) {
            grid.dataSource.filter({ field: "ClientID", operator: "eq", value: parseInt(value) });
        } else {
            grid.dataSource.filter({});
        }
    }
</script>

<style>
    #grid .k-grid-toolbar
    {
        padding: .6em 1.3em;
    }
    .category-label
    {
        vertical-align: middle;
        padding-right: .5em;
    }
    #category
    {
        vertical-align: middle;
    }
    .toolbar {
        float: right;
        margin-right: .8em;
    }
</style>

2 Answers, 1 is accepted

Sort by
0
Dimiter Topalov
Telerik team
answered on 23 Dec 2016, 09:03 AM
Hello Ismael,

You can use the approach, demonstrated in the mentioned online demo, replace the Kendo UI widget with a DatePicker, and modify the Grid filtering logic accordingly, e.g.:

<?php
require_once '../lib/DataSourceResult.php';
require_once '../lib/Kendo/Autoload.php';
 
if ($_SERVER['REQUEST_METHOD'] == 'POST') {
    header('Content-Type: application/json');
 
    $request = json_decode(file_get_contents('php://input'));
 
    $result = new DataSourceResult('sqlite:..//sample.db');
 
    if (array_key_exists('type', $_GET)) {
        echo json_encode($result->read('Categories', array('CategoryID', 'CategoryName'), $request));
    } else {
        echo json_encode($result->read('Products', array('ProductID', 'ProductName', 'UnitPrice', 'QuantityPerUnit', 'CategoryID'), $request));
    }
 
    exit;
}
 
require_once '../include/header.php';
 
$transport = new \Kendo\Data\DataSourceTransport();
 
$read = new \Kendo\Data\DataSourceTransportRead();
 
$read->url('toolbar-template.php')
     ->contentType('application/json')
     ->type('POST');
 
$transport->read($read)
          ->parameterMap('function(data) {
              return kendo.stringify(data);
          }');
 
$model = new \Kendo\Data\DataSourceSchemaModel();
 
$schema = new \Kendo\Data\DataSourceSchema();
$schema->data('data')
       ->total('total')
       ->parse('function(data) {
               data.data.forEach(function(item, index){
                   item.date = new Date(2016, 11, (index + 1) % 30)
               });
                  return data;
              }');
 
$dataSource = new \Kendo\Data\DataSource();
 
$dataSource->transport($transport)
           ->pageSize(20)
           ->schema($schema);
 
$grid = new \Kendo\UI\Grid('grid');
 
$productID = new \Kendo\UI\GridColumn();
$productID->field('ProductID')
            ->width(100)
            ->title('Product ID');
 
 
$productName = new \Kendo\UI\GridColumn();
$productName->field('ProductName')
            ->title('Product Name');
 
$unitPrice = new \Kendo\UI\GridColumn();
$unitPrice->field('UnitPrice')
          ->width(150)
          ->title('Unit Price');
 
$quantityPerUnit = new \Kendo\UI\GridColumn();
$quantityPerUnit->field('QuantityPerUnit')
          ->title('Quantity Per Unit');
 
$date = new \Kendo\UI\GridColumn();
$date->field('date')
          ->title('Sample date')
          ->format('{0:d}');
 
$grid->addColumn($productID, $productName, $unitPrice, $quantityPerUnit, $date)
     ->dataSource($dataSource)
     ->height(550)
     ->sortable(true)
     ->pageable(true)
     ->toolbarTemplateId('toolbar');
 
echo $grid->render();
?>
 
<script id="toolbar" type="text/x-kendo-template">
 
<div class="toolbar">
    <label class="category-label" for="datepicker">Show later than: </label>
 
    <?php
 
        $datePicker = new \Kendo\UI\DatePicker('datepicker');
        $datePicker->change('onChange')
           ->attr('style', 'width: 150px;');
         
        echo $datePicker->renderInTemplate();
 
        $clearButton = new \Kendo\UI\Button('button');
        $clearButton->icon('close')
            ->click('onClick');
 
        echo $clearButton->renderInTemplate();
    ?>
 
     
</div>
 
</script>
 
<script>
    function onChange() {
        var value = this.value(),
            grid = $("#grid").data("kendoGrid");
 
        if (value) {
            console.log(1)
            grid.dataSource.filter({ field: "date", operator: "gte", value: value });
        } else {
            grid.dataSource.filter({});
        }
    }
 
    function onClick() {
        var datePicker = $('#datepicker').data('kendoDatePicker');
        datePicker.value(null);
        datePicker.trigger('change');
    }
</script>
 
<style>
    #grid .k-grid-toolbar
    {
        padding: .6em 1.3em;
    }
    .category-label
    {
        vertical-align: middle;
        padding-right: .5em;
    }
    #category
    {
        vertical-align: middle;
    }
    .toolbar {
        float: right;
        margin-right: .8em;
    }
</style>
 
<?php require_once '../include/footer.php'; ?>

I hope this helps

Regards,
Dimiter Topalov
Telerik by Progress
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Ismael Senateur
Top achievements
Rank 1
answered on 25 Dec 2016, 04:03 PM
thank you very much
Tags
Date/Time Pickers
Asked by
Ismael Senateur
Top achievements
Rank 1
Answers by
Dimiter Topalov
Telerik team
Ismael Senateur
Top achievements
Rank 1
Share this question
or