A Single Page with a List and a Detail

How-tos

gridview, detail, ajax

The CRUD generator of Gii has done a wonderful job for you, and you already have a list of items in "index" page and a detailed view of a specified item in "view" page. But you may want to show both of them in a single page, in which you can click on an item in the grid to seehow its detail in the same page on the fly, without having to go to another view page. Is it possible with Yii? Yes, it is. Let's start with thea rieviewing of the current code. ## Original Index Page For example, assume that the following is an "index" page that Gii has generated for Post model for you.You can see "date" and "title" in the grid, but you have to go to a "view" page to see other attributes like "body" and "created_by".

Now we want to show all the attributes in a block oof the selected post in the same page when you click on an postrow in the grid. ## Sub View for Detail The first thing we want to do is to create a sub view that shows all the attributes of a post. We will name it as "_view.php".As you may notice, this is almost the same with "view.php" that Gii has generated for you. You can make it very easily with copy-and-pasting.

Now we call this sub view from inside the "index.php" view script.```

The sub view is located after the grid. You may locate it before the grid if you prefer. But the important point is that the sub view should not be inbe outside of the Pjax area. You may be aware that we have to supply an additional parameter called "post" to the index view for, since the sub view need it to work as expected. We will modify the "index" action next.

## Modifying Index Action```

We want to get a post instance that is to be passed to the view. For the moment, Iit's enough for us to have something like the following with a quick-and-dirty trick:$searchModel = new PostSearch();
$dataProvider = $searchModel->search(Yii::$app->request->queryParams);
$post = new Post(); /* getcreate an empty post instance */
// $post = Post::findOne(1); /* get a post with id = 1 */## Ajax Action

We are now going to create an ajax action that renders the selected post as an ajax response:```

It's almost likethe same as the existing actionView() method. It displays "_view.php" without the enclosing layout.

## Ajax Updating```php
...
 
$this->title = 'Posts';
 
$this->params['breadcrumbs'][] = $this->title;
 
<?php
$ajax_url = yii\helpers\Url::to(['ajax-view']); // #1
$csrf_param = Yii::$app->request->csrfParam; // #2});
");

 
?>  
 
<div class="post-index">
 
 
    <h1><?= Html::encode($this->title) ?></h1>
 
...

```2. Because we need to have CSRF protection token sent in the ajax request, we get its parameter name and value from the Request application component.

3. We have attached an 'click' event handler on the rows of the GridView table. You might think "$('tr').on('click', function(){ ..." may also work, but it would not. The event handler should be attached to an element that is not inoutside of the Pjax area. 4. The key attribute (usually 'id') of the row can be retrieved easily in this way. 5. IfWhen the ajax call has been successful, the contents of "post-detail" div will be replaced by the ajax response that had beenwas rendered by "actionAjaxView" method.

## ConclusionThat's all. There's nothing so complicated here.

You may want to do something more to improve your page. The first thing you may want to do might be supplying more appropriate initial display of the selected post. It's up to your needs. Have fun.