[Solved] - How to add custom Column (icon and text) on Datagrid!

[The GridLock]

Hi ,

This photo is exactly what I need to do! It would be great if you could give me a template similar to this.

Thanks you !

[Vijayarasan Sivanandham]

Hi Khanh Dang,

Thank you for contacting Syncfusion support. 

Your requirement can be achieved by customizing the SfDataGrid.QueryImageCellStyle event by using GridImageColumn in SfDatGrid. Please refer the below code snippet,


 

 

this.sfDataGrid.Columns.Add(new GridImageColumn() { MappingName = "Trustworthiness", HeaderText = "Trustworthiness" }); 

sfDataGrid.QueryImageCellStyle += SfDataGrid_QueryImageCellStyle;

private void SfDataGrid_QueryImageCellStyle(object sender, QueryImageCellStyleEventArgs e) 

        { 

            var employee = (Employee)e.Record; 

 

            if (e.Column.MappingName == "Trustworthiness") 

            { 

                if (employee.Trustworthiness.ToString() == "Sufficient") 

                { 

#if NETCORE 

                    e.Image = (Image.FromFile("../../../Images/Sufficient.png")); 

#else 

                    e.Image = (Image.FromFile(@"..\..\Images\Sufficient.png")); 

#endif 

                    e.DisplayText = (e.Record as Employee).Trustworthiness.ToString(); 

                    e.TextImageRelation = TextImageRelation.ImageBeforeText; 

                } 

                else if (employee.Trustworthiness.ToString() == "Insufficient") 

                { 

#if NETCORE 

                    e.Image = (Image.FromFile("../../../Images/Insufficient.png")); 

#else 

                    e.Image = (Image.FromFile(@"..\..\Images\Insufficient.png")); 

#endif 

                    e.DisplayText = (e.Record as Employee).Trustworthiness.ToString(); 

                    e.TextImageRelation = TextImageRelation.ImageBeforeText; 

                } 

                else if (employee.Trustworthiness.ToString() == "Perfect") 

                { 

#if NETCORE 

                    e.Image = (Image.FromFile("../../../Images/Perfect.png")); 

#else 

                    e.Image = (Image.FromFile(@"..\..\Images\Perfect.png")); 

#endif 

                    e.DisplayText = (e.Record as Employee).Trustworthiness.ToString(); 

                    e.TextImageRelation = TextImageRelation.ImageBeforeText; 

                } 

            }
} 

             

Sample Link: https://www.syncfusion.com/downloads/support/forum/153880/ze/Sample1303424255

We hope this helps. Please let us know, if you require further assistance on this. 

Regards,
Vijayarasan S 

[The GridLock]

Hi Vijayarasan,

I didn't think this was a sample file! perfect as expected.

Thanks!

[Vijayarasan Sivanandham]

Hi Khanh Dang,

We are glad to know that the reported issue has been resolved. Please get back to us if you have any other queries. As always, we will happy to assist you😊

Regards,
Vijayarasan S