Click here to Skip to main content
Click here to Skip to main content

Advanced DataGrid Formating with ItemDataBound

, 14 Mar 2005
Rate this:
Please Sign up or sign in to vote.
Use ItemDataBound to spice up your DataGrid and have it look cool.

Sample image

Introduction

I was looking to produce DataGrids that had the same functionality as printed reports and that looked like some very expensive reporting management systems I was tasked with replacing, with .NET. The end product had to draw the users' attention to the data they wanted, not fluff the user with extra fields and details. This article helps you get started, in using a few simple tricks to spice up the look and feel of your DataGrids.

I'll show you how to:

  • Create groupings for columns
  • Highlight sub totals and grand totals
  • Highlight single cells based on data values

SQL Data and Database

I used Northwind and SQL Server DB to produce the data for this article with a sub total for each product category and a grand total at the end. The code will work for any data source. I have included the SQL stored procedure for those who are interested in recreating exactly what's shown.

I tend to do nearly all my business logic on the database side and use the DataGrid for display purposes, so all sorting and totals are done here.

CREATE PROCEDURE usp_sales_by_cate AS

create table #temp ( Sorty int, CategoryName varchar(50), 
                  ProductName varchar(50), ProductSales real)

-- Get Base Sales
INSERT INTO #temp
SELECT 0, dbo.Categories.CategoryName, dbo.Products.ProductName, 
SUM(dbo.[Order Details Extended].ExtendedPrice) 
AS ProductSales
FROM dbo.Categories INNER JOIN
dbo.Products INNER JOIN
dbo.Orders INNER JOIN
dbo.[Order Details Extended] ON dbo.Orders.OrderID = 
             dbo.[Order Details Extended].OrderID ON 
dbo.Products.ProductID = 
  dbo.[Order Details Extended].ProductID ON dbo.Categories.CategoryID = 
                                   dbo.Products.CategoryID
WHERE (dbo.Orders.OrderDate BETWEEN '19970101' AND '19971231')
GROUP BY dbo.Categories.CategoryName, dbo.Products.ProductName
ORDER BY dbo.Categories.CategoryName

-- Build SubTotal
INSERT INTO #temp
SELECT 1 , CategoryName, 'SubTotal', sum( ProductSales)
from #temp

group by CategoryName
-- Build Grand Total
INSERT INTO #temp
SELECT 2 , 'XXXXX', 'Grand Total', sum( ProductSales)
from #temp  
Where sorty = 0  

-- Display Values
SELECT CategoryName, ProductName, ProductSales from #temp
order by CategoryName, Sorty

Creating Groupings

What I don't want is that every category be displayed on every first column, I only want the category to be displayed when it changes. This gives a nice and clean look to the DataGrid, allowing users to find items easily and quickly.

