We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Display data in Row format and row customization

Hi Team,

I want to display data in row manner. But, right now, it displays in column. Is there any direct property available to achieve this requirement?

Below are the list of requirements we have and kindly do the needful.


1. Display data in Row format.
2. Set Header to the rows and apply BackgroundColor (Black color in attached screenshot) to it.
3. Set BackgroundColor to particular row content only (Gray color in attached screenshot).

Please find the attached screenshot which explains all the required things.

Saravana Pandian M.

Attachment: GridReq_RowFormat_d55a82f4.zip

5 Replies

DY Deivaselvan Y Syncfusion Team March 8, 2019 06:45 AM

Hi Rohith,

Please refer the below articles to customize the RowHeader and set Background color to the specific row based on conditions.

Customize the RowHeader:

Apply Style to the specific row based on condition:

Please let us know if this helps you to achieve your requirement.


RK Rohith Kunchamwar March 12, 2019 01:51 PM

Hi Deivaselvan,

Thanks for the update. But, you forget to address my first query (Display data in Row format). Can you please update us with the sample which should contain all the three requirements which are said in my previous update ?

Once again, here I explain my requirement in detail.

I have three data collections (Color code, XValue, YValue). So, I want to bind these three collection and display it in three rows instead of displaying it in columns.

I also know that, using SfDataGrid, I can bind the values to GridTextColumn and display them in column format. But, here i need to display data in row format.

Note: Look into the attached screenshot (Previous update).

Saravana Pandian M.

DY Deivaselvan Y Syncfusion Team March 13, 2019 07:38 AM

Hi Rohith, 

We have analyzed your query to display data in row format and you can achieve this by customizing the style of SfDataGrid, GridCell and GridHeaderCellControl. Please refer to the below KB link for more details 

KB Link: 

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


RK Rohith Kunchamwar March 19, 2019 07:59 AM

Hi Deivaselvan,

Thanks for the update. Now, we are able to display datagrid in row manner after we went through the provided KB article. But, right now we are facing an issue which is  UI alignment oriented.


I have a Grid (Framework control) view (Parent view) in which I render both the Syncfusion chart and datagrid (row manner) controls.
Now, I have hamburger menu. While clicking on this, a view will be opened from the left side and at the same time, we are adjusting the parent grid.
While adjusting the parent gird, chart control adjusts its content properly whereas datagrid adjusts its content improperly.

To resolve this issue, I would like to have a web meeting. Could you please arrange meeting by tommorrow 3PM IST.


DY Deivaselvan Y Syncfusion Team March 20, 2019 02:01 AM

Hi Rohith,

Thanks for the update.

We will be available for the web meeting on today as you requested. Meeting invitation will be share with you shortly in the incident which you created in your account for this issue. You can track that incident for the further follow-up.


Live Chat Icon For mobile
Up arrow icon