Link to home
Start Free TrialLog in
Avatar of g46905
g46905

asked on

Changing the font for DataGRId header in ASP.NET

I am trying to change the font to BOLD for the header part of the datagrid.I have tried to change the property in the property window of the datagrid to make this change.It looks like it is being overwritten by the style sheet.How do I change this in the code.Below is the code where I am displaying the data in the datagrid.

Dim datView As DataView = New DataView(dsGifts.Tables(0))
            DataGrid1.DataSource = datView
            DataGrid1.DataBind()

Could you please help me with this?

Thanks,
Avatar of hismightiness
hismightiness

The easiest solution (which may not be the best one in your situation) would be to apply a class to your DataGrid.  For instance, in your stylesheet have the following class:

.normal{ font-weight: normal;}

In the CssClass property of your DataGrid, put the value "normal".  You can put it in the CssClass for the HeadStyle section too so that the change is only made within the header.
Avatar of g46905

ASKER

I donot want to change the existing stylesheet as it would effect other projects.Could you please suggesst me something where I do not have to make changes to the existing the styslesheet.

Thanks for your help.
Yeah, just change it in the properties of the HeaderStyle section in the DataGrid properties:

<HeaderStyle Font-Bold="False"></HeaderStyle>
Avatar of g46905

ASKER

I want it to be bold.Am I not supposed to have Font-Bold="True" ?

Please suggest..

Thanks
Whoops!  I misunderstood your statement.  Sorry...  Yeah, do it like this:

<HeaderStyle Font-Bold="True"></HeaderStyle>
Avatar of g46905

ASKER

This is already being done.Below is what I currently have.Could you please have a look at it and let me know the changes required.


td><asp:datagrid id="DataGrid1" runat="server" HorizontalAlign="left" Font-Name="Verdana" Font-Size="10pt"
                  BackColor="#ffffff" AllowSorting="True" Width="100%" Font-Names="Verdana">
<SelectedItemStyle Font-Bold="True"></SelectedItemStyle>
<AlternatingItemStyle BackColor="#CCCC99"></AlternatingItemStyle>
<HeaderStyle Font-Bold="True" HorizontalAlign="Left" ForeColor="White" BackColor="#000099"></HeaderStyle>
</asp:datagrid>



Thanks,
Yeah, then your stylesheet IS more than likely overriding the bold.  Is okay to apply another class to this without losing your style attributes.  The only things that should be affected are the same properties.  For instance, in this case, if the class that is already inherited applies the font-weight to normal, then another class overriding the font-weight only should not affect any other attributes (like color, size, position, etc.).  If that doesn't work, it would be beneficial to see what HTML is output for the header area.
Avatar of g46905

ASKER

I do I see what HTML is output for the header area.

Thanks
I mean post it so that it can be looked at here.  Just the area where the datagrid starts until the header is complete will suffice.
Avatar of g46905

ASKER

Above is the code from my HTML for the datagrid.I am unable to understand what else I can do to resolve this usse?


Thanks,


No...  The above code is the HTML from your designer - not the output generated by a page load.  What is the HTML generated when viewing the page from a browser (just the header)?
Avatar of g46905

ASKER

Here is the header part of the HTML.Please let me know if I can provide you with more information.

