[Webinar] Streamline your web hosting managementRegister Today

  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 223
  • Last Modified:

Changing hyperlink style in the datagrid using CSS

I want to change the header hyperlink which is automatically created as i have enable sorting in the datagrid. the problem is that default hyperlink of css class has been applied to the header links of datagrid and i dont want that. I need to change the style.... here is the code

<asp:BoundColumn DataField="NAME" SortExpression="Name" HeaderText="Student Name"></asp:BoundColumn>

the Student Name is the hyperlink on the header of the datagrid and i need to change its style. Plesase give me the css class and where to apply that class to change the header hyperlink .

Also i have enabled paging in the datagrid... and below pages hyperlink are show 1 2 3 4 5 ... and hyperlinks again in default colors... and i dont want that... please do let me know how to change that also... actually the problem is to change the hyperlink styles in the datagrid in short.

Thanks and Regards
  • 2
  • 2
1 Solution
Hi faruquis,

use this

            <asp:BoundColumn DataField="NAME" SortExpression="Name" HeaderText="Student Name">

               <HeaderStyle CssClass="Your css class name">

               <FooterStyle CssClass="Your css class name">


faruquisAuthor Commented:
no sir.. it isnt working... my class name is datagridlinks and i aplied the class as told by you... the generated code is this... and the class is not applied to the <a href...... take a look

<td class="datagridlinks"><a href="javascript:__doPostBack('reportData$_ctl2$_ctl0','')">Student Name</a></td><td>
you have to declared the class like this
.LNnTxt1 { FONT-SIZE: 11px; COLOR: #000099; FONT-FAMILY: arial, verdana, helvetica, sans-serif; }
A.LNnTxt1:link {       FONT-SIZE: 11px; COLOR: #000099; FONT-FAMILY: arial, verdana, helvetica, sans-serif;}
A.LNnTxt1:visited {      FONT-SIZE: 11px; COLOR: #000000; FONT-FAMILY: arial, verdana, helvetica, sans-serif; }
A.LNnTxt1:active {      COLOR: #ff0000; }
A.LNnTxt1:hover {      COLOR: #990000; TEXT-DECORATION: none; }

and then add LNnTxt1 as a class name to the header/footerstyle

faruquisAuthor Commented:
this is not a valid answer.. have been able to find a valid solution and implementted that also.. thanks for you time buddy.. here is the solution

PAQed with points refunded (50)

Community Support Moderator

Featured Post

The new generation of project management tools

With monday.com’s project management tool, you can see what everyone on your team is working in a single glance. Its intuitive dashboards are customizable, so you can create systems that work for you.

  • 2
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now