Version

Column Pinning

This topic will walk you through the process of implementing column pinning on the XamDataGrid control.

In this topic

This topic contains the following sections:

Required Background

The following topics are prerequisites to understanding this topic:

Topic Purpose

Getting Started With XamDataGrid

This topic provides basic steps required for adding the XamDataGrid control to your view and populating it with sample data.

Working with Columns

This topic provides code examples on working with columns in the XamDataGrid control.

Overview

The XamDataGrid control supports the ability to pin columns, allows the end users to lock a column in a particular column order.

A column or multiple columns can be pinned to the left-hand or right-hand side of the Data Grid. In addition, you can change the pin state of the columns via the PinColumn function.

Column Pinning Properties

The Column Pinning API in the Data Grid can be enabled by setting either a column’s 'Pinned' property, aka 'PinnedPositions' or when setting the PinColumn function of the grid.

The Pinned property has three options:

  • Left - enabling Left will position pinned columns to the left-hand side of the grid

  • Right - enabling Right will position pinned columns to the right side of the grid.

  • None - enabling None will unpin a column and reposition its default placement within the grid.

Unpinned columns that are adjacent to pinned columns will still maintain horizontal scrolling.

The 'PinColumn' function contains two required parameters. The first parameter needed is the column to be pinned, and the second is with the PinnedPositions enumeration setting.

In XAML:

xmlns:ig="clr-namespace:Infragistics.XamarinForms.Controls.Grids;assembly=Infragistics.XF.DataGrid"
...
<ig:XamDataGrid ItemsSource="{Binding}">
        <ig:TextColumn HeaderText="DataName" PropertyPath="Name" HorizontalAlignment="Center" Pinned="Left" />
</ig:XamDataGrid>

In C#:

ContactsDataSource data = new ContactsDataSource();
XamDataGrid grid = new XamDataGrid() { ItemsSource = data };

//Pin via PinColumn function
this.grid.PinColumn(this.grid.Columns[0], PinnedPositions.Left);
//Pin via Pinned property
this.DataGrid.Columns[0].Pinned = PinnedPositions.Left;

The above code-snippet will result in a XamDataGrid that looks like the following:

datagrid-column-pinning.png

Related Content

The following table lists topics that are related to this topic:

Topic Purpose

Row Grouping

This topic provides code examples on grouping rows in the XamDataGrid control.