WPF DataGrid Demo

hey guys so in this lecture we will understand what is data grid through a demo so in this lecture I will not be going through slides we will be directly jumping on to over demo and see how data grid works now if you are working with any WPF application is very important for you to display data on to the screen right and for that purpose there is data grid so data grid is just like all traditional data grids that is available in the asp.net WinForms etcetera so please do not get confused between a grid and a data grid a grid is something which is a panel which holds your elements of WPF screen and data grid is the control which is responsible for displaying data on to the UI so let's quickly go to our demo and start learning what is a data grid so here I have a very simple application which is called as WPF data grid now what we will try to do is we will make a class and we will have a few properties in it then we will make a collection of that class and then we will try to display all those contents of that class or all the objects what we have created in those last on to our data grid okay so let's begin let's add a class in here so let's go to add let's add a class and let's rename it to student class ok so I have my class student ready now I will just give it a public modifier so now I have some protect properties with me in order to save time so let me paste those properties in here so I will go through it first property is integer then a data type and it's called as ID so it will represent a student ID then its name second property third property is a that it is a whether the student is a soccer player or not so it will specify that our students plays football or not okay and fourth property is gender property now White's giving a error because I will be creating an enum of male and female which is which will be called as gender so let me make a enum out of the class so I will have public enum gender then I will have male and a female okay so here is my inner which is declared and now you can see that my gender property is identified which in M it's referring to okay now this is our model class which is ready okay now we need to get a collection of these students okay so I will have to define a method which which will retrieve all the students which I will define in my code in a observer collection okay so for guys who are new to observer collection please go and watch my previous lecture which in which I have explained what is the difference between a list and observer collection also you can also watch my mvvm lectures too so I have again a pre typed code with me so let me paste that code in here so first I need to import in namespace for this observer collection so here it goes I guess it's their system dot collections dot object model and now I have my method also ready so let me explain you what this method does it retrieves the student lists okay and the written type of this method is a observable collection of student type okay then I what I do is I store this stood observer collection which is written by this method in a student collection okay in that student collection then I initialize new students okay so you can see the ID is one name is John its soccer player is a boolean type of property so it says true so John is a soccer player and gender is male similarly I have a few more students defined so it's Johnny Tim lucky and Lucy fine and then all it does it's return the student correction okay so this is my method which will be responsible for populating the datagrid okay so now let's define our UI or let's define our data grid okay so let us go to the main window dot SML and let's have a data grid so let us have a data grid let us have give it a name and what should we call it my data grid okay let us close this find our data grid is defined it will by default take the height and width of our window okay now let's do one more thing let's go to the main window dot Cemil or the code-behind and let me then have my data grid dot data context sorry I will set the data context okay so I will say my data grid dot item source equals and from where we were we are getting the data is from the student class so let me have student dot get students method okay now how I am calling this get student method directly from the student class that is because my get student methods method is a static method okay so I am NOT creating any object of the student class okay so here I am setting the data context of this data grid okay so I am setting the item source of this data grid as get students now let's try to run this application and see if our data grids works or not now it's working and there are some very nice points to note about data grid okay so you can see if I expand this that what we do not need to define the column names of a data grid okay so whatever be the name of the properties that is defined in our model class that would be automatically picked up by data grid as the column name so I had a property called as ID name is soccer player and gender okay so this these are the column names of our data grid now these these values are text boxes okay so I can edit those right now remember if you need to propagate the two-way data-binding so you need to implement inotify property change interface onto your class I am NOT doing so that's just to make this video as simple as it gets okay so if you are not aware of what is the inotify property change interface please watch my previous lecture of I notified property change interface okay so so these all fields are text boxes by default and you can edit those fields okay so same goes here okay now if you remember we had a property of its soccer player let's look into that property and you can see what is the return type of this property it's a boolean okay so all the boolean properties become automatically becomes checkboxes in data grid okay so if you need to display certain checkboxes on to your data grid how will you will do it you will just make a property because written type is boolean and this is also a very good interview question that if you need to display checkboxes on your data grid data grid how you will do it okay and now let's see the gender property okay so what was our gender property it was a enumeration okay or enum so I have defined my enum in here so gender could be male or female okay so the moment you will define any property which is a enumeration type that columns will be by default combo boxes okay so you can select either male or female so this is also a very good question that how will you incorporate combo boxes on your data grid the answer is just make your property as a enumeration the column will be declared as a combo box by default okay let's close this application let me make another option in here say unknown okay okay now let us try to run this and it should have the combo box with three items male/female and unknown okay so it's very simple so you can see the power of data grid it's it's awesome so and it becomes very easy now there there are certain scenarios where you do not want these properties to be automatically picked as column names okay so here is where data grid becomes tricky fine so let me show you that how we can have our custom defined columns in our data grid so let's go to our main window dot salmon and there is a property called s auto-generate columns so let me make this property has false now let us try to run this now a data grid won't pick any column from our properties you can see there is some ugly-looking data grid in our system let me close this and now let us try to make some custom columns for our application so let me remove this closing tag and let me have another data grid sorry so I will have data grid dot columns so I will have data grid or columns to define my data grid and now we can define our custom columns in here so data grid so you can see there are few options for me to select its data grid checkbox column data grid combo box column data grid hyperlink column which will contain all the hyperlinks and data grid template column so and so on so I will just select data grid text column because my ID and name both are text fields so I will just have these so I will say that I should remove this and remove this also and let me close this in here okay let me define a header so this will be responsible of header of my column so I will just say student ID and let me specify data source so I will say is binding binding is binding equals ID and let me close data grid also here now similarly we can have two or three more columns in here so let me paste these columns end here okay so next column is data grid text column and the header is name of students and I am binding name property just similar as I was doing with ID column okay now I have data grid checkbox column and the header of this is the student play soccer okay so I have misspelled it the student play soccer is the header and I am binding is soccer player okay let's try to run this application now and you can see now we have our custom names in our data grid okay now let's have our fourth column so the reason I didn't include the the fourth column here was because it's a bit tricky to bind enum properties on to our data grid and the reason why it is a bit tricky I will explain in you in a bit so let me have the enum column first included so what was it it was data grid combo box column okay so I will say header is let me call it test gender itself and let me have finding markup just like as we are doing here so combo box does not have a binding tag with it it says selected item binding okay so now let me have binding let us bind the gender property okay now let us try to run this application and you can see you will see in fact that your gender column is empty so can you guess why it's empty so the reason why it's empty because we are binding here objects okay or reference types right so these all properties are part of my student class but what about this gender this is also part of my student class right but you can add as you can see in the code behind this gender property is defined outside the class and a innum is not a reference type it's a value type so this is a very important point for you to remember you cannot bind enum types or value types directly as you bind objects in WPF for that for you to be able to bind these value types you need to specify a object data provider now I am NOT going to explain you what is the object data provider because it is a separate topic and it is a very important interview topic okay for the sake of this demo I will just directly write a object data provider and then bind it my bind my enum to the screen write the reason why I am doing this is because I don't want all the students to miss the topic of object data provider in this long video okay so just remember why I am using object data provider to bind this enum property is because enum is a value type it is not an object it's not a object of student class okay right so let me have my object data provider defined so the you define object data provider as a window resource so you have window dot resources close these resources okay so your window resources are ready and you define object data provider and let us give it as a key so remember my lectures on static the social dynamic resources you need to define a key right so I will say my provider and then with object data provider you need to define a method okay so let's say method which is defined in zamel so you can name a method any method name okay I am just giving it as I get values and then I need to specify that where you need to have you need to provide object for which class okay so I will have object type and then you will specify the class for which you need to provide the object so for our case what we need to do we need to provide object for enum class right for that we need to make a separate namespace yes let me call as NS so and then and you need to specify the name space which contains the enum class so system dot micro lip is the class which is responsible for enum class okay so I will just import that namespace and then I will have X I will say X dot type is enum okay so I will be providing object for this in am class right or enum is a keyword so I will have capital e in here okay so we have enum class so why I am getting this error is because I am NOT referenced the namespace what I have created and then let me open this again let me have since we have defined a method we have to specify the method here okay so it's method name or rather we should make it a method parameters since we have supplying a method here okay so what this method will do it will provide the object for this enum class we will just say X type name or type of a stipe name is Chandra okay so this might be a bit confusing for you or complex to you because you are not accustomed to these object data providers for the people who are under snow understands what is the object data provider this is quite simple thing okay so don't worry about this I will just cover this topic once I am done with these lectures so I have closed the object it of a terrain Here I am again making the mistake here so I need to define the local name space my gender class is present in this local namespace okay because the name of application of my application is WPF datagrid okay now let's go in here to my data grid combo box column and then I need to associate this object data provider here so I will say the item source of this combo box column is binding okay then I will specify a source of this binding then I will again specify a static resource and what is the name of my object data provider key is my provider so if the reason if you are not understanding this is because you have not watched my static source demo so please please go and was it ok now I guess it's very clear I have provided a object data provider for my enum class just because enum class was not object it was a value type it was defined outside my class okay now in order to for you to bind any value types or any values which are not objects you need to provide object data provider so this thing I have done it in here okay now let's try to run this so let us run and you can see over output is on a window okay so remember that data grid is a very powerful control of WPF or if you are working with data applications you need to use data grid so I have made this video just to help you out also it's a very important point to note you down for you to note it down that if you need to display check boxes or combo box box how you can do in data grid for check boxes you need to use boolean properties for combo box you need to use enums okay now anything which is not object you need to provide object data provider so I will be covering this topic object data provider in one of my upcoming videos till then if you have not understood it just go through this video try to make it and you you will understand what what I was trying to say okay so thank you so much guys for listening to this lecture if you have any doubt please leave a comment below and please go subscribe to my channel also please do like my Facebook page for all the latest updates thank you so much

Channel: DotNetSkoool

Views: 25,749

Keywords: C# Training, DotNetSkoool, WPF Training, DataGrid in WPF, WPF

Id: UbnV2_O-ODc

Length: 20min 46sec (1246 seconds)

Published: Fri Jan 27 2017