NewbieRob
Posts: 20
|
| Posted: 06/28/2004, 4:45 PM |
|
I have a CCS grid which groups records based on one of the grid fields. I have been able to add bold and color to the first line of each group, which I'll call the header, by putting code into the BeforeShowRow event but it doesn't have the look I want. I've been unable to do anything else. I'd like to change the background, font, bolding etc. I've tried the techniques from the Simple Reporting examples CCS Help but they aint working. Can anyone help me out of my jam?
|
 |
 |
peterr
Posts: 5971
|
| Posted: 06/28/2004, 5:09 PM |
|
Possibly your Theme/CSS is overriding any other custom changes?Try making a copy of that page, remove the Theme and try the same without using a Theme. If this works then you know that the problem is in using stylesheets and you may need to manipulate the look via the 'style' tag.
Generally if something "aint working" please be more specific and describe the exact errors or symptoms.
_________________
Peter R.
YesSoftware Forums Moderator
For product support please visit http://support.yessoftware.com |
|
|
|
NewbieRob
Posts: 20
|
| Posted: 06/29/2004, 8:56 AM |
|
You're probably right that it's the theme. However, I don't think that changing it will do what I need. The example in Help re: simple reporting with groups is what I need - the "heading" for each group needs to be in a different font than the rest of the rows beneath it. When I have tried to apply the example from help where each header spans columns, has a different background, etc. and what I end up with is every other line looking like that. Does that give you enough info to go on?
|
|
|
|
peterr
Posts: 5971
|
| Posted: 06/30/2004, 1:12 AM |
|
Hi,
I did not work on such project and may not be of much help here, though maybe I should point out that you don't need to use CSS-based Theme and can use HTML-based Themes as well. This could potentially give you more control.
_________________
Peter R.
YesSoftware Forums Moderator
For product support please visit http://support.yessoftware.com |
|
|
|
dataobjx
Posts: 181
|
| Posted: 06/30/2004, 11:27 AM |
|
Here's one method I have used. It works quite well and allows one to dynamically alter the cell value on the fly based on database values for the given row.
At the beginning of each row in the grid, place a hidden field... call that field "cssTheme".
In the BeforeShow event of the hidden field, place your code...
Example;
Function MyGrid_cssTheme_BEFORE_SHOW()
Dim sTheme
Dim lngFlagValue
lngFlagValue = MyGrid.datasource.recordset.fields("field_name")
Select Case lngFlagValue
Case 1
sTheme = "RedTD"
Case 2
sTheme = "YellowTD"
Case 3
sTheme = "GreenTD"
Case Else
End Select
MyGrid.cssTheme.value = sTheme
End Function
Next, click the HTML tab and locate the cssTheme hidden field.
It may look something like this....
<!-- BEGIN Row -->
<tr>
<td class="GrayDataTD"><input type="hidden" name="{cssTheme_Name}" value="{cssTheme}" style="WIDTH: 65px; HEIGHT: 22px" size="8"><a class="GrayDataLink" href="{AccountNumber_Src}">{AccountNumber}</a><br>
{OldAccountNumber}</td>
<td class="GrayDataTD" valign="top" align="left" nowrap width="1%">{Name}</td>
Modify that code by replacing the class="GrayDataTD" with {cssTheme} so that it looks like this;
<td class="{cssTheme}" valign="top" align="left" nowrap width="1%">{Name}</td>
Now, as the recordset populates the row, the code in the hidden field is executed and the theme value is written to it. By placing the {cssTheme} in the class="...." block e.g., class="{cssTheme}" , the data cell is modified accordingly.
Simply transposition. This technique will also work on entire rows... even though this example show's how to do it for a single cell.
To make the entire row change color.... replace the class="...." with class="{cssTheme}" for each cell in the row.
To make the title block different, add yet another hidden field and call it "cssHeader" or what-ever. Place your code in the BeforeShow event of the hidden field.... and correspondingly - replace the class="...." with class="{cssHeader}" for the cell you want to change dynamically.
I hope this helps you. Your post wasn't exactly as clear as I needed but on reading it, I thought this was what you were attempting to do.
Best Regards
_________________
www.DataObjx.net
www.mydigitalapps.com |
|
|
|
NewbieRob
Posts: 20
|
| Posted: 07/02/2004, 12:06 AM |
|
Thanks for the great tip! I had trouble at first but then figured out the correct syntax for referencing the style sheet components. Once I had that I was on my way! I'm not sure why I need a hidden field though. this seems to work fine if I just change the class of each field needing modification to {cssTheme}.
Got any tips on how I can insert a blank line *above* the ones I'm changing? This is to further separate my groups.
Thanks again.
|
|
|
|
dataobjx
Posts: 181
|
| Posted: 07/02/2004, 5:11 AM |
|
The reason for the hidden field is to allow the css theme to be dynamically changed based upon a value derived from the record... the style is otherwise 'hard coded' into the HTML.
Adding the hidden field and the applicable code along with the transposition from the hard coded class="someThemeTD" to class="{cssTheme}" allows for a dynamic theme to be applied based upon a value in the recordset.
In this way, the css themes can be 'dynamically' assigned rather than remain hard coded in the HTML.
The reason you're using the hidden field is;
1) so that the field is not visible to the user, and
2) so that you have a {hidden_field_name} with which to perform the transposition from hard coded html (class="someThemeTD" ) to the dynamic (class="{cssTheme}" ).
Why would one do this? Well, lets say you have a recordset comprised of 4 records. Each record has a field called "risk".
Record 1 has a "risk" = 1
Record 2 has a "risk" = 2
Record 3 has a "risk" = 3
Record 4 has a "risk" = NULL
When a row is written to the grid,
we want any records with a "risk" of 1 to be in Red (High risk).
we want any records with a "risk" of 2 to be in Orange. (Medium risk)
we want any records with a "risk" of 3 to be in Yellow. (Low Risk) and
we want any records with a "risk" of NULL to be in whatever the standard themeTD is... e.g, (No Risk)
Implementing the code from my previous post, would cause each of the records to be displayed with the appropriate background color (theme) 'on the fly' and would result in 4 rows - each with a different color associated with the risk.... thus allowing the person perusing the grid to rapidly ascertain "Risk" based on the color of each row.
You couldn't do this if the themeTD is hard coded into the HTML of the page.
Does that help to better explain why one would use the technique I described?
If this still doesn't make sense to you, you should perform the actions I prescibed in the earlier post to see what I mean.
_________________
www.DataObjx.net
www.mydigitalapps.com |
|
|
|
NewbieRob
Posts: 20
|
| Posted: 07/02/2004, 11:41 AM |
|
This makes sense and it is now working great. However, the only way I could get it to work was to manually copy the "Style.css" for my style to the project style folder from the CCS ...Components\Themes style folder. Otherwise, none of my new selectors worked. Seems I've seen some posts regarding this bug in CCS before. Do you have any experience with this issue or a workaround?
|
|
|
|
dataobjx
Posts: 181
|
| Posted: 07/06/2004, 4:39 AM |
|
No, I've never had any issues relating to the use of the .css files.
As long as they are properly referenced (in the HTML tab), everything works as expected.
Ensure that you have properly referenced the .css style sheet. I suspect from what you've said, e.g., "I could get it to work was to manually copy the "Style.css" for my style to the project style folder"...
that you did not have the style sheet properly referenced. In other words, your HTML probably looks like this
<link rel="stylesheet" type="text/css" href="Themes/Gray/Style.css">
and since you seem to have this particular project in a "sub-folder" of the site, your HTML should probably be referenced something like this
<link rel="stylesheet" type="text/css" href="../Themes/Gray/Style.css">
Using the ../ (dot dot forward-slash) to reference the directory one branch above the one your project is in.
_________________
www.DataObjx.net
www.mydigitalapps.com |
|
|
|
AaronE
|
| Posted: 08/09/2004, 1:55 PM |
|
How can I do this with .Net?
|
|
|
|
peterr
Posts: 5971
|
| Posted: 08/10/2004, 1:34 AM |
|
Aaron,
You can modify the <TD> tag (or <TR>, or any other tag) by adding ID and RunAt attributes, like:
<td class="GrayDataTD" valign="top" align="left" nowrap width="1%" id="MyTD" RunAt="server">{Name}</td>
Then enter the following code in the Before Show Row event of the grid:
if (e.Item.ItemType == ListItemType.Item || e.Item.ItemType == ListItemType.AlternatingItem) {
((HtmlControl)e.Item.FindControl("MyTD")).Attributes["Class"] = "SomeClass";
// or ((HtmlControl)e.Item.FindControl("MyTD")).Attributes.CssStyle.Add("background-color",myColor);
}
Here is more info about using attributes collection:
http://msdn.microsoft.com/library/default.asp?url=/libr...nclasstopic.asp
_________________
Peter R.
YesSoftware Forums Moderator
For product support please visit http://support.yessoftware.com |
|
|
|
AaronE
|
| Posted: 08/10/2004, 9:07 PM |
|
Thanks. I tried translating to vb.net and was unsuccesful. Any assistance would be greatly appreciated.
|
|
|
|
|
