Welcome back.
Let's look at this data grid in more depth because that's basically the new thing that we haven't seen
in the last video.
Okay.
So I want to explain the data grid in more depth.
We have this data grid, which is basically this whole box here, okay?
This whole thing.
And inside of this data grid, we have columns.
Okay?
So I have data grid columns in there and you can see we have the data grid text column.
Then we have a template column, we have another template column and we have another grid text column.
Okay.
So these are all of the columns that we have inside of it as of right now.
Now, in order to create such a data grid, we can give it a bunch of properties, for example, a height.
We can define that.
We can define a margin because I want to have some space next to it or on the sides of it.
I have a width defined here, a 480 pixels.
You can set a background and just set it should be transparent.
So I don't want to have a specific background.
Can user add rows is set to false because we want to do it programmatically.
Okay.
And you have to give it a name if you want to access it programmatically as well.
And I called it Dgv, which stands for Data Grid View, and I called it currency.
So data grid view currency is the name that I gave it.
And then this property here or this selected cells changed.
That's the interesting part.
Okay, so if you search for selected cells changed in the documentation, you will find that occurs
when the selected cells collection changes.
Okay.
So basically we need to use something called binding here to bind the items source.
So what we are going to do is we're going to programmatically change it.
Okay.
We're not changing it on the UI level, but we're changing it programmatically.
And the UI needs to understand that things are changing.
So if you look at it here, if you click on one of those cells, this event is triggered.
Okay.
And for example, if I'm in this row and now I make changes, then it will change this particular row.
So let me just go for us.
Let's say I clicked on us and now I enter the amount of 86 and decrease the currency name will still
be USD.
You will see that now USD was overridden.
Okay.
Even though I didn't create click on add it here, which would have been the better way, but still
it knows which element was selected.
And that is something that we can achieve by selecting cells changed.
Okay.
And we can then define what we want to execute in code.
So in code behind when this happens.
Okay then selection unit.
So what is selected?
And there are different options that we have here cell or row header, full row or cell.
So I'm just saying, okay, I want the specific cell to be selected, but if you would use full row,
then you could once you click on one cell, select the whole row.
Okay.
So this is what you achieve with selection unit, vertical scrollbar visibility.
And I set that to auto because I don't want it to be visible all the time.
I only want it to be visible if it's necessary.
Okay.
So you can have different options here.
So let's say I use visible here and let's run the application just to see how this will look like.
Go to Currency Master.
You can see this here on the right hand side, the scroll bar is currently available or visible, even
though there is no data to be shown and there is no reason for it to be there.
So you can use hide or hidden, then it will be always hidden.
Or you can use auto and it will define it by itself for it to need to scroll to be able to access all
of the data, then it will automatically add a scroll bar.
Otherwise it will make it hidden.
All right.
And then we have these different columns.
Okay.
So we have this column, that column which have no name as of now, if you look at it, they don't have
a name because these are just the icons that we have here.
Then we have a mount and currency name.
Okay, so now we have this data grid text column and I'm going to use the name to be ID, the header
to be ID, I give it a certain width of 100.
Then I set the visibility to hidden and here I do binding.
So I use binding to bind it to path ID.
So binding is a little more complex.
So this isn't actually a, let's say, more advanced functionality of WPF.
And what we do here is we bind the ID to this grid column itself.
So we say that we want the ID to be assigned to this column, to be bound to the column.
Then we have the data grid template column with.
Basically saying that I want to have.
This image for every single one of those rows in the side of that column.
Okay, so it has a width of 70.
The header is empty.
I don't want to have any text in there.
It's read only set to true, so I cannot edit it.
And I set the display index to zero.
So basically what I do with this is I say that for every single row that you create, that you add to
this grid, I want to have this edit icon to be there.
Okay.
So I fix it.
This is what I do with this data grid template.
So a cell template.
This cell is going to be always this image.
So I'm fixing it.
I do the same thing for the next column where I fix it to be this delete button image.
Okay, so for every single row in this column, we have a delete button.
Okay.
That's what I do with these two data grid template columns.
Now the next ones are not data grid template columns because we're not using a data template there,
but we are actually binding it to a path which is the amount.
And this will make a little more sense once we have the amount and the currency name because we get
those from our code behind and we need to give this whole data grid an item source, which we will do
later on.
It's similar to what we have done before where we had this item source.
Let's go all the way up here for our combo boxes, if you recall.
Okay, so our combo box from currency, for example, had an item source, and this was defined manually
where we said it was a data table and we used the default view of the data currency as the item source.
So as the data source, so to speak, for our combo box.
Now this time we're going to use an actual database to get the data and we're going to use it as a data
source for our data grid.
But then we're going to use specific.
Names, column names, so to speak, for that data grid.
Okay.
So for it to know, okay, in the first row, I need to display amount one and the currency name, for
example, Indian rupees and row two, there was euros and the amount of 100.
Okay, so these are data grid text columns.
Okay.
And the internal name of it is amount and the header.
So what is visible is amount as well.
So this header is what is the actual visible value that you can see here.
Okay.
And then I give it a width of 100 and you can use a resize.
This also set to false, even though well now you can see this actually works.
So I cannot resize it here.
And you can see I can even play around with that and it's always connected, which is very good.
Okay, so.
It gives us a lot of cool functionality.
We don't even have to think about it.
It's done cleanly by itself, but can user reorder is set to false, so we cannot drag the different
rows around so the reorder is set to false.
This binding, as I said, this is the more advanced stuff.
This is what we're going to look at later on and is read only is also set to true because we cannot
change it by, for example, clicking in it and then trying to edit the text that would otherwise be
possible.
But we make it read only set to true because we want to make sure that we're using this clean approach
of clicking, edit and then changing the values because otherwise the whole database would be very fragile
and we could make it or break it very quickly by just clicking and accidentally typing something in
and everything.
So that's why we use this is read only set to true.
Okay, so these are our data grid text columns, the two.
And underneath we have another stack panel, which is basically this image here.