Version

We recommend that you use the xamDataGrid control instead of the xamGrid control. The xamGrid is being planned for retirement over the next few years and will not receive any new features. We will continue to provide support and critical bug fixes for the xamGrid during this time. For help or questions on migrating your codebase to the xamDataGrid, please contact support.

Create a Template Column

A template column in xamGrid™ allows you to display custom content. You can add content to the column by setting its ItemTemplate property to an instance of a data template. The data context of the ItemTemplate is the data object that the current row would represent.

The following code shows you how to display content for the Description and Address column in xamGrid using a template column. For an example of binding controls to data inside a template column, see Editing Data in a Template Column.

In XAML:

<ig:XamGrid x:Name="dataGrid" AutoGenerateColumns="False" ColumnWidth="*">
   <ig:XamGrid.Columns>
      <ig:TextColumn Key="MLS" HeaderText="MLS#" />
      <ig:TemplateColumn Key="SqFeet" HeaderText="Description">
         <ig:TemplateColumn.ItemTemplate>
            <DataTemplate>
               <StackPanel>
                  <StackPanel Orientation="Horizontal">
                     <TextBlock Text="{Binding SqFeet, Converter={StaticResource FormatConverter}, ConverterParameter=N0}" />
                     <TextBlock Text="Sq. Feet" Margin="5,0,0,0" />
                  </StackPanel>
                  <StackPanel Orientation="Horizontal">
                     <TextBlock Text="{Binding NumberOfBedRooms}" />
                     <TextBlock Text="Bed Rooms" Margin="5,0,0,0" />
                     <TextBlock Text="{Binding NumberOfBathRooms}" Margin="5,0,0,0" />
                     <TextBlock Text="Bath Rooms" Margin="5,0,0,0" />
                  </StackPanel>
               </StackPanel>
            </DataTemplate>
         </ig:TemplateColumn.ItemTemplate>
      </ig:TemplateColumn>
      <ig:TemplateColumn Key="City" HeaderText="Address">
         <ig:TemplateColumn.ItemTemplate>
            <DataTemplate>
               <StackPanel Orientation="Horizontal">
                  <TextBlock Text="{Binding City}" Margin="5,0,0,0"  />
                  <TextBlock Text="," />
                  <TextBlock Text="{Binding State}" Margin="5,0,0,0" />
                  <TextBlock Text="{Binding PostalCode}" Margin="5,0,0,0" />
               </StackPanel>
            </DataTemplate>
         </ig:TemplateColumn.ItemTemplate>
      </ig:TemplateColumn>
   </ig:XamGrid.Columns>
</ig:XamGrid>
sl xamGrid Create a Template Column 01.png

Related Topics

Define Column Layout

Change Column Type Mapping

Editing Data in a Template Column

Filler Column

Validating Data

Data Binding