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 the "index" page and a detailed view of a specified item in the "view" page. But you may want to show both of themthe index and the view in a single page, in which. That way you can click on an item in the grid to seehow its detail in the same page on the fly,s without having to go to another 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 the 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 post row 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 ascall it "_view.php".```
It uses a DetailView to show all the attributes of a post.
As you may notice, this is almost the sameidentical with "view.php", that Gii has generated for you. You can make it very easily with copy-and-pasting. Now we callinclude this sub -view from insidein the "index.php" view scriptpage.```

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 needs it to work as expected. We will modify the "index" action next. ## Modifying Index Action The original controller code goelooks like this:```

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 Now, here comes athe magic of ajax updating. Insert the following lines in "index.php": ```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.!