Question

I use a grid to show a list of master table records which are used by a dropdown in my web app. We maintain a sortOrder column used when displaying the items in dropdown. I want to use the jQueryUI sortable plugin to allow the users to re-order the records being dispalyed in the Grid.

I’ve an ASP.Net MVC(v2.0) web app. What would be the best way to capture the new order and update it in the database?

I found a post for php that is similar. It uses the “.sortable(‘toArray’)” to get the elements but I’ve a Grid. Would I have to simplify my Grid to a list?

Answer 1

I’ve an editable Grid so I added a new column “sortOrder” which has textbox and each time the user drags a row I use the “update” event to find it and set “this.rowIndex”.

Hope the following function helps –

$("#sortable tbody").sortable({
    helper: fixHelper,
    cursor: 'move',

    update: function(e, ui) {
        $el = $(ui.item);
        $el.effect('highlight', {}, 2000);

        //Use for debug: alert($('#sortable tbody tr').length);

        $('#sortable tbody tr').each(
                function(currentIndex) {
                    $(this).find('td:nth-child(3)').find('input:first').val(this.rowIndex); //td:first
                });
    }
});

This is where I find my textbox and set its value:

$(this).find(‘td:nth-child(3)’).find(‘input:first’).val(this.rowIndex);