Nous utilisons Angular Kendo et dans l'une des tables (grille) que nous rendons, les en-têtes sont filtrables. L'une des colonnes est liée à un champ booléen, mais nous voulons afficher les chaînes appropriées au lieu de la valeur booléenne brute (c'est-à-dire active vs true). L'affichage de la propriété réelle dans chaque ligne est facile à gérer via des conditions (c'est-à-dire {{boolean-property? "Label 1": "label 2"}} ), mais le libellé est un peu plus délicat . Pour le moment, voici à quoi ressemble le filtre:
Mon objectif est de mettre à jour l'étiquette avec quelque chose de plus approprié, j'ai vérifié la documentation et la chose la plus proche que j'ai pu trouver était la propriété de format dont je ne suis pas sûr de son fonctionnement pour les valeurs booléennes.
Quelqu'un a-t-il des idées sur la façon de définir les libellés du menu des filtres?
4 Réponses :
Je ne suis pas sûr du modèle d'étiquette de modification, mais j'ai trouvé des personnalisation que vous pouvez apporter à votre filtre booléen.
Il utilise essentiellement les composants kendo-switch . 
Merci, mais cela ne fonctionne pas vraiment pour mon cas car j'ai besoin des deux valeurs plus tout ou rien (aucun filtre appliqué). Le commutateur semble sélectionner uniquement l'une ou l'autre des valeurs.
kendo fournit une propriété filtrable avec des messages que nous pouvons utiliser.
filterable:{
messages:{
IsFalse : 'label-1',
IsTrue : 'label-2'
}
}
Utilisez ceci dans les options de la grille de kendo.
Je pense que vous faites référence à Kendo pour jQuery, j'utilise la bibliothèque de composants angulaires qui est différente.
actuellement, j'utilise la version "@ progress / kendo-angular-grid": "^ 3.12.1" et j'ai pu faire ce qui suit pour mettre à jour les étiquettes pour le BooleanFilterMenuComponent
<kendo-grid
#grid
[data]="gridResult"
[pageSize]="gridState.take"
[skip]="gridState.skip"
[sort]="gridState.sort"
[sortable]="true"
[pageable]="true"
[filter]="gridState.filter"
scrollable="scrollable"
[selectable]="true"
filterable="menu"
[loading]="loading"
>
<kendo-grid-messages filterIsFalse="Active" filterIsTrue="Inactive"></kendo-grid-messages>
<!-- Some other column defs -->
<kendo-grid-column title="Status" field="isDeleted">
<ng-template kendoGridCellTemplate let-dataItem>
{{dataItem.isDeleted ? 'Inactive' : 'Active'}}
</ng-template>
<ng-template kendoGridFilterMenuTemplate let-filter let-column="column" let-filterService="filterService">
<kendo-grid-boolean-filter-menu [filter]="filter" [filterService]="filterService" [column]="column"></kendo-grid-boolean-filter-menu>
</ng-template>
</kendo-grid-column>
</kendo-grid>
Voici la documentation du CustomMessagesComponent qui a plusieurs autres options https://www.telerik.com/kendo-angular -ui / components / grid / api / CustomMessagesComponent /
Vous pouvez modifier les libellés du filtre de colonne avec:
<kendo-grid-column field="yourField" filter="boolean" title="Your title">
<kendo-grid-messages
filterIsTrue="Your label 1"
filterIsFalse="Your label 2"
>
</kendo-grid-messages>
</kendo-grid-column>
Dans la mesure du possible, faites un effort pour fournir des explications supplémentaires au lieu de simplement du code. De telles réponses ont tendance à être plus utiles car elles aident les membres de la communauté et en particulier les nouveaux développeurs à mieux comprendre le raisonnement de la solution, et peuvent aider à éviter d'avoir à répondre aux questions de suivi.