Clearing a populated GridView control can be done in just 3 lines of code. Create an empty DataTable and then bind it to the Gridview.

DataTable dt = new DataTable();
GridView1.DataSource = dt;
GridView1.DataBind();

Labels: GridView

Yesterday I stumbled upon Ryan Scherf's Table Row and Column Highlighting. It's a slick solution to helping users read tabular data. I thought it would be nice to add that functionality to the ASP.NET. So I created a single function that would add Ryan's column and row highlighting code to our GridView control.

Before proceeding, take a look at the demo page.

Files Needed

On Ryan's demo site, you can find the crosshair javascript file (aka CSS/JavaScript Table Hilighting). You will also need a crosshair CSS file. I've modified his and posted below.

Crosshair.css

Place this file either in your App_Theme folder (if you are using themes), embed it in the head of the document or link to it externally.

/* Used with crosshairs.js */
.hoverHilight {
    background-color: #ffffc0;
    color: inherit;
    cursor: pointer;
}

.activeCellHilight {
    background-color: #c0dbff;
    color: blue;
}

AddCrossHairToGridView

After loading your GridView, make a call to the AddCrossHairToGridView function. It takes 5 parameters.

gv: The ID of the GridView Control you wish to add highlighting to.
top: How many rows from the top should not have highlighting.
right: How many rows from the right should not have highlighting.
bottom: How many rows from the bottom should not have highlighting.
left: How many rows from the left should not have highlighting.

I dropped the Javascript file inside the same folder in this example. Update the path in the RegisterClientScriptInclude line to point to whatever location you use.

protected void Page_Load(object sender, EventArgs e)
{        
   DBLoadGridView(); // You write this!
   AddCrossHairToGridView(gvExample,1,0,0,0);
}

public void AddCrossHairToGridView(GridView gv, int top, int right, int bottom, int left)
{
   System.Text.StringBuilder js = new StringBuilder();
   js.Append("<script type=\"text/javascript\" language=\"javascript\">");
   js.Append("initCrossHairsTable(\"" + gv.ClientID.ToString() + "\",");
   js.Append(top + "," + right + "," + bottom + "," + left + ");");
   js.Append("<");
   js.Append("/script>");

   Type t = this.GetType();
   if (!ClientScript.IsClientScriptIncludeRegistered(t, "CrossHairJS"))
       ClientScript.RegisterClientScriptInclude("CrossHairJS", "crosshairs0.3.js");

   if (!ClientScript.IsClientScriptBlockRegistered(t, "HighlightScript"))
       ClientScript.RegisterStartupScript(t, "HighlightScript", js.ToString());
}

Labels: CSS, GridView, Javascript

Maybe the database table isn't ready yet, but you'd like to start working on a new GridView. What you need is a quick and dirty way to load up a GridView control with sample data.

Drop a GridView Control onto the .ASPX Page

<asp:GridView ID="gvExample" runat="server" />

Helper Functions

In the article Generating Random Number and String in C#, author Mahesh Chand wrote 2 random functions: RandomNumber and RandomString. I modified them slightly by making the random variable public. This will allow us to get a fresh random number with each call.

LoadGridView

The parameters for this function are:

columnCount: Number of columns
rowCount: Number of rows
useNumeric: Use Numeric Data (true/false)
rowLength: Length of Text inside rows
minNumber: Lower range of numeric data
maxNumber: Upper range of numeric data

public Random random = new Random();

protected void Page_Load(object sender, EventArgs e)
{
    // # columns, # rows, useNumeric (T/F), rowLength, minNumber, maxNumber
    LoadGridView(4, 12, true, 14, 500, 1500);
}

public void LoadGridView(int columnCount, int rowCount, bool useNumeric, int rowLength, int minNumber, int maxNumber)
{
    DataTable dt = new DataTable();
    dt.Columns.Add(new DataColumn(" ", typeof(string)));

    for (int c = 0; c < columnCount; c++)
    {
        string columnName = RandomString(rowLength, false);
        if(useNumeric==true)
        {
            dt.Columns.Add(new DataColumn(columnName, typeof(Int32)));
        }
        else
        {
            dt.Columns.Add(new DataColumn(columnName, typeof(string)));
        }
    }           

    for (int j = 1; j <= rowCount; j++)
    {
        DataRow dr = dt.NewRow();
        dr[0] = RandomString(4, false);
        for (int k = 1; k <= columnCount; k++)
        {
            if (useNumeric == true)
            {                    
                dr[k] = RandomNumber(minNumber, maxNumber);
            }
            else
            {
                dr[k] = RandomString(rowLength, true);
            }               
        }
        dt.Rows.Add(dr);                      
    }
   
    gvExample.DataSource = dt;
    gvExample.DataBind();    
}

private int RandomNumber(int min, int max)
{               
    return random.Next(min, max);
}

private string RandomString(int size, bool lowerCase)
{
    StringBuilder builder = new StringBuilder();
    char ch;
    for (int i = 0; i < size; i++)
    {
        ch = Convert.ToChar(Convert.ToInt32(Math.Floor(26 * random.NextDouble() + 65)));
        builder.Append(ch);
    }
    if (lowerCase)
        return builder.ToString().ToLower();
    return builder.ToString();
}

Labels: DataTable, GridView, Random