Click here to Skip to main content
15,867,453 members
Articles / Programming Languages / C#

Silverlight DataGrid with Dynamic Multiple Row Columns in Header

Rate me:
Please Sign up or sign in to vote.
3.86/5 (6 votes)
15 Dec 2008CPOL3 min read 93K   3.7K   29   11
Creating a dynamic header for the Silverlight DataGrid with multiple rows/columns.

Introduction

I was developing a product in 2006 and one of the requirements was to create a DataGrid with multiple columns and rows in the header. In my previous article Dynamic Multiple Row Column Grid Header, I have presented the idea I have used. The last few months, I was exploring Silverlight and I was wondering how the same can be achieved using the Silverlight DataGrid. I searched the internet looking for a solution, but couldn't find any. So I came up with a very crude way to do this. I am looking for a better solution. Also, another feature I wanted was to export the same in Excel. At this point, I don't know how to do that.

Background

So the goal of this experiment is to achieve the following output using the Silverlight DataGrid:

DynamicMutipleRowHeaderSilverlighGrid

I have used a similar technique described in my previous article to calculate the row and column spans of the headers. I am skipping the logic here. This time, I also need a footer. So the approach I have taken is that I will create a Grid of MxN size dynamically. M will be the number of header rows, plus 1 for the DataGrid, plus 1 for the footer. I.e., M = number of header rows + 2. N will be equal to the number of DataGrid columns. I will put the footer details in the last row of the grid, the DataGrid in the last but first row of the grid, and all the header items in the remaining rows with the appropriate row and col span.

Using the code

I have used the same three classes (described in the previous article) to parse the header string and create the collection to render.

  • DynamicHeaderCell
  • DynamicHeader
  • DynamicHeaders

I have added another class RowHeader, and instead of an ArrayList, I have used a list of RowHeaders to get the collection of header cells after parsing. I have added another class SalseData to get the necessary data. This class has four static methods:

  • GetSalseData - Data to display in the DataGrid
  • GetSalseDataHeader - The header string
  • GetSalseDataColumnHeader - To create the DataGrid columns
  • GetSalseDataFooter - Data to display in the footer

Hard coded strings are used in the above functions. In the real application, the methods can get the data from the database or any other source.

The XAML code is simple as generated by Visual Studio. All the work is done dynamically in the code-behind.

The following member variables are defined in the code-behind:

C#
DataGrid grdData = new DataGrid() { AutoGenerateColumns = false };
bool bGridInitialized = false;
List<RowHeader> Headers = null;

Three methods are defined in the code-behind:

  • InitUI
  • grdData_LayoutUpdated
  • AddHeaderTextBlock

In the method InitUI():

  1. The header is parsed and stored in the Headers collection:
  2. C#
    String[] ColHeaders = SalseData.GetSalseDataColumnHeader().Split(',');
    Headers = dynHead.ParseHeader();
  3. The DataGrid columns are created and the data source added:
  4. C#
    foreach (String col in ColHeaders)
    {
        String[] colHeader = col.Split('|');
        grdData.Columns.Add(new DataGridTextColumn { Header = colHeader[0], 
        Binding = new System.Windows.Data.Binding(colHeader[1]), 
        IsReadOnly = true });
    }
    grdData.ItemsSource = SalseData.GetSalseData();
  5. The grid rows are created.

In the method grdData_LayoutUpdated():

  1. The grid columns are created:
  2. C#
    for (int i = 0; i < grdData.Columns.Count; i++)
    {
        DataGridColumn dgc = grdData.Columns[i];
        LayoutRoot.ColumnDefinitions.Add(...);
    }
  3. The AddHeaderTextBlock method is called to add the header and the footer text.
  4. The DataGrid is positioned.

In the method AddHeaderTextBlock():

  1. A border with proper border thickness and a text block with a header text are added to the appropriate cell of the grid.

History

  • Initial version.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


Written By
Architect Fountainhead Software Solutions Private Limited
India India
This member has not yet provided a Biography. Assume it's interesting and varied, and probably something to do with programming.

Comments and Discussions

 
Questionheader error Pin
xiaoweixiong115-Jan-15 15:42
xiaoweixiong115-Jan-15 15:42 
AnswerRe: header error Pin
xiaoweixiong115-Jan-15 15:49
xiaoweixiong115-Jan-15 15:49 
Question"Dynamic" Pin
ezequiasrocha28-Mar-13 2:58
ezequiasrocha28-Mar-13 2:58 
AnswerRe: "Dynamic" Pin
Somnath Pal28-Mar-13 3:25
Somnath Pal28-Mar-13 3:25 
GeneralMy vote of 5 Pin
flexmis16-Aug-12 22:14
flexmis16-Aug-12 22:14 
GeneralMy vote of 5 Pin
toc.morf27-Feb-12 19:48
toc.morf27-Feb-12 19:48 
GeneralMy vote of 4 Pin
davushik10-Nov-10 1:47
davushik10-Nov-10 1:47 
GeneralIt works for me Pin
diego mesa tabares10-Jun-10 7:56
diego mesa tabares10-Jun-10 7:56 
GeneralMy vote of 2 Pin
GraysonMitchell3-Jun-10 13:35
GraysonMitchell3-Jun-10 13:35 
GeneralNow if you could only... Pin
Dewey16-Dec-08 20:25
Dewey16-Dec-08 20:25 
GeneralRe: Now if you could only... Pin
Somnath Pal16-Dec-08 22:34
Somnath Pal16-Dec-08 22:34 
I have already mentioned that it is a very crude way of doing and I am looking for a better solution.
However, I was curios and tried to measure the time taken. I added a text block in the xaml code and put the following in the code behind

At the beginning of InitUI()
infoLbl.Text = "Start Time - " + DateTime.Now.ToString();
At the end of grdData_LayoutUpdated()
infoLbl.Text = infoLbl.Text + " End Time - " + DateTime.Now.ToString();


I tried 30 columns and 30 rows and it took 4 seconds
I tried 50 columns and 50 rows and it took 10 seconds

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.