Fermer

juin 18, 2020

Nouvelles fonctionnalités de DataGrid de Telerik UI pour Xamarin6 minutes de lecture

XamarinT2 Light_1200x303



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.

 Colonne de datagrid de contenu cellulaire


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.

 Cellulaire de modèle de modification de cellule pour xamarin

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.

 contrôle de filtre de 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

0 Partages