I’m using CGridView (rather TbExtendedGridView) to show pretty complex data. What I want to achieve is, showing further content for each row in a hidden (onclick sliding open) div e.g.
My first thought was, to combine CGridView with CJiuAccordion. But I dont really know, how to achieve this.
Has anyone had the same problem and is able to help me out, how to fix this?
Thanks a lot!
Edit: what I’ve found so far is this here: http://yii-booster.clevertech.biz/extended-grid.html#yw26 but this is a little more complex, than what I want to do, I guess. But I still need to pass some info about the data of the actual row to the div partial to show up.
I was trying to do the same thing, but I think because of the complexity of CGridView (with the dynamic pagination and sorting and all) this isn’t possible. I am however having some luck with creating my own accordion like this:
<?php $this->widget('zii.widgets.grid.CGridView', array(
//'afterAjaxUpdate'=>'js:accordionSections', // This may work for recreating sections after paginating or sorting
'id'=>'accordion-grid',
'itemsCssClass'=>'items table-accordion',
'rowHtmlOptionsExpression'=>'array("class" => "header")',
'selectionChanged'=>'js:function(id) {
$("tr.section div").slideUp(250);
var $header = $("#" + id + " tr.selected");
// If no header is selected, all sections are collapsed
if(!$header.length)
return;
var $section = $header.next("tr.section");
$section.find("div").slideDown(250);
}',
)); ?>
<?php Yii::app()->clientScript->registerScript('accordionSections', '
function accordionSections() {
$("#accordion-grid tr.header").each(function(i, el) {
var $el = $(el);
// Dynamically get column count of header for section colspan
var $content = $("<tr class=\"section\"><td colspan=\"" + $el[0].cells.length + "\"><div></div></td></tr>").insertAfter($el);
$content.find("div").html("*** CONTENT HERE ***");
});
}
accordionSections();
') ?>
Only one section can be open at a time, and of course the sections have to be recreated after paginating or sorting (afterAjaxUpdate may work for that). I’m also looking into opening a section on page load based on the primary key.