Dynamic Parent Child Cgridviews On A Single Form (Solved)

I can’t find much help on creating views/forms with dynamic Parent and Child models working interactively on the same form.

So, this is what I’m going to try:

  1. Create a CForm to be able to work with subforms and multiple models.

  2. Parent model is displayed in a CGridview at the top.

  3. Child models are displayed in a bottom CGridview.

  4. When you click on a record in the Parent gridview, it must filter (using Ajax or something) the Child gridview to only display the Child records related to the selected Parent record.

  5. Beneath the bottom gridview, put a "Add child record" button which displays a third subform under the bottom gridview to enter data for a new child record.

  6. Update the bottom gridview after child record was added.

  7. Make a similar button for the Parent gridview. Again, update the bottom gridview after Parent record was added.

Any thoughts?

What about using scope and default scope instead of filtering?

I think what you will need in your view will be

[list=1]

[*]a CGridView for Parent model

[*]a form for Parent model

[*]a CGridView for Children

[*]a form for Child model

[/list]

Each part can be implemented as a partial view.

And correspondingly you will need 4 model instances in your controller.

[list=1]

[*]a CActiveRecord model for Parent grid that controls the search parameters

[*]a CActiveRecord model for Parent form for creation

[*]a CActiveRecord model for Child grid that controls the search parameters

[*]a CActiveRecord model for Child form for creation

[/list]

I don’t think we need a special CForm model for this page.

I would start this page by combining 2 "admin" pages of Parent and Child. And I would try next to combine the "admin" and "create" pages of Child.

(As you may know, I’m speaking of the CRUD pages generated by gii. Modifying the gii-generated CRUDs has always been the fastest way for me. I’m a faithful believer in gii. :) )

Thanx for the tips softark. I will try that and report back.

softarc

I’m struggling a bit. How do I combine two admin pages? Do I render them in a separate (third) master page, or do I copy their content into a new admin page?

How do I get them to use separate controllers?

I used the dynamicdataproviderbehavior extention to get a DataProvider of the Parent model’s related models - which I then displayed in a GridView. It worked, but not on many-many relations. And obviously the child gridview’s buttons did not use a separate controller and simply performed actions from the parent controller.

Gerhard

I’m very sorry, but I’ve never had a chance to write a complicated page that contains a pair of parent-child CGridViews. So I can’t help you a lot.

But I would write a code like the following just for a starting point …




// in controller (ParentController.php)

	public function actionAdminEx()

	{

		// Parent model instance for parent grid search parameters

		$parent_model = new Parent('search');

		if(isset($_GET['Parent']))

			$parent_model->attributes=$_GET['Parent'];


		// Child model instance for child grid search parameters

		$child_model = new Child('search');

		if(isset($_GET['Child']))

			$child_model->attributes=$_GET['Child'];


		$this->render('admin_ex',array(

			'parent_model'=>$parent_model,

			'child_model'=>$child_model,

		));

	}


// in view (views/parent/admin_ex.php)


<?php $this->widget('zii.widgets.grid.CGridView', array(

	'id'=>'parent-grid',

	'dataProvider'=>$parent_model->search(),

	'filter'=>$parent_model,

	'columns'=>array(

		...

	),

)); ?>

...

<?php $this->widget('zii.widgets.grid.CGridView', array(

	'id'=>'child-grid',

	'dataProvider'=>$child_model->search(),

	'filter'=>$child_model,

	'columns'=>array(

		...

		array(

			'class'=>'CButtonColumn',

			'viewButtonUrl' => 'array("child/view", "id"=>$data->id)',

			'updateButtonUrl' => 'array("child/update", "id"=>$data->id)',

			'deleteButtonUrl' => 'array("child/delete", "id"=>$data->id)',

		),

	),

)); ?>



I have created a new aciton named ‘adminEx’ and a new view file named ‘admin_ex’, leaving the existing ‘admin’ action and ‘admin’ view untouched. But you may modify the existing action and view file instead.

Now the code above will display a page with 2 CGridViews, one for Parent and the other for Child.

They should work fine independently, including the ‘view’, ‘update’ and ‘delete’ buttons of the child grid.

But they are independent. Clicking a row on the parent grid will not update the child grid.

We need some extra coding for that.

[s]1) we have to prepare a search form for the child grid

  1. retrieve the id of the parent model that has been clicked on the parent grid

  2. set the id to ‘parent_id’ field in the search form

  3. submit the search form to update the child grid[/s]

This may also need some extra javascript coding, I guess.

But, I have to say sorry again, I can’t go any further right now.

[EDIT]

We may make use of CGridView::selectionChanged to connect 2 grids.

Hi softark. This is indeed going to be a bit of a struggle.

I’m trying to re-write a Microsoft Access (VB) program (with some forms handling parent-child relations up to 5 levels deep).

I think Microsoft web technologies like Silverlight can do dynamic parent-child forms, but I’m fedup for being told by MS every 5 years that you have to re-write your entire system because they are discontinuing the product.

So I’m trying php which should be more long-term. I just hope I can get yii to do dynamic parent-child forms.

Thanx for your input. I will report back.

Gerhard,

Were you able to figure it out?? I can’t believe this is that hard. I can’t find a good tutorial on this, and every tutorial I do look at is vague at best. I have read the articles on forms and collecting data, but it doesn’t make sense. I find it hard to believe no one has addressed this basic functionality yet. If they have, it is not easy to find.

Lets pretend for a moment that there is no such thing as gridviews and you just have tables at your disposal.

How would you approach this problem then?

I would think you would have something clickable in the table. It would load content into the ‘child’ div via ajax. Maybe a partial view.

Start there (get the concept down) and work backwards to gridviews.

Hi guys.

I’m almost done.

I first tried using CHtml::ajax, but I needed more control.

So, I then had to learn lots more Javascript, Ajax and jquery - which is a good thing I suppose :)

I hope to finish this weekend, then I will post the solution.

Regards

Gerhard

Any Luck… I can’t figure this out. I am using the multimodelform, but nor what it was intended for.

A tutorial on how to have parent child records (not just a link to Tabular input) would be great. I can’t believe this is not a more relevant feature that there are not any tutorials. I need the both the parent form and child forms to be editable.

Thanks for the help

Sorry for taking so long guys. This one kept me busy.

I had to put the answer in a wiki. It is long.

finally {

http://www.yiiframework.com/wiki/323/dynamic-parent-and-child-cgridciew-on-single-view-using-ajax-to-update-child-gridview-via-controller-with-many_many-relation-after-row-in-parent-gridview-was-clicked/

}

Regards

Gerhard

Hi Gerhard,

Thank you for your wiki. It sure is a great help for us all. :lol:

Thanks for your pointing in the right direction softark. ;)