Intersoft ClientUI Documentation
How-to: Host UXPageableComboBox within UXGridView Control
Intersoft ClientUI 8 > ClientUI Controls > Control Library > Data Controls Overview > UXPageableComboBox > How-to: Host UXPageableComboBox within UXGridView Control

This example shows how to host UXPageableComboBox within UXGridView control.

Description

Like the built-in combo box and other editing controls, it's also possible to host UXPageableComboBox inside UXGridView control to improve your editing experience.

UXPageableComboBox offers an intuitive way to edit a record by selecting the data retrieved from UXPageableComboBox. This is particularly useful when you have relatively large data set. You can utilize the paging capability of UXPageableComboBox to improve the data operation performance in overall.

To learn more about UXPageableComboBox and UXGridView, see UXPageableComboBox Overview and UXGridView Overview.

Code

The following code shows you how to configure UXPageableComboBox as editing control in UXGridView.

XAML
Copy Code 
<Intersoft:DockPanel FillChildMode="Custom" Width="638" Height="418">
    <Intersoft:DockPanel.DataContext>
        <ViewModels:OrderViewModel PageableComboBoxViewModel="{StaticResource CustomerViewModel}"/>
    </Intersoft:DockPanel.DataContext>

    <Intersoft:DockPanel.Background>
        <ImageBrush Stretch="UniformToFill" ImageSource="/Intersoft.ClientUI.Samples.DataControls;component/Assets/Images/PageableComboBox/purchase_order_bg.png" AlignmentX="Left"/>
    </Intersoft:DockPanel.Background>

    <Grid Intersoft:DockPanel.Dock="Top" Height="72"/>
    <Grid Intersoft:DockPanel.IsFillElement="True" Margin="8">                                        
        <Intersoft:UXGridView
            ItemsSource="{Binding Items}" RowHeaderVisibility="Visible"                                
            FilterDescriptors="{Binding QueryDescriptor.FilterDescriptors, Mode=TwoWay}"
            SortDescriptors="{Binding QueryDescriptor.SortDescriptors, Mode=TwoWay}"
            PageDescriptor="{Binding QueryDescriptor.PageDescriptor}"
            CanUserPage="True" PageSize="20" QueryOperation="Server"
            SelectedItem="{Binding SelectedItem, Mode=TwoWay}"
            AutoGenerateColumns="False"
            CanUserEditRows="True" AutoEditOperation="True"                                          
            RefreshCommand="{Binding RefreshCommand}"
            UpdateCellCommand="{Binding UpdateCellCommand}"
            UpdateRowCommand="{Binding UpdateRowCommand}"
            RejectRowCommand="{Binding RejectRowCommand}"
            SaveChangesCommand="{Binding SaveChangesCommand}"
            RejectChangesCommand="{Binding RejectChangesCommand}"
            IsRefreshed="{Binding IsRefreshed, Mode=TwoWay}"
            IsBusy="{Binding IsBusy}" HasChanges="{Binding HasChanges}">
            <Intersoft:UXGridView.Columns>
                <Intersoft:UXGridViewTextColumn Header="Order ID" Binding="{Binding OrderID}"/>
                <Intersoft:UXGridViewTextColumn Header="Order Date" Binding="{Binding OrderDate, StringFormat='M/d/yyyy'}"/>
                <Intersoft:UXGridViewTextColumn Header="Customer Name" Binding="{Binding CustomerID, Converter={StaticResource CustomerConverter}}">
                    <Intersoft:UXGridViewTextColumn.CellEditingTemplate>
                        <DataTemplate>
                            <Intersoft:UXPageableComboBox SearchResult="{Binding Items, Source={StaticResource CustomerViewModel}}"
                                SelectedValuePath="CustomerID" SelectedValue="{Binding CustomerID, Mode=TwoWay}" Text="{Binding CustomerID, Converter={StaticResource CustomerConverter}}"
                                FilterDescriptors="{Binding QueryDescriptor.FilterDescriptors, Source={StaticResource CustomerViewModel}, Mode=TwoWay}"
                                SortDescriptors="{Binding QueryDescriptor.SortDescriptors, Source={StaticResource CustomerViewModel}, Mode=TwoWay}"
                                PageDescriptor="{Binding QueryDescriptor.PageDescriptor, Source={StaticResource CustomerViewModel}}"
                                CanUserPage="True" DisplayMemberPath="ContactName">                                            
                            </Intersoft:UXPageableComboBox>
                        </DataTemplate>
                    </Intersoft:UXGridViewTextColumn.CellEditingTemplate>
                </Intersoft:UXGridViewTextColumn>
                <Intersoft:UXGridViewTextColumn Header="Ship Address" Binding="{Binding ShipAddress}"/>
                <Intersoft:UXGridViewTextColumn Header="Ship City" Binding="{Binding ShipCity}"/>
            </Intersoft:UXGridView.Columns>
        </Intersoft:UXGridView>
    </Grid>
