Telerik Forums / Kendo UI for jQuery
This is a migrated thread and some comments may be shown as answers.

Grid might duplicate filters

1 Answer 194 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Jack
Top achievements
Rank 2
Iron
Jack asked on 01 Sep 2014, 09:04 PM
In the following example also available at http://dojo.telerik.com/UsaG the grid seems to duplicate filters.

1) Change language and search text in the top right corner: filters (logged in the browser console) seem to operate properly;
2) As soon as you add/remove filters in the grid's filter toolbar, filters keep adding instead of replacing (see description and browser console).

Please correct if I am doing something wrong.

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>Datasource</title>
    <style>
        .toolbar { float: right; }
    </style>
</head>
<body>
<div data-role="grid" data-bind="source:list" data-pageable="{refresh:true,pageSizes:true,buttonCount:5}" data-filterable=true data-sortable=true data-resizable=true
     data-toolbar="[{template: kendo.template($('#toolbar-template').html())}]"
     data-columns="[{field:'id'},{field:'title'},{field:'description',width:420},{field:'userName'},{field:'created'},{field:'minAge',width:100},{field:'maxAge',width:100}]"></div>
<script type="text/x-kendo-template" id="toolbar-template">
    <div class="toolbar">
        <label for="language">Language:</label>
        <select id="language">
            <option value="fr">French</option>
            <option value="en" selected>English</option>
        </select>
        <label for="search">Search:</label>
        <input type="search" id="search" placeholder="Search..." class="k-textbox"/>
    </div>
</script>
<script>
 
    function log(message) {
        if (window.console) {
            if ($.type(message) === 'string' && $.type(window.console.log) === 'function') {
                window.console.log(message);
            } else if ($.type(message) === 'object' && $.type(window.console.dir) === 'function') {
                window.console.dir(message);
            }
        }
    }
 
    $.ajax = function(options) {
        var dfd = $.Deferred();
        setTimeout(function() {
            dfd.resolve({
                total: 1,
                data: [{
                    id: '123456789012345678901234',
                    title: 'A simple test',
                    description: '',
                    language: 'en',
                    userName: 'Kendo UI',
                    created: (new Date()).toISOString(),
                    minAge: 0,
                    maxAge: 99
                }]
            });
        }, 0);
        return dfd.promise();
    }
 
    var dataSource = new kendo.data.DataSource({
        transport: {
            read: function(options) {
                log('Read transport');
                var filter = options.data.filter = options.data.filter || { logic: 'and', filters: [] };
                if ((filter.logic === 'or') || (filter.field && filter.operator && filter.value)) {
                    options.data.filter = {
                        logic: 'and',
                        filters: [
                            filter
                        ]
                    }
                }
                var language = $('#language').val();
                if ($.type(language) === 'string' && language.length === 2) {
                    options.data.filter.filters.push({ field: 'language', operator: 'eq', value:language });
                }
                var textSearch = $('#search').val();
                if ($.type(textSearch) === 'string' && textSearch.trim().length > 0) {
                    options.data.filter.filters.push({ field: '$text', operator: 'eq', value: textSearch.trim() });
                }
                console.log(options.data.filter);
 
                $.ajax({
                    url: "http://localhost:3000/api/v1/summaries",
                    dataType: "json",
                    cache: false,
                    data: options.data
                }).done(function(results) {
                    if ($.isArray(options.data.filter.filters)) {
                        results.data[0].description = kendo.format('Filter has {0} operators', options.data.filter.filters.length);
                    }
                    results.data[0].language = language;
                    options.success(results);
                }).fail(function(xhr, status, error) {
                    options.error(error);
                });
            }
        },
        serverFiltering: true,
        serverSorting: true,
        //sort: { field: "title", dir: "desc" },
        pageSize: 5,
        serverPaging: true,
        schema: {
            data: "data",
            total: "total"
        }
    });
 
    window.viewModel = kendo.observable({
        list: dataSource
    });
 
    $(document).ready(function() {
        kendo.bind('body', window.viewModel);
        $('#language').kendoDropDownList().data('kendoDropDownList')
            .bind('change', function() {
                log('Language changed to ' + this.value());
                window.viewModel.list.read();
            });
        $('#search')
            .on('change', function() {
                log('Search changed to ' + $(this).val());
                window.viewModel.list.read();
            });
    });
</script>
</body>
</html>

1 Answer, 1 is accepted

Sort by
0
Alexander Popov
Telerik team
answered on 03 Sep 2014, 01:47 PM
Hello Jack,

This happens because new criteria is pushed to the filters array on each read request. I am not exactly sure what the expected behavior is, however I would recommend modifying the existing criteria instead of adding new one each time.

Regards,
Alexander Popov
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
Tags
Grid
Asked by
Jack
Top achievements
Rank 2
Iron
Answers by
Alexander Popov
Telerik team
Share this question
or