<HEAD>
            <TITLE>Supply Chain (Gift Reporting View Report)</TITLE>
            <meta content="" name="keywords">
            <meta content="" name="description">
                        <script src="/home/include/scripts/javascript.js"></script>
            <script src="/home/include/scripts/sitemap.js"></script>
            <script src="/home/include/scripts/authors.js"></script>
            <script src="/home/include/scripts/displayVerticalNav.js"></script>
            <script src="/home/include/site_navigation/supplychain.js"></script>
            
            <script language="JavaScript">
            <!--
                  function MM_preloadImages() { //v3.0
                        var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
                        var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
                        if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
                  }

                  function MM_swapImgRestore() { //v3.0
                        var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
                  }

                  function MM_swapImage() { //v3.0
                        var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
                        if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
                  }

                  function MM_findObj(n, d) { //v4.01
                        var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
                              d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
                        if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
                        for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
                        if(!x && d.getElementById) x=d.getElementById(n); return x;
                  }

                  function MM_reloadPage(init) {  //reloads the window if Nav4 resized
                          if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
                              document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
                        else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
                  }

                  MM_reloadPage(true);

                  // big() makes selected layer longer (height property)
                  function big(lyr) {
                        document.all[lyr].style.height='258px';
                  }

                  /* small() makes selected layer shorter (height property)*/
                  function small(lyr) {
                        document.all[lyr].style.height='19px';
                  }

                  /* start() makes all layers short to start with (height property)*/
                  function start() {
                        document.all.Layer1.style.height='19px';
                  }
            //-->
            </script>
            <meta http-equiv="imagetoolbar" content="no">
            <link rel="StyleSheet" type="text/css" href="/home/include/style/content.css" media="screen">
            <link rel="stylesheet" type="text/css" href="/home/include/style/print.css" media="print">
      </head>

Thanks
No... The header of the datagrid...
Avatar of g46905

ASKER

Below is what I have for datagrid.To be honest, I am new to ASP.NET.Could you please let me know if this is not what you are looking for?

<tr>
                        <td><A onclick="NewPopWindowSet(this.href,'',600,400,'no','no');return false" href="rpviewhelp.htm"><IMG alt="" src="/home/images/help.gif" align="right" border="0"></A>
                        </td>
                  </tr>
                  <tr>
                        <td><table cellspacing="0" align="Left" rules="all" border="1" id="DataGrid1" style="background-color:White;font-family:Verdana;font-size:10pt;width:100%;border-collapse:collapse;">
      <tr align="Left" style="color:White;background-color:#000099;font-weight:bold;">
            <td><a href="javascript:__doPostBack('DataGrid1$_ctl1$_ctl0','')" style="color:White;">EMP_NO</a></td><td><a href="javascript:__doPostBack('DataGrid1$_ctl1$_ctl1','')" style="color:White;">GIFT_TYPE</a></td><td><a href="javascript:__doPostBack('DataGrid1$_ctl1$_ctl2','')" style="color:White;">REC_GIVEN</a></td><td><a href="javascript:__doPostBack('DataGrid1$_ctl1$_ctl3','')" style="color:White;">GIFTED_DATE</a></td><td><a href="javascript:__doPostBack('DataGrid1$_ctl1$_ctl4','')" style="color:White;">EST_VALUE</a></td><td><a href="javascript:__doPostBack('DataGrid1$_ctl1$_ctl5','')" style="color:White;">BUS_RELATION</a></td>
Try this in your codebehind since you are not wanting to change the style/class:

    Private Sub DataGrid1_ItemCreated(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.DataGridItemEventArgs) Handles DataGrid1.ItemCreated
        If e.Item.ItemType = ListItemType.Header Then e.Item.Style.Add("font-weight", "bold")
    End Sub

Avatar of g46905

ASKER

Where do I call this sub method?

Thanks
Question:
Does your existing stylesheet specify a styling for <a> tags, specifically one along the lines of "font-weight: normal;"?
Or for <td> tags...
I already went there, Thogek.  g46905 doesnt want to alter the style or class.

You do not call the sub.  It already happens for you.  Here, you just implement logic when it fires.
I didn't suggest altering it.  I asked if it was there.  (It's hard to fix a problem without first identifying it.)
Avatar of g46905

ASKER

hismightiness,
                    I tried it and it didnt make any difference...

Thanks,
Yes, but did it at least put this in the TD tag for each TD in the header?

style="font-weight: bold;"
Avatar of g46905

ASKER

Sorry for the delay.

This is what I have declared in my style sheet

