How to load custom views in SfDataGrid cells?

1 min read

SfDataGrid allows you to host any view(s) inside a cell by setting the GridTemplateColumn.CellTemplate property of GridTemplateColumn.

Refer the below code example in which an Image and a Label is loaded inside the CellTemplate of GridTemplateColumn. The underlying data object is the binding context for the Image and Label inside the CellTemplate.

 
//Hosting an Image and a Label in Template Column
<syncfusion:SfDataGrid.Columns>
  < syncfusion:GridTemplateColumn MappingName=" FirstName">
    < syncfusion:GridTemplateColumn.CellTemplate>
      <DataTemplate>
        <Grid>
            <Grid.ColumnDefinitions>
              <ColumnDefinition Width="Auto" />
              <ColumnDefinition Width="*" />                                                                    
            </Grid.ColumnDefinitions>
            <Image Grid.Column="0"
                          x:Name="image"
                          Source="{Binding Image}"
                          HeightRequest="30"
                          WidthRequest="30"/>
            <Label Text="{Binding FirstName}"
                        Grid.Column="1"
                        TextColor="Blue" 
                        HorizontalOptions="Center" 
                        VerticalOptions="Center"/>
          </Grid>
      </DataTemplate>
    </ syncfusion:GridTemplateColumn.CellTemplate>
  </ syncfusion:GridTemplateColumn>
</ syncfusion:SfDataGrid.Columns>

The following screenshots shows the final outcome when the above code is executed.

$D:\PostProcessing Work\customview image\Capture4.PNG$

You can download a working sample for this KB here.

Did you find this information helpful?

Yes

Comments (0)

How to load custom views in SfDataGrid cells?

Access denied