New to Telerik UI for .NET MAUI? Start a free 30-day trial

.NET MAUI DataGrid Columns Cell Templates

This article describes how to set the content and edit templates to the DataGrid column using the CellContentTemplate and CellEditTemplate properties.

  • CellContentTemplate (DataTemplate): Defines the appearance of each cell associated with the concrete column. CellContenTemplate gives you the opportunity to wrap the text inside each datagrid column. You can add a Label as a content of the Text, Template Column and wrap its text using the Label's LineBreakMode property.
  • CellEditTemplate (DataTemplate): Defines the editor associated with the concrete column. The CellEditTemplate is displayed when the cell is in edit mode.

Cell Content Template Example

  1. Use the following snippet to declare a RadDataGrid in XAML:

    <telerik:RadDataGrid x:Name="dataGrid" 
                       ItemsSource="{Binding Clubs}" 
                       AutoGenerateColumns="False" 
                       UserEditMode="Cell">
      <telerik:RadDataGrid.Columns>
          <telerik:DataGridTextColumn PropertyName="Name" 
                                      Width="100"
                                      SizeMode="Fixed"
                                      HeaderText="Name">
              <telerik:DataGridColumn.CellContentTemplate>
                  <DataTemplate>
                      <Label Text="{Binding Name}" 
                             LineBreakMode="TailTruncation"
                             VerticalOptions="Center"/>
                  </DataTemplate>
              </telerik:DataGridColumn.CellContentTemplate>
          </telerik:DataGridTextColumn>
          <telerik:DataGridBooleanColumn PropertyName="IsChampion" 
                                         HeaderText="Champion?">
              <telerik:DataGridColumn.CellContentTemplate>
                  <DataTemplate>
                      <Switch IsToggled="{Binding IsChampion}"
                              VerticalOptions="Center"/>
                  </DataTemplate>
              </telerik:DataGridColumn.CellContentTemplate>
          </telerik:DataGridBooleanColumn>
          <telerik:DataGridDateColumn PropertyName="Established" 
                                      HeaderText="Date Established">
              <telerik:DataGridColumn.CellContentTemplate>
                  <DataTemplate>
                      <telerik:RadDateTimePicker Date="{Binding Established}" 
                                                 DisplayStringFormat="yyyy/MMM/dd"
                                                 VerticalOptions="Center"/>
                  </DataTemplate>
              </telerik:DataGridColumn.CellContentTemplate>
          </telerik:DataGridDateColumn>
          <telerik:DataGridTemplateColumn HeaderText="Template Column">
              <telerik:DataGridColumn.CellContentTemplate>
                  <DataTemplate>
                      <Label Text="{Binding Country}" 
                             Margin="0, 5, 0, 5"
                             HorizontalOptions="Center"
                             VerticalTextAlignment="Center"/>
                  </DataTemplate>
              </telerik:DataGridColumn.CellContentTemplate>
          </telerik:DataGridTemplateColumn>
      </telerik:RadDataGrid.Columns>
    </telerik:RadDataGrid>
    
  2. And add the following namespaces:

    xmlns:telerik="http://schemas.telerik.com/2022/xaml/maui"
    
  3. 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("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")
        };
    }
    }
    
  4. And the Club custom object:

    public class Club : NotifyPropertyChangedBase
    {
    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" };
    }
    

    DataGrid Date Column with CellContentTemplate property and inside the template we have added a DateTime Picker control

DataGrid Cell Content Template

Cell Edit Template Example

  1. Use the following snippet to declare a RadDataGrid in XAML:

    <telerik:RadDataGrid x:Name="dataGrid" 
                       ItemsSource="{Binding Clubs}" 
                       AutoGenerateColumns="False" 
                       SelectionMode="None"
                       UserEditMode="Cell">
      <telerik:RadDataGrid.Columns>
          <telerik:DataGridTextColumn PropertyName="Name" HeaderText="Name">
              <telerik:DataGridColumn.CellEditTemplate>
                  <DataTemplate>
                      <VerticalStackLayout>
                          <Entry Text="{Binding Item.Name, Mode=TwoWay}" Margin="5">
                              <VisualElement.Behaviors>
                                  <telerik:RadEventToCommandBehavior EventName="Completed"
                                                                     Command="{Binding CommitEditCommand}" />
                              </VisualElement.Behaviors>
                          </Entry>
                          <Button Text="Cancel" Command="{Binding CancelEditCommand}" />
                      </VerticalStackLayout>
                  </DataTemplate>
              </telerik:DataGridColumn.CellEditTemplate>
          </telerik:DataGridTextColumn>
          <telerik:DataGridBooleanColumn PropertyName="IsChampion" 
                                         HeaderText="Champion?">
              <telerik:DataGridColumn.CellEditTemplate>
                  <DataTemplate>
                      <HorizontalStackLayout>
                          <Switch IsToggled="{Binding Item.IsChampion, Mode=TwoWay}" />
                          <Button Text="X" Command="{Binding CancelEditCommand}" />
                          <Button Text="OK" Command="{Binding CommitEditCommand}" />
                      </HorizontalStackLayout>
                  </DataTemplate>
              </telerik:DataGridColumn.CellEditTemplate>
          </telerik:DataGridBooleanColumn>
          <telerik:DataGridNumericalColumn PropertyName="StadiumCapacity">
              <telerik:DataGridColumn.CellEditTemplate>
                  <DataTemplate>
                      <telerik:RadDockLayout>
                          <Button Text="OK" Command="{Binding CommitEditCommand}" telerik:RadDockLayout.Dock="Right" />
                          <Button Text="X" Command="{Binding CancelEditCommand}"  telerik:RadDockLayout.Dock="Right"/>
                          <Slider Maximum="80000" Minimum="30000" 
                                  Value="{Binding Item.StadiumCapacity}" 
                                  HorizontalOptions="FillAndExpand" />
                      </telerik:RadDockLayout>
                  </DataTemplate>
              </telerik:DataGridColumn.CellEditTemplate>
          </telerik:DataGridNumericalColumn>
          <telerik:DataGridDateColumn PropertyName="Established" 
                                      CellContentFormat="{}{0: yyyy/MMM/dd}">
              <telerik:DataGridColumn.CellEditTemplate>
                  <DataTemplate>
                      <DatePicker Date="{Binding Item.Established, Mode=TwoWay}"
                                  Format="yyyy/MMM/dd"/>
                  </DataTemplate>
              </telerik:DataGridColumn.CellEditTemplate>
          </telerik:DataGridDateColumn>
          <telerik:DataGridTimeColumn PropertyName="Time">
              <telerik:DataGridColumn.CellEditTemplate>
                  <DataTemplate>
                      <TimePicker Time="{Binding Item.Time, Mode=TwoWay}"/>
                  </DataTemplate>
              </telerik:DataGridColumn.CellEditTemplate>
          </telerik:DataGridTimeColumn>
      </telerik:RadDataGrid.Columns>
    </telerik:RadDataGrid>
    
  2. And add the following namespaces

    xmlns:telerik="http://schemas.telerik.com/2022/xaml/maui"
    
  3. 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("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")
        };
    }
    }
    
  4. And the Club custom object:

    public class Club : NotifyPropertyChangedBase
    {
    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" };
    }
    

    DataGrid Boolean Column with CellEditTemplate property and inside the template we have added a switch, and two buttons. The edit template is visualized when the cell is in edit mode.

DataGrid Cell Edit Template

See Also

In this article
Not finding the help you need?