A.TEXTLINK:LINK                      { color : #000000; font-size : 11px; font-weight : bold; text-decoration : none; }
A.TEXTLINK:VISITED            { color : #000000; font-size : 11px; font-weight : bold; text-decoration : none; }
A.TEXTLINK:ACTIVE            { color : #000000; font-size : 11px; font-weight : bold; text-decoration : none; }
A.TEXTLINK:HOVER            { color : #006699; font-size : 11px; font-weight : bold; text-decoration : none; }

When I make a change any change for the above mentioned, it changes the entire text.How do I make the change so that only the header part of the datagrid is being changed.?

Please help.
You can create a duplicate set of classes for use just with the header and then specify the class name in the CssClass property located within the HeaderStyle group of attributes:

<asp:datagrid id="DataGrid1" runat="server" HorizontalAlign="left" Font-Name="Verdana" Font-Size="10pt"
               BackColor="#ffffff" AllowSorting="True" Width="100%" Font-Names="Verdana">
<SelectedItemStyle Font-Bold="True"></SelectedItemStyle>
<AlternatingItemStyle BackColor="#CCCC99"></AlternatingItemStyle>
<HeaderStyle CssClass="TEXTLINK2" Font-Bold="True" HorizontalAlign="Left" ForeColor="White" BackColor="#000099"></HeaderStyle>
</asp:datagrid>
hismightiness's suggestion above will probably work.

Another very similar option might be to add a CssClass value to the DataGrid itself, something like:

    <asp:datagrid id="DataGrid1" CssClass="DataGridStyle1" runat="server" HorizontalAlign="left" Font-Name="Verdana" Font-Size="10pt" BackColor="#ffffff" AllowSorting="True" Width="100%" Font-Names="Verdana">

(hopefully with a more descriptive name than DataGridStyle1), and then add to your stylesheets an entry such as

    .DataGridStyle1 td a { font-weight: bold; }
Avatar of g46905

ASKER

Can you please post the duplicate set of classes just with the header?.I am new to Web development and this needs to be done ASAP as it is a production issue.I really appreciate all your help

Thanks,
BTW, I don't think the TEXTLINK styles you listed above are the problem.  First, the DataGrid HTML you posted earlier have no class="TEXTLINK" attributes in the link tags, so I don't see how those styles would affect that HTML.  Second, the TEXTLINK styles listed above are coded to bold the links, and you're stated problem in that your links are not bolded.
This is why I keep trying to get g46905 to put the class value into the HeaderStyle's CssClass property.
hismightiness,
Yeah, I'm not sure if that's it, but I'd be interested to see if that works.
Avatar of g46905

ASKER

Still struggling...

I have added this in the header of the HTNL file where I am displaying the report..

<style type="text/css">.DataGridFixedHeader {
      POSITION: relative; BACKGROUND-COLOR: blue; Font-Bold: "True"
}
            </style>

added this to the datagrid..

<tr>
<td><asp:datagrid id="DataGrid1" runat="server" HorizontalAlign="left" Font-Name="Verdana" Font-Size="10pt"
BackColor="#ffffff" AllowSorting="True" Width="100%" Font-Names="Verdana">
<SelectedItemStyle Font-Bold="True"></SelectedItemStyle>
<AlternatingItemStyle BackColor="#CCCC99"></AlternatingItemStyle>
<HeaderStyle Font-Bold="True" HorizontalAlign="Left" ForeColor="White" CssClass="ms-formlabel DataGridFixedHeader"
BackColor="#000099"></HeaderStyle></asp:datagrid></td>
</tr>


This is what I see in the view source..

<tr>
<td><table cellspacing="0" align="Left" rules="all" border="1" id="DataGrid1" style="background-color:White;
font-family:Verdana;font-size:10pt;width:100%;border-collapse:collapse;">
<tr class="ms-formlabel DataGridFixedHeader" align="Left" style="color:White;
background-color:#000099;font-weight:bold;">
<td><a href="javascript:__doPostBack('DataGrid1$_ctl1$_ctl0','')" style="color:White;">
EMP_NO</a></td>
<td><a href="javascript:__doPostBack('DataGrid1$_ctl1$_ctl1','')" style="color:White;">
GIFT_TYPE</a></td>
<td><a href="javascript:__doPostBack('DataGrid1$_ctl1$_ctl2','')" style="color:White;">
REC_GIVEN</a></td>
<td><a href="javascript:__doPostBack('DataGrid1$_ctl1$_ctl3','')" style="color:White;">
GIFTED_DATE</a></td>
<td><a href="javascript:__doPostBack('DataGrid1$_ctl1$_ctl4','')" style="color:White;">
EST_VALUE</a></td>
<td><a href="javascript:__doPostBack('DataGrid1$_ctl1$_ctl5','')" style="color:White;">
BUS_RELATION</a></td>
</tr>

Please let me know if I can provide you wiith more information.

Thanks


Why is this in there?

ms-formlabel
Avatar of g46905

ASKER

I have seen that in the example mentioned below to see if it makesany difference.BUt there was not luck in both cases ( with and with out ).I will ignore this if not necessary.Please let me know if you think we can correct something and find the solution.


http://blogs.wdevs.com/jayaveer/archive/2005/05/09/3319.aspx

Thanks,
The reason I ask is because it is in your HTML, but not in your class delcaration in the header.
Avatar of g46905

ASKER

I have deleted that from the class and replaced it with CssClass="DataGridFixedHeader" and I still couldn't find any difference.

Thanks
SOLUTION
Avatar of hismightiness
hismightiness

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
It seems, however, that the addition of this CssClass to the HeaderStyle is adding a class attribute to the <tr> element, which is effectively redundant with the style already on that element (added by the HeaderStyle's other attributes), and so is not likely to change anything.

To counter the non-bold CSS styling you already have on all <a> elements, you're going to need to more directly affect the <a> elements within your DataGrid.  You can do that via C# code-behind, although the code to do so is a little cryptic-looking, or via some more focused CSS, as suggested above.
Avatar of g46905

ASKER

I am using ASP.NET ( VB.NET ). I am using sorting for all the header columns to sort the rows.Do you think that is cauing the issue?

Thanks
There is nothing that we can SEE preventing this though.  The only overriding style shown in the HTML is the font color:

<tr class="ms-formlabel DataGridFixedHeader" align="Left" style="color:White;
background-color:#000099;font-weight:bold;">
<td><a href="javascript:__doPostBack('DataGrid1$_ctl1$_ctl0','')" style="color:White;">
EMP_NO</a></td>

This means that in one of your STYLESHEETS, the A tag has the font-weight set to normal.  You need to override the A tag in your header, but unless you create a custom header, I am not going to be much use in that area.
Avatar of g46905

ASKER

How do I create a custom heade? Can yu help me with it as I want to try it and see if that works?

Thanks
All a custom header is, is creating a table above your datagrid and making it mimic your header functions.  You can get the actual header actions from the datagrid before you remove it.  Here is a link detailing a custom header for a datagrid.

You do not actually have to go through with the scrollable part, but the header information itself will be useful to you.
http://www.dnzone.com/ShowDetail.asp?NewsId=564

The low-down condensed version of doing it is to copy the shortcuts to each header link, and then create an HTML table above your DataGrid.  Now make the datagrid cells look how you want with hyperlinks in them.  Then make the links or the onclick events of the links perform the same javascript functions you copied from the actual header.  Once you have verified that your links in the custom header perform the desired tasks and look correct, then remove the header from the datagrid.

Now, I must ask...  A much simpler approach would be to just remove the "font-weight: normal" from the stylesheet where it is associated with the A tag.  You do not need to specifiy it at all - that is, unless your style is so complex that it would indeed make a huge difference.
Have you tried the CSS suggestions that I made above?
Another option: add a CssClass value to the DataGrid itself, something like:

    <asp:datagrid id="DataGrid1" CssClass="DataGridWithHeader" runat="server" HorizontalAlign="left" Font-Name="Verdana" Font-Size="10pt" BackColor="#ffffff" AllowSorting="True" Width="100%" Font-Names="Verdana">

and then add to your stylesheets an entry such as

    .DataGridWithHeader td a { font-weight: bold; }

or, if you cannot add to your stylesheets, add into your page's HTML (such as near the beginning):

    <style type="text/css">
    .DataGridWithHeader tr td a { font-weight: bold; }
    </style>
Avatar of g46905

ASKER

To counter the non-bold CSS styling you already have on all <a> elements, you're going to need to more directly affect the <a> elements within your DataGrid.  You can do that via C# code-behind, although the code to do so is a little cryptic-looking, or via some more focused CSS, as suggested above.

How do I directly affect the <a> elements with the DataGrid.As I mentioned earlier, I am using ASP.NET (code behind = VB.NET ) .Can you help with this task so that I can try and see if it works.Thanks for your help.

Thanks
Personally, I would suggest trying the much simpler CSS approach which I suggested above, first.
ASKER CERTIFIED SOLUTION
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of g46905

ASKER

I am getting style is not a member of "system.Web.UI.Control" at line..

ctrl.Style.Add("font-weight", "bold")

Can you suggest?
Oops.  Trying replacing

           Dim ctrl As Control

with

           Dim ctrl As System.Web.UI.WebControls.WebControl
Or, safer might actually be:

        Dim ctrl As System.Web.UI.Control
            For Each tc in Item.Cells
                For Each ctrl in tc.Controls
                    If TypeOf ctrl Is System.Web.UI.WebControls.HyperLink Then
                        CType(ctrl, System.Web.UI.WebControls.HyperLink).Style.Add("font-weight", "bold")
                    End If
                Next
        End If
Avatar of g46905

ASKER

The above method is being activated, it is not showing the changes in the datagrid.Could you please tell me why?

Thanks
Hmm.
No error messages?
Are you seeing any difference in the "view source" HTML?
Avatar of g46905

ASKER

I finally found a solution by changing the select command of my SQL.Here is what I have done and it resolved the issue.Thanks for you help as you have shared you valueable information.

Thanks again
Avatar of g46905

ASKER

OOPs ..here is my modified SQL statement

sqlStr += "SELECT EMP_NO As '<span class=HEADER_ROW_1>EMP_NO</span>',GIFT_DESC AS '<span class=HEADER_ROW_1>GIFT_TYPE</span>',CASE WHEN RECEIVED_GIVEN= 0 THEN 'Given' ELSE 'Received' END AS '<span class=HEADER_ROW_1>REC_GIVEN</span>',"
        sqlStr += "CONVERT(VARCHAR(10),DATE_GIFTED,101) AS '<span class=HEADER_ROW_1>GIFTED_DATE</span>',"
        sqlStr += "CAST(EST_VALUE AS DECIMAL(10, 2)) AS '<span class=HEADER_ROW_1>EST_VALUE</span>',BUS_RELATION AS '<span class=HEADER_ROW_1>BUS_RELATION</span>'FROM[Gifts]" + sqlValue
I am confused.  How does changing your SQL statement solve the problem?
Avatar of g46905

ASKER

If you notice the above statement ....

For example


         SELECT EMP_NO As '<span class=HEADER_ROW_1>EMP_NO</span>'

The above selects EMP_NO as a column name and replaces that with <span class=HEADER_ROW_1>EMP_NO</span>

Where

.HEADER_ROW_1    { background-color : #000099; font-family : Verdana, Geneva, Arial, Helvetica, sans-serif; font-size : 11px; font-weight: bold; color : #ffffff; text-decoration : none; }


Whoops!  I didn't look at your SQL statement that thoroughly.  I saw the HTML, but chalked it up to being from copying/pasting from an HTML source. Glad your your problem is solved!
Avatar of g46905

ASKER

Thanks for your help once again
Sounds like a good answer to me.  ;-)