Tsvetan's blog

Can your grid control do this? Part II

Tsvetan Raykov — Wed, 26 Nov 2008 17:00:00 GMT

In my previous post I told you about the new interesting feature in RadGridView for WinForms - Row Layout customization. I also promised to provide some additional details about this feature, so here they are.

The view definition in RadGridView not only changes the row layout, it specifies the behavior and the appearance of the grid. All view definitions implement the IViewDefinition interface and you could create your own definitions, if you wish. To change the default view definition in RadGridView you need just to set the ViewDefinition property:

this.radGridView1.ViewDefinition = myViewDefinition;

We have included three different view definitions in our Q3 release. They are: TableViewDefinition, ColumnGroupsViewDefinition and HtmlViewDefinition. We plan to extend their functionality and to add new view definitions (for example the long awaited card view) in near future. Currently there is no graphical tool to customize them, but you should use code to do the magic. We are currently working on a graphical designer for this feature and it will be revealed soon.

Now let me explain how to use the different view definitions:

The TableViewDefinition is the default view. It contains all features of the standard table presentation that existed in the old RadGridView. The data is presented like a table and you can reorder, hide and pin columns. This is a typical table view:

ColumnGroupsViewDefinition - As its name suggests, this view enables grouping of columns. Every column group can have an unlimited number of sub groups or rows containing columns. To start using this view definition you need to add some groups:

ColumnGroupsViewDefinition view = new ColumnGroupsViewDefinition();

view.ColumnGroups.Add(new GridViewColumnGroup("Customer"));
view.ColumnGroups.Add(new GridViewColumnGroup("Details"));
view.ColumnGroups[1].Groups.Add(new GridViewColumnGroup("Address"));
view.ColumnGroups[1].Groups.Add(new GridViewColumnGroup("Contact"));

Then add at least one row which to contain the desired columns:

view.ColumnGroups[0].Rows.Add(new GridViewColumnGroupRow());
view.ColumnGroups[0].Rows[0].Columns.Add(this.radGridView1.Columns["ID"]);
view.ColumnGroups[0].Rows[0].Columns.Add(this.radGridView1.Columns["Name"]);
view.ColumnGroups[0].Rows[0].Columns.Add(this.radGridView1.Columns["Family"]);

Here is the result:

Of course, the ColumnGroupsViewDefinition enables resizing of column groups:

HtmlViewDefinition - The name of this view may lead to some confusion. No, RadGridView doesn't support html rendering, and we don't have plans to support it. Nevertheless, this view enables using row layout similar to the one existing in html tables. In fact, you can take an existing html table and use its html code in RadGridView. Sometimes this can save a lot of work. Just change the cell text to be the unique name of the desired column.

To use the HTML view just add rows and cells:

HtmlViewDefinition view = new HtmlViewDefinition();

view.RowTemplate.Rows.Add(new RowDefinition());
view.RowTemplate.Rows.Add(new RowDefinition());

view.RowTemplate.Rows[0].Cells.Add(new CellDefinition("ID"));
view.RowTemplate.Rows[0].Cells.Add(new CellDefinition("Name"));
view.RowTemplate.Rows[0].Cells.Add(new CellDefinition("City"));
view.RowTemplate.Rows[0].Cells.Add(new CellDefinition("Country"));
view.RowTemplate.Rows[1].Cells.Add(new CellDefinition("Phone"));

Then we could specify some row and column spans:
view.RowTemplate.Rows[0].Cells[2].RowSpan = 2;
view.RowTemplate.Rows[0].Cells[3].RowSpan = 2;
view.RowTemplate.Rows[1].Cells[0].ColSpan = 2;

The code above can be replaced with the following html:

<table>
 <tr>
   <td>ID</td>
   <td>Name</td>
   <td rowspan=""2"">City</td>
   <td rowspan=""2"">Country</td>
 </tr>
 <tr>
   <td colspan=""2"">Phone</td>
 </tr>
</table>

You should use the ReadXml method of HtmlViewDefinition to load the definition.

And the result:

