Intersoft ClientUI Documentation
How-to: Implement Server-side Sorting, Filtering and Paging using UXGridView
See Also Send Feedback
Intersoft ClientUI 7 > ClientUI Controls > Control Library > Data Controls Overview > UXGridView > UXGridView How-to Topics > How-to: Implement Server-side Sorting, Filtering and Paging using UXGridView

Glossary Item Box

This example shows how to perform server-side sorting, filtering and paging using UXGridView control.

Example

Description

UXGridView supports both client and server data operation. When you set the QueryOperation to Server, UXGridView will not attempt to perform the data operation on the given data source. Instead, it will store and distribute the query information to the one of QueryDescriptor property. When the collection changes, the QueryChanged event of the associated QueryDescriptor will be raised. This allows you to streamline the query processing in a centralized function, which is one of the strong benefits of QueryDescriptor. For more information about QueryDescriptor, see QueryDescriptor Overview

The following sample is being create using Intersoft Data Application Template to learn more, see Walkthrough: Create New Intersoft ClientUI MVVM Data Application (WCF RIA SP1) Template. You will also learn how to implement sorting, filtering and paging to a collection of data displayed in a UXGridView by using QueryDescriptor.FilterDescriptors, QueryDescriptor.SortDescriptors and QueryDescriptor.PageDescriptor.

Code

CustomersRepository.cs Copy Code 
public class CustomersRepository : DataRepository<Customer>
{
    private static IDataRepository _repository;

    public CustomersRepository(DomainContext context)
        : base(context)
    {
    }

    private static bool IsReusable
    {
        get { return true; }
    }

    private NorthwindDomainContext EntityContext
    {
        get
        {
            return ((NorthwindDomainContext)this.Context);
        }
    }

    public static IDataRepository Instance
    {
        get
        {
            if (_repository == null || !IsReusable)
                _repository = new CustomersRepository(RepositoryManager.Create());

            return _repository;
        }
    }

    public override EntitySet<Customer> EntitySet
    {
        get
        {
            return this.EntityContext.Customers;
        }
    }

    public override EntityQuery<Customer> EntityQuery
    {
        get
        {
            return this.EntityContext.GetCustomersQuery();
        }
    }
}
CustomersViewModel.cs Copy Code 
public class CustomersViewModel : EditableGridViewModelBase<Customer>
{
    public IDataRepository CategoriesSource { get; set; }

    public CustomersViewModel()
        : base()
    {
        this.QueryDescriptor.SortDescriptors.Add(new SortDescriptor() { PropertyName = "ContactName", Direction = ListSortDirection.Ascending });
    }

    protected override IDataRepository DataSource
    {
        get
        {
            return CustomersRepository.Instance;
        }
    }
}
Customers.xaml Copy Code 
<Intersoft:UXPage...
    xmlns:ViewModels="clr-namespace:PagingWCFRIASP1GridView.ViewModels"
    <Intersoft:UXPage.Resources>
        <ViewModels:CustomersViewModel x:Key="CustomersViewModel"/>
    </Intersoft:UXPage.Resources>
    <Grid x:Name="LayoutRoot" DataContext="{StaticResource CustomersViewModel}">
        <Intersoft:DockPanel...
            <Grid Intersoft:DockPanel.IsFillElement="True">
                <Intersoft:UXGridView 
                    IsBusy="{Binding IsBusy, Mode=TwoWay}" AutoGenerateColumns="False"
                    CanUserPage="True" QueryOperation="Server" PageSize="20" ItemsSource="{Binding Path=Items}"
                    SortDescriptors="{Binding QueryDescriptor.SortDescriptors, Mode=TwoWay}"
                    FilterDescriptors="{Binding QueryDescriptor.FilterDescriptors, Mode=TwoWay}" 
                    PageDescriptor="{Binding QueryDescriptor.PageDescriptor}"
                    >
                    <Intersoft:UXGridView.Columns>
                        <Intersoft:UXGridViewTextColumn Header="Name" Binding="{Binding ContactName}" />
                        <Intersoft:UXGridViewTextColumn Header="Company Name" Binding="{Binding CompanyName}" />
                        <Intersoft:UXGridViewTextColumn Header="Address" Binding="{Binding Address}" />
                        <Intersoft:UXGridViewTextColumn Header="City" Binding="{Binding City}">
                            <Intersoft:UXGridViewTextColumn.FilterItems>
                                <Intersoft:UXDataFilterItem Content="City A - E">
                                    <Intersoft:UXDataFilterItem.Filter>
                                        <Intersoft:CompositeFilterDescription LogicalOperator="Or">
                                            <Intersoft:FilterDescription PropertyName="City" Operator="StartsWith"  Value="A" />
                                            <Intersoft:FilterDescription PropertyName="City" Operator="StartsWith"  Value="B"/>
                                            <Intersoft:FilterDescription PropertyName="City" Operator="StartsWith"  Value="C"/>
                                            <Intersoft:FilterDescription PropertyName="City" Operator="StartsWith"  Value="D"/>
                                            <Intersoft:FilterDescription PropertyName="City" Operator="StartsWith"  Value="E"/>
                                        </Intersoft:CompositeFilterDescription>
                                    </Intersoft:UXDataFilterItem.Filter>
                                </Intersoft:UXDataFilterItem>
                                <Intersoft:UXDataFilterItem Content="City F - J">
                                    <Intersoft:UXDataFilterItem.Filter>
                                        <Intersoft:CompositeFilterDescription LogicalOperator="Or">
                                            <Intersoft:FilterDescription PropertyName="City" Operator="StartsWith"  Value="F"/>
                                            <Intersoft:FilterDescription PropertyName="City" Operator="StartsWith"  Value="G"/>
                                            <Intersoft:FilterDescription PropertyName="City" Operator="StartsWith"  Value="H"/>
                                            <Intersoft:FilterDescription PropertyName="City" Operator="StartsWith"  Value="I"/>
                                            <Intersoft:FilterDescription PropertyName="City" Operator="StartsWith"  Value="J"/>
                                        </Intersoft:CompositeFilterDescription>
                                    </Intersoft:UXDataFilterItem.Filter>
                                </Intersoft:UXDataFilterItem>
                                <Intersoft:UXDataFilterItem Content="City K - O">
                                    <Intersoft:UXDataFilterItem.Filter>
                                        <Intersoft:CompositeFilterDescription LogicalOperator="Or">
                                            <Intersoft:FilterDescription PropertyName="City" Operator="StartsWith"  Value="K"/>
                                            <Intersoft:FilterDescription PropertyName="City" Operator="StartsWith"  Value="L"/>
                                            <Intersoft:FilterDescription PropertyName="City" Operator="StartsWith"  Value="M"/>
                                            <Intersoft:FilterDescription PropertyName="City" Operator="StartsWith"  Value="N"/>
                                            <Intersoft:FilterDescription PropertyName="City" Operator="StartsWith"  Value="O"/>
                                        </Intersoft:CompositeFilterDescription>
                                    </Intersoft:UXDataFilterItem.Filter>
                                </Intersoft:UXDataFilterItem>
                                <Intersoft:UXDataFilterItem Content="City P - T">
                                    <Intersoft:UXDataFilterItem.Filter>
                                        <Intersoft:CompositeFilterDescription LogicalOperator="Or">
                                            <Intersoft:FilterDescription PropertyName="City" Operator="StartsWith"  Value="P"/>
                                            <Intersoft:FilterDescription PropertyName="City" Operator="StartsWith"  Value="Q"/>
                                            <Intersoft:FilterDescription PropertyName="City" Operator="StartsWith"  Value="R"/>
                                            <Intersoft:FilterDescription PropertyName="City" Operator="StartsWith"  Value="S"/>
                                            <Intersoft:FilterDescription PropertyName="City" Operator="StartsWith"  Value="T"/>
                                        </Intersoft:CompositeFilterDescription>
                                    </Intersoft:UXDataFilterItem.Filter>
                                </Intersoft:UXDataFilterItem>
                                <Intersoft:UXDataFilterItem Content="City U - Y">
                                    <Intersoft:UXDataFilterItem.Filter>
                                        <Intersoft:CompositeFilterDescription LogicalOperator="Or">
                                            <Intersoft:FilterDescription PropertyName="City" Operator="StartsWith"  Value="U"/>
                                            <Intersoft:FilterDescription PropertyName="City" Operator="StartsWith"  Value="V"/>
                                            <Intersoft:FilterDescription PropertyName="City" Operator="StartsWith"  Value="W"/>
                                            <Intersoft:FilterDescription PropertyName="City" Operator="StartsWith"  Value="X"/>
                                            <Intersoft:FilterDescription PropertyName="City" Operator="StartsWith"  Value="Y"/>
                                        </Intersoft:CompositeFilterDescription>
                                    </Intersoft:UXDataFilterItem.Filter>
                                </Intersoft:UXDataFilterItem>
                                <Intersoft:UXDataFilterItem Content="City Z">
                                    <Intersoft:UXDataFilterItem.Filter>
                                        <Intersoft:CompositeFilterDescription LogicalOperator="Or">
                                            <Intersoft:FilterDescription PropertyName="City" Operator="StartsWith"  Value="Z"/>
                                        </Intersoft:CompositeFilterDescription>
                                    </Intersoft:UXDataFilterItem.Filter>
                                </Intersoft:UXDataFilterItem>
                            </Intersoft:UXGridViewTextColumn.FilterItems>
                        </Intersoft:UXGridViewTextColumn>
                        <Intersoft:UXGridViewTextColumn Header="Phone" Binding="{Binding Phone}" />
                    </Intersoft:UXGridView.Columns>
                </Intersoft:UXGridView>
            </Grid>
        </Intersoft:DockPanel>
    </Grid>
</Intersoft:UXPage>

The result looks like the following figure.

See Also

©2012. All Rights Reserved.