</Intersoft:DockPanel>
C#
Copy Code 
using System.ComponentModel;
using Intersoft.Client.Data.ComponentModel;
using Intersoft.ClientUI.Samples.DataControls.ModelServices;
using Intersoft.ClientUI.Samples.Web;

namespace Intersoft.ClientUI.Samples.DataControls.ViewModels
{
        public class OrderViewModel : EditableGridViewModelBase<Order>
        {
                #region Constructors

                public OrderViewModel() : base()
                {
                        this.IsPrerequisiteDataLoaded = false;

                        this.QueryDescriptor.SuspendQueryChanged = true;
                        this.QueryDescriptor.SortDescriptors.Add(new SortDescriptor("OrderID", ListSortDirection.Ascending));
                        this.QueryDescriptor.SuspendQueryChanged = false;

                        this.LoadPrerequisiteData();
                }

                #endregion        

                #region Properties

                private IDataRepository CustomerSource
                {
                        get { return CustomersRepository.Instance; }
                }

                protected override IDataRepository DataSource
                {
                        get { return OrdersRepository.Instance; }
                }

                public CustomerViewModel PageableComboBoxViewModel { get; set; }

                #endregion        

                #region Methods

                private void LoadPrerequisiteData()
                {
                        // Ensure the customer records has been loaded properly
                        this.CustomerSource.GetData(
                                (items) =>
                                {
                                        this.IsPrerequisiteDataLoaded = true;
                                }
                        );
                }

                protected override void OnSelectedItemChanged(Order oldItem, Order newItem)
                {
                        base.OnSelectedItemChanged(oldItem, newItem);

                        // Clear all previous states
                        if (this.PageableComboBoxViewModel != null)
                        {
                                this.PageableComboBoxViewModel.Items = null;
                                this.PageableComboBoxViewModel.QueryDescriptor.SuspendQueryChanged = true;
                                this.PageableComboBoxViewModel.QueryDescriptor.FilterDescriptors.Clear();
                                this.PageableComboBoxViewModel.QueryDescriptor.SuspendQueryChanged = false;
                        }
                }

                #endregion
        }
}
C#
Copy Code 
using System.Collections.ObjectModel;
using System.ComponentModel;
using System.Linq;
using Intersoft.Client.Data.ComponentModel;
using Intersoft.ClientUI.Samples.DataControls.ModelServices;
using Intersoft.ClientUI.Samples.Web;

namespace Intersoft.ClientUI.Samples.DataControls.ViewModels
{
        public class CustomerViewModel : GridViewModelBase<Customer>
        {
                #region Constructors

                public CustomerViewModel() : base()
                {
                        this.QueryDescriptor.SuspendQueryChanged = true;
                        this.QueryDescriptor.SortDescriptors.Add(new SortDescriptor("ContactName", ListSortDirection.Ascending));
                        this.QueryDescriptor.SuspendQueryChanged = false;            
                }

                #endregion

                #region Fields

                private CustomersRepository _dataSource;

                #endregion

                #region Properties

                protected override IDataRepository DataSource
                {
                        get
                        {
                                if (_dataSource == null)
                                        _dataSource = new CustomersRepository(RepositoryManager.Create());

                                return _dataSource;
                        }
                }

                #endregion

                #region Methods

                protected override void InitializeItems(System.Collections.IEnumerable items)
                {
                        if (this.QueryDescriptor.PageDescriptor.PageIndex > 0)
                        {
                                ObservableCollection<object> collection = this.Items as ObservableCollection<object>;
                                foreach (var item in items)
                                {
                                        collection.Add(item);
                                }
                        }
                        else
                        {
                                this.Items = new ObservableCollection<object>(items.Cast<object>());
                        }
                }

                #endregion
        }
}
C#
Copy Code 
using System;
using System.Linq;
using System.Windows.Data;
using Intersoft.ClientUI.Samples.DataControls.ModelServices;
using Intersoft.ClientUI.Samples.Web;

namespace Intersoft.ClientUI.Samples.DataControls.Converters
{
        public class CustomerConverter : IValueConverter
        {
                public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
                {
                        CustomersRepository repository = CustomersRepository.Instance as CustomersRepository;
                        if (repository != null && value != null)
                        {
                                int customerID = (int)value;
                                Customer category = repository.EntitySet.ToList().Where(c => c.CustomerID == customerID).FirstOrDefault();
                                if (category != null)
                                        return category.ContactName;
                        }

                        return String.Empty;
                }

                public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
                {
                        throw new NotImplementedException();
                }
        }
}

Results

The results produced by the code explained above will look like the following.

See Also
UXPageableComboBox Class
UXGridView Class
QueryDescriptor Class

Concepts

UXPageableComboBox
UXGridView
QueryDescriptor Overview
MVVM Pattern Overview