Note: I should point out that we support only a small piece of the functionality of the real html table. For example we don't support table headers or CSS.

These are our first steps in customizing row layouts and we intend to extend the functionality in our upcoming releases. Therefore, your feedback is highly appreciated. Any ideas, comments or suggestions are welcome.

Can your grid control do this?

raikov — Wed, 12 Nov 2008 13:00:00 GMT

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:

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:

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:

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.

Tips & tricks: Grouping in RadGridView for WinForms

raikov — Fri, 05 Sep 2008 03:05:14 GMT

Hi all, my name is Tsvetan Raykov and I'm a developer on the WinForms RadGridView team. With this post I am starting a thread that will explain some of the great, but less known features of RadGridView for WinForms.

One of the commonly used features in RadGridView is Grouping. Many of our users have requested having the option to change its default format and appearance. This is finally possible in the latest Q2 2008 version and I am going to cover the formatting basics in this post. The example and code shown here are available for download at the bottom of this post.

Creating Groups

Let's start with the obvious - creating groups. In order to group the grid, you need to add at least one GridGroupByExpression:

GridGroupByExpression expression = 
 new GridGroupByExpression("City GroupBy City");
this.radGridView1.MasterGridViewTemplate.GroupByExpressions.Add(expression);

In our example we have added grouping by city:

Formatting the Group Headers

By default, RadGridView comes with preset group header formatting. However, it is simple to change it by using the FormatString property of the expression:

expression.DefaultFormatString = "Group by: {0}, Value: {1}";

where the {0} parameter of the format string is the name of the column that is grouped, and the {1} parameter is the value. If you want to have full control of what is displayed in the group headers, you should process the GroupSumaryEvaluate event:

void radGridView1_GroupSumaryEvaluate(object sender, 
    GroupSummaryEvaluationEventArgs e)
{
     e.FormatString = "" + e.Value + " has " + e.Group.RowCount + " row(s).";
}

To change the group header visual appearance, we can use the ViewRowFormatting event:

void radGridView1_ViewRowFormatting(object sender, RowFormattingEventArgs e)
{
 if (e.RowElement is GridGroupHeaderRowElement)
    {
 if (e.RowElement.IsCurrent)
        {
            e.RowElement.GradientStyle = Telerik.WinControls.GradientStyles.Solid;
            e.RowElement.BackColor = Color.FromArgb(255, 255, 198);
            e.RowElement.DrawFill = true;
        }
 else
        {
            e.RowElement.DrawFill = false;
        }
    }
}

The image below shows the changed grouping style:

Group Summaries

It is also possible to present more complex information in the group header by using Group Summaries. For example we can show the sum of the values of a specific column inside the group. To do this we need to add a GridViewSummaryItem that will calculate the sum:

this.radGridView1.MasterGridViewTemplate.SummaryRowGroupHeaders[0].
     Add(new GridViewSummaryItem("Experience", "; sum {0}", GridAggregateFunction.Sum));

Now we can do a little trick and get the calculated value by iterating through the Aggregates collection of the DataGroup:

void radGridView1_GroupSumaryEvaluate(object sender, GroupSummaryEvaluationEventArgs e)
{
 if (e.SummaryItem.FieldName == "Experience")
    {
        e.FormatString = " ";
    }
 else if (e.SummaryItem.FieldName == "City")
    {
 decimal sum = 0;
 foreach (Aggregate aggregate in e.Group.Aggregates)
        {
 if (aggregate.AggregateFunction == GridAggregateFunction.Sum 
                    && aggregate.FieldName == "Experience")
            {
                sum = (decimal)aggregate.Value;
            }
        }
 if (e.Group.RowCount == 1)
        {
            e.FormatString = string.Format(
 "{0} team has one member and his work experience is {1} year(s).",
       e.Value, sum);
        }
 else
        {
            e.FormatString = string.Format(
 "{0} team contains {1} members with summary work experience of {2} year(s).",
       e.Value, e.Group.RowCount, sum);
        }
    }
}

And here is the result:

You can download the source files from here .

I know this feature will be very useful to many of you, so I'll be very happy to have your feedback.