kendo.observable filter grid datasource

3 posts, 1 answers
  1. Ignacio
    Ignacio avatar
    21 posts
    Member since:
    Feb 2013

    Posted 23 Jan Link to this post

    Hi,
    I am trying to filter my grid, but it doesn't work.
    I have defined into dataSourceOptions :
                serverFiltering: true,
                filter: { field: 'usuario', operator: 'eq', value: 'pedro' },   
    Any help would be greatly appreciated.
    Thanks.

    My code:
    -----------------------------------------------------------------------
    (function(parent) {
        var dataProvider = app.data.backendServices,
            /// start global model properties
            /// end global model properties
            fetchFilteredData = function(paramFilter, searchFilter) {
                var model = parent.get('ticketsModel'),
                    dataSource;

                if (model) {
                    dataSource = model.get('dataSource');
                } else {
                    parent.set('ticketsModel_delayedFetch', paramFilter || null);
                    return;
                }

                if (paramFilter) {
                    model.set('paramFilter', paramFilter);
                } else {
                    model.set('paramFilter', undefined);
                }

                if (paramFilter && searchFilter) {
                    dataSource.filter({
                        logic: 'and',
                        filters: [paramFilter, searchFilter]
                    });
                } else if (paramFilter || searchFilter) {
                    dataSource.filter(paramFilter || searchFilter);
                } else {
                    dataSource.filter({});
                }
            },

            flattenLocationProperties = function(dataItem) {
                var propName, propValue,
                    isLocation = function(value) {
                        return propValue && typeof propValue === 'object' &&
                            propValue.longitude && propValue.latitude;
                    };

                for (propName in dataItem) {
                    if (dataItem.hasOwnProperty(propName)) {
                        propValue = dataItem[propName];
                        if (isLocation(propValue)) {
                            dataItem[propName] =
                                kendo.format('Latitude: {0}, Longitude: {1}',
                                    propValue.latitude, propValue.longitude);
                        }
                    }
                }
            },
            dataSourceOptions = {
                type: 'everlive',
                serverFiltering: true,
                filter: { field: 'usuario', operator: 'eq', value: 'pedro' },            
                transport: {
                    typeName: 'facturas',
                    dataProvider: dataProvider
                },            
                change: function(e) {
                    var data = this.data();
                    for (var i = 0; i < data.length; i++) {
                        var dataItem = data[i];

                        /// start flattenLocation property
                        flattenLocationProperties(dataItem);
                        /// end flattenLocation property

                    }
                },
                error: function(e) {

                    if (e.xhr) {
                        var errorText = "";
                        try {
                            errorText = JSON.stringify(e.xhr);
                        } catch (jsonErr) {
                            errorText = e.xhr.responseText || e.xhr.statusText || 'An error has occurred!';
                        }
                        alert(errorText);
                    }
                },
                schema: {
                    model: {
                        fields: {
                            'factura': {
                                field: 'factura',
                                defaultValue: ''
                            },
                            'fecha': {
                                field: 'fecha',
                                defaultValue: ''
                            },
                        },
                        icon: function() {
                            var i = 'more';
                            return kendo.format('km-icon km-{0}', i);
                        },                 
                            icon1: function() {
                               if (this.get('facturar') == true) return 'img/time.png' ;
                                else return 'img/ok.png' ;
                            }, 
                            icon2: function() {
                               if (this.get('pago') == 'Efectivo') return 'img/euros.png' ;
                                else return 'img/visa.png' ;
                            },           
                            importes: function() {
                                var cad = ''
                                if (this.get('peaje') == 0) cad = cad ;
                                else cad = ' ('+this.get('importe') + ' + '+ this.get('peaje') +' peaje)' ;
                                if (this.get('pagado') > this.get('importe')+this.get('peaje')) 
                                    cad = cad + ' ('+ kendo.toString(parseFloat(this.get('pagado')-this.get('importe')-this.get('peaje')), '#.##') +' propina)' ;  
                                else cad = cad ;    
                                return cad ;
                                //return ' ('+this.get('importe') + if (this.get('peaje') == 0) '' ; else ' + '+this.get('peaje')+')';
                            },                      
                    }
                },
                serverSorting: true,
                sort: {
                    field: 'fecha',
                    dir: 'desc'
                },
                serverPaging: true,
                pageSize: 50
            },
            /// start data sources
            /// end data sources
            ticketsModel = kendo.observable({
                _dataSourceOptions: dataSourceOptions,
                searchChange: function(e) {
                    var searchVal = e.target.value,
                        searchFilter;

                    if (searchVal) {
                        searchFilter = {
                            field: 'cliente',
                            operator: 'contains',
                            value: searchVal
                        };
                    }
                    fetchFilteredData(ticketsModel.get('paramFilter'), searchFilter);
                },
                fixHierarchicalData: function(data) {
                    var result = {},
                        layout = {};

                    $.extend(true, result, data);

                    (function removeNulls(obj) {
                        var i, name,
                            names = Object.getOwnPropertyNames(obj);

                        for (i = 0; i < names.length; i++) {
                            name = names[i];

                            if (obj[name] === null) {
                                delete obj[name];
                            } else if ($.type(obj[name]) === 'object') {
                                removeNulls(obj[name]);
                            }
                        }
                    })(result);

                    (function fix(source, layout) {
                        var i, j, name, srcObj, ltObj, type,
                            names = Object.getOwnPropertyNames(layout);

                        if ($.type(source) !== 'object') {
                            return;
                        }

                        for (i = 0; i < names.length; i++) {
                            name = names[i];
                            srcObj = source[name];
                            ltObj = layout[name];
                            type = $.type(srcObj);

                            if (type === 'undefined' || type === 'null') {
                                source[name] = ltObj;
                            } else {
                                if (srcObj.length > 0) {
                                    for (j = 0; j < srcObj.length; j++) {
                                        fix(srcObj[j], ltObj[0]);
                                    }
                                } else {
                                    fix(srcObj, ltObj);
                                }
                            }
                        }
                    })(result, layout);

                    return result;
                },
    .... more
    ----------------------------------------------------------------------------

  2. Answer
    Anton Dobrev
    Admin
    Anton Dobrev avatar
    607 posts

    Posted 23 Jan Link to this post

    Hi Ignacio,

    The case here is to alter the fetchFilteredData function because it appears this function is not handling properly the case when the filter is already set in the data source options and is setting the filter to an empty one. It only handles the cases where there is a parameter or user input filter. 

    To do so, you may alter or remove the else clause:
    fetchFilteredData = function(paramFilter, searchFilter) {
        var model = parent.get('ticketsModel'),
            dataSource;
     
        if (model) {
            dataSource = model.get('dataSource');
        } else {
            parent.set('ticketsModel_delayedFetch', paramFilter || null);
            return;
        }
     
        if (paramFilter) {
            model.set('paramFilter', paramFilter);
        } else {
            model.set('paramFilter', undefined);
        }
     
        if (paramFilter && searchFilter) {
            dataSource.filter({
                logic: 'and',
                filters: [paramFilter, searchFilter]
            });
        } else if (paramFilter || searchFilter) {
            dataSource.filter(paramFilter || searchFilter);
        } else {
           // dataSource.filter({}); // TODO: there may be an existing filter in the data source options
        }
    },

    However, in most cases you will not have a hardcoded filter in the app, so you may alter the code additionally as it fits your app requirements. 

    In case you need to apply a more strict filter on the server you can do so in the Business Logic layer. Examples are available in this section

    I hope this helps. 

    Regards,
    Anton Dobrev
    Telerik by Progress
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  3. Ignacio
    Ignacio avatar
    21 posts
    Member since:
    Feb 2013

    Posted 23 Jan in reply to Anton Dobrev Link to this post

    Works fine.

    Many thanks for your quick response.

Back to Top