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

3 posts, 0 answers
  1. Ismael Senateur
    Ismael Senateur avatar
    4 posts
    Member since:
    Jun 2016

    Posted 21 Dec 2016 Link to this post

    <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. Dimiter Topalov
    Admin
    Dimiter Topalov avatar
    546 posts

    Posted 23 Dec 2016 Link to this post

    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.
  3. Ismael Senateur
    Ismael Senateur avatar
    4 posts
    Member since:
    Jun 2016

    Posted 25 Dec 2016 in reply to Dimiter Topalov Link to this post

    thank you very much
Back to Top