Nouvelles fonctionnalités de DataGrid de Telerik UI pour Xamarin
Avec la version R2 2020 de Telerik UI pour Xamarin nous avons mis en œuvre trois nouvelles fonctionnalités puissantes pour RadDataGrid qui vous permettent de personnaliser le modèle de contenu et de modifier le modèle de cellules. Ces options sont disponibles pour toutes les colonnes fournies par le contrôle DataGrid.
Nous aimons écouter vos commentaires et les capacités de filtrage de la DataGrid TemplateColumn était l'une des fonctionnalités les plus demandées par vous, nous l'avons donc fait juste à temps pour notre nouvelle version majeure! La fonctionnalité fait désormais partie de l'ensemble de fonctionnalités DataGrid.
Dans cet article de blog, je vais vous familiariser avec les nouvelles fonctionnalités des colonnes DataGrid CellContentTemplate CellEditTemplate et la nouvelle option de filtrage— FilterControlTemplate .
Personnaliser le ContentTemplate des cellules
Cette fonctionnalité permet aux utilisateurs de personnaliser l'apparence du contenu de la cellule en utilisant leur propre DataTemplate et en même temps le RadDataGrid pourra exécuter des opérations comme le regroupement, le tri et filtrage sur cette colonne. Cela est possible car les métadonnées fournies avec le type de colonne sont toujours disponibles pour le composant de grille.
Ci-dessous se trouve le code source utilisé pour le GIF ci-dessus.
Exemple de définition de modèle commercial :
classe publique City
{
chaîne publique Nom {get; ensemble; }
public int Population {get; ensemble; }
public DateTime? Visité {get; ensemble; }
public bool IsVisited {get; ensemble; }
}
Le ViewModel:
public classe
ViewModel
{
public
ViewModel ()
{
]
ceci
.Items =
nouveau
ObservableCollection
{
nouveau
Ville {Nom =
"Londres"
Visité =
nouveau
DateTime (2019,03,15), IsVisited =
true
Population = 8982000},
[19659028] nouveau
Ville {Name =
"New York"
Visité =
null [19659022]IsVisited =
false
Population = 8399000},
nouveau
Ville {Nom =
" Tokyo "
Visited =
new
DateTime (2019,11,12), IsVisited =
true
Population = 9273000},
[19659003]
nouveau
Ville {Name =
"Madrid"
Visité =
null
IsVisited =
false
Population = 6642000},
nouveau
Ville {Name =
"Paris"
Visité =
null [19659022]IsVisited =
false
Population = 2148000},
nouveau
Ville {Nom =
" Berlin "
Visited =
new
DateTime (2017,12,27), IsVisited =
true
Population = 3769000},
};
}
public
ObservableCollection Objets {
obtiennent
];
set
; }
}
Ensuite, nous avons la définition DataGrid XAML avec la propriété CellContentTemplate définie sur TextColumn BooleanColumn et DateColumn . Le CellContentTemplate du DateColum utilise RadDatePicker pour le contrôle Xamarin .
<
telerikDataGrid: RadDataGrid
x: Name
=
"dataGrid"
ItemsSource
=
"{Binding Items}"
AutoGenerateColumns
=
" Faux "
UserEditMode
=
" Cellule "
>
<
telerikDataGrid: RadDataGrid.BindingContext
>
<
local: ViewModel
/>
</
telerikDataGrid: RadDataGrid.BindingContext
>
[19659003] [1 9459023]
<
telerikDataGrid: RadDataGrid.Columns
>
<
telerikDataGrid: DataGrid 19659099] PropertyName
=
"Nom"
Largeur
=
"100"
]
SizeMode
=
"Fixed"
HeaderText [19659022] =
"Ville"
>
<
telerikDataGrid: DataGridColumn.CellContentTemplate
>
<
DataTemplate
>
<
Étiquette
Texte
=
"{Binding Name}"
Options verticales
=
"Centre"
/>
</
DataTemplate
>
</
telerikDataGrid: DataGridColumn.CellContentTemplate
>
[1945917] ]
</
telerikDataGrid: DataGridTextColumn
>
<
telerikDataGrid: DataGridBooleanColumn
PropertyName
=
"IsVisited"
HeaderText
=
"Visité?"
>
<
telerikDataGrid: DataGridColumn.CellContentTell 19659022]>
<
DataTemplate
>
]
<
StackLayout
Orientation
=
"Horizontal"
>
<[[19659023] Label
Text
=
"{Binding Source = {x: Reference switch}, Path = IsToggled}"
[19659215] VerticalOptions
=
"Centre"
/>
<[19659023] Commutateur
IsToggled
=
"{Binding IsVisited}"
x: nom
=
] "interrupteur"
VerticalOptions
=
"Centre"
/>
</
StackLayout
>
</
DataTemplate [19659022]>
</
telerikDataGrid: DataGridColumn.CellContentTemplate
>
1965
</
telerikDataGrid: DataGridBooleanColumn
>
<
telerikDataGrid: DataGridDateColumn
PropertyName
=
"Visited"
HeaderText
=
"Date de visite"
>
<
telerikDataGrid: DataGridColumn.CellContentTemplate
>
[1945917]
<
DataTemplate
>
<
telerikInput: RadDatePicker
Date
=
"{Reliure visitée}"
DisplayStringFormat
=
" aaaa / MMM / jj "
VerticalOptions
=
"Centre"
/>
</
DataTemplate
>>
</
telerikDataGrid: DataGridColumn.CellContentTemplate
>
</
telerikDataGrid: DataGridDateColumn
>
</
telerikDataGrid: RadDataGrid.Col 19659022]>
</
telerikDataGrid: RadDataGrid
>
Personnaliser EditTemplate of Cells
RadDataGrid vous permet désormais de modifier le modèle d'une cellule lorsqu'il passe en mode édition. Cela peut être fait facilement avec la propriété CellEditTemplate qui est partagée entre tous les types de colonnes existants.
Démo: Utilisons le même Business Model et ViewModel que dans l'exemple CellContentTemplate. Voici la définition DataGrid XAML utilisée avec l'ensemble de propriétés CellEditTemplate:
<
telerikDataGrid: RadDataGrid
x: Name
=
"dataGrid"
ItemsSource
=
"{Binding Items}"
AutoGenerateColumns
=
"Faux"
UserEditMode
=
"Cellule"
>
<
telerikDataGrid: RadDataGrid.BindingContext
>
<
local: ViewModel
/>
</
telerikDataGrid: Ra dDataGrid.BindingContext
>
<
telerikDataGrid: RadDataGrid.Columns
>
[1945900]
<
telerikDataGrid: DataGridTextColumn
PropertyName
=
"Nom"
]
HeaderText
=
"Ville"
>
<
telerikDataGrid: DataGridColumn.CellEditTemplate [19659022]>
<
DataTemplate
>
]
<
StackLayout
Orientation
=
"Horizontal"
>
[1 9459024] <
Entrée
Texte
=
"{Binding Item.Name, Mode = TwoWay}"
[1945902424] Margin
=
"5"
ReturnCommand
=
"{Binding CommitEditCommand}" "
/>
<
Bouton
Texte
=
"Annuler"
Commande
Commande
Commande
Commande
"Annuler"
Commande
19659022] =
"{Binding CancelEditCommand}"
/>
</
StackLayout
>>
</
DataTemplate
>
</ [19659023] telerikDataGrid: DataGridColumn.CellEditTemplate
>
</
telerikDataGrid: DataGridTextColumn
> 1945
<
telerikDataGrid: DataGridBooleanColumn
PropertyName
=
"IsVisited" [1945906]
]
HeaderText
=
"Visité?"
>
<
telerikDataGrid: DataGridColumn.CellEditTemplate
>
<
DataTemplate
>
<
StackLayout
Orientation
= [19659030] "Horizontal"
>
<
Commutateur
IsToggled
=
"{Reliure .IsVisited, Mode = TwoWay} "
/>
<
Bouton
Texte
=
"Annuler"
Commande
=
"{Binding CancelEditCommand}"
/>
<
Bouton
Texte
=
"OK"
Commande
=
"{Binding CommitEditCommand}"
/>
</
StackLayout
>
</
DataTemplate
]> [
</
telerikDataGrid: DataGridColumn.CellEditTemplate
>
</
telerikDataGrid: DataGridBool22
</
telerikDataGrid: RadDataGrid.Columns
>
</
telerikDataGrid: RadDataGrid
>
Nouvelle fonctionnalité de filtrage — FilterControlTemplate
Xamarin DataGrid étend les fonctionnalités de TemplateColumn du composant et prend désormais en charge le filtrage. Vous pouvez définir un modèle personnalisé pour l'interface utilisateur de filtrage ainsi qu'une logique de filtrage personnalisée. Et pas seulement pour TemplateColumn, la propriété FilterControlTemplate peut être appliquée à toutes les colonnes DataGrid.
Le code source de la démonstration du modèle FilterControl se trouve dans notre section Navigateur SDK / Exemples / DataGridControl / FilteringCategory .
Dites-nous ce que vous en pensez
Nous aimerions savoir ce que vous en pensez les nouvelles fonctionnalités de DataGrid. Si vous avez des idées de nouvelles fonctionnalités à ajouter, n'hésitez pas à partager ces informations avec nous sur notre interface utilisateur Telerik pour Xamarin Feedback Portal .
N'oubliez pas de consulter les différentes démos de la dans notre SDK Sample Browser et l'interface utilisateur Telerik pour Xamarin Demos .
Exemples d'application Xamarin du monde réel
Découvrez la puissance de l'interface utilisateur Telerik pour Xamarin avec plusieurs exemples d'application Xamarin.Forms du monde réel entièrement fonctionnels .
Des exemples de code source peuvent être vérifiés dans le Telerik Xamarin.Forms Samples GitHub repo .
Bon codage avec nos contrôles et restez avec nous! Nous aimerions partager plus avec vous dans un prochain article de blog sur Sélecteur de date Sélecteur de temps Sélecteur de TimeSpan et Fixations Telerik Mobile Blazor pour Xamarin .
Source link