Columns Overview
You can add columns in your RadDataGrid by working with the Columns collection of the control. Generally, there are three approaches that you can take to define differrent columns:
The Columns is part of Telerik UI for Xamarin, a
professional grade UI component library for building modern and feature-rich applications. To try it out sign up for a free 30-day trial.
- Manually: by adding columns to the RadDataGrid.Columns collection
- Automatically: by setting RadDataGrid.AutoGenerateColumns="True"
- Mixed: by adding columns to the RadDataGrid.Columns collection and also set RadDataGrid.AutoGenerateColumns="True"
The RadDataGrid control provides the following type of columns:
- Text Column: Represents a column that converts the content of each associated cell to a System.String object.
- Numerical Column: Represents an extended DataGridTextColumn that presents numerical data(int and double types).
- Boolean Column: A special DataGridTypedColumn implementation that presents boolean data.
- Date Column: An extended DataGridTextColumn that presents data of type DateTime.
- Time Column: Represents an extended DataGridTextColumn that presents the TimeOfDay of a DateTime type.
- Picker Column: Represents an extended DataGridTextColumn that uses a Picker editor to select value from a collection.
- Template Column: Represents a column that uses a DataTemplate to describe the content of each associated grid cell.
When RadDataGrid.AutoGenerateColumns="True" the RadDataGrid generates typed columns depending on the underlying data type.
Properties
All types of columns inherit from the DataGridColumn class which provides the following properties:
- HeaderText (string): Gets or sets the content to be displayed in the Header UI that represents the column.
- HeaderStyle (DataGridColumnHeaderStyle): Gets or sets the Style instance that defines the appearance of the DataGridColumnHeader control.
- HeaderContentTemplate (DataTemplate): Gets or sets the DataTemplate instance that defines the appearance of the header.
-
SizeMode (DataGridColumnSizeMode): Gets or sets the DataGridColumnSizeMode value that controls how the column and its associated cells are sized horizontally.
- Fixed: The column has a fixed width as defined by its Width property.
- Stretch: The column is stretched to the available width proportionally to its desired width.
- Auto: The columns is sized to its desired width. That is the maximum desired width of all associated cells.
- Width (double): - Gets or sets the fixed width for the column. Applicable when the SizeMode property is set to DataGridColumnSizeMode.Fixed.
- ActualWidth (double): Gets the actual width of the column.
- IsAutoGenerated (bool): Gets a value indication whether the column is auto-generated internally.
- CanUserEdit (bool): Gets or sets a value indicating whether the user can edit the values in this column.
- CanUserGroup (bool): Gets or sets a value indicating whether the user can group-by this column by using the built-in Grouping UI.
- CanUserFilter (bool): Gets or sets a value indicating whether the user can filter this column by using the built-in Filtering UI.
- CanUserSort (bool): Gets or sets a value indicating whether the user can sort the data by the values in this column.
- IsVisible (bool): Gets a value indicating if a specific column should be visualized.
- CellDecorationStyle (DataGridBorderStyle): Defines the Style object that defines the background of each cell associated with this column.
- CellDecorationStyleSelector (DataGridStyleSelector): Defines the StyleSelector instance that allows for dynamic decoration on a per cell basis.
- CellContentTemplate (DataTemplate): Defines the appearance of each cell associated with concrete column.
- CellEditTemplate (DataTemplate): Defines the editor associated with the concrete column. The CellEditTemplate is displayed when the cell is in edit mode.
- FilterControlTemplate(DataTemplate): Specifies the user defined template used for Filtering UI. The template must contain an instance of the Telerik.XamarinForms.DataGrid.DataGridFilterControlBase class
CellContentTemplate, CellEditTemplate and FilterControlTemplate properties are part of the DataGrid features from R2 2020 Official Release. For more details on celledit and cell content templates features check the Cell Templatesarticle. For more details on filtercontrol template please review the FilterControl Template section.
More information about CellDecorationStyle and CellDecorationStyleSelector can be found in Columns Styling topic.
In order to enable the user edit mode of the RadDataGrid cell, set the RadDataGrid.UserEditMode="Cell".
Example with DataGrid Columns
Here is an example containing all types of columns RadDataGrid control provides.
Use the following snippet to declare a RadDataGrid in XAML:
<telerikDataGrid:RadDataGrid x:Name="grid"
ItemsSource="{Binding Clubs}"
AutoGenerateColumns="False"
UserEditMode="Cell">
<telerikDataGrid:RadDataGrid.Columns>
<telerikDataGrid:DataGridTextColumn PropertyName="Name"
HeaderText="Name">
<telerikDataGrid:DataGridTextColumn.CellContentStyle>
<telerikDataGrid:DataGridTextCellStyle TextColor="Green"
FontSize="15"
SelectedTextColor="Orange" />
</telerikDataGrid:DataGridTextColumn.CellContentStyle>
</telerikDataGrid:DataGridTextColumn>
<telerikDataGrid:DataGridNumericalColumn PropertyName="StadiumCapacity"
HeaderText="Stadium Capacity"/>
<telerikDataGrid:DataGridBooleanColumn PropertyName="IsChampion"
HeaderText="Champion?"/>
<telerikDataGrid:DataGridDateColumn PropertyName="Established"
HeaderText="Date Established"/>
<telerikDataGrid:DataGridPickerColumn PropertyName="Country"
HeaderText="Country"
ItemsSourcePath="Countries"/>
<telerikDataGrid:DataGridTemplateColumn HeaderText="Template Column">
<telerikDataGrid:DataGridTemplateColumn.CellContentTemplate>
<DataTemplate>
<StackLayout InputTransparent="True">
<Grid BackgroundColor="Orange"
Margin="0, 10, 0, 0">
<Label Text="{Binding Country}"
Margin="0, 5, 0, 5"
HorizontalOptions="Center"
VerticalTextAlignment="Center"/>
</Grid>
<Label Text="Some Custom Text"
TextColor="DarkGreen"
FontSize="10"/>
</StackLayout>
</DataTemplate>
</telerikDataGrid:DataGridTemplateColumn.CellContentTemplate>
</telerikDataGrid:DataGridTemplateColumn>
<telerikDataGrid:DataGridTimeColumn PropertyName="Time"
HeaderText="Time Column"/>
</telerikDataGrid:RadDataGrid.Columns>
</telerikDataGrid:RadDataGrid>
Where the telerikDataGrid namespace is the following:
xmlns:telerikDataGrid="clr-namespace:Telerik.XamarinForms.DataGrid;assembly=Telerik.XamarinForms.DataGrid"
The ViewModel class is declared as following:
public class ColumnsViewModel
{
private ObservableCollection<Club> clubs;
public ObservableCollection<Club> Clubs => clubs ?? (clubs = CreateClubs());
private ObservableCollection<Club> CreateClubs()
{
return new ObservableCollection<Club>
{
new Club("UK Liverpool ", new DateTime(1892, 1, 1), new DateTime(2018, 2, 22, 3, 28, 33), 45362, "England"),
new Club("Manchester Utd.", new DateTime(1878, 1, 1), new DateTime(2018, 1, 1, 2, 56, 44), 76212, "England") { IsChampion = true },
new Club("Chelsea", new DateTime(1905, 1, 1), new DateTime(2018, 6, 17, 6, 19, 59), 42055, "England"),
new Club("Barcelona", new DateTime(1899, 1, 1), new DateTime(2018, 7, 12, 12, 25, 31), 99354, "Spain")
};
}
}
And the Club custom object:
public class Club : INotifyPropertyChanged
{
private string name;
private DateTime established;
private DateTime time;
private int stadiumCapacity;
private bool isChampion;
private string country;
public Club(string name, DateTime established, DateTime time, int stadiumCapacity, string country)
{
Name = name;
Established = established;
Time = time;
StadiumCapacity = stadiumCapacity;
Country = country;
}
public string Name
{
get { return this.name; }
set { this.UpdateValue(ref this.name, value); }
}
public DateTime Established
{
get { return this.established; }
set { this.UpdateValue(ref this.established, value); }
}
public DateTime Time
{
get { return this.time; }
set { this.UpdateValue(ref this.time, value); }
}
public int StadiumCapacity
{
get { return this.stadiumCapacity; }
set { this.UpdateValue(ref this.stadiumCapacity, value); }
}
public string Country
{
get { return this.country; }
set { this.UpdateValue(ref this.country, value); }
}
public bool IsChampion
{
get { return this.isChampion; }
set { this.UpdateValue(ref this.isChampion, value); }
}
public List<string> Countries => new List<string> { "England", "Spain", "France", "Bulgaria" };
public event PropertyChangedEventHandler PropertyChanged;
protected virtual void OnPropertyChanged([CallerMemberName] string propertyName = null)
{
PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
}
protected void UpdateValue<T>(ref T field, T newValue, [CallerMemberName] string propertyName = null)
{
if (!object.Equals(field, newValue))
{
field = newValue;
this.OnPropertyChanged(propertyName);
}
}
}
An example with DataGrid columns can be found in the DataGrid/Columns folder of the SDK Samples Browser application.