Remove Datagrid Default Row Selection Using PagedCollectionView

Problem :

             If you have used Datagrid control then you know by default first Row of the Datagrid control is selected and if you have used the RowDetailTemplate then the RowDetailTemplate of the selected row (which is in this case is the first row) is expanded.So here we will remove the default row selection of the data grid control by using the PagedCollectionView.

Solution :

               For this example we will used the PagedCollectionView type as the item source for the data grid control and will remove the remove the first selected row which you can see in the Image 1. And I have used the MVVM pattern for this example mean I have viewModel for the home page with the name HomeViewModel.As you can see in the Image 1 when application first run and the page is loaded and the item source is assigned to the datagrid the first row is selected. Sometime default selection of the first row is fine but sometimes it is not fine as it depends on the client requirement. If client don't wants the first row to be selected then you have to implement some sort of logic so that first row of the data grid will not selected when user open the page for the first time.

Image 1

Solution to the above problem is very simple and you can see the code in the List 1. Here you can see that I have created the PagedCollectionView and assigned it to the property CustomerList which is of type PagedCollectionView. After the assignment of the CustomerList property I have used the MoveCurrentTo function which will sets the specified item to be the CurrentItem in the view.If the specified item is not found, the method returns false and the CurrentItem is positioned before the start of the collection in the view.  As you can see that I have set passed null to the MoveCurrentTo function which will return false and selection will be cleared.

List 1

Result of the List 1 can be seen in the Image 2. Here you can see that now selection of the first row is cleared and RowDetailTemplate of first row is also collapsed.

Image 2

In Image 3 and Image 4 you can see the CurrentItem and CurrentPosition of the CustomerList. Here you can see in the Image 3 that the CurrentItem and CurrentPosition properties are assigned values, mean here you can see CurrentItem has the value of type Customer which is the class I have used to populate the CustomerList of PagedCollectionView type and the CurrentPosition have 0 value mean first row is selected.

Image 3

But after calling the MoveCurrentTo for the null value the values for the CurrentItem is null and CurrentPosition is -1 mean no row is selected now for the PagedCollectionView. The CurrentItem and the CurrentPosition properties are the read only properties mean you can't set value for these properties you can get value of the CurrentItem and CurrentPosition properties.

Image 4

I have used MoveCurrentTo function of the PagedCollectionView, if you have used other function or technique which is better then this then please do let me know about it by sharing your technique or logic here will help not only me but also other who come to this post if they have similar sort of problem or requirement. You can download the source code from here.

All and any comments / bugs / suggestions are welcomed!

ContextMenu using MVVM

In this post we will discuss how to use the ContextMenu using MVVM pattern. You can find the beginner level of article about how to use ContextMenu on the web. But here I will show you how to use it using MVVM pattern. This is also first time that I am using the ContextMenu control of the Silverlight. So if there is any error or if you feel that I have miss something related to the ContextMenu then please let me now about it.

For this example I have used the Text Box control when you right click on the text box it will display the ContextMenu in the Text Box control. As you can see in the Image 1 when user right click inside the Text Box control Context Menu open  with the cut, copy and paste option in it. Here you can also see that I have also place TextBlock control with text "Message will be displayed here" which will show you the menu item click concatenated with the Time.

Image 1

In List 1 you can see the xaml to add the Context Menu in the Text Box control. Here you see that I have used Silverlight toolkit ContextMenuService which will handle the event and positioning of the ContextMenu and I have placed it inside the Text Box control. Here you can see for every menu item I have set the Header like Cut Text, Copy Text and Paste Text which you will see as label as see in the Image 1 and also you can see that I have also use the icon property of the menu item to show the icon for every menu item.

List 1

If you don't want to show icon for any menu item then you can remove the icon property. After setting the header and the Icon property of the menu item next is the binding of the command to the Command property of the view model. Here I have used only one command for all the menu item which is the MenuClickCommand and in the CommandProperty I have passed some text which will identify the sender of the click event as in the code behind we can identify it by converting the send of the event but as in case of command we can't have UI information so I have used the CommandParameter for every menu item so that I can Identify send of the event.

Image 2

When user click any of the menu item text is update to show which menu item is click and when it is clicked (mean the time stamp) which you can see in the Image 2 the message are highlighted. You can perform what action you required when any of the menu item is click. I have simply show text in the main page to show the menu item click you can perform operation like cut , copy paste or even save, update , edit and cancel operation depending on your requirement.You can download the source code from here.

All and any comments / bugs / suggestions are welcomed!