TemplateColumn Class

A column type that allows you to define a custom template for column cells.

Namespace: DevExpress.Mobile.DataGrid

Assembly: DevExpress.Mobile.Grid.v18.1.dll

Declaration

public class TemplateColumn :
    GridColumn,
    ILayoutCalculatorItem,
    IFieldValueVisitor
Public Class TemplateColumn
    Inherits GridColumn
    Implements ILayoutCalculatorItem,
               IFieldValueVisitor

GridControl provides various ways to customize the appearance of its elements. For simple customizations (such as modifying colors, fonts, etc.), use appropriate customizer objects. If you need to completely modify the appearance of a particular grid element, you can define a custom template for it.

The TemplateColumn class allows you to create templates for the column cells. Create a column of the TemplateColumn type, assign the required template to the column's TemplateColumn.DisplayTemplate property and add the templated column to the GridControl.Columns collection.

To define a template for the column values editor, use the templated column's TemplateColumn.EditTemplate property.

Tip

Also, you can define a data template for a column header. For this purpose, use the GridColumn.HeaderTemplate property. Column header templates are available for columns of any type.

Examples

This example shows how to add columns to GridControl to display and edit data of different types. The grid is bound to a collection of Employee objects. Each Employee object contains an employee's photo (image), name, position, phone, address (strings), hire and birth dates (DateTime values), a value that specifies an employee's access level, and a Boolean value indicating whether an employee is on vacation.

GridColumns_All_iOS

GridColumns_All

Grid columns are stored in the GridControl.Columns collection. An individual column is specified by a GridColumn descendant, which is appropriate to the type of data contained in this column. In this example, to display information on employees and allow end-users to edit it, the following columns are created in the grid.

Grid Column

Description

Photo

ImageColumn

This column displays employee photos which are images added to a project as embedded resources.

Employee

TemplateColumn

A cell in this column displays three employee properties: Name, Position and HireDate. A cell appearance is defined via a template. Each cell contains three Xamarin.Forms.Label elements within a Xamarin.Forms.Grid. Each Label element is bound to a property of the Employee class.

A cell template data context is specified by the CellData object. Its CellData.Value property provides access to a value of a data field assigned to the column's GridColumn.FieldName property. In this example, a column cell displays not only this field value but also values of two more fields. So, it is required to specify the whole data row as a binding source for the template. To do this, set the BindingContext property of the Grid to CellData.Source. Note that BindingContext specified for the Grid is inherited by all its children. This means that all Label elements have the same BindingContext as the Grid, and you can specify their simple bindings to properties of that object (Employee).

Use the GridColumn.AllowSort, GridColumn.AllowGroup and GridColumn.IsReadOnly properties to prevent end-users from sorting and grouping data in the grid by this column and disable data editing.

Phone

NumberColumn

The employee's Phone property is of the string type. The keyboard allowing text input is automatically displayed when an end-user activates this column cell to edit an employee's phone.

Address

TextColumn

This column is bound to the employee's Address string property. The keyboard allowing text input is automatically displayed when an end-user activates this column cell to edit an employee's address.

Birth Date

DateColumn

This column displays and allows editing employee birth days. The GridColumn.DisplayFormat property specifies the format of displaying dates.

Access Level

PickerColumn

The employee's Access property is of the AccessLevel type which is an enumeration with values Admin and User. To allow editing an employee's access level by selecting one of two enumeration values, this property is bound to the grid's picker column.

On Vacation

SwitchColumn

The employee's OnVacation property is of the Boolean type, so it is bound to the grid's switch column which allows editing a cell value by selecting between two states.

public abstract class EmployeesRepository {
    readonly ObservableCollection<Employee> employees;

    public EmployeesRepository() {
        this.employees = new ObservableCollection<Employee>();
    }

    public ObservableCollection<Employee> Employees { 
        get { return employees; } 
    }
}

public class TestEmployeesRepository : EmployeesRepository {
    public TestEmployeesRepository() : base() {
        GenerateCustomers();
    }

