Creating Dropdown Sorters/Filters in ListView & GridView

Yii 1.1 General Discussion
1

So, imagine that you want to take the sorters from the column headers in gridview and put them in a dropdown that has for options items to sort up/down by the various columns in gridview. What’s the best way of going about that in gridview?

Now for listview, what’s the best way to do the same, and also to filter by the values of your columns via ajax? ListView doesn’t have ajax filtering.

And then finally, what if you want to generate more than tabular tables with gridview, i.e. instead of <td>s u have <div>s. Basically, I’m trying to get a page that looks like this: http://holly.faceyspacey.com/thirsty-vip/baradmin/addbar-barlist.html to have both filters and sorters in the dropdown in the top right.

There’s a million hacks of both listview and gridview i can think of to do what i need to do, but rather than try a million options on gridview, then try a million options on listview, I wanna see what the community has in mind as the path of least resistance here.

Here are the requirements overall:

-ajax sorting from dropdown

-ajax filtering from dropdown

-ajax filtering from text field

-each item row isn’t a pure tabular row format, but rather graphically quite heavy

-ajax paging

-ajax deletion of rows with their subsequent removal from the DOM.

What’s the best way to go about this?

2

I think that the easies solution is to create a form, with




onSubmit=CHtml::ajax();

An ajax request that will refresh your view.

Now all filters, sorting, paging should submit the form. You can achive it with by setting an ajax function at the document.ready.

The best idea is to implement it with all standard links, in order to work perfectly without ajax.

Later you can add all the ajax function to dropdown, links and textbox.

In this way, if javascript is not enabled on the browser, your listview will work perfectly by posting.

3

@Benn, just asked me the following question (related to this which i figured out long ago):

yes, you add a filter in the CGridView configuration array that gets the options you want as normal. And then in the search() method of your model, you do this:




public function search()

{

        $sorter = new CSort;

        $sifter->defaultOrder = $this->attribute_name . " DESC";

        

        return new CActiveDataProvider(get_called_class(), array(

                'sort'=>$sorter,

        ));

}

and then in the CGridView Configuration you will have:




array(

       'name'=>'attribute_name',

       'value'=>'CHtml::encode($data->attribute_name)',

       'filter'=>$data->getDropdownOptions(),

),

I presume you already know how to do standard filtering via CDbCriteria since all the examples use that, which is why I didn’t provide an example for anything except sorting.

And also your model objects that represent these rows in this example must have a getDropdownOptions() method that produces an array with the keys being the values submitted to the server that will be available in the $model->attribute_name property. And the values of that array are obviously the options the end user sees in the dropdown.

Note: you will have a column whose corresponding dropdown can have sorting options (and even filtering options in combination) that don’t necessarily match the purpose of the column, but what I would do is put the dropdown on the far right above a somewhat useless or basic column like a date/time column. It’s common to have the far right dropdown do miscellaneous stuff.

Enjoy!