Filtrage personnalisé avec des listes déroulantes à sélection multiple

Question

J'ai une grille contenant trois contrôles multisélect dans la barre d'outils qui doivent être utilisés pour filtrer la source de données de la grille en fonction des sélections effectuées. À l'heure actuelle, j'ai la fonction ci-dessous, déclenchée au cours d'un événement change dans l'un des contrôles multisélect. Cette fonction accepte values contenant les éléments sélectionnés dans le contrôle multisélect modifié et filterID qui est le nom field à utiliser pendant le filtrage.

function applyClientFilters(values, filterID) { 
var grid = $("#grid").data("kendoGrid"); 
var gridDataSource = grid.dataSource; 
var filter = gridDataSource.filter(); 
// does the selected drop down contain a value 
// if yes, then apply this filter to the necessary drop down 
// otherwise remove the filter 
if (values.length > 0) { 
    // has a filter been setup yet on the datasource? 
    if (filter && filter.filters.length > 0) {    
     // firstly check to see if filter has already been applied and if so remove 
     for (var i = 0; i < filter.filters.length; ++i) { 
      // check to see if filter field already exists i.e. analyte has already been filtered 
      // and check to see if the value at this field already exists as a filtered item 
      if (filter.filters[i].field === filterID && values.indexOf(filter.filters[i].value) > -1) { 
       filter.filters.splice(i, 1); 
      } 
     } 
     // apply new filter(s) 
     for (var i = 0; i < values.length; ++i) { 
      filter.filters.push({ field: filterID, operator: "eq", value: parseInt(values[i]) }); 
     } 
     gridDataSource.query({ 
      filter: filter, 
      pageSize: 10, 
      page: 1, 
      group: [{ 
       field: "InstrumentName", 
       dir: "asc" 
      }, { 
       field: "AnalyteName", 
       dir: "asc" 
      }, { 
       field: "MethodName", 
       dir: "asc" 
      }] 
     }); 
    } 
    else { 
     // apply new filter 
     gridDataSource.filter({ 
      logic: "or", 
      filters: [ 
       { 
        field: filterID, 
        operator: "eq", 
        value: parseInt(values), 
       } 
      ] 
     }); 
    } 

} else { 
    if (filter && filter.filters.length > 0) { 
     // remove existing filter 
     for (var i = 0; i < filter.filters.length; ++i) { 
      if (filter.filters[i].field === filterID) { 
       filter.filters.splice(i, 1); 
      } 
     } 
     gridDataSource.query({ 
      filter: filter, 
      pageSize: 10, 
      page: 1, 
      group: [{ 
       field: "InstrumentName", 
       dir: "asc" 
      }, { 
       field: "AnalyteName", 
       dir: "asc" 
      }, { 
       field: "MethodName", 
       dir: "asc" 
      }] 
     }); 
    } 
} 
} 

En utilisant seulement la logique or lors du filtrage est très bien avec une sélection individuelle de multiselect à-dire la sélection de plusieurs méthodes leur filtrage comme prévu. Cependant, la logique doit être and lorsqu'elle est utilisée dans différents contrôles multisélect.

Exemple

• Sélectionnez 'Analyte A' -> filtres grille source de données à l'affichage uniquement 'Analyte A'
• Sélectionnez 'Méthode A' -> filtres grille source de données pour afficher 'Analyte A' et 'Méthode A'
• Sélectionnez 'Méthode B' -> filtres grille source de données pour afficher 'Analyte A' et 'Méthode A' ou 'Méthode B'

Est-il possible de combiner des opérateurs de logique de filtrage avec un filtrage de source de données Kendo pour réaliser le scénario ci-dessus?

Answer 1

J'ai trouvé une solution qui simplifie considérablement le filtrage. Au lieu d'ajouter/supprimer/mettre à jour les filtres, j'efface le filtre de source de données pendant l'événement change de l'un des composants multisélect, détermine quels filtres doivent être appliqués en fonction du ou des éléments sélectionnés dans chaque multiselect et construit un objet filtre basé sur les sélections, comme suit:

function applyClientFilters() { 
var grid = $("#reportGrid").data("kendoGrid"); 
var gridDataSource = grid.dataSource;  
// clear existing datasource 
gridDataSource.filter([]); 
// extract selected items from each of the three multiselect controls 
var selectedAnalytes = $("#analyte").data("kendoMultiSelect").value(); 
var selectedMethods = $("#method").data("kendoMultiSelect").value(); 
var selectedInstruments = $("#instrument").data("kendoMultiSelect").value(); 
// setup filter object (using and logic) 
var filter = { 
    logic: "and", 
    filters: [] // ready for filter from each of the three multiselect controls 
}; 
// loop over each of the three extracted selected items variables 
// push new filter into array of filters with or logic on each filter 
if (selectedAnalytes.length > 0) { 
    var analyteFilter = { 
     logic: "or", 
     filters: [] // ready for filter for each of the selected analytes 
    }; 

    for (var i = 0; i < selectedAnalytes.length; ++i) { 
     analyteFilter.filters.push({ field: "AnalyteID", operator: "eq", value: parseInt(selectedAnalytes[i]) }) 
    } 
    filter.filters.push(analyteFilter); 
} 
if (selectedMethods.length > 0) { 
    var methodFilter = { 
     logic: "or", 
     filters: [] // ready for filter for each of the selected methods 
    }; 

    for (var i = 0; i < selectedMethods.length; ++i) { 
     methodFilter.filters.push({ field: "MethodID", operator: "eq", value: parseInt(selectedMethods[i]) }) 
    } 
    filter.filters.push(methodFilter); 
} 
if (selectedInstruments.length > 0) { 
    var instrumentFilter = { 
     logic: "or", 
     filters: [] // ready for filter for each of the selected instruments 
    }; 

    for (var i = 0; i < selectedInstruments.length; ++i) { 
     instrumentFilter.filters.push({ field: "InstrumentID", operator: "eq", value: parseInt(selectedInstruments[i]) }) 
    } 
    filter.filters.push(instrumentFilter); 
} 
// apply filter query to datasource 
gridDataSource.query({ 
    filter: filter, 
    pageSize: 10, 
    page: 1, 
    group: [{ 
     field: "InstrumentName", 
     dir: "asc" 
    }, { 
     field: "AnalyteName", 
     dir: "asc" 
    }, { 
     field: "MethodName", 
     dir: "asc" 
    }] 
}); 
}