In deze tutorial wordt uitgelegd hoe je met de DataGridView Control werkt in Windows Forms.
Er zitten enkele grote verschillen in het gebruik tussen de GridView (ASP.NET) en de DataGridView
(Windows Applications). Daarom zal ik uitleggen hoe je de Control kan gebruiken om gegevens op
te halen, wijzigen, verwijderen, toevoegen. Let op, deze tutorial is al niet meer zo basic als
de andere tutorials over Forms. Als je hier nog niet echt mee hebt gewerkt raad ik je aan eerst
enkele tutorials hierover te lezen en volgen.
2. Form
Open Visual Basic, Visial C# of Visual Studio en maak een nieuw project. Kies voor een Windows Application.
Geef het een naam die je zelf wilt en klik op "OK". De Form die je ziet is wat klein dus kan je hem wat groter
maken door over de randen te gaan en de grootte te wijzigen.
Het eerste stapje is voltooid. In het volgende stukje maken we eerst onze database aan om onze data in de DataGridView te kunnen plaatsen.
3. Database
Ga naar het menu "Project" en kies hier voor "Add New Item...". Je kan dan kiezen tussen een lokale database (.sdf)
en een server-based database (.mdf). We kiezen voor een server-based database.
Geef deze een naam en klik op "OK". Er verschijnt dan een kader om een DataSet te maken enzovoort.
Dit gaan we nu (nog) niet gebruiken. Kies hier gewoon voor "Cancel". Links op je scherm zie je de Server Explorer.
Hier kan je naar je database kijken. Klik op het plusteken en klik met de rechtermuisknop op "Tables". Kies voor "Add New Table".
Er verschijnt een kader waar je kolommen kan aanmaken. Maak 3 kolommen (id, naam, leeftijd). Sla de tabel op als "leden".
Zorg dat het er ongeveer uitziet zoals op onderstaande afbeelding:
Nu de tabel is aangemaakt kan je er wat testgegevens in plaatsen. In de map "Tables" zit de tabel "leden". Klik hier met
de rechtermuisknop en kies voor "Show Table Data". In het venster dat verschijnt kan je wat gegevens invullen naar wens.
Let wel op dat je alle velden invult! Je kan nu dit venster gewoon sluiten.
4. DataGridView
Sleep via de ToolBox een DataGridView Control op je Form, deze kan je vinden in de categorie "Data".
Er verschijnt al direct een paneeltje met opties. Het enige dat je hier moet doen is klikken op "Dock in parent container"
en de "Name" eigenschap veranderen naar "myGrid" of iets dergelijks dat je gemakkelijk vind.
Nu kan je het programma al laten lopen maar zal je nog niets zien. De DataGridView heeft nog geen DataSource.
In het volgende stuk wordt op twee manieren getoond hoe je de data uit de database in de DataGridView krijgt, maar
enkel met de tweede manier wordt er verder gewerkt.
In dit stuk gaan we de data ophalen met een eigen geschreven SQL-query en dan de opgehaalde data toewijzen aan de DataGridView.
Dubbelklik op je Form, zorg dat je dit niet doet op de DataGridView. Je krijgt nu je codefile te zien. Het Form_Load event wordt
automatisch aangemaakt. Hierin zet je volgende code (commentaar staat in de code):
C#
VB
//query maken string strQuery = "SELECT id, naam, leeftijd FROM leden"; //Sql-verbinding instellen SqlConnection myConn = new SqlConnection("Data Source=.\SQLEXPRESS; AttachDbFilename=C:\database.mdf; Integrated Security=True; User Instance=True"); //een DataAdapter aanmaken en de query en de verbinding hieraan toewijzen SqlDataAdapter myAdapter = new SqlDataAdapter(strQuery, myConn); //een nieuwe DataTable aanmaken DataTable myTable = new DataTable();
//de DataTable vullen met hetgeen de DataAdapter ophaalt myAdapter.Fill(myTable); //de DataTable toewijzen aan de DataGridView myGrid.DataSource = myTable;
'query maken Dim strQuery As String = "SELECT id, naam, leeftijd FROM leden" 'Sql-verbinding instellen Dim myConn As SqlConnection = New SqlConnection("Data Source=.SQLEXPRESS; AttachDbFilename=C:database.mdf; Integrated Security=True; User Instance=True") 'een DataAdapter aanmaken en de query en de verbinding hieraan toewijzen Dim myAdapter As SqlDataAdapter = New SqlDataAdapter(strQuery, myConn) 'een nieuwe DataTable aanmaken Dim myTable As DataTable = New DataTable()
'de DataTable vullen met hetgeen de DataAdapter ophaalt myAdapter.Fill(myTable) 'de DataTable toewijzen aan de DataGridView myGrid.DataSource = myTable
Test nu het programma maar uit. Je zal zien dat er in de DataGridView de gegevens worden getoond die in je database staan.
Ik heb hier niet met Exception Handling gewerkt omdat we er hier zo goed als zeker van zijn dat alles juist verloopt.
Wil je het er toch bijplaatsen verwijs ik je naar de tutorial over Exception Handling.
Zoals je ziet lukt dit perfect. Maar om dan alle mogelijk SQL-statements te kunnen uitvoeren is er dus wel meer code nodig.
We gaan dat hier niet doen omdat dat omslachtiger is tegenover iets dat in .NET heel handig is om te gebruiken: DataSet.
5.2 DataSet
Je mag de code uit het Form_Load weg doen en de DataGridView van de Form verwijderen. als je dit niet doet,
maak je een nieuwe Form aan omdat we hier op een heel andere manier gegevens zullen ophalen uit de database.
Ik heb voor de gemakkelijkheid een nieuwe Form toegevoegd aan m'n project. Het enige dat je dan moet doen is zorgen
dat bij het starten van het programma de juiste Form geopend wordt:
C#
VB
- Open de file "Program.cs" - Verander "Application.Run(new Form1());" in "Application.Run(new Form2());" of de Name die je gekozen hebt.
- Dubbelklik op "My Project" - Kies bij "Startup Form" voor Form2 of de Name die je hebt gekozen.
Kies via het menu "Data" voor "Show Data Sources". Je zal een kader zien dat zegt dat je nog geen DataSources hebt en dat je er een nieuwe kan toevoegen.
Klik op "Add New Data Source...". Je kan kiezen waar je gegevens zullen uitkomen, in ons geval "Database". Vervolgens kan je de verbinding met de database
bepalen. Hier moet je niets veranderen. Er wordt je gevraagd om de ConnectionString op te slaan, dit mag je doen.
Als je dan op "Next" klikt moet je even wachten, de databasegegevens worden opgehaald. Als dit klaar is duid je "Tables" aan
en geef je de DataSet de naam "ledenSet".
Klik op "Finish" en je zal zien dat er in je Solution Explorer "ledenSet.xsd" bijgekomen. Dit is je DataSet die de gegevens ophaalt uit de database.
Nu moeten we dit nog op onze Form krijgen. Bij DataSources zie je nu ook "ledenSet" staan met een subitem "leden". Dit item stelt de tabel voor en
heeft als subitems de kolomnamen. Ga op "leden" staan en sleep dit naar je Form. Je ziet plots vanalles verschijnen op je Form en onderaan in beeld.
Geen paniek dit is allemaal normaal. Je Form zou er nu als zoiets moeten uitzien:
Hetgeen je bovenaan je Form ziet is de BindingNavigator. Hier gaan we zo meteen verder op in. Wat ook op de Form is verschenen is de DataGridView Control.
Dock deze in de "Parent Container" zoals bij Form1. Je kan nu al je programma laten lopen en je zal zien dat de gegevens er in staan.
Je kan al ineens zien waarvoor die BindingNavigator dient. Deze dient om:
- Door je data te gaan met de pijltjes
- Een nieuw item toe te voegen
- Een item te verwijderen
- Alle wijzigen op te slaan
Het gewone wijzigen van gegevens kan je door op een cel te staan en de inhoud te wijzigen.
Let wel op dat als je een belangrijke verandering hebt gedaan, dat je op de "Save"-knop klikt! Test alles maar eens uit.
Als je nu in de code gaat kijken van je Form zie je enkele regeltjes staan. Bij het laden van de Form
vult de TableAdapter de DataSet "leden" met de gegevens. Deze set wordt automatisch toegewezen aan de DataGridView.
Er is ook een event voor als er op de "Save"-knop geklikt wordt. Eerst wordt alles gevalideerd, dan worden alle wijzigingen naar
de DataSource gestopt en daarna update de TableAdapterManger de DataSet "leden".
Nu vraag je je af hoe dit kan zonder code of queries. Deze zitten in de DataSet. Dubbelklik op "ledenSet" in de Solution Explorer.
Hier zie je de tabel "leden" en daaronder de TableAdapter. Klik éénmaal op de TableAdapter en in je Properties - window zie je
alle commando's staan die er worden gebruikt. Hierin staan de queries die worden gebruikt om al de acties te kunnen uitvoeren.
Als je het programma uitvoert zou het er zo moeten uitzien:
6. Eigen kolom
Het is natuurlijk ook mogelijk om zelf kolommen toe te voegen aan de DataGridView. Focus op je DataGridView in je Form
en klik op het kleine pijltje rechtsboven de Control en kies voor "Edit Columns...". Voeg een kolom toe zoals op onderstaande afbeeldingen:
Als dit alles gedaan is en je test je programma zie je dat er een kolom is bijgekomen met in elke rij een knop met de tekst "Verwijder".
Nu moeten we hier nog een event aan koppelen zodat er ook iets gebeurt als we op die knop klikken. Hiervoor moeten we wat code toevoegen:
C#
VB
//Voeg eerst deze regel nog toe in het Form_Load event:
ledenDataGridView.CellClick += new DataGridViewCellEventHandler(ledenDataGridView_CellClick);
//Daarna dit onder het Form_Load event:
void ledenDataGridView_CellClick(object sender, DataGridViewCellEventArgs e) { if (e.ColumnIndex == ledenDataGridView.Columns["myColumn"].Index && e.RowIndex < (ledenDataGridView.RowCount - 1)) MessageBox.Show("U selecteerde het lid met ID: " + ledenDataGridView.Rows[e.RowIndex].Cells[1].Value.ToString(), "Melding", MessageBoxButtons.OK, MessageBoxIcon.Information); }
'In VB moet hetgeen in C# in het Form_Load event kwam, niet!
Private Sub LedenDataGridView_CellClick(ByVal sender As Object, ByVal e As DataGridViewCellEventArgs) Handles LedenDataGridView.CellClick If e.ColumnIndex = LedenDataGridView.Columns("myColumn").Index And e.RowIndex < (LedenDataGridView.RowCount - 1) Then MessageBox.Show("U selecteerde het lid met ID: " & LedenDataGridView.Rows(e.RowIndex).Cells(1).Value.ToString(), "Melding", MessageBoxButtons.OK, MessageBoxIcon.Information) End If End Sub
Als je nu op een knop klikt zal er een kadertje komen met een tekstje en het ID die op dezelfde rij hoort. Dat is natuurlijk maar een zeer
eenvoudige mogelijkheid van wat je hier nog mee kan doen. Hier moet je je fantasie de vrije loop laten!
7. Slot
Zo, ik hoop dat dit een duidelijke tutorial was en dat jullie weer iets interessants hebben bijgeleerd!
De DataGridView is een enorm krachtige en handige Control. Met de vele mogelijkheden die deze Control
te bieden heeft kan je applicaties maken met een grote functionaliteit die ook nog eens overzichtelijk is!
Als er zaken zijn die jullie niet begrijpen, plaats dan maar een reactie of stuur een PM naar me.
Wat is jouw favoriete javascript framework? (S: 18, R: 2)
(4) 
