Bringing SelectedItem Into Focus Using DataGrid Control

Problem :

              When using datagrid control of the silverlight control there is situation when datagrid control has lots of records and vertical scrolling of the datagrid control is visible and the selected item of the datagrid control is not in the view as the scrolling (vertical scrolling of the datagrid is visible due to large record). So it is important to give focus to the selected item of the datagrid control.In this post I will give you solution of this problem which many of you may have face.

Solution :

               To start with how to solve above problem I have one button control with is used to bring the selected item of the datagrid control in the focus and one datagrid control which is used to show the records. The main form of the test application is shown in the Image 1 here you can see that datagrid display all the records which are assign to it ( as I have small number of records in my grid so i have reduce the height of the datagrid control so that it has vertical scrolling and the selected item is not seen when datagrid control first display). In the Image 1 you can see that selected item is not displayed which I have mention in my problem.

Image 1

The solution to above problem is quite simple but it take time when I first come across this problem. You can see the code used to bring the selected item of the datagrid control in the focus just one line of code which is used. Here I have used ScrollIntoView function of the datagrid control which take The data item (row) to scroll to as its first parameter ( here you can see that I have passed the selected item of the datagrid control) and the second parameter of the ScrollIntoView is the column of the datagrid control(the column to scroll to here I have passed the first column of the datagrid control).

List 1

The output can be seen in the Image 2, when you client the "Selected Item" button then it will focus the selected item of the datagrid control.

Image 2

Note: In the HomeViewModel which is the viewModel for the home page. I have assigned value to the Selectedcustomer before sorting the PagedCollectionView(CustomerList property) so that after sorting the selected item will disappear from the view and it should.If I assigned the first element of the PagedCollectionView (CustomerList) after sorting then first element will be selected..

If you have similar situation then you solved it by using above technique as I have done when I got similar situation.You can download the source code from here.

All and any comments / bugs / suggestions are welcomed!