Yii Framework Forum: Combine Cgridview With Cjuiaccordion? - Yii Framework Forum

Jump to content

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

Combine Cgridview With Cjuiaccordion? I need to show extra content for each row, in a accordion like manner Rate Topic: -----

#1 User is offline   Majestic 

  • Standard Member
  • PipPip
  • Yii
  • Group: Members
  • Posts: 138
  • Joined: 28-March 11
  • Location:Germany, Stuttgart

Posted 03 February 2013 - 01:37 PM

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

#2 User is offline   Majestic 

  • Standard Member
  • PipPip
  • Yii
  • Group: Members
  • Posts: 138
  • Joined: 28-March 11
  • Location:Germany, Stuttgart

Posted 12 February 2013 - 04:04 PM

Any idea anyone?
0

#3 User is offline   Tsunami 

  • Standard Member
  • PipPip
  • Yii
  • Group: Members
  • Posts: 150
  • Joined: 16-February 12

Posted 13 February 2013 - 06:33 AM

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

#4 User is offline   Majestic 

  • Standard Member
  • PipPip
  • Yii
  • Group: Members
  • Posts: 138
  • Joined: 28-March 11
  • Location:Germany, Stuttgart

Posted 16 February 2013 - 05:43 PM

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

#5 User is offline   Majestic 

  • Standard Member
  • PipPip
  • Yii
  • Group: Members
  • Posts: 138
  • Joined: 28-March 11
  • Location:Germany, Stuttgart

Posted 27 February 2013 - 05:04 PM

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

Anyone got another idea, how to solve this problem?
0

#6 User is offline   Majestic 

  • Standard Member
  • PipPip
  • Yii
  • Group: Members
  • Posts: 138
  • Joined: 28-March 11
  • Location:Germany, Stuttgart

Posted 02 March 2013 - 06:04 PM

^^
0

#7 User is offline   Tsunami 

  • Standard Member
  • PipPip
  • Yii
  • Group: Members
  • Posts: 150
  • Joined: 16-February 12

Posted 08 March 2013 - 05:02 PM

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

0

#8 User is offline   Gerhard Liebenberg 

  • Advanced Member
  • PipPipPip
  • Yii
  • Group: Members
  • Posts: 338
  • Joined: 07-January 12
  • Location:Stillbay - Western Cape - South Africa

Posted 14 April 2013 - 12:44 PM

Have you tried TbRelationalColumn here?
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