Yii 2.0: A Single Page with a List and a Detail

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 show 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 a review of the current code.

Original Index Page

yii2 index page

For example, assume that the following is an “index” page that Gii has generated for Blog model for you.

As you see, this page lists the blogs in a GridView. It shows only a few attributes of the blog because of the limited space. 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 of the selected blog in the same page when you click on an row in the grid.

Original View Page

yii2 view page

Sub View for Detail

The first thing we do is to create a sub view that shows all the attributes of a blog. We will name it as “_view.php”.

It uses a DetailView to show all the attributes of a blog. 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 “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 be outside of the Pjax area.

You may be aware that we have to supply an additional parameter called “blog” to the index view, since the sub view need it to work as expected. We will modify the “index” action next.

Modifying Index Action

The original controller code goes like this:

We want to get a blog instance that is to be passed to the view. For the moment, it’s enough for us to have something like the following with a quick-and-dirty trick:

Now your index page will start to show a blog after the grid, although the blog is fixed to an empty one(or one with its id being 1).

Ajax Action

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

It’s almost the same as the existing actionView() method. It displays “_view.php” without the enclosing layout.

Ajax Updating

Now, here comes a magic of ajax updating. Insert the following lines in “index.php”:

Here are some tips and hints.

  1. yii\helpers\Url::to() generates an url string that can be used in javascript.
  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 outside of the Pjax area.
  4. The key attribute (usually ‘id’) of the row can be retrieved easily in this way.
  5. When the ajax call has been successful, the contents of “post-detail” div will be replaced by the ajax response that was rendered by “actionAjaxView” method.

A Single Page with a List and a Detail

Yii2 A Single Page with a List and a Detail




Prakash S

Prakash S

I would like to introduce myself as a Software professional opting for the career in software industry. I'm Prakash S, a MCA graduate and trained as industry level practice for Software technology. Basically I am a PHP Developer but now days exploring more in HTML5, CSS, AngularJS and jQuery libraries.