Silverlight 4.0: Navigating Data Using DomainDataSource

This article gives you a great introduction to navigating through the objects available in the “DomainDataSource” control using Silverlight (with WCF RIA Services).

Contributed by Jagadish Chaterjee
Rating:

/ 3
September 01, 2010

Rate this Article:
MEH MEH++

SEARCH ASP FREE

The entire source code for this article is available in the form of a free downloadable zip file. The solution was developed using Microsoft Visual Studio 2010 Ultimate Edition with Microsoft Silverlight 4.0 on Windows 7 Ultimate edition. I didn’t really test it in any other environment. I request that you post in the discussion area if you have any problems with execution.

Navigating through data using DomainDataSource: design

In my previous articles, I explained the importance of DomainDataSource and how we can query, sort, group and filter data using the same in a Silverlight 4.0 application. In this section, we will focus on navigating through data using DomainDataSource.

Let us start with an example:

    <UserControl.Resources>
        <riaControls:DomainDataSource x:Name="EmpDomDataSource"
                                      LoadSize="15"
                                      QueryName="GetEmps"
                                      AutoLoad="True">
            <riaControls:DomainDataSource.DomainContext>
                <local:EmpMgrDomainSvc></local:EmpMgrDomainSvc>
            </riaControls:DomainDataSource.DomainContext>
        </riaControls:DomainDataSource>
    </UserControl.Resources>

The next section explains the above code. The design from the code would look similar to the following:

Navigating through data using DomainDataSource: design explanation

This section explains the code in the previous section. We shall start with the following:

The above creates a grid layout with three rows. I would like to reserve the first row for textboxes (and labels), the second for navigation buttons and the last for the data grid. Proceeding further, we have the following:

This is another grid layout which sits in the first row of the previous grid. This is mainly used to lay out labels and textboxes. All labels go into the first column and textboxes into the second, and we are planning for four pairs of labels and textboxes (each pair would occupy a row with a label and a textbox).

All labels are defined as follows:

            <sdk:Label x:Name="lblEmpno" Margin="8" Content="Empno:"/>
            <sdk:Label x:Name="lblEname" Margin="8" Content="Ename:" Grid.Row="1"/>
            <sdk:Label x:Name="lblSal" Margin="8" Content="Salary:" Grid.Row="2"/>
            <sdk:Label x:Name="lblDeptno" Margin="8" Content="Deptno:" Grid.Row="3"/>

You can observe that each label is put into a different row. All textboxes are defined as follows:

You can observe that all textboxes are placed in the second column and are bound “OneWay” by default.

The above creates a group of buttons laid out horizontally in a stack panel. The stack panel sits in the second row of the main grid.

Finally, the data grid is placed in third row of the main grid as follows:

        <sdk:DataGrid
            x:Name="dgEmp"
            Margin="8" Grid.Row="2" MinHeight="200" IsReadOnly="True"
            ItemsSource="{Binding Data, ElementName=EmpDomDataSource}"/>

Navigating through data using DomainDataSource: code-behind

This section lists the code-behind for the form design explained in the previous sections.

Imports System.ServiceModel.DomainServices.Client
Imports System.Windows.Data

Partial Public Class DdsNavigation
Inherits UserControl

    Public Sub New()
        InitializeComponent()
    End Sub

    Private Sub EmpDomDataSource_LoadedData(ByVal sender As Object, ByVal e As System.Windows.Controls.LoadedDataEventArgs) Handles EmpDomDataSource.LoadedData
        If e.HasError Then
            System.Windows.MessageBox.Show(e.Error.ToString, "Load Error", System.Windows.MessageBoxButton.OK)
            e.MarkErrorAsHandled()
        End If
    End Sub

    Private Sub btnPrevious_Click(ByVal sender As System.Object, ByVal e As System.Windows.RoutedEventArgs) Handles btnPrevious.Click
        If Me.EmpDomDataSource.DataView.CurrentPosition > 0 Then
            Me.EmpDomDataSource.DataView.MoveCurrentToPrevious()
        End If
    End Sub

    Private Sub btnNext_Click(ByVal sender As System.Object, ByVal e As System.Windows.RoutedEventArgs) Handles btnNext.Click
        If Me.EmpDomDataSource.DataView.CurrentPosition < Me.EmpDomDataSource.DataView.Count Then
            Me.EmpDomDataSource.DataView.MoveCurrentToNext()
        End If
    End Sub

    Private Sub btnFirst_Click(ByVal sender As System.Object, ByVal e As System.Windows.RoutedEventArgs) Handles btnFirst.Click
        Me.EmpDomDataSource.DataView.MoveCurrentToFirst()
    End Sub

    Private Sub btnLast_Click(ByVal sender As System.Object, ByVal e As System.Windows.RoutedEventArgs) Handles btnLast.Click
        Me.EmpDomDataSource.DataView.MoveCurrentToLast()
    End Sub

End Class

The next section explains previous code.

Once we execute the above code, the output should look similar to the following:

Navigating through data using DomainDataSource: code-behind explanation

This section explains the code in the previous section.

“DomaindataSource” contains a special property called “CurrentItem.” This always holds the “Current” item, which acts as the main source of binding. Our textboxes actually get bound to this property. You can observe the same from the following code:

<Grid x:Name="lytEmpForm" Margin="8" DataContext="{Binding Path=DataView.CurrentItem, ElementName=EmpDomDataSource}">

If we want our textboxes (say bound controls) to show other objects, we need to change the “CurrentItem” to the respective one. “DomainDatasource” has another property, “DataView,” which internally contains following methods:

MoveCurrentToFirst
MoveCurrentToNext
MoveCurrentToPrevious
MoveCurrentToLast
MoveCurrentToPosition
MoveCurrentTo

The above methods move context to another object in the list. The movement will be always relative to “CurrentItem.”

“MoveCurrentTo” is very helpful if we need to move our context directly to a known object (it accepts object as a parameter). “MoveCurrentToPostion” moves current context to the index we specify as an argument. Let us modify our form to demonstrate “MoveCurrentToPostion.”

Modify the stack panel so that it looks like the following:

The above adds a couple more controls to stack panel. Now, the design should look like the following:

Let us modify code-behind to add a new event as follows:

    Private Sub btnGoTo_Click(ByVal sender As System.Object, ByVal e As System.Windows.RoutedEventArgs) Handles btnGoTo.Click
        If Me.txtGotoPos.Text > Me.EmpDomDataSource.DataView.Count - 1 OrElse
            Me.txtGotoPos.Text < 0 Then
            MessageBox.Show("Invalid position")
        Else
            Me.EmpDomDataSource.DataView.MoveCurrentToPosition(Me.txtGotoPos.Text)
        End If
    End Sub

Once we execute the form and provide 3 as input, the output should look like the following:

My upcoming articles will focus more on using the “DomainDataSource” element. I hope you enjoyed the article; any suggestions, bugs, errors, enhancements etc. are highly appreciated at http://jagchat.spaces.live.com/.