Print Page - Change height and background on groupview's group row

Title: Change height and background on groupview's group row
Post by: Juan Antonio Martínez 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

Title: Re: Change height and background on groupview's group row
Post by: stworthy 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>

Title: Re: Change height and background on groupview's group row
Post by: Juan Antonio Martínez 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

Title: Re: Change height and background on groupview's group row
Post by: roberto on February 03, 2018, 03:26:29 PM

did u find any solution? I have the same question.

EasyUI Forum

General Category => EasyUI for jQuery => Topic started by: Juan Antonio Martínez on May 18, 2015, 08:54:47 PM