Intersoft ClientUI Documentation
How-to: Use UXQueryBuilder for Client Side Operation
Intersoft ClientUI 8 > ClientUI Controls > Control Library > Editor Controls Overview > UXQueryBuilder > UXQueryBuilder How-to Topics > How-to: Use UXQueryBuilder for Client Side Operation

Description

This example provides information in using UXQueryBuilder to filter client side data.

Prerequisite

For a quick example, we will use Intersoft ClientUI Data Application (DevForce) project. To create a new Intersoft ClientUI Data Application (DevForce) project, see Walkthrough: Create New Intersoft ClientUI MVVM Data Application (DevForce). The Customers page will be modified for the purposes of this example.

Tutorial

1. Modify ProductsViewModel.cs in the ViewModels folder.

ProductsViewModel.cs
Copy Code 
using System;
using QueryBuilderClientSide.DomainModel;
using QueryBuilderClientSide.ModelServices;

namespace QueryBuilderClientSide.ViewModels
{
    public class ProductsViewModel : EditableGridViewModelBase<Product>
    {
        #region Constructor

        public ProductsViewModel()
        {
            this.LoadData();
        }

        #endregion

        #region Data Source

        private IDataRepository _dataSource;

        protected override IDataRepository DataSource
        {
            get { return _dataSource ?? (_dataSource = new ProductsRepository(RepositoryManager.Create())); }
        }

        #endregion

        public Type ObjectType
        {
            get { return typeof(Product); }
        }
    }
}

2. Modify Customers.xaml in the Views folder.

Do not forget to reference the Intersoft.Client.UI.Editors assembly.
Customers.xaml
Copy Code 
<Intersoft:UXPage xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d"
        xmlns:Intersoft="http://intersoft.clientui.com/schemas"
        xmlns:ViewModels="clr-namespace:QueryBuilderClientSide.ViewModels" x:Class="QueryBuilderClientSide.Customers"
        Title="Customers Page" d:DesignWidth="800" d:DesignHeight="600" Style="{StaticResource CommonPageStyle}">

    <Intersoft:UXPage.DataContext>
        <ViewModels:ProductsViewModel />
    </Intersoft:UXPage.DataContext>

    <Grid x:Name="LayoutRoot">
        <Grid.Background>
            <ImageBrush AlignmentY="Bottom" AlignmentX="Right" Stretch="None" Opacity="0.5"
                    ImageSource="../Assets/Images/CustomersFolderLarge.png">
                <ImageBrush.Transform>
                    <TranslateTransform X="40" Y="40" />
                </ImageBrush.Transform>
            </ImageBrush>
        </Grid.Background>
        <Intersoft:DockPanel Margin="10" FillChildMode="Custom">
            <Intersoft:StylishLabel Content="Customers Page" Intersoft:DockPanel.Dock="Top"
                    Style="{StaticResource PageHeaderStyle}" />
            <Grid Intersoft:DockPanel.IsFillElement="True">
                <StackPanel>
                    <Intersoft:UXQueryBuilder QueryOperation="Client" ObjectType="{Binding ObjectType}"
                            CollectionView="{Binding Items}" />
                    <Intersoft:UXGridView Intersoft:DockPanel.IsFillElement="True" IsBusy="{Binding IsBusy}"
                            ItemsSource="{Binding Items}" QueryOperation="Client" AutoGenerateColumns="False"
                            PageSize="20" CanUserPage="True">
                        <Intersoft:UXGridView.Columns>
                            <Intersoft:UXGridViewTextColumn Header="Product ID" Binding="{Binding ProductID}" />
                            <Intersoft:UXGridViewTextColumn Header="Product Name" Binding="{Binding ProductName}" />
                            <Intersoft:UXGridViewTextColumn Header="Supplier ID" Binding="{Binding SupplierID}" />
                            <Intersoft:UXGridViewTextColumn Header="Category ID" Binding="{Binding CategoryID}" />
                            <Intersoft:UXGridViewTextColumn Header="Quantity Per Unit"
                                    Binding="{Binding QuantityPerUnit}" />
                            <Intersoft:UXGridViewTextColumn Header="Unit Price" Binding="{Binding UnitPrice}" />
                            <Intersoft:UXGridViewTextColumn Header="Units In Stock" Binding="{Binding UnitsInStock}" />
                            <Intersoft:UXGridViewTextColumn Header="Units On Order" Binding="{Binding UnitsOnOrder}" />
                            <Intersoft:UXGridViewTextColumn Header="Reorder Level" Binding="{Binding ReorderLevel}" />
                        </Intersoft:UXGridView.Columns>
                    </Intersoft:UXGridView>
                </StackPanel>
            </Grid>
        </Intersoft:DockPanel>
    </Grid>
</Intersoft:UXPage>

3. Run the project.

See Also
UXQueryBuilder Class
UXQueryBuilderCell Class
UXQueryBuilderCommands Class
UXQueryBuilderItem Class
UXQueryBuilderResource Class
How-to: Use UXQueryBuilder for Server Side Operation