Remplir WinForms RadGridView avec des données en mode non lié

Besoin d’ajouter des données à votre grille sans source mappée ? L’interface utilisateur Telerik pour WinForms vous permet d’utiliser le mode non lié dans de tels cas, afin que vous puissiez ajouter des lignes par programmation. Apprendre!

Il existe différents scénarios dans lesquels les développeurs ne souhaitent pas mapper directement une collection source au contrôle de grille. Dans de tels cas, il convient d’utiliser
mode non lié
pour remplir RadGridView avec des données.

Lorsque vous utilisez le mode non lié, RadGridView en cours Interface utilisateur Telerik pour WinForms prend en charge l’ajout de lignes par programmation en fonction des colonnes définies. Ainsi, il est possible de spécifier une valeur pour chaque cellule et de stocker le type de données approprié.

Selon le type de données qui sera stocké, RadGridView propose différents colonnes de données.

Ajout de colonnes au moment du design

Après avoir sélectionné le contrôle RadGridView dans le concepteur, cliquez sur la petite flèche dans le coin supérieur droit pour ouvrir la balise active :

Le bouton Parcourir les colonnes ouvre l’éditeur de collection GridViewDataColumn

Il vous permet d’ajouter les types de colonnes requis par le scénario spécifique. Une fois que vous avez terminé d’ajouter les colonnes, cliquez sur le bouton OK et la grille sera remplie avec les colonnes de l’éditeur de collection :

Ajout de colonnes au moment de l’exécution

Nous commencerons par définir des colonnes pour gérer les valeurs DateTime, décimales, chaînes et images. A cet effet, nous utiliserons un
GridViewDateTimeColumnGridViewDateTimeColumn, GridViewDecimalColumn, GridViewTextBoxColumn,
GridViewImageColumn et
GridViewBrowseColumn. Ensuite, plusieurs lignes seront ajoutées et remplies avec les données appropriées.

La colonne de navigation sera utilisée pour télécharger une image dans la colonne correspondante. Toute la logique est effectuée dans le
CellValueChanged événement lorsqu’un chemin de fichier valide est sélectionné dans la cellule de navigation :

public UnboundForm()
        {
            InitializeComponent();

            this.radGridView1.TableElement.RowHeight = 40;
            this.radGridView1.AutoSizeRows = true;

            GridViewDateTimeColumn dateColumn = new GridViewDateTimeColumn("OrderDate");
            dateColumn.FormatString = "{0:dd/MM/yyyy}"; //format the cell's text
            dateColumn.Format = DateTimePickerFormat.Custom;
            dateColumn.CustomFormat = "dd/MM/yyyy"; //format the cell's editor
            dateColumn.Width = 200;
            this.radGridView1.Columns.Add(dateColumn);

            GridViewDecimalColumn priceColumn = new GridViewDecimalColumn("Price"); 
            priceColumn.HeaderText = "Unit Price"; 
            priceColumn.DecimalPlaces = 2;
            priceColumn.FormatString = "{0:C}";
            priceColumn.FormatInfo = new System.Globalization.CultureInfo("en-GB");
            priceColumn.Width = 100;
            radGridView1.MasterTemplate.Columns.Add(priceColumn);

            GridViewTextBoxColumn textBoxColumn = new GridViewTextBoxColumn("ProductName"); 
            textBoxColumn.MaxLength = 50;
            textBoxColumn.Width = 150;
            textBoxColumn.TextAlignment = ContentAlignment.MiddleCenter;
            radGridView1.MasterTemplate.Columns.Add(textBoxColumn);

            GridViewImageColumn imageColumn = new GridViewImageColumn("Photo");
            imageColumn.Width = 100;
            imageColumn.ImageLayout = ImageLayout.Zoom;
            radGridView1.MasterTemplate.Columns.Add(imageColumn);

            GridViewBrowseColumn browseColumn = new GridViewBrowseColumn("Upload photo");
            browseColumn.Width = 300;
            this.radGridView1.Columns.Add(browseColumn);

            this.radGridView1.CellValueChanged += RadGridView1_CellValueChanged;
            this.radGridView1.ValueChanged += RadGridView1_ValueChanged;

            this.radGridView1.Rows.Add(new DateTime(2023, 3,20),20.49, "Banana");

            this.radGridView1.TableElement.RowHeight = 50;

             
        }

        private void RadGridView1_ValueChanged(object sender, EventArgs e)
        {
            GridBrowseEditor browseEditor = sender as GridBrowseEditor;
            if (browseEditor!=null && browseEditor.Value!=null)
            {
                this.radGridView1.EndEdit(); 
                //commit the value directly after selecting a new image file
            }
        }

        private void RadGridView1_CellValueChanged(object sender, GridViewCellEventArgs e)
        {
            if (e.Column.Name == "Upload photo" && e.Value != null)
            {
                e.Row.Cells["Photo"].Value = Image.FromFile(e.Value.ToString());
            }
        }

Ajout de lignes au moment de l’exécution

L’exemple ci-dessus ajoute une seule ligne à la grille. Si nous augmentons le nombre de lignes ajoutées, par exemple 100, nous nous attendons à remarquer un certain retard lors de l’exécution de l’opération d’ajout. L’ajout de chaque ligne déclenche une opération de rafraîchissement des éléments visuels. Par conséquent, plus de lignes sont ajoutées, plus d’opérations de rafraîchissement sont effectuées.

Important: La structure BeginUpdate et EndUpdate suspend toutes les mises à jour visuelles et vous permet d’améliorer les performances lorsque vous ajoutez de nombreuses lignes à la collection RadGridView.Rows :

private void radButton1_Click(object sender, EventArgs e)
        {
            AddRows(this.radCheckBox1.Checked); 
        }

        private void AddRows(bool isSuspended)
        {
            Stopwatch sw = new Stopwatch();
            sw.Start();
            int n = 100;
            if (isSuspended)
            {
                this.radGridView1.BeginUpdate();
            }
            int startIndex = this.radGridView1.Rows.Count;
            for (int i = startIndex; i < startIndex+ n; i++)
            {
                this.radGridView1.Rows.Add(DateTime.Now.AddHours(i), i * 0.25, i + ". " 
 
+ Guid.NewGuid()); ; 
            }
            if (isSuspended)
            {
                this.radGridView1.EndUpdate();
            }

            sw.Stop();
            RadMessageBox.Show(this.radGridView1,"Adding " + n + " rows took " 
+ sw.ElapsedMilliseconds.ToString() + " milliseconds");
        }

L’animation suivante illustre mieux la différence :

Inscrivez-vous pour un essai

N’hésitez pas à vous inscrire à notre essai gratuit de 30 jours, qui vous donne accès aux composants ainsi qu’à notre support technique exceptionnel sans frais. Dirigez-vous simplement vers le Interface utilisateur Telerik pour WinForms page de présentation ou cliquez sur le bouton ci-dessous pour vous inscrire à un essai dès aujourd’hui !

Essayez l’interface utilisateur pour WinForms

Temps pour les commentaires

Oh, et encore une chose. Nous serions plus qu’heureux d’entendre vos réflexions et suggestions une fois que vous aurez essayé le thème et les autres goodies de la version, alors s’il vous plaît envoyez-nous une ligne dans la section commentaires ci-dessous ou en visitant l’interface utilisateur Telerik pour WinForms Portail de commentaires.

Vous voulez voir comment remplir via le mode lié ? Lire Comment remplir WinForms RadGridView avec des données en mode lié suivant.