How can we display two header rows in CGridView

Yii 1.1 Tips, Snippets and Tutorials
1

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.

2

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