Creating a jQueryUI Sortable CGridView Follow @yiiframework

Hi,

I was having a javascript error : "a.curCSS is not a function".

Found why : The version of jquery ui used in this wiki is outdated regarding the jquery version provided in fresh yii install. I recomand using ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.min.js, worked for me.

Great wiki though, worked perfectly for me thank you!

It works like charm. FYI, for guys like me who know little about jQuery UI, there is nothing to download or install. Just follow the this post and pay special attention to the filter part in the controller if you have one. For me, I was getting the Not Found error because the filter I set up in my controller applied to all actions which including sort action. Nice post!!

it works. thanks

Thank you blindmoe for this great article. It helped me a lot.

And I'd like to share my experience with you all. I think I have come up with a solution for the ajax update problem.

You can make use of the CGridView::afterAjaxUpdate to make the grid sortable again after it is updated by ajax. (The situation can occur when you have applied a filter, deleted an item, moved to another page by pagination, or changed the item count in the page.)

First, enclose the installation code of sortable into a function, and call it from $(document).ready() to make the grid sortable for the initial loading of the page.

Instead of:

$('#some-grid table.items tbody').sortable({
    ...
}).disableSelection();

Write like this:

function installSortable() {
    $('#some-grid table.items tbody').sortable({
        ...
    }).disableSelection();
}
installSortable();

And call the installation function after the grid has been updated by ajax ... this will be done via CGridView::afterAjaxUpdate.

function reInstallSortable(id, data) {
    installSortable();
}
...
 
$this->widget('zii.widgets.grid.CGridView', array(
    'id' => 'some-grid',
    ...
    'afterAjaxUpdate' => 'reInstallSortable',
...

And, at last, you have to modify the sort action in the controller to give the items the correct sort order numbers when they are filtered or paginated. You should not simply give them a series of number from 0 to n-1. They can collide with the sort order numbers that other items not in the current page might have.

First, retrieve all the sort order numbers that the items in the current page have, then re-assign them to the listed items.

public function actionSort() {
    if (isset($_POST['items']) && is_array($_POST['items'])) {
        // Get all current target items to retrieve available sortOrders
        $cur_items = Item::model()->findAllByPk($_POST['items'], array('order'=>'sortOrder'));
        // Check 1 by 1 and update if neccessary
        for ($i = 0; $i < count($_POST['items']); $i++) {
            $item = Item::model()->findByPk($_POST['items'][$i]);
            if ($item->sortOrder != $cur_items[$i]->sortOrder) {
                $item->sortOrder = $cur_items[$i]->sortOrder ;
                $item->save();
            }
        }
    }
}

The CSRF token and it's name can be retrieved from CHttpRequest. There's no need to wrap the grid in a form. You can write like this ...

$csrf_token_name = Yii::app()->request->csrfTokenName;
$csrf_token = Yii::app()->request->csrfToken;
...
$str_js = "
...
serial = $('#some-grid table.items tbody').sortable('serialize', {key: 'items[]', attribute: 'class'}) + '&{$csrf_token_name}={$csrf_token}';
...
";

Great wiki blindmoe. Just wondered if anyone has come up with a solution yet to keep the sortable function working after changing the page or filtering (as mentioned by SSaarik in the previous post)? My jQuery knowledge is minimal and I just don't know where to begin.

In the meantime, I've read that disabling ajax updates on the grid can help. Add the following line to the CGridView configuration array in your View...

'ajaxUpdate'=>false,

How can I make this work with filters enabled? After filtering sortable function drops.

Trying to figure it out, I'll give solution if I find one.

Thanks! I'll try this out right away.

@skeef This is a common problem when you enable CSRF validation and use AJAX in your pages. To fix it in this case wrap the grid in form tag (to be sure the CSRF token is present at least once in the page):

echo CHtml::form();
$this->widget('zii.widgets.grid.CGridView', array(
....
));
echo CHtml::endForm();

In your javascript file where you do the ajax call you need to send the CSRF token as well:

'YII_CSRF_TOKEN':document.getElementsByName('YII_CSRF_TOKEN')[0].value
or
'YII_CSRF_TOKEN':$('input[name="YII_CSRF_TOKEN"]').val()

You could try changing the code written above to:

update : function () {
                serial = $('#project-grid table.items tbody').sortable('serialize', {key: 'items[]', attribute: 'class'}) + '&YII_CSRF_TOKEN=' + document.getElementsByName('YII_CSRF_TOKEN')[0].value;

Thank you for yuor work. All told accessible and understandable.

But I have some Error.

If

'request'=>array(
    'enableCsrfValidation'=>true,
),

in FirePHP I see an Error:

The CSRF token could not be verified

Prompt solution, please

Allain, I think you are actually correct, but it is a good practice to have validation rules for all of the properties in your models. I will switch the verbiage to specify that #2 is optional.

Can you explain this statement, since sortOrder isn't being provided by the user and isn't being loaded using $project->attributes, I'm not sure this is necessary.

I've incorporated this into my project and confirmed that all works fine without it.

Thank you for this, saved me a lot of blind guessing.