Selected row on top in Telerik MVC Grid

Question

I have a Telerik MVC Grid and I want the selected to be forced on top of the list. I´m using DetailedView for the grid so it is collapse- and expandable. How would I force the selected row to the top of the list?

My Jquery:

function unit_onDetailViewExpand(e) {
    // Select the Grid
    var grid = $(this).data('tGrid');
    //Close all other rows
    grid.$rows().not(e.masterRow).each(function (index, row) {
        grid.collapseRow(row);
    });

    /* TODO: move row to the top, this hasn´t worked for me so far
    grid.reorderColumn(0, grid.columnFromTitle("Name"));
    $.telerik.trigger(grid.element, 'repaint');
    */
}

Thanx guys :)

#### EDITED ####

This is what I do now when selecting the row:

function onRowSelect(e) {
    $(e.row).prependTo($(e.row).parent());
    var grid = $('#RentableUnits').data("tGrid");
    // get the first master table row
    var tr = $("#RentableUnits tbody > .t-master-row:eq(0)"); // use .t-master-row to select only the master rows

    // expand the row
    grid.expandRow(tr);
}

Now I´m faced with the problem that the content of the DetailedView has not moved. Let´s say I select a row, the row moves to the top, expands the row, but the content of the previous row is still expanding.

I´ve been looking at the documentation and found out that this has something to do with detailRow, but I can´t figure out how to move that along with my masterRow.

Does anyone have any idea on how to move the content of the detailedview along with the row?

#### EDITED (AGAIN) ####

I´ve gotten so far, the table row is moved to the top of the list but every time that particular row is expanded I keep getting the content of the original top row (the content from the one which is in second place). From what I see in Firebug is that there are no .t-detail-row within the table until one of the .t-master-row is expanded. Should I move something else along with the selected row, I mean other that the masterRow and sometimes the detailRow?

(I´ve also uploaded images along with the question showing HTML from Firebug)

function onRowSelect(e) {
    var grid = $('#RentableUnits').data("tGrid");

    var selectedRow = $('#RentableUnits tbody>.t-state-selected');
    selectedRow.prependTo(selectedRow.parent());
    if (selectedRow.next().is('.t-detail-row')) {
        selectedRow.next().prependTo(selectedRow.parent());
    }
    selectedRow.prependTo(selectedRow.parent());

    // get the first master table row
    var tr = $("#RentableUnits tbody > .t-master-row:eq(0)"); // use .t-master-row to select only the master rows
    // expand the row
    grid.expandRow(tr);
}

You´ve been a great help to me, maybe I can bug one more time? :)

#

#

#

Answer 1

A Grid component has underlying data. You need to position data item that is represented by selected row as well.

function on_RowSelect(e){

    var grid = $(e.target).data('tGrid');
    var $rows = grid.$rows();

    // move underlying data
    var rowIndex = $rows.index(e.row);
    grid.data.unshift(grid.data.splice(rowIndex,1)[0])

    // move rows
    var $selectedRows = $(e.row).add($(e.row).next('.t-detail-row'));
    $rows.parent().prepend($selectedRows);
}

Regards

Answer 2

you can easily move the selected row to the top when needed with the following script:

var selectedRow=  $('#GridName tbody>.t-state-selected'); 
selectedRow.prependTo(selectedRow.parent())

Please notice that you can change the selector to be more generic if needed - use class name or use search context to find the selected row.

Or you can also even use the onRowSelect event to execute your logic like this:

function onRowSelect(e){
    $(e.row).prependTo($(e.row).parent());
}