Probably simple answer: How to change grid group header style ?

**altamirador** · 7 Jun 2009 6:29 AM

Hi to all !

Thanks for reading this and tinkering with it !

Before posting, I spent about 2 hours "googleing" an trying to find the answer to a problem that is probably very simple.

I'm creating a simple grouping grid ans, so far, everything is working. I'm fixing some cosmetic problems...

I'd like to be able to custom render the group header instead of what is rendered by default in terms of styles and colors...

I tried to use this:
(this does not display a span of 120px wide...)

Code:

groupTextTpl: '<span style="width:120px;font-style:bold;">{text}</span> {[ values.rs[0].data["Titre"] ]} ({[values.rs.length]} {[values.rs.length > 1 ? "Items" : "Item"]}) '

or this:
(this returns a header with 2 "plus/minus" signs)

Code:

groupTextTpl: '<div style="width:120px;font-style:bold;">{text}</div> {[ values.rs[0].data["Titre"] ]} ({[values.rs.length]} {[values.rs.length > 1 ? "Items" : "Item"]}) '

Asides from this, I'd llike to be able to change the background color and remove the underline of the entire row of the header in the grid.

I have "inspected" the code with Firebug... I could change the "x-grid-group-hd" class but I'd rather not since this class is used elsewhere in my website !

Many thanks to everyone for your enlightments !

Altamira !

**Animal** · 7 Jun 2009 6:33 AM

CSS rules can be targetted.

Code:

.myPanelClass .x-grid-group-hd {
}

This is why Ext applies classes to elements.

**altamirador** · 7 Jun 2009 6:43 AM

Animal ! I knew you where there somewhere in the cyberspace !

I have read a lot of your contributions, and it has been very helpful in becoming better at using Extjs !

That being said, you will find me stupid for I do no really understand the concept of "css re targeting" ???

I would I got about applying that newly created CSS to an existing header group ? Here is my html from Firebug:

HTML Code:

<div id="ext-gen40-gp-numeroinscription-2999-hd" class="x-grid-group-hd" style="width: 708px;">

Thanks again for your input !

Altamirador !

**Animal** · 7 Jun 2009 6:45 AM

As a web developer you need to be familiar with CSS.

http://www.w3.org/TR/CSS2/selector.html

**altamirador** · 7 Jun 2009 6:47 AM

Will do the reading ! THX !

**altamirador** · 7 Jun 2009 7:01 AM

Marvelous !

See ! I learned something today ! It works like a breeze !

Thx Animal !

**altamirador** · 7 Jun 2009 7:33 AM

Thanks to Animal, I have read something about CSS that I was not familiar and I found somewhat of a bug in Ext grid rendering...

If you set your group header to contain a DIV like this:

HTML Code:

groupTextTpl: '<div style="width:120px;font-style:bold;">{text}</div> {[ values.rs[0].data["Titre"] ]} ({[values.rs.length]} {[values.rs.length > 1 ? "Items" : "Item"]}) '

You will get something like the what's in the first picture attached...Another DIV with a plus/minus symbol...

By reading what Animal suggested to me (CSS Selectors..See reference above) I was able to figure out that the CSS in Ext-all.css could be flawed...Thus preventing from using DIV's in goupTextTpl.

Code:

.x-grid-group-hd {
    border-bottom: 2px solid #99bbe8;
    cursor:pointer;
    padding-top:6px;
}
.x-grid-group-hd div {
    background:transparent url(../images/default/grid/group-expand-sprite.gif) no-repeat 3px -47px;
    padding:4px 4px 4px 17px;
    color:#3764a0;
    font:bold 11px tahoma, arial, helvetica, sans-serif;
}

Since the CSS ".x-grid-group-hd div " will affect all subsequent DIV's and that in the group header there is indeed a DIV to encompass all that is included in in groupTextTpl:

HTML Code:

<div id="ext-gen40-gp-numeroinscription-2275-hd" class="x-grid-group-hd" style="width: 708px;"><div><div style="width: 120px;"># cours: 2275</div> TIME MANAGEMENT AND DELEGATION - Level 1 (1 Item) </div></div>

I suggest that the CSS should be changed to only affect the first DIV inside. Hence this modification:

Code:

.x-grid-group-hd {
    border-bottom: 2px solid #99bbe8;
    cursor:pointer;
    padding-top:6px;
}
.x-grid-group-hd div:first-child {
    background:transparent url(../images/default/grid/group-expand-sprite.gif) no-repeat 3px -47px;
    padding:4px 4px 4px 17px;
    color:#3764a0;
    font:bold 11px tahoma, arial, helvetica, sans-serif;
}

Comments are welcomed !

Altamira

**dfox** · 10 Sep 2009 6:16 AM

Hi,
I've recently been attempting to do the same thing and this is how I implemented styles in the grid group header.

From the base example:

Code:

var grid = new Ext.grid.GridPanel({
    ...
    view: new Ext.grid.GroupingView({
        groupTextTpl: '{text} ({[values.rs.length]} {[values.rs.length > 1 ? "Items" : "Item"]})'
    }),
});

Personally, I wanted to apply red text to the group header if the content contained 'bad' data. Meaning one of my columns is a indicator field and if a row had a 'Y' in that column it needed to be flagged.

So, using the <p> tag I could apply a style:

Code:

groupTextTpl: '<p style="color:red">{text} ({[values.rs.length]} {[values.rs.length > 1 ? "Items" : "Item"]})</p>'

But this caused every line to be colored red. The ExtJs API Documentation page refers you to Ext.XTemplate which can be a bear to understand (especially for an ext-js newbie like me).

The line of code specified by the groupTextTpl is internally inserted into a piece of code something like:

Code:

var tpl = new Ext.XTemplate(
    '<div id=x>',
    Your_groupTextTpl_line_here,
    '</div>'
);

Note: That is not the actual internal code but relays the essence of it.

But this means that we can utilize some of the template functionality, specifically:

Code:

     groupTextTpl: '<p <tpl for="rs"><tpl for="data"><tpl if="OUT_OF_DATE == &quot;Y&quot;" > style="color:red"</tpl></tpl></tpl> >{group} ({[values.rs.length]} {[values.rs.length > 1 ? "Items" : "Item"]})</p>'

What this does is:
insert the <p
Then begin a template for loop on the internal array 'rs'
Then begin a 2nd template for loop on the internal array 'data'
Then check my data, called OUT_OF_DATE to see if it is a 'Y'
If it is, insert the string ' style="color:red" '
End all looping
Then insert a closing '>' followed by the rest of the text on the header line, including an ending </p>

The only problem is that this will generate:

Code:

<p style="color:red" style="color:red"> Text </p>

when there are two rows where OUT_OF_DATE is 'Y'.

Unfortunately there is no break loop functionality (I completely understand why), nor is
there an else to the template if statements.

But in the end it rendered what I wanted it to render.

Hope this is understandable

Enjoy

DFox

Probably simple answer: How to change grid group header style ?

Thread Tools

Search Thread

Display

Probably simple answer: How to change grid group header style ?

Probably simple answer: How to change grid group header style ?

Found something interesting...

Found something interesting...