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 Answers, 1 is accepted
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
Rank 1
Works fine.
Many thanks for your quick response.