Wednesday, April 27, 2011

DataPager Using MVVM in Silverlight 4

In this short post I will show you how to use the DataPager control using MVVM pattern in silverlight. I have develop navigation application for this example which you can see as shown in the Image 1. Here you can see that I have two control in the home screen one is the DataGrid and the second one is the DataPager control.

Image 1
In ViewModel I have only property with the name CustomerList of type PagedCollectionView. I have data store in the xml file with the name of customer which is store in the DataBase folder. I have read the xml file in the constructor of the ViewModel and then populate each record in the List.

List 1
In the List 1 you can see that I have created collection of customer list and then populate the customer list with the records which are read from the xml file. After reading the xml file and populating the customer list at the end of the constructor I have created the new PagedCollectionView and pass the local customer list and assigned to the Customer List property as you can see in the List 1.

Image 2
In the View of the home page what I have done is to bind the ItemSource of the DataGrid property to the CustomerList property and then I have used the ItemSource property to be bind with the Source property of the DataPager which you can see in the Image 2. You can also bind the CustomerList property of the ViewModel with the Source property of the DataPage it will work as it is working with the ItemSource property of the DataGrid. You can download the source code from here 

All and any comments / bugs / suggestions are welcomed!


Anonymous said...

thanks buddy.
its working for me

Asim Sajjad said...

@Anonymous: happy to read that it helps you.

Anonymous said...

Very, very useful, thanks a lot! ;)

Ravi said...

Hi Asim,

Thanks for posting valuable demo application. i have a master child grids (rowdetails) and using pager for paging. but when i move to next pagem detail grid is expended automatically. which is actually silverlight datagrid first row selected by default. i have used the same thing which u explained in your previous post. now i want datagrid paging without child grid expended. Can you help me out to how to deal with it?

Thanks a lot