Give Your DataGrids Style

asp.netNOW Q&A

LANGUAGES:C#

TECHNOLOGIES:DataGrids | Cascading Style Sheets

Give Your DataGrids Style

Learn how the DataGrid interacts with Cascading StyleSheets.

By Josef Finsel

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

LS, Houston, TX

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

private DataView CreateDataSource()

   {

      DataTable dt = newDataTable();

      DataRow dr;

      dt.Columns.Add(newDataColumn("Letter",

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

      dt.Columns.Add(newDataColumn("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= newDataView(dt);

      return dv;

}

It has everything I needed except the style sheet. It sbeen 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 thatever-descriptive default name: StyleSheet1.css. Then, to mirror LS problem, Iright-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 anelement (such as the Anchor element), a class name (and optional element), oran 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 settext-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 headersection of the ASPX page, which creates a line of HTML that links the stylesheet to the page:

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

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

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

DataTextField="Letter" HeaderText="Letter" ItemStyle-CssClass="dgItem">   Then it hit me. The style was applied to the TD elementrather than the Anchor element because I was using a HyperLinkColumn. So I gotin touch with LS to report my findings and suggest a workaround. I mentionedwhat was happening and recommended that you could redefine the default anchorstyle for the page to reflect how they were supposed to show up in theDataGrid, then you could use a class for all the other anchor tags in the pageseparately.   LS response was just what mine would have been in thesame 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 subjectof templates. Suddenly I thought I had an answer and went to test out my newtheory. I copied the AlphabetGrid page to AlphabetGrid1 and opened up theDataGrid again. This time, I changed the HyperLinkColumn to a template, did aquick build and browse, then went back to look at the HTML code. Just as Isuspected, changing it to a template created a HyperLink item I could set theclass on correctly. Once I did that, the links appeared without beingunderlined.   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 usingButton columns. I filled him in on the answer I d just provided LS and thoughtI was done until I got another e-mail.   Q. Thanks, that wasa super alternative...it solved my first problem. My next problem is thealternate displaying of rows. It seems styles have lives of their own. I ve setup my grid to display alternating blue and green rows of data. The buttoncolumn, however, has its own fore color that destroys the entire row s look andfeel. Can you help? AR, via e-mail   A. To test this out, I copied the page to AlphabetGrid2and modified the grid to have an alternating background of black and foregroundof white, then I did a quick build and browse. Sure enough, the alternatinglines were the correct color but the link itself wasn t. The default blue colorfor the link was lost in the black background.   A quick look at the HTML code the server generated showeda problem similar to the earlier one: The style was being applied to the rowand the default Anchor styling overrode the row styling. Still, there wasn tanything within the properties of the grid that I could use to set thealternating style for the link because the AlternatingItemStyle was an elementseparate from the grid:     The trick was to set the CssClass for theAlternatingItemStyle and use that instead of the inline declarations in theexample above. That s because once you ve defined a class you also can defineelements within that class:   [email protected].   The code referenced in this article is available fordownload.   Josef Finsel is asoftware consultant for a global consulting company and specializes in .NET andSQL 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 onthe syntax for FizzBin.NET, a programming language that works the wayprogrammers have always suspected. He s also author of The Handbook for Reluctant Database Administrators (Apress).