L’Outil Surpuissant pour Exploser ton Chiffre d'Affaires en 2025 !
Comment appliquer un filtre sur GridDateTimeColumn à l'aide de RadComboBox
Vous êtes-vous déjà demandé comment remplacer le composant de filtre intégré de la GridDateTimeColumn par un contrôle personnalisé de votre choix ?
Aussi rare que cela puisse paraître, il peut y avoir des cas où vous voudriez faites-le.
Voici un exemple qui utilise une RadComboBox pour filtrer sur une GridDateTimeColumn affichant uniquement les enregistrements postérieurs ou égaux à la date d'aujourd'hui.
Si vous souhaitez voir la mise en œuvre complète de ce scénario, consultez l'article Base de connaissances : appliquer un filtre sur une GridDateTimeColumn en utilisant RadComboBox.
Ou vous pouvez continuez à lire le blog pour en savoir plus.
Vous avez probablement essayé d'ajouter un combo au modèle de filtre de GridDateTimeColumn et cela n'a pas fonctionné. Ne t'inquiètes pas! Dans ce blog, je vais vous donner un bref résumé de ce qui se passe et comment vous pouvez le surmonter.
RadComboBox à la rescousse !
Comme vous le savez peut-être déjà, RadGrid offre la possibilité de remplacez les composants intégrés par des contrôles personnalisés en exposant l'élément « FilterTemplate » pour ses colonnes. Vous pouvez trouver des instructions dans l'article de documentation sur le Modèle de filtre.
Cependant, le modèle de filtre a été conçu principalement pour les GridBoundColumn et GridTemplateColumn. Ces colonnes ne restituent pas un composant de filtre dédié basé sur le type de données de la colonne.
D'autre part, les colonnes spécifiques au type de données telles que GridDateTimeColumn ou GridNumericColumn restituent un composant de filtre dédié compatible avec les données données. Par exemple, GridDateTimeColumn restitue un composant RadDatePicker pour gérer les valeurs DateTime, tandis que GridNumericColumn restitue un RadNumericTextBox pour gérer les valeurs numériques.
Disons simplement que vous vouliez utiliser GridDateTimeColumn avec une RadComboBox dans son modèle de filtre. Vous devrez toujours utiliser un contrôle spécifique au type de données (voir FilterTemplate for Data Specific Columns). Mais ce n'est pas un problème – vous pouvez ajouter un DatePicker caché qui sera trouvé par la logique de la grille, et il ne sera pas visible pour les utilisateurs.
Par exemple, ajoutez l'élément FilterTemplate à la GridDateTimeColumn. Après cela, ajoutez un RadDatePicker et une RadComboBox. Vous pouvez masquer le RadDatePicker en définissant sa propriété Visible sur « False ».
<telerik:GridDateTimeColumn DataField="OrderDate" DataType= "System.DateTime"
DataFormatString="{0:MM/dd/yyyy}" EnableTimeIndependentFiltering[19659018]="true"
FilterControlAltText="Filtrer la colonne OrderDate" HeaderText ="Date de commande (mm/jj/aaaa)"
SortExpression=" OrderDate" UniqueName="OrderDate" FilterControlWidth="160px">
<Modèle de filtre[19659018]>
<telerik:RadDatePicker ID ="RadDatePicker1" runat="serveur" Visible="faux">[19659002] </telerik:RadDatePicker>
<telerik:RadComboBox ID="RadComboBox1" runat="server">
<Articles>
<telerik:RadComboBoxItem Texte ="Voir tout" />
<telerik:RadComboBoxItem Text="Terme actuel" />
</Articles>
</telerik:RadComboBox >
</FilterTemplate>
</telerik:GridDateTimeColumn>
La colonne aura désormais un ComboBox comme composant de filtre.
Ensuite, vous peut attacher l'événement côté client OnClientSelectedIndexChanged à la RadComboBox et désactiver AutoPostBack pour empêcher ce contrôle d'effectuer des PostBacks.
<telerik:RadComboBox ID= "RadComboBox1" exécuter at="server" OnClientSelectedIndexChanged="OnClientSelectedIndexChanged"AutoPostBack="false"> <Articles>
<[19659016]telerik:RadComboBoxItem Text="Voir tout" />
<[19659016]telerik:RadComboBoxItem Text="Terme actuel" />
< /Items>
</telerik:RadComboBox>
Dans le gestionnaire d'événements OnClientSelectedIndexChanged, vous aurez le code JavaScript qui appellera le filter() côté client f une fonction de la grille similaire à celle illustrée dans l'article de documentation Filter Template. Cela obligera la grille à déclencher la commande de filtrage.
function OnClientSelectedIndexChanged(sender, args) {
]// Obtenir une référence à l'objet TableView de la grille
var tableView = $find('<%# ((GridItem)Container).OwnerTableView.ClientID %> ');
// Obtenir la valeur sélectionnée du Combo
var selectedValue = args.get_item( ).get_value();
// Condition pour vérifier si la valeur existe
if (!selectedValue) {
// Si faux, appliquez le "NoFilter" avec des valeurs vides
tableView.filt euh('Date de commande'"""Pas de filtre");
} else {
// Si vrai, appliquez une fonction de filtre avec le Valeur sélectionnée
tableView.filter('OrderDate'selectedValue, "GreaterThanOrEqualTo"[19659018]);
}
}
Bien qu'il y ait Les éléments de la ComboBox, ceux-ci n'ont pas de valeurs. Cet exemple utilise le backend pour attribuer des valeurs de manière dynamique. De cette façon, vous pouvez attribuer automatiquement n'importe quelle date du passé, du présent ou du futur.
Pour ce faire, vous pouvez utiliser l'événement DataBinding de la RadComboBox.
<telerik:RadComboBox ID[19659018]="RadComboBox1" runat="server" AutoPostBack="false" OnDataBinding=_RadBindComboing "
OnClientSelectedIndexChanged="OnClientSelectedIndexChanged">[1965909 <Articles>
<[19659016]telerik:RadComboBoxItem Text="Voir tout" />
<[19659016]telerik:RadComboBoxItem[19659017]Texte="Terme actuel" />
</Articles[19659018]>
</telerik:RadComboBox>
Lorsque l'événement se déclenche, vous pouvez attribuer la date « Aujourd'hui » de manière dynamique comme ceci :
protected void RadComboBox1_DataBinding(object sender, EventArgs e)
{
var combo = (expéditeur as RadComboBox);
/ / Trouvez le ComboBoxItem par le texte "Current Term" et définissez sa valeur sur la date d'aujourd'hui
combo.FindItemByText("Current Terme").Valeur = DateTime.Now.Date.ToShortDateString();
}
À ce stade, le filtrage fonctionnera, cependant, l'élément sélectionné dans le Combo ne le reflétera pas. Pour conserver l'élément sélectionné après le filtrage, vous devrez lier la propriété SelectedValue à la valeur provenant de la valeur de filtre de la colonne.
<telerik:RadComboBox ID="RadComboBox1 " runat="server" AutoPostBack="false" EmptyMessage="Sélectionnez une date"[19659002] OnDataBinding="RadComboBox1_DataBinding"
OnClientSelectedIndexChanged="OnClientSelectedIndexChanged"
SelectedValue='<%# ((GridItem)Container).OwnerTableView.GetColumn("OrderDate").CurrentFilterValue %>'>
<Articles>
<telerik:RadComboBoxItem Text="Voir tout" />
<telerik:RadComboBoxItem Text="Terme actuel" />
</Articles>
</telerik:RadComboBox>
C'est tout !
Le GridDateTimeColumn a maintenant un composant RadComboBox comme filtre et vous pouvez utiliser les valeurs sélectionnées du combo pour filtrer dessus.
Code complet
<telerik:GridDateTimeColumn DataField="OrderDate" DataType="System.DateTime"
DataFormatString[19659018]="{0:MM/dd/yyyy}" EnableTimeIndepende ntFiltering="true"
FilterControlAltText="Filtrer la colonne OrderDate"[19659017]HeaderText="Date de commande (mm/jj/aaaa)"
SortExpression=[19659019]"OrderDate" UniqueName="OrderDate" FilterControlWidth="160px">
<FilterTemplate> ]
<telerik:RadDatePicker ID="RadDatePicker1" runat ="serveur" Visible="faux">
< /telerik:RadDatePicker>
<telerik:RadComboBox I D="RadComboBox1" runat="serveur" AutoPostBack="faux"
EmptyMessage="Sélectionnez une date"
OnDataBinding="RadComboBox1_DataBinding"
OnClientSelectedIndexChanged[196527hanged=[196590Selected19]"OnClient459037
SelectedValue='<%# ((GridItem)Container).OwnerTableView.GetColumn("OrderDate").CurrentFilterValue %>'>
<Articles>
<telerik:RadComboBoxItem Texte= "Vie w Tous" />
<telerik:RadComboBoxItem Texte= "Terme actuel" />
</Articles>[19659002] </telerik:RadComboBox>
<telerik:RadScriptBlock ID= "RadScriptBlock1" runat="serveur">
<script >
fonction OnClientSelectedIndexChanged(sender, args) {[19659002] // Obtenir une référence à l'objet TableView de la grille
var tableView = $find( '<%# ((GridItem)Container).OwnerTableView.ClientID %>');
// Obtenir la valeur sélectionnée du Combo
var selectedValue = args.get_item().get_value();
// Condition pour vérifier si la valeur existe
if (!selectedValue) {
// Si false, appliquez le "NoFilter" avec des valeurs vides
tableView.filter("OrderDate" , """Pas de filtre");
} else {
// Si vrai, applique une fonction de filtre avec la valeur sélectionnée
tableView.filter("OrderDate"selectedValue, "GreaterThanOrEqualTo");
}
}
</script>
< /telerik:RadScrip tBlock>
</FilterTemplate>
</telerik:GridDateTimeColumn>
Code-Behind Code
C#
protected void RadComboBox1_DataBinding(object sender, EventArgs e)
{
var combo = (expéditeur as RadComboBox);
/ / Trouvez le ComboBoxItem par le texte "Current Term" et définissez sa valeur sur la date d'aujourd'hui
combo.FindItemByText("Current Term").Value = DateTime.Now.Date.ToShortDateString();
}
VB
Protégé Sub RadComboBox1_DataBinding(ByVal sender As ObjectByVal e As EventArgs)
[19653290] Dim combo = (EssayerC ast(expéditeur, RadComboBox))
combo.FindItemByText("Terme actuel").Valeur = DateHeure .Now.Date.ToShortDateString()
End Sub
L'extrait de code suivant est chargé d'appliquer une couleur d'arrière-plan différente au cellules. (FACULTATIF.)
C#
protected void RadGrid1_ItemDataBound(object sender, GridItemEventArgs e)
{[196590019245][1990329031] ] var dataItem = (e.Item as GridDataItem);
// Si c'est un GridDataItem
if (dataItem != null)
{
// Accéder à la cellule
var dateCell = dataItem["OrderDate"];
if (DateTime.ParseExact(dateCell.Text, "MM/dd/yyyy"CultureInfo.GetCultureInfo("en-US")) < DateTime.Now.Date)
{
dateCell.BackColor = System.Drawing.Color. Jaune ;
}
autre
{
dateCell.BackColor = System.Drawing.Color.LimeGreen;
}
}
}
VB
Protected Sub RadGrid1_ItemDataBound(ByVal expéditeur As ObjetPar Val e As GridItemEventArgs)
Dim dataItem = (TryCast(e.Item, GridDataItem) )
Si dataItem n'est pas Rien Then
Dim dateCell = dataItem( "OrderDate")
If DateTime.ParseExact(dateCell.Text, "MM/dd/yyyy"CultureInfo.GetCultureInfo("en-US ")) < DateTime.Now.Date Then
dateCell.BackColor = System.Drawing .Couleur.Jaune
Autre
dateCell.BackColor = System.Drawing.Color.LimeGreen[19659002] Fin Si
Fin Si
Fin Sub
Articles connexes
Source link