Telerik blogs

 0

 

In “First Look at Silverlight 2” Scott Gu showed how easy is to change the visual appearance of a Silverlight application using the standard features of the Silverlight Grid control:

2

While reading the blog, it occurred to me that it would be very easy to achieve similar effects with RadGridView for WinForms. With the latest version of RadGridView you can change the row layout using different view definitions in a very simplistic and easy way:

 

layouts

 

Using parts and ideas from Scott’s article, I compiled a small application that gets a list of article from digg.com via web services and shows them in RadGridView similar to the way Scott does it:

1

To achieve this effect I used the new HTML view definition in RadGridView. It positions grid cells exactly like in an HTML table. Actually, it can read and parse tables in HTML-like syntax, which simplifies and shortens the process of specifying the grid layout (and no, we don't plan to extend this feature to support full HTML syntax).

To create the example I defined the row layout:

string rowLayout = @"<table>
<tr>
<td colspan="
"3"">title</td>
</tr>
<tr>
<td rowspan="
"2"">diggs</td>
<td>description</td>
<td>image</td>
</tr>
<tr>
<td>author</td>
<td>link</td>
</tr>
</table>"
;

HtmlViewDefinition definition = new HtmlViewDefinition();
using (MemoryStream ms = new MemoryStream(ASCIIEncoding.Default.GetBytes(rowLayout)))
{
definition.RowTemplate.ReadXml(ms);
}

 

Afterwards, assigning the view definition to RadGridView is simple. You need just to set the ViewDefinition property after setting the DataSource:

this.radGridView1.DataSource = table;
this.radGridView1.ViewDefinition = definition;

Additionally I used code to set different row heights and to modify some column properties:

definition.RowTemplate.Rows[0].Height = 35;
definition.RowTemplate.Rows[1].Height = 80;
definition.RowTemplate.Rows[2].Height = 30;

 
I also disabled some features like column headers and added formatting to some cells in order to achieve a better visual effect. Please, take in consideration that I am not a designer.

You can download the application and the source code from here.

In my next blog post I will give you more details on how to use view definitions in RadGridView. I hope that this feature will be useful for many of you. Any feedback you have is welcome.


About the Author

Nikolay Diyanov

Diyanov is the Product Manager of the Native Mobile UI division at Progress. Delivering outstanding solutions that make developers' lives easier is his passion and the biggest reward in his work. In his spare time, Nikolay enjoys travelling around the world, hiking, sun-bathing and kite-surfing.

Find him on Twitter @n_diyanov or on LinkedIn.

Comments

Comments are disabled in preview mode.