Combine Cgridview With Cjuiaccordion?

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

Any idea anyone?

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.

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?

I’m not any further with this issue.

Anyone got another idea, how to solve this problem?

^^

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();

') ?>

Have you tried TbRelationalColumn here?