Intersoft ClientUI Documentation
How-to: Implement Client-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 Client-side Sorting, Filtering and Paging using UXGridView

Glossary Item Box

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

Example

Description

UXGridView supports both client and server data operation. When you set the QueryOperation to Client, UXGridView will process the data paging operation in the client against the given data source. You typically use a collection that implements IPagedCollectionView as the data source. The IPagedCollectionView provides paging, sorting and filtering support to the underlying collection. You can bind the UXGridView to any IEnumerable collection; however, the UXGridView will behave as if the data is all on a single page. To provide paging, sorting and filtering functionality for an IEnumerable collection, you can wrap the collection in a PagedCollectionView instance.

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 by loading the customers collection and wrap the collection to a PagedCollectionView instance.

Code

CustomersViewModel.cs Copy Code 
using System.Collections;
using Intersoft.Client.Data.ComponentModel;
using PagingWCFRIASP1GridViewClient.Web;
using System.ServiceModel.DomainServices.Client;

namespace ClientSideGridViewPagingSortingFiltering.ViewModels
{
    public class CustomersViewModel : ViewModelBase
    {
        private IEnumerable _customers;
        private NorthwindDomainContext Manager { get; set; }

        public IEnumerable Customers
        {
            get { return this._customers; }
            set
            {
                if (this._customers != value)
                {
                    this._customers = value;
                    OnPropertyChanged("Customers");
                }
            }
        }

        public CustomersViewModel()
        {
            if (!Intersoft.Client.Framework.ISControl.IsInDesignModeStatic)
            {
                this.Manager = new NorthwindDomainContext();
                this.LoadCustomers();
            }
        }

        private void LoadCustomers()
        {
            var query = this.Manager.GetCustomersQuery().OrderBy(a=> a.ContactName);
            this.Manager.Load(
                query,
                op => 
                {
                    if (op.IsComplete)
                    {
                        this.Customers = new PagedCollectionView(op.Entities);
                    }
                    else
                    {
                        MessageBoxServiceProvider.Show(op.Error.ToString(), null);
                    }
                }, 
                true);
        }
    }
}
Customers.xaml Copy Code 
<Intersoft:UXPage... 
    xmlns:ViewModels="clr-namespace:ClientSideGridViewPagingSortingFiltering.ViewModels"
    >
    <Intersoft:UXPage.Resources>
        <ViewModels:CustomersViewModel x:Key="CustomersViewModel"/>
    </Intersoft:UXPage.Resources>
    <Grid x:Name="LayoutRoot" DataContext="{StaticResource CustomersViewModel}">
        ...
        <Intersoft:DockPanel... >
            ...
            <Grid... >
                <Intersoft:UXGridView ItemsSource="{Binding Customers}"
                                      CanUserPage="True" PageSize="20"
                                      AutoGenerateColumns="False"
                                      QueryOperation="Client"
                                      >
                    <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.