    void GenerateCustomers() {
        Employees.Add(
            new Employee("Nancy Davolio") {
                BirthDate = new DateTime(1978, 12, 8),
                HireDate = new DateTime(2005, 5, 1),
                Position = "Sales Representative",
                Address = "98122, 507 - 20th Ave. E. Apt. 2A, Seattle WA, USA",
                Phone = "(206) 555-9857",
                Access = AccessLevel.User,
                OnVacation = false
            }
        );
        Employees.Add(
            new Employee("Andrew Fuller") {
                BirthDate = new DateTime(1965, 2, 19),
                HireDate = new DateTime(1992, 8, 14),
                Position = "Vice President, Sales",
                Address = "98401, 908 W. Capital Way, Tacoma WA, USA",
                Phone = "(206) 555-9482",
                Access = AccessLevel.Admin,
                OnVacation = false
            }
        );
        Employees.Add(
            new Employee("Janet Leverling") {
                BirthDate = new DateTime(1985, 8, 30),
                HireDate = new DateTime(2002, 4, 1),
                Position = "Sales Representative",
                Address = "98033, 722 Moss Bay Blvd., Kirkland WA, USA",
                Phone = "(206) 555-3412",
                Access = AccessLevel.User,
                OnVacation = false
            }
        );
        Employees.Add(
            new Employee("Margaret Peacock") {
                BirthDate = new DateTime(1973, 9, 19),
                HireDate = new DateTime(1993, 5, 3),
                Position = "Sales Representative",
                Address = "98052, 4110 Old Redmond Rd., Redmond WA, USA",
                Phone = "(206) 555-8122",
                Access = AccessLevel.User,
                OnVacation = false
            }
        );
        Employees.Add(
            new Employee("Steven Buchanan") {
                BirthDate = new DateTime(1955, 3, 4),
                HireDate = new DateTime(1993, 10, 17),
                Position = "Sales Manager",
                Address = "SW1 8JR, 14 Garrett Hill, London, UK",
                Phone = "(71) 555-4848",
                Access = AccessLevel.User,
                OnVacation = true
            }
        );
        Employees.Add(
            new Employee("Michael Suyama") {
                BirthDate = new DateTime(1981, 7, 2),
                HireDate = new DateTime(1999, 10, 17),
                Position = "Sales Representative",
                Address = "EC2 7JR, Coventry House Miner Rd., London, UK",
                Phone = "(71) 555-7773",
                Access = AccessLevel.User,
                OnVacation = false
            }
        );
        Employees.Add(
            new Employee("Robert King") {
                BirthDate = new DateTime(1960, 5, 29),
                HireDate = new DateTime(1994, 1, 2),
                Position = "Sales Representative",
                Address = "RG1 9SP, Edgeham Hollow Winchester Way, London, UK",
                Phone = "(71) 555-5598",
                Access = AccessLevel.User,
                OnVacation = false
            }
        );
        Employees.Add(
            new Employee("Laura Callahan") {
                BirthDate = new DateTime(1985, 1, 9),
                HireDate = new DateTime(2004, 3, 5),
                Position = "Inside Sales Coordinator",
                Address = "98105, 4726 - 11th Ave. N.E., Seattle WA, USA",
                Phone = "(206) 555-1189",
                Access = AccessLevel.User,
                OnVacation = true
            }
        );
        Employees.Add(
            new Employee("Anne Dodsworth") {
                BirthDate = new DateTime(1980, 1, 27),
                HireDate = new DateTime(2004, 11, 15),
                Position = "Sales Representative",
                Address = "WG2 7LT, 7 Houndstooth Rd., London, UK",
                Phone = "(71) 555-4444",
                Access = AccessLevel.User,
                OnVacation = false
            }
        );
    }
}
public enum AccessLevel {
    Admin,
    User
}
public class Employee : ModelObject {
    string name;

    public string Name {
        get { return name; }
        set {
            name = value;
            if (Photo == null)
                Photo = ImageSource.FromResource (value.Replace (" ", String.Empty));
        }
    }

    public Employee(string name) {
        this.Name = name;
    }

    public ImageSource Photo { get; set; }
    public DateTime BirthDate { get; set; }
    public DateTime HireDate { get; set; }
    public string Position { get; set; }
    public string Address { get; set; }
    public string Phone { get; set; }
    public AccessLevel Access { get; set; }
    public bool OnVacation { get; set; }
}

Inheritance

Object
GridColumn
TemplateColumn

See Also