EasyUI Forum
April 25, 2024, 01:07:31 PM *
Welcome, Guest. Please login or register.

Login with username, password and session length
News:
 
   Home   Help Search Login Register  
Pages: [1]
  Print  
Author Topic: Change height and background on groupview's group row  (Read 7088 times)
Juan Antonio Martínez
Jr. Member
**
Posts: 68



View Profile
« on: May 18, 2015, 08:54:47 PM »

Hi!
I want to change group row in datagrid groupview, to change height, add a logo and set up row bg and fg colors.

I wrote something like:
Code:
    groupFormatter: function(club,rows){ // set proper colors on team rows
        var fg='<?php echo $config->getEnv('vw_hdrfg2'); ?>';
        var bg='<?php echo $config->getEnv('vw_hdrbg2'); ?>';
        var logo='<img width="40" height="40" alt="'+rows[0]['LogoClub']+'" src="/agility/images/logos/'+rows[0]['LogoClub']+'"/>'
        return <span style="height:40px;line-height:40px;font-size:1.5em;font-weight:bold;background-color:' + bg + ';color:' + fg + ';font-weight:bold;">' + logo +' - ' + club + '</span>';
    }

But no success
¿Any idea?
Thanks in advance
Juan Antonio
Logged
stworthy
Administrator
Hero Member
*****
Posts: 3581


View Profile Email
« Reply #1 on: May 19, 2015, 01:26:08 AM »

Please add the code below to override the group CSS style.
Code:
<style>
.datagrid-body .datagrid-group{
background-color: #ccc;
height:40px;
line-height: 40px;
}
.datagrid-body .datagrid-group .datagrid-group-title{
height:40px;
line-height: 40px;
}
.datagrid-body .datagrid-group .datagrid-group-expander{
margin-top:7px;
}
</style>
Logged
Juan Antonio Martínez
Jr. Member
**
Posts: 68



View Profile
« Reply #2 on: May 20, 2015, 02:55:21 AM »

Fine... but now I'have another problem: I need to populate group row with several tabulated fields... and need to expand row to all the available space. something like:
Code:
function myGroupRowFormatter(val,row) {
.... /* generate data */
    return '<table style="table-layout:fixed;width:100%"><tbody><tr>'+
        '<td style="width:5%;"><img src="myLogo.png" alt="my logo" height="75"/></td>' +
        '<td style="width:55%;text-align:left;">Team: '+value+'</td>' +
        '<td style="width:20%;text-align:right;">Time: '+(time).toFixed(2)+'</td>' +
        '<td style="width:20%;text-align:right;">Penal.:'+(penal).toFixed(2)+'</td>'+
        '</tr></tbody></table>';
}

But no success :-( table shrinks and don't know how to make "width=100%" get working
Thanks in advance
« Last Edit: May 20, 2015, 03:05:59 AM by Juan Antonio Martínez » Logged
roberto
Jr. Member
**
Posts: 88


View Profile Email
« Reply #3 on: February 03, 2018, 03:26:29 PM »

did u find any solution? I have the same question.
Logged
Pages: [1]
  Print  
 
Jump to:  

Powered by MySQL Powered by PHP Powered by SMF 1.1.18 | SMF © 2013, Simple Machines Valid XHTML 1.0! Valid CSS!