How to: Implement a PickerColumn

This example demonstrates how to implement the grid's PickerColumn whose items are coming from the grid's underlying data source.

In this example, a grid is bound to a collection of the Order objects. Each order contains information about a customer (the CustomerId property). A customer is represented by a Customer object that has the Id and Name properties. Customer objects are stored in an IList collection. The following properties of the PickerColumn object are set to show customer names for orders in this column within the grid (see the MainPage.xaml file):

PickerColumn_Example

using System;

namespace PickerColumnExample
{
    public class Product : ModelObject {
        string name;
        int unitPrice;

        public Product(string name, int unitPrice) {
            this.name = name;
            this.unitPrice = unitPrice;
        }

        public string Name {
            get { return name; }
            set { name = value; }
        }

        public int UnitPrice {
            get { return unitPrice; }
            set { unitPrice = value; }
        }
    }
}
using System;

namespace PickerColumnExample
{
    public class Order : ModelObject {
        Product product;
        int quantity;
        int customerId;

        public Order() {
            this.product = new Product ("", 0);
            this.quantity = 0;
        }

        public Order(Product product, int amount, int customerId) {
            this.product = product;
            this.quantity = amount;
            this.customerId = customerId;
        }

        public Product Product {
            get { return product; }
            set { if (product != value) {
                    product = value; 
                    RaisePropertyChanged ("Product");}}
        }

        public int Quantity {
            get { return quantity; }
            set { if (quantity != value) {
                    quantity = value; 
                    RaisePropertyChanged ("Quantity");}}
        }

        public int CustomerId {
            get { return customerId; }
            set {
                if (customerId != value) {
                    customerId = value;
                    RaisePropertyChanged("CustomerId");
                }
            }
        }
    }
}
<?xml version="1.0" encoding="UTF-8"?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms" 
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" 
             x:Class="PickerColumnExample.MainPage"
             xmlns:dxg="clr-namespace:DevExpress.Mobile.DataGrid;assembly=DevExpress.Mobile.Grid.v15.1">
    <ContentPage.Padding>
        <OnPlatform x:TypeArguments="Thickness" iOS="0, 20, 0, 0" />
    </ContentPage.Padding>

    <dxg:GridControl x:Name="grid" ItemsSource="{Binding Orders}">
         <dxg:GridControl.Columns>
             <dxg:TextColumn FieldName="Product.Name" Caption="Product" Width="170"/>
             <dxg:NumberColumn FieldName="Product.UnitPrice" Caption="Price" DisplayFormat="C0"/>
             <dxg:NumberColumn FieldName="Quantity"/>
             <dxg:NumberColumn FieldName="Total" 
                                  UnboundType="Integer" UnboundExpression="[Quantity] * [Product.UnitPrice]" 
                                  DisplayFormat="C0" IsReadOnly="True"/>
             <dxg:PickerColumn FieldName="CustomerId" Caption="Customer"
                               ItemsSource="{Binding Customers}" ValueMember="Id" DisplayMember="Name" />
         </dxg:GridControl.Columns>
    </dxg:GridControl>
</ContentPage>    
using System;

namespace PickerColumnExample
{
    public class Customer : ModelObject {
        string name;

        public Customer(string name, int id) {
            this.name = name;
            this.Id = id;
        }

        public int Id { get; set; }

        public string Name {
            get { return name; }
            set {name = value;}
        }
    }
}
using System;
using System.Collections.Generic;
using System.Collections.ObjectModel;

namespace PickerColumnExample
{
    public abstract class OrdersRepository {
        readonly ObservableCollection<Order> orders;
        readonly ObservableCollection<Customer> customers;

        public OrdersRepository() {
            this.orders = new ObservableCollection<Order>();
            this.customers = new ObservableCollection<Customer>();
        }

        public ObservableCollection<Order> Orders {
            get { return orders; }
        }

        public IList<Customer> Customers{ 
            get { return customers; } 
        }
    }

    public class TestOrdersRepository : OrdersRepository {

        const int orderCount = 100;
        readonly List<Product> products;
        readonly Random random;

        public TestOrdersRepository() : base() {
            this.random = new Random((int)DateTime.Now.Ticks);
            this.products = new List<Product>();

            GenerateProducts();
            GenerateCustomers();

            for (int i = 0; i < orderCount; i++)
                Orders.Add(GenerateOrder(i));
        }

        Order GenerateOrder(int number) {
            Order order = new Order(RandomItem<Product>(products), random.Next(1, 100), RandomItem<Customer>(Customers).Id);
            return order;
        }

        T RandomItem<T>(IList<T> list) {
            int index = (int)(random.NextDouble() * 0.99 * (list.Count));
            return list[index];
        }

        void GenerateProducts() {
            products.Add(new Product("Tofu", 50));
            products.Add(new Product("Chocolade", 34));
            products.Add(new Product("Ikura", 70));
            products.Add(new Product("Chai", 3));
            products.Add(new Product("Boston Crab Meat", 36));
            products.Add(new Product("Ravioli Angelo", 18));
            products.Add(new Product("Ipon Coffee", 10));
            products.Add(new Product("Questo Cabrales", 25));
        }

        void GenerateCustomers() {
            Customers.Add(new Customer("Nancy Davolio", 0));
            Customers.Add(new Customer("Andrew Fuller", 1));
            Customers.Add(new Customer("Janet Leverling", 2));
            Customers.Add(new Customer("Margaret Peacock", 3));
            Customers.Add(new Customer("Steven Buchanan", 4));
            Customers.Add(new Customer("Michael Suyama", 5));
            Customers.Add(new Customer("Robert King", 6));
            Customers.Add(new Customer("Laura Callahan", 7));
            Customers.Add(new Customer("Anne Dodsworth", 8));
        }
    }
}
using System;
using System.Collections.Generic;

using Xamarin.Forms;

namespace PickerColumnExample {
    public partial class MainPage : ContentPage {
        public MainPage () {
            InitializeComponent ();

            TestOrdersRepository model = new TestOrdersRepository ();
            BindingContext = model;
        }
    }
}