Hello,

You can style the DataGrid's rows by setting a combination of RowBackgroundStyle, AlternateRowBackgroundStyle and RowSelectionStyle. Then, you can customize the style of cell content using the column's CellStyle properties. Take a look at the QSF DataGrid Customization Example. You can load the entire QSF application installed on your PC or jump directly to the DataGrid examples on GitHub.

Special Customization Demo

Looking at your screenshot, it would take a bit of customization work and TemplateColumns to override the default Grid structure because there's no property to space out the rows. I'm not sure you'd get the same exact result as you have on the web. 

You would make all of the default style Transparent and build your own cell templates that have their own border elements that curve like that.

For example:



When it comes to getting the rows to have a wrap around curved border, this will take some custom design work. Custom app design falls outside the scope of Telerik support, however, I've been able to go outside those bounds and provide you with a prototype (attached) you can use to get started with. 

You could try using the RadBorder to create a custom shape for each cell:

- First column would have a C shape
- All the middle columns only have border thickness at the top and bottom
- Last column would have a backwards C shape

For example:





And here's the custom prototype at runtime:




Wrapping Up

Hopefully this helps you move towards an acceptable solution. Keep tweaking the row styles, header styles, custom cell templates.

If I have answered your question, you can let me know by using the ticket's "Mark as resolved" button. If you have any questions about the properties of the DataGridRowStyle or HeaderStyle objects, feel free to open a new ticket so that the DataGrid engineers can assist further.



Regards,
Lance | Tech Support Engineer, Sr.
Progress Telerik