[Majestic]

Hi guys,

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.c...-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.

[Majestic]

Any idea anyone?

[Tsunami]

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:

CSS:

.table-accordion tr.header {
  cursor: pointer;
}
.table-accordion tr.section > td {
  border: 0;
  padding: 0;
}
.table-accordion tr.section > td > div {
  display: none;
}

PHP:

<?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.

[Majestic]

Thanks a lot for your answer. This got me one step further. But what I need to do, is inserting lots of different "data set" based information.
So, I want to show content, related to that "column" that is active. How could I solve this?

At the moment, I cant even figure out, how to insert html content into the sections. Thats my standing at the moment:

<?php
        $htmlContent = '<div class="test">
                            <img src="/abc/image.png"><div class="test2"></div>
                        </div>';
        ?>

        <script> 
            var htmlContent = "<?php echo $htmlContent; ?>"; 
        </script>

        <?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(htmlContent);
        });
        }
        accordionSections();
        ');
        ?>

With this, the "section" div is just empty.

Any ideas?

[Majestic]

I'm not any further with this issue. :-(

Anyone got another idea, how to solve this problem?

[Majestic]

^^

[Tsunami]

Oops, I kind of forgot about this thread Here's how I get data from the current row:
(note rowHtmlOptionsExpression)

<?php $this->widget('zii.widgets.grid.CGridView', array(
	'afterAjaxUpdate'=>'js:accordionSections',
	'id'=>'accordion-grid',
	'itemsCssClass'=>'items table-accordion',
	'rowHtmlOptionsExpression'=>'array(
		"class"=>"header",
		"data-something"=>$data->something,            // Store row data in HTML5 data attributes
		"data-something-else"=>$data->something_else,
	)',
	'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
        $htmlContent = '<div class="test">
                            <img src="/abc/image.png" alt="{something_else}"><div class="test2">{something}</div>
                        </div>';
?>

<?php Yii::app()->clientScript->registerScript('accordionSections', '
  var htmlContent = "' . addslashes($htmlContent) . '";
  
  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);
      
      // Replace data
      var content = htmlContent;
      content.replace("{something}", $el.data("something"));
      content.replace("{something_else}", $el.data("somethingElse"));    // Note that data-something-else is accessed with $el.data("somethingElse")
      
      $content.find("div").html(content);
    });
  }
  accordionSections();
') ?>

[Gerhard Liebenberg]

Have you tried TbRelationalColumn here?