Yii CGridView move selected row using keyboard's arrow up and down

Question

I was wondering how to move the selected row in Yii's CGridView using arrow buttons up and down. My situation is that I have a CGridView with pagination = false (no pagination). I want the first row is automatically selected when the page is loaded. Then, when user move the down arrow, it will select the second row. The point is just moving the selection row not moving the row up and down.

The main idea is similar to Excel. It will help the user when verifying the row.

Answer 1

I found out it is much easier using just jquery since yii CGridView javascript getSelection will return id of the model whereas the id is not shown anywhere in the CGridView (table) on my case.

This is my solution

<script type="text/javascript">
shortcut.add("Down", function() {
    moveDown();
});

shortcut.add("Up", function() {
    moveUp();
});

function moveDown() {
    var rows = $('#form-detail-grid table tr');
    var currentRow = $("tr.selected").get(0);

    if (rows.length > 2) {
        if (currentRow === undefined) {
            rows.eq(1).addClass('selected');
        } else if ($(currentRow).next('tr').get(0) === undefined) {
            //do nothing
        } else {
            $(currentRow).next('tr').addClass('selected');
            $(currentRow).removeClass('selected');
        }
    }
}

function moveUp() {
    var rows = $('#form-detail-grid table tr');
    var currentRow = $("tr.selected").get(0);

    if (rows.length > 2) {
        if (currentRow === undefined) {
            rows.eq(1).addClass('selected');
        } else if ($(currentRow).prev('tr').get(0) === undefined) {
            //do nothing
        } else {
            $(currentRow).prev('tr').addClass('selected');
            $(currentRow).removeClass('selected');
        }
    }
}

Answer 2

I think you'll have to write custom javascript for that.

I don't think that there's a Yii solution ready for that (maybe in one of the extensions, perhaps).

Yii tells you which row is selected by adding class "selected" to the <tr> s in a grid.

You would need to write a javascript function that adds class "selected" to the next row in the grid (and removes it from the previous one) to get what you want, I think.

Maybe you can use some of Yii's builtin jquery functions to manipulate a CGridView . I've written something about that but it's an unfinished post, sorry.