jQuery Grid Plugin - jqGridForum

Topic RSS

How to change subgrid header background color

20/02/2009
19:07

maggie

Member

Members

Forum Posts: 49

Member Since:
17/12/2008

Offline

Hello,

I tried to change the subgrid header background color from blue to grey. I tried to configure themes\\basic\\grid.css but it does not work. Can you please help me? Thanks!

Thanks!

Maggie

24/02/2009
07:40

tony

Sofia, Bulgaria

Moderator

Members

Moderators

Forum Posts: 7721

Member Since:
30/10/2007

Offline

Hello,

Look in the CSS carfully. There are items for the subgrid where you can play with this. It should work.

Regards

Tony

For professional UI suites for Java Script and PHP visit us at our commercial products site - guriddo.net - by the very same guys that created jqGrid.

24/02/2009
10:19

maggie

Member

Members

Forum Posts: 49

Member Since:
17/12/2008

Offline

I found the css and it worked! Thanks!

Maggie

24/02/2009
16:13

cartman

Member

Members

Forum Posts: 18

Member Since:
14/02/2009

Offline

Maggie, can you post your findings here so others can learn from it? 🙂

Thanks

25/02/2009
09:33

maggie

Member

Members

Forum Posts: 49

Member Since:
17/12/2008

Offline

Hello,

I use the css file /themes/basic/grid.css. There is a section for subgrid. There you should find a style called celldivth which is the style for the subgrid header. I change the background-color to #DDDDDD which is grey.

.celldivth {
float: left; /*fix for buggy browsers*/
border: 1px solid #CCCCCC;
background-color: #DDDDDD;
border-bottom: 1px solid #CBC7B8;
text-align: left;
overflow: auto;
}

Hope this helps.

Thanks! Maggie

07/10/2009
07:18

Corrado

Italy - Milano

Member

Members

Forum Posts: 16

Member Since:
22/05/2009

Offline

JQuery 1.3.1

jqGrid 3.4.4

Hi,

I would like to apply different styles to subgrid. Main grid has:

subGridRowExpanded: function(subgrid_id, row_id) {

var subgrid_table_id = subgrid_id + “_t”;

$('#'+subgrid_id).html('<table id=”' + subgrid_table_id + '” class=”scrollSubgrid” cellpadding=”0″ cellspacing=”0″></table>');

…

}

where the subgrid class name is scrollSubgrid.

In the CSS I duplicated the main grid styles and changed “scrool” to “scrollSubgrid”. What I would like is to change header background and td font color. I wrote:

table.scrollSubgrid thead th {

background-color:#C7C422;

border-right:1px solid #ffffff;

border-bottom: 1px solid #ffffff;

color:#ffffff;

font-size: 90%;

font-weight: bold;

height:auto;

overflow: hidden;

padding: 2px;

text-align: left;

vertical-align: top;

white-space: nowrap;

}

table.scrollSubgrid tbody td {

border-left: 1px solid transparent;

border-bottom: 1px solid #809396;

/*set an unused color to be index color*/

_border-color:tomato; /*For IE6-*/

/*then remove this indexed color*/

_filter:chroma(color=tomato);/*For IE6-*/

color:#757420;

font-size: 90%;

overflow: hidden;

padding: 2px;

text-align: left;

text-overflow: ellipsis;

white-space: wrap;

}

My subgrid rows has new font color but header doesn't change its background-color. I inspected with FireBug and I have:

…

…

</table>

</div>

</table>

</div>

Why the header table has not scrollSubgrid class?

Many thanks!

Corrado.

09/10/2009
03:21

tony

Sofia, Bulgaria

Moderator

Members

Moderators

Forum Posts: 7721

Member Since:
30/10/2007

Offline

Hello Corrado,

The table that contain the header is created dynamically, so the class scrollSubgrid is not added.

You can do this diffrent ways, One possible solution:

subGridRowExpanded: function(subgrid_id, row_id) {

var subgrid_table_id = subgrid_id + “_t”;

......

.... jqGrid({.....});

$(".grid_hdiv table:first","#"+row_id).addClass("scrollSubgrid");

}

Please let me known if this work.

Tony

For professional UI suites for Java Script and PHP visit us at our commercial products site - guriddo.net - by the very same guys that created jqGrid.

10/10/2009
08:13

Corrado

Italy - Milano

Member

Members

Forum Posts: 16

Member Since:
22/05/2009

Offline

Hi,

with the following bold correction

$('.grid_hdiv table:first', '#'+row_id + ' + tr').addClass("scrollSubgrid");

subgrids have different style.

Many thanks.

All RSS

Forum Timezone: Europe/Sofia

Most Users Ever Online: 715

Currently Online:
45 Guest(s)

Currently Browsing this Page:
1 Guest(s)