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 .