Give Your DataGrids Style

Learn how the DataGrid interacts with Cascading Style Sheets.

asp.netNOW Q&A

LANGUAGES: C#

TECHNOLOGIES: DataGrids | Cascading Style Sheets

 

Give Your DataGrids Style

Learn how the DataGrid interacts with Cascading Style Sheets.

 

By Josef Finsel

 

Q. Using ItemStyle-CssClass in a HyperLinkColumn s DataGrid, the style of my links are taking on the properties of my general a and a:hover styles in my styles.css instead of the .dgitem style I want them to look like. How do I force these hyperlinks to take on the class I want them to?

LS, Houston, TX

 

A. This question was actually more difficult than I expected. To begin with, I started with an AlphabetGrid:

 

private DataView CreateDataSource()

   {

      DataTable dt = new DataTable();

      DataRow dr;

      dt.Columns.Add(new DataColumn("Letter",

       System.Type.GetType("System.String")));

      dt.Columns.Add(new DataColumn("LetterValue",  

       System.Type.GetType("System.Int16")));

      for (int i=65; i<=122;i++)

         {

           dr = dt.NewRow();

           dr[0] = Convert.ToChar(i) ;

           dr[1] = i - 65;

           dt.Rows.Add(dr);

         }

      DataView dv= new DataView(dt);

      return dv;

}

 

It has everything I needed except the style sheet. It s been awhile since I ve used style sheets so I searched Google and found http://www.htmlhelp.com/reference/css/ a good reference for style sheets and set to work.

 

First, I added a style sheet to my project and kept that ever-descriptive default name: StyleSheet1.css. Then, to mirror LS problem, I right-clicked in the style sheet to bring up a menu and chose Add Style Rule. Here you are presented with three choices: You can create style rules for an element (such as the Anchor element), a class name (and optional element), or an element ID. Knowing LS was using a class, I created a class named dgItem. The easiest change to make was to remove the underline, so I set text-decoration to None and created a style sheet that looked like this:

 

.dgItem

{

  text-decoration:none;

}

 

Now it was time to put the style sheet into the Web page. This was as easy as dragging the file from the project explorer into the header section of the ASPX page, which creates a line of HTML that links the style sheet to the page:

 

<LINK rel="stylesheet" type="text/css" href="StyleSheet1.css">

 

Finally, to test everything, I needed to link the style to the item on the page. I opened up the HTML page and filled in the ItemStyle-CssClass on the HyperLinkColumn to reflect dgItem. I built the project and opened the page in the browser to find, not surprisingly, that LS was correct. Now that I had replicated the symptom, it was time to find the cause with some old-fashioned detective work. A quick look at the HTML code the page had generated showed me what was wrong, but I was no closer to understanding the cause. As this fragment of the output shows, the dgItem class was being applied, but not where I had expected it to be:

 

<TD>

<A href=

  "http://finsel-laptop/20030101_CS/Letter.aspx?PageNo=0

>

A</A></TD>

 

I went back to my source code and verified that I d applied the class in the correct place:

 

<asp:HyperLinkColumn DataNavigateUrlField="LetterValue" DataNavigateUrlFormatString="Letter.aspx?PageNo={0}"

DataTextField="Letter" HeaderText="Letter"

ItemStyle-CssClass="dgItem"></asp:HyperLinkColumn>

 

Then it hit me. The style was applied to the TD element rather than the Anchor element because I was using a HyperLinkColumn. So I got in touch with LS to report my findings and suggest a workaround. I mentioned what was happening and recommended that you could redefine the default anchor style for the page to reflect how they were supposed to show up in the DataGrid, then you could use a class for all the other anchor tags in the page separately.

 

LS response was just what mine would have been in the same situation: It s clunky; there has to be a better way to do it.

 

As we talked over what was going on, LS raised the subject of templates. Suddenly I thought I had an answer and went to test out my new theory. I copied the AlphabetGrid page to AlphabetGrid1 and opened up the DataGrid again. This time, I changed the HyperLinkColumn to a template, did a quick build and browse, then went back to look at the HTML code. Just as I suspected, changing it to a template created a HyperLink item I could set the class on correctly. Once I did that, the links appeared without being underlined.

 

It turns out I wasn t done with style sheets, though. Almost as soon as I had wrapped up with LS, I got another question about using Button columns. I filled him in on the answer I d just provided LS and thought I was done until I got another e-mail.

 

Q. Thanks, that was a super alternative...it solved my first problem. My next problem is the alternate displaying of rows. It seems styles have lives of their own. I ve set up my grid to display alternating blue and green rows of data. The button column, however, has its own fore color that destroys the entire row s look and feel. Can you help?

AR, via e-mail

 

A. To test this out, I copied the page to AlphabetGrid2 and modified the grid to have an alternating background of black and foreground of white, then I did a quick build and browse. Sure enough, the alternating lines were the correct color but the link itself wasn t. The default blue color for the link was lost in the black background.

 

A quick look at the HTML code the server generated showed a problem similar to the earlier one: The style was being applied to the row and the default Anchor styling overrode the row styling. Still, there wasn t anything within the properties of the grid that I could use to set the alternating style for the link because the AlternatingItemStyle was an element separate from the grid:

 

<AlternatingItemStyle BackColor="Black" ForeColor="White">

</AlternatingItemStyle>

 

The trick was to set the CssClass for the AlternatingItemStyle and use that instead of the inline declarations in the example above. That s because once you ve defined a class you also can define elements within that class:

 

.AlternatingItem

[email protected].

 

The code referenced in this article is available for download.

 

Josef Finsel is a software consultant for a global consulting company and specializes in .NET and SQL Server. He has published a number of VB, .NET, and SQL Server articles and, when he isn t hanging around the aspenetpro forums you can find him working on the syntax for FizzBin.NET, a programming language that works the way programmers have always suspected. He s also author of The Handbook for Reluctant Database Administrators (Apress).

 

 

 

 

Hide comments

Comments

  • Allowed HTML tags: <em> <strong> <blockquote> <br> <p>

Plain text

  • No HTML tags allowed.
  • Web page addresses and e-mail addresses turn into links automatically.
  • Lines and paragraphs break automatically.
Publish