Saturday, August 4, 2012

Best Way to Use PagedCollectionView With Datagrid Control

Problem :
             I have used Paged Collection view whenever I need to create application which has data grid control to display the item in tabular format. I used to new collection every time I get data and then create new Paged collection view. In this post I will show you how to use one collection and update it. Which I think is best practice to use the Paged collection view with data grid control.

Solution :
                Let us start with the example code, First you can see the Image of the sample example which I have used for this post as you can see in Image 1, here you can see that I have serial number, First name, Last name and the Address fields which user can input and then Save button which is used to add the user input into the data grid.

Image 1
Next is the view model of the view which I have placed in the viewModel folder, here you can see that I have create property which are used in the view model and my view model is not inherited from the INotifyPropertyChanged interface as the PagedCollectionView is inherited from INotifyPropertyChanged interface.
First I have the Customer new record property which is of type Customer ( Customer is my class which is placed in the class folder and has the serial number, first name , last name and the address property and also inherited from the INotifyPropertyChanged interface , and also have function to get the first few record which are displayed in the data grid when you run the application.)Next is the list of customer which will hold the customer list and it is private collection which is used locally by the view model class. After the customer list which is of customer type is the Paged Collection view of the customer records which are actually bind with the data grid control (CustomerRecords is the name of the variable of type PagedCollectionView)

List 1

Next is the constructor of the view model which is used to initialize the data member and the customer list collection. Here you can see first I have initiated the customer list collection and then the pagedCollectionview object and also the sort description the paged collection view object and then at the end added some records in the customer list collection so that you can see some records in the data grid when application loaded.At the end is the function to add the new record which user enter to the customer list ( customer list is of type customer which has the serial number, first name , last name and the Address properties which are bind to the text box control on the view respectively). When ever used enter new record and press save button new record will be added in the data grid control without raising the notification to the view as my view model is not inherited from the INotifyPropertyChanged interface.

By using this technique you can just initialize the Paged collection view object just one and also the added the sort description just once, no need to re-initialize the page collection view object every time you get data from data base or some source like I have mention I was doing in my project just clear the observable collection object and add the record in that collection and the records are displayed on the data grid control as the Paged collection view is inherited from INotifyPropertyChanged interface.You can download the source code of the sample from here.

All and any comments / bugs / suggestions are welcomed!