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:

  • 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:

  • Template Column: Represents a column that uses a DataTemplate to describe the content of each associated grid cell.
  • Boolean Column: A special DataGridTypedColumn implementation that presents boolean data.
  • Date Column: An extended DataGridTextColumn that presents data of type DateTime.
  • Numerical Column: Represents an extended DataGridTextColumn that presents numerical data(int and double types).
  • Text Column: Represents a column that converts the content of each associated cell to a System.String object.
  • 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.

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:

  • CellDecorationStyle (DataGridBorderStyle): Gets or sets the Style object that defines the background of each cell associated with this column. The TargetType property of the Style object is Rectangle.
  • CellDecorationStyleSelector (DataGridStyleSelector): Gets or sets the StyleSelector instance that allows for dynamic decoration on a per cell basis.
  • 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.

In order to enable the user edit mode of the RadDataGrid cell, set the RadDataGrid.UserEditMode="Cell".

Example

Here is an example containing all types of columns RadDataGrid control provides.

Use the following snippet to declare a RadDataGrid in XAML:

<telerikGrid:RadDataGrid x:Name="grid" 
         ItemsSource="{Binding Clubs}" 
         AutoGenerateColumns="False" 
         UserEditMode="Cell">
    <telerikGrid:RadDataGrid.Columns>
        <telerikGrid:DataGridTextColumn PropertyName="Name" 
                    HeaderText="Name">
            <telerikGrid:DataGridTextColumn.CellContentStyle>
                <telerikGrid:DataGridTextCellStyle TextColor="Green" 
                               FontSize="15" 
                               SelectedTextColor="Orange"  />
            </telerikGrid:DataGridTextColumn.CellContentStyle>
        </telerikGrid:DataGridTextColumn>

        <telerikGrid:DataGridNumericalColumn PropertyName="StadiumCapacity" 
                         HeaderText="Stadium Capacity"/>

        <telerikGrid:DataGridBooleanColumn PropertyName="IsChampion" 
                       HeaderText="Champion?"/>

        <telerikGrid:DataGridDateColumn PropertyName="Established" 
                    HeaderText="Date Established"/>

        <telerikGrid:DataGridPickerColumn PropertyName="Country"
                      HeaderText="Country"
                      ItemsSourcePath="Countries"/>

        <telerikGrid:DataGridTemplateColumn HeaderText="Template Column">
            <telerikGrid: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>
            </telerikGrid:DataGridTemplateColumn.CellContentTemplate>
        </telerikGrid:DataGridTemplateColumn>

        <telerikGrid:DataGridTimeColumn PropertyName="Time" 
                    HeaderText="Time Column"/>
    </telerikGrid:RadDataGrid.Columns>
</telerikGrid:RadDataGrid>

Where the telerikGrid namespace is the following:

xmlns:telerikGrid="clr-namespace:Telerik.XamarinForms.DataGrid;assembly=Telerik.XamarinForms.DataGrid"

The ViewModel class is declared as following:

public class ViewModel
{
    private ObservableCollection<Club> clubs;

    public ObservableCollection<Club> Clubs => clubs ?? (clubs = CreateClubs());

    private ObservableCollection<Club> CreateClubs()
    {
        return new ObservableCollection<Club>
    {
        new Club("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.

See Also

In this article
Not finding the help you need? Improve this article