It is possible to apply a row datatemplate to SfDataGrid ?

[Silvio]

Hi,

I'd like to use SfDataGrid to show a readonly list of records where the user can sort, filter and group records, but I'd like to implement my own datatemplate to show each record on each row of the datagrid.

I'm refererring to something similar to this:

https://wpftutorial.net/ListBoxDataTemplate.html

Is it possible to obtain such a functionality using SfDatagrid ?

Thank you,

Silvio Scattaglia

[Steve Schmutzler]

Hi Silvio,

well I think it is possible by using the GridTemplateColumn:

<Syncfusion:SfDataGrid x:Name="customersSfDataGrid" Margin="10" AutoGenerateColumns="False" RowHeight="80" AllowResizingColumns="True">
            <Syncfusion:SfDataGrid.Columns>
                <Syncfusion:GridImageColumn HeaderText="Bild" MappingName="Image" AllowSorting="False" />
                <Syncfusion:GridTemplateColumn HeaderText="Details" AllowSorting="False" >
                    <Syncfusion:GridTemplateColumn.CellTemplate>
                        <DataTemplate>
                            <StackPanel Orientation="Vertical">
                                <TextBlock Text="{Binding Abteilung}" FontWeight="Bold" FontSize="16" />
                                <TextBlock Text="{Binding Vorname}" FontStyle="Italic" FontSize="14" />
                                <TextBlock Text="{Binding Phone}" />
                            </StackPanel>
                        </DataTemplate>
                    </Syncfusion:GridTemplateColumn.CellTemplate>
                </Syncfusion:GridTemplateColumn>
            </Syncfusion:SfDataGrid.Columns>
        </Syncfusion:SfDataGrid>

Looks like this:

Best regards

Steve

[Muthukumar Kalyanasundaram]

Hi Steve, 

As per your update, you can use GridTemplateColumn to achieve your requirement. But in your code you didn’t set the MappingName for GridTemplateColumn. You should set the MappingName when defining columns because we did all operations (Sorting, Filtering, Grouping etc..) based on the MappingName only. 

<Syncfusion:GridTemplateColumn HeaderText="Details" AllowSorting="False" MappingName="Details" > 

      <Syncfusion:GridTemplateColumn.CellTemplate> 

              <DataTemplate> 

                    <StackPanel Orientation="Vertical"> 

                       <TextBlock Text="{Binding Abteilung}" FontWeight="Bold" FontSize="16" /> 

                       <TextBlock Text="{Binding Vorname}" FontStyle="Italic" FontSize="14" /> 

                       <TextBlock Text="{Binding Phone}" /> 

                    </StackPanel> 

              </DataTemplate> 

      </Syncfusion:GridTemplateColumn.CellTemplate> 

</Syncfusion:GridTemplateColumn> 

 

Please let us know if you have further assistance on this. 

Regards, 

Jai Ganesh S 

[Silvio]

Thank you guys for your help!

Silvio

[Gnanasownthari Thirugnanam]

Hi Silvio, 

Thank you for your update. 

Please let us know if you have any further assistance on this. 

Regards, 

Gnanasownthari T.