Yii Framework Forum: How can we display two header rows in CGridView - Yii Framework Forum

Jump to content

Page 1 of 1
  • You cannot start a new topic
  • You cannot reply to this topic

How can we display two header rows in CGridView Rate Topic: -----

#1 User is offline   Camron 

  • Newbie
  • Yii
  • Group: Members
  • Posts: 1
  • Joined: 27-May 12

Posted 27 May 2012 - 02:37 PM

Hi, Gurus, I am newbie to YII and want to display tow header rows in cGridView but i don't find anything related to that.

It must show main heading
e.g,
Consider the following as a grid:

Options Orientation having colspan 2 Type
Edit GridView LinearView isBoth


Edit yes No No
Edit No No No
Edit Yes Yes Yes



The above two are header rows and the below ones are data row which contain yes, no etc.

In this way i want to display CGridView on my page, i have tried to pass two rows but all in vain, i have also tried this:
$aryColumns = array(

array(
'header'=>'M',
'name'=>'',

),
array(
'header'=>'New</tr><tr>',
'name'=>'',
'headerHtmlOptions'=>array('colspan'=>'2'),

),
array(
'header'=>'Name',
'name'=>'name',


),
array(
'header'=>'Age',
'name'=>'age',

),
array(
'header'=>'BN',
'name'=>'name',

),

);


It generates two header rows but also generate two extra columns in tbody which is coming as there are 5 columns, two in above row and three in second, while it must only consider three columns while rendering tbody with data.

Please guide me in this regard.
0

#2 User is offline   Wenceslaus D'silva 

  • Junior Member
  • Pip
  • Yii
  • Group: Members
  • Posts: 21
  • Joined: 01-November 10
  • Location:Mumbai, India

Posted 30 May 2012 - 11:52 PM

View PostCamron, on 27 May 2012 - 02:37 PM, said:

Hi, Gurus, I am newbie to YII and want to display tow header rows in cGridView but i don't find anything related to that.

It must show main heading
e.g,
Consider the following as a grid:

Options Orientation having colspan 2 Type
Edit GridView LinearView isBoth


Edit yes No No
Edit No No No
Edit Yes Yes Yes



The above two are header rows and the below ones are data row which contain yes, no etc.

In this way i want to display CGridView on my page, i have tried to pass two rows but all in vain, i have also tried this:
$aryColumns = array(

array(
'header'=>'M',
'name'=>'',

),
array(
'header'=>'New</tr><tr>',
'name'=>'',
'headerHtmlOptions'=>array('colspan'=>'2'),

),
array(
'header'=>'Name',
'name'=>'name',


),
array(
'header'=>'Age',
'name'=>'age',

),
array(
'header'=>'BN',
'name'=>'name',

),

);


It generates two header rows but also generate two extra columns in tbody which is coming as there are 5 columns, two in above row and three in second, while it must only consider three columns while rendering tbody with data.

Please guide me in this regard.



Hey Camron,

I was looking for a solution but could not find one on any forums, i used jquery and cgridviews afterAjaxUpdate property to manipulate the header and also keeping the sort functionality

This is how i did it. First i shall give you the scenario i wanted a gridview loading after the user selected few options, so i am loading the gridview in a renderpartial which comes from an ajax function (you dont need to do that). so i run the below mentioned js function to manipulate the header. i will be using placeholder to tell u excatly what i am doing

function manipulateHeader(){
//	var tbHead = jQuery("{div container of the gridview} {gridview id} .items {th id starting with}");
        var tbHead = jQuery("#renderData #attmon-grid .items [id^=attmon-grid]");
	var htm = jQuery('<tr />'); //creation of the tr row
	tbHead.each(function(e){
		var th = jQuery(this);
		var thChd = th.children();
		var href = thChd.attr('href');
       		// match the attributes from your model which i have checked for undefined cause i have a column with out any sorting and header name
		if(href === undefined || href.match('userCode') || href.match('levelCode') || href.match('progGroupCode')) {
			th.attr('rowspan',2)
			htm.append(th);
		} else {
			if(e % 2 === 0 ){
				if(href.match('absValLatCount'))
					htm.append('<th colspan="2">'+absValLatCount+'</th>');
				else if(href.match('absValAbsCount'))
					htm.append('<th colspan="2">'+absValAbsCount+'</th>');
				else if(href.match('absTotalLat'))
					htm.append('<th colspan="2">'+absTotalLat+'</th>');
			}

		}

	});
	tbHead.parent().before(htm);
}



Hopefully this will do the trick for you.
Cheers
0

Share this topic:


Page 1 of 1
  • You cannot start a new topic
  • You cannot reply to this topic

1 User(s) are reading this topic
0 members, 1 guests, 0 anonymous users