How to make Column with image(icon) and text

[David Suarez]

Hi,

I went through all the documentation on Datagrid columns, but still, can't figure out is there a possibility to make a column that has an icon before the text, I'm trying to do something like this:

Also, I've found a very similar question with an answer, but unfortunately for me, it was for WinForms not for the WPF solution.

https://www.syncfusion.com/forums/153880/solved-how-to-add-custom-column-icon-and-text-on-datagrid

[Vijayarasan Sivanandham]

Hi David Suarez,

Thank you for contacting Syncfusion Support.

Your requirement can be achieved by loaded the Image and TextBlock has CellTemplate in GridTemplateColumn in SfDataGrid. Please refer the below code snippet,

XAML Code Snippet: 

<syncfusion:GridTemplateColumn MappingName="Trustworthiness" HeaderText="Trustworthiness"> 

                    <syncfusion:GridTemplateColumn.CellTemplate> 

                        <DataTemplate> 

                            <Grid Margin="3"> 

                                <Grid.ColumnDefinitions> 

                                    <ColumnDefinition  Width="15"/> 

                                    <ColumnDefinition/> 

                                </Grid.ColumnDefinitions> 

                                <Image Source="{Binding Trustworthiness, 

                                                                Converter={StaticResource trustImageConverter}}" 

                                               Height="15"      Width="15"          Grid.Column="0"/> 

                                <TextBlock Text="{Binding Trustworthiness}" Padding="4"  

                                                   VerticalAlignment="Center"       Grid.Column="1"/> 

                            </Grid> 

                        </DataTemplate> 

                    </syncfusion:GridTemplateColumn.CellTemplate> 

                    <syncfusion:GridTemplateColumn.EditTemplate> 

                        <DataTemplate> 

                            <TextBox Text="{Binding Trustworthiness}" Padding="4"  

                                                   VerticalAlignment="Center"       Grid.Column="1"/> 

                        </DataTemplate> 

                    </syncfusion:GridTemplateColumn.EditTemplate> 

</syncfusion:GridTemplateColumn> 

C# Code Snippet: 

internal class TrustImageConverter : IValueConverter 

{         

        object IValueConverter.Convert(object value, Type targetType, object parameter, CultureInfo info) 

        { 

            if (value == null || string.IsNullOrEmpty(value.ToString())) 

                return null;             

            else  

                return @"Images/"+ value.ToString()+".png";            

        } 

         

        object IValueConverter.ConvertBack(object value, Type targetType, object parameter, CultureInfo info) 

        { 

            throw new NotImplementedException(); 

        } 

} 

Sample Link: https://www.syncfusion.com/downloads/support/forum/168627/ze/Sample-88826598 

For more information related to GridTemplateColumn, please refer the user guide documentation, 

UG Link: https://help.syncfusion.com/wpf/datagrid/column-types#gridtemplatecolumn 

Please let us know if you have any concerns in this.

Regards,
Vijayarasan S 

[David Suarez]

Thank you, for the solution, this helped me =)

[Vijayarasan Sivanandham]

Hi David Suarez,

Thanks for the update.

We are glad to know that the reported problem has been resolved at your end. Please let us know if you have any further queries on this. We are happy to help you😊.

Regards,
Vijayarasan S