Suppose you have a GridView with a few columns like:
| Foo | Bar | Total |
and you use a style sheet to make the alternating rows different colors, say light blue and white.
Is there a good way to make a particular column alternate in a different color? For example, I might want the Total column to alternate in medium and light red to bring attention to it in a large grid.
BTW, I know you can programmatically change the color of a cell. I'd like to stick to CSS if it all possible, however, so all my style stuff is in one place. I also don't see an easy way to tell if I'm in an alternating row when I'm inside the event handler.
If you're using jQuery, you can do it pretty easily.
$("table#myTable col:odd").css("background-color:#ffe");
the :odd selector is not available in most current browsers, but jQuery gives it to us today.
For rows, you can do it with the built-in AlternatingRowStyle element.
Edit: found a good resource for some different ways of doing this: http://css-discuss.incutio.com/?page=StylingColumns
In addition to Ben's suggestion, Matt Berseth also has quite a nice demo of how to do rollover highlighting of columns as well using the GridViewControlExtender which is quite nice:
http://mattberseth2.com/demo/Default.aspx?Name=GridViewControlExtender+II+-+Header+Cell+MouseOver+Styles+and+a+Few+More+Live+Examples&Filter=All
There's also a ton of other stuff on how to enhance your GridView on his site as well:
http://mattberseth.com/blog/gridview/
Quite a few of the examples use the ASP.NET Ajax and Ajax Control Toolkit bits, but they're not too hard to port to lightweight jQuery equivalents.
going off on 2 tangents here...
P.S. "also don't see an easy way to tell if I'm in an alternating row when I'm inside the event handler."
Row.RowState == RowState.Alternating
Also, you can always set the CssClass on the appropriate cells in ASP.NET, and then define that class in your css.
I found this when searching for the same question regarding the WPF ListView's GridView. There, the answer is to use a StyleSelector like this one described by Bea Costa:
public class ListViewItemStyleSelector : StyleSelector
{
private int i = 0;
public override Style SelectStyle(object item, DependencyObject container)
{
// makes sure the first item always gets the first style, even when restyling
ItemsControl ic = ItemsControl.ItemsControlFromItemContainer(container);
if (item == ic.Items[0])
{
i = 0;
}
string styleKey;
if (i % 2 == 0)
{
styleKey = “ListViewItemStyle1″;
}
else
{
styleKey = “ListViewItemStyle2″;
}
i++;
return (Style)(ic.FindResource(styleKey));
}
}
There are a few nits to pick to get this to work really well, which are all described in her blog post.
One thing that connot be helped, is that this only works for rows. Columns seem to always have to use the CellTemplate/Style.
Related
I have code that will hide components dynamically; it uses [component].addStyleName("name") to add a style to a component, and that style is defined to hide the component.
I have a page which will have a large number of components; I can put them in an array and do this, but I'm hoping for a different way. I would like to assign all those components their own style - something like "costPanel" - and then use server-side vaadin code to alter the definition of the style "costPanel" at runtime.
The Page.Styles class in Vaadin has no methods for obtaining existing styles nor altering ones that are there -- the only methods are for adding them.
Is this possible in Vaadin, even if I have to do something on the client side for it?
This is perhaps best suited as a comment, but it does not really fit in there.
Not trying to be patronising, but it sounds like you're trying in a very complicated way to reinvent the wheel. component.setVisible(false) will do exactly what you need, as in the component will not take up any space since it won't actually exist in the DOM itself. Take a look at the example below:
Code:
public class LayoutWithInvisibleComponents extends VerticalLayout {
private int index = 0;
public LayoutWithInvisibleComponents() {
// add a visibility toggling button
addComponent(new Button("Toggle next", event -> {
Component component = getComponent(++index);
if (component instanceof Button) {
// just toggle the next one if it's a button
component.setVisible(!component.isVisible());
}
if (index == getComponentCount() - 1) {
// reset counter
index = 0;
}
}));
// add some invisible dummy buttons
for (int i = 0; i < 5; i++) {
Button button = new Button("Button " + i);
button.setVisible(false);
addComponent(button);
}
// and add a visual delimiter
Panel rightPanel = new Panel(new Label("---------- some visual delimiter ----------"));
rightPanel.setSizeFull();
addComponent(rightPanel);
}
}
Result:
Is there anything else I'm missing?
This also would make a better comment, but doesn't fit well enough there.
The following is from the Book of Vaadin:
Beware that invisible beings can leave footprints. The containing layout cell that holds the invisible
component will not go away, but will show in the layout as extra empty space. Also expand ratios
work just like if the component was visible - it is the layout cell that expands, not the component.
The phrase "show in the layout as extra empty space" convinced me that there would be blank, open, background-colored space where my component was supposed to be. I don't remember if I tried it, but I might have and had some other error that caused me to conclude my assumption was correct, and that the setting was for making it un-rendered but with the space still visible.
Vaadin has much better documentation than most of the industry, but in this case I got the meaning crossed up. In succeeding paragraphs they even have additional explanation that does say what I learned through this question, but the part quoted here seemed to contradict it.
I currently have a table with some dynamically generated data and I would like to highlight a table row if a cell contained a number that was greater then, lets say "50".
Is this something that can be done just with CSS? or would JQuery need to be involved?
At the moment I am just using this CSS to help separate each row visually.
.data tr:nth-child(odd){
background-color:#eeeeee;
}
Fiddle
It is not possible in pure CSS. Using CSS, you can't get the innerHTML.
You have to use javascript or jQuery.
A simple looping is needed
$('td').each(function () { //loop through each tds
if (+$(this).text() > 50) { // + is used to parse it to integer type
$(this).css('background-color', 'red')
}
});
JSFiddle
That's a form of conditional formatting, right? If so it seems like your only option is Javascript and from googling around there are quite a few options. Here's the top google link: https://gist.github.com/rdrgrtz/1082791
I have kendo grid in application,and its have filterable true option.my requirment is when we apply the filtering to columns,column header font style will be changed to italic..How to do it?If any one have idea about this please tell me..
I personally have not used kendo grid, but I quickly tried the demo here,
and found that it adds "k-state-active" class to the <a> element inside the <th> element.
However, the header text is not inside the <a> element. What you need is a parent selector which current CSS does not support.
So as far as i know, this is NOT possible in pure CSS
You need some javascript. Here is a possible solution using jQuery:
// adding click event handler to the "Filter" and "Clear" buttons
$('form.k-filter-menu .k-button').click(function(e) {
setTimeout(function() {
// first make all headers normal, then make the filtered column header italic
$('th.k-header.k-filterable').css('font-style', 'normal').filter(
':has(> .k-grid-filter.k-state-active)').css('font-style', 'italic');
}, 100);
})
setTimeout is used because "k-state-active" class is added only after the data is filtered. Again, I'm not familiar with kendo grid, so I do not know if there is a way to provide a callback method to the filter. You may want to investigate on that because that 100 ms delay may not be long enough if you have a huge dataset.
My apologies for jQuery specific solution. Ah... I can't do anything without jQuery. Shame.
But hopefully this was helpful to you! Let me know if you need any further help.
This is possible with one CSS line:
.k-filterable a.k-grid-filter.k-state-active ~ .k-link {font-style:italic;}
No need to use java script.
I've got a tr:table that I need to style using CSS. All the normal style functions of a table are working, but row banding and row selection aren't coming up. When I view the rendered source, I'm not seeing a difference in the rows for an id or class to grab on to, and the official documentation doesn't have any attributes for declaring a style class for either. Is this possible and if so what do I need to do to get my CSS to grab onto it?
<tr:table id="myTable" value="#{tableValues}" rowBandingInterval="1">
<tr:column>
##Stuff##
</tr:column>
<tr:column>
##Stuff##
</tr:column>
<tr:column>
##Stuff##
</tr:column>
</tr:table>
Edit
Let me try to clairfy what's happening.
First, using the declaration above tells jsf to generate a table, and the attribute rowBandingInterval tells it to give each row alternating colors (If it was set to 2, then it would do 2 rows one color, 2 rows another, 2 rows the original, etc.)
Once the page gets rendered into standard html, trinidad (and jsf) apply their own classes and IDs to the html. My normal procedure is to look at the rendered html, find the class that it is appling and add CSS rules for it. However in this case, no additional styles are added (nothing in the rendered html denotes one row to be different from another).
So the question is, how do I tell trinidad to either give alternating rows and the user selected row different classes/IDs for me to grab on to with CSS?
Edit 2
Just to keep anybody paying attention posted, there are no changes to the actual td elements either
Edit 3
After having switched all the attributes around and then stripping all the code down to it's bare bones, I found the row banding attribute. Trinidad classes are rather convluted, and unless you reformat the code and pull out all the noise you won't see it. Trinidad adds the class .af_column_cell-text-band to the banded rows, where as the normal rows have just .af_column_cell-text. So that's half the problem solved. I still need to know the selector for a user selected row, for which I'll happily give all the marbles to anybody that can give me an answer to just that.
This is not directly answering your question, but why not use the CSS3 pseudo-class nth-child to achieve this effect ? For instance :
tr:nth-child(2n)
{
background-color:red;
}
There is a nice and simple jquery code to do the row highlighting located here.
The jQuery is as follows
<script type="text/javascript">
$(document).ready(function(){
$(".stripeMe tr")
.mouseover(function() { $(this).addClass("over");})
.mouseout(function() { $(this).removeClass("over");
});
$(".stripeMe tr:even").addClass("alt");
});
</script>
Then a bit of css
tr.alt td { background: #ecf6fc; }
tr.over td { background: #bcd4ec; }
btw I took all that code from the following site where you can also view the demo.
I made something wrong during the registration process, so this is a new answer instead of a comment.
To deal with the trinidad-skinning topic you need to do the following:
In your web.xml you need to set this parameter to true while developping:
<context-param>
<param-name>org.apache.myfaces.trinidad.DISABLE_CONTENT_COMPRESSION</param-name>
<param-value>true</param-value></context-param>
Get firebug for your firefox. With that add-on you can determine which trinidad-selector is used on a component.
There is no selector for a user selected row. I did it this way:
Give your object something like a "highlight property", which you change if it is the selected one.
<tr:column sortProperty="nr" sortable="true" defaultSortOrder="ascending" headerText="Nr" inlineStyle="#{object.tablerowhighlight}text-align:right;"><tr:outputText value="#{object.nr}"/></tr:column>
Do that for all columns of your table and you are done.
put these selectors in your trinidadskin.css-file(smSkin.css in my case):
.AFTableCellDataBackgroundColor:alias
{
background-color: #F5F5DC;
}
.AFTableCellDataBandedBackgroundColor:alias
{
background-color: #FFFFFF;
}
Configuration of trinidad-skins.xml
<skin>
<id>
sm.desktop
</id>
<family>
sm
</family>
<render-kit-id>
org.apache.myfaces.trinidad.desktop
</render-kit-id>
<style-sheet-name>
skins/sm/smSkin.css
</style-sheet-name>
</skin>
I will refer you to the trinidad documentation.
http://myfaces.apache.org/trinidad/trinidad-api/tagdoc/tr_table.html
In their example they declare the banding as row banding="row" I would assume the reason you do not get anything is that you have not declared if it is row or column banding.
I have a data entry web app where the control that has focus is given a yellow background color (and when the user navigates away, it turns back to white). The script to do this came from I-don't-know-where, and it breaks in IE7 causing all sorts of problems, like drop downs not working (the script was designed to work on textboxes and drop downs, or at least it was implemented with that in mind), and it works in ie6.
Some of my users have been switched to Ie7 without my being informed, and the rest will go to ie7 at some future time. So, I'd like to implement a friendlier solution. I really like jquery and am already using it on the app for a variety of things. Also, it has been suggested that cross browser support may/will eventually be important on the intranet.
What I would prefer to avoid is manually adding a bunch of onblur="SomeMethod()" (or something similar) to the controls (There must be 600+ in the app). In fact, if I tell my boss this he's probably going to throw something at me.
I am already using JQuery in the application. Where it is used function calls are explicit, and are all called in onblur.
Currently, I am of the mind to do something like this:
$(document).ready (function(
$(':text').focus(function()
{
//Do Highlighting
}
$(':text').blur(function()
{
//Good bye highlighting
}
)
Am I on he right track? Is onblur my best option? Is there a better way?
the other onblur functions show/hide child fields based on the value of the parent. I realize I am not providing code, but am I setting myself up for any conflicts?
Use jQuery's blur() and focus() methods.
Also, I think you mean to REMOVE highlighting with your blur function (blur means the user has clicked off of the element in question). Use focus() to turn on the highlighting.
$(document).ready (function() {
$(':text').focus(function() {
$(this).addClass('highlight');
});
$(':text').blur(function() {
$(this).removeClass('highlight');
});
});
There seems to be a workaround that makes the :focus pseudo-class work in IE6/7. I haven't used it myself but I think it's quite a established solution:
http://www.xs4all.nl/~peterned/csshover.html
With 600+ elements, a scriptless workaround is probably preferable, especially if older clients are involved.
$('textarea, input:text').focus(function() {
$(this).addClass('hilite');
}).blur(function() {
$(this).removeClass('hilite')
});
.hilite {
border: 2px solid gray;
}
blur/focus will work for you. If you're able, at some point, to move all your users all the way to IE8 you can also accomplish the desired effect with CSS:
input[type=text]:focus {
background-color: lightyellow;
}
This doesn't answer your question, but is an alternative... jQuery Tools Expose will apply an overlay to all elements outside your input box thus forcing the user to focus on the input. It's a nice feature and the plugin is very lightweight. I also posted some coding that does the same thing in this answer in case you don't want to use a plugin.
There is a free widget library for this task: Focus highlight widget.