First, I create a public variable that will work across the whole page, and more importantly, remember something each time the <Itemdatabound> is run for each row of the DataGrid. On Page Load, it is also preset (I've had a few strange issues not doing this).

public class WebForm1 : System.Web.UI.Page
{
  public string LastColumn;
..
..

private void Page_Load(object sender, System.EventArgs e)
{
// Set LastColumn to blank. 
if (!IsPostBack) LastColumn = "";

Then I use the <LastColumn> variable to track the changes in the data being written to the DataGrid. If the cell value for cell[0] has not changed, the text of the cell is deleted and the border of the cell is removed:

e.Item.Cells[0].Style.Add("BORDER", "none").

To ignore the DataGrid header:

if( ( e.Item.ItemType.ToString()!= "Header"))
       {.....

This can also be used for items, alternative items and footers on a DataGrid to specialize your code.

Below is the full code to group the first column on the DataGrid.

private void DataGrid1_ItemDataBound(object sender, 
       System.Web.UI.WebControls.DataGridItemEventArgs e)
{
         //Get the current column 0 text
            string CurrentColumn = e.Item.Cells[0].Text;

     // Skip Headers 
     if( ( e.Item.ItemType.ToString()!= "Header"))
       {
            // Has there been a change 
           if (CurrentColumn == LastColumn)
             {
               // No Change in Column 0 
               //blank and remove boarder
               e.Item.Cells[0].Text = "";
               e.Item.Cells[0].Style.Add("BORDER", "none"); 
             }
           else
               {
                 // this is the first of the series
                 // set LastColumn to current colums
                 LastColumn = CurrentColumn;
                // Add a little back colour to the Cell[0]
                e.Item.Cells[0].BackColor = 
                              System.Drawing.Color.WhiteSmoke;
               }
}

Highlighting Subtotals and Grand Totals

This is fairly simple, it tests if cell text is "Sub Total" / "Grand Total", then sets the font, bold, colors etc. to what you want.

// Check to see if its a SubTotal
string MyCol2 = e.Item.Cells[1].Text;

if (MyCol2 == "SubTotal")
  {
    e.Item.Font.Bold = true;
    e.Item.BackColor = Color.DimGray;
    e.Item.ForeColor = Color.White;

   // blank out Column 0 so its approves 
    e.Item.Cells[0].Text = "";
    e.Item.Cells[0].Style.Add("BORDER", "none"); 
    e.Item.Cells[0].BackColor = Color.Transparent;
  }

if (MyCol2 == "Grand Total")
   {
     e.Item.Font.Bold = true;
     e.Item.BackColor = Color.Red;
     e.Item.ForeColor = Color.White;
     e.Item.Cells[0].Style.Add("BORDER", "none"); 
     e.Item.Cells[0].BackColor = Color.Transparent;
}

Highlighting Single Cells

I use this all the time to show negative values in red (the way accountants like them). I find that parsing string to a number can produce some weird errors so I generally wrap it in a try, catch to ignore any errors that may crop up.

// Make some items standout if below 5000 in sales
string MyStr = e.Item.Cells[2].Text;

try
{
    double MyValue = double.Parse(MyStr);
      
    if (MyValue < 5000 )
    {
        e.Item.Cells[2].ForeColor = Color.Red;
        e.Item.Cells[2].Font.Bold = true;
    }
}
catch(Exception)
{
  // its not a valid number
}

That's the end, hope you like it, if you have any questions or queries please ask.

History

V10.0 11th-March-2005

License

This article has no explicit license attached to it but may contain usage terms in the article text or the download files themselves. If in doubt please contact the author via the discussion board below.

A list of licenses authors might use can be found here

Share

About the Author

Frank Kerrigan
Software Developer (Senior)
United Kingdom United Kingdom
Frank Kerrigan
 
Currently developing Insurance systems with SQL Server, ASP.NET, C#, ADO for a company in Glasgow Scotland. Very keen on OOP and NUNIT testing. Been in IT forever (20 years) in mix of development and supporting applications / servers. Worked for companies big and small and enjoyed both.
 
Developed in (newest first) : C#, Progress 4GL, ASP.NET, SQL TSQL, HTML, VB.NET, ASP, VB, VBscript, JavaScript, Oracle PSQL, perl, Access v1-2000, sybase/informi, Pic Controllers, 6502 (ask your dad).
 
Msc .Net Development Evenings www.gcu.ac.uk
MCAD Passed
MCP C# ASP.NET Web Applications
MCP SQL Server 2000
HND Computing
OND / HNC Electrical Engineering,
Follow on   Twitter

Comments and Discussions

 
GeneralMy vote of 5 Pinmembermanoj kumar choubey15-Mar-12 20:48 
QuestionMy vote of 5 Pinmemberalican_23-Jun-11 4:11 
AnswerRe: My vote of 5 PinmemberFrank Kerrigan11-Oct-11 5:08 
GeneralMake a particular value Bold PinmemberNirene24-Jul-08 23:21 
GeneralVery Very Useful... Pinmembervisitraajes17-Jun-08 4:02 
GeneralRe: Very Very Useful... PinmemberFrank Kerrigan17-Jun-08 4:22 
GeneralI wrote a similar article about Nested GridView controls Pinmemberazamsharp24-Jan-08 16:10 
Questionthanks alot and i have another question PinmemberMJ.MF2-Nov-07 8:03 
Questionan advanced datagrid PinmemberMJ.MF31-Oct-07 23:00 
AnswerRe: an advanced datagrid PinmemberFrank Kerrigan1-Nov-07 12:26 
QuestionChange Header Change Pinmember| Muhammad Waqas Butt |13-Jul-07 21:13 
Generalpls help PinmemberLee Chin Meng23-Apr-07 17:41 
Questionhow can Implements my Functional? [modified] Pinmemberjame_peng15-Oct-06 2:54 
AnswerRe: how can Implements my Functional? PinmemberFrank Kerrigan20-Nov-06 5:53 
GeneralRe: how can Implements my Functional? PinmemberColin Angus Mackay6-Dec-06 3:22 
GeneralRe: how can Implements my Functional? PinmemberFrank Kerrigan6-Dec-06 3:24 
GeneralGreat Article PinmemberparasJ4-Apr-06 19:16 
Questionhow about in VB PinmemberGuerven8-Mar-06 14:21 
AnswerRe: how about in VB PinmemberFrank Kerrigan9-Mar-06 8:45 
QuestionFormating the currency data PinmemberHendrik (Chrysonite)19-Jan-06 23:22 
AnswerRe: Formating the currency data PinmemberJJ Saito17-Jan-07 8:42 
Generalproject Pinmembersood_is_in5-Jan-06 0:57 
GeneralRe: project PinmemberFrank Kerrigan5-Jan-06 13:20 
GeneralBetter way to highlight cells PinsussAnonymous27-Jul-05 4:02 
GeneralGreat Article! PinmemberChingB30-May-05 23:20 

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

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

| Advertise | Privacy | Mobile
Web01 | 2.8.141015.1 | Last Updated 14 Mar 2005
Article Copyright 2005 by Frank Kerrigan
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid