jQuery Grid Plugin - jqGridForum

Topic RSS

Best wa y to allow user to drop / drag rows to group them together

30/06/2009
10:58

bww00

Member

Members

Forum Posts: 3

Member Since:
27/06/2009

Offline

Ned some help.

I would like to let a user re order (drop/drag) the rows to group the rows in an order that the user sees fit.

Thanks

Bryan

01/07/2009
07:27

Renso

Member

Members

Forum Posts: 118

Member Since:
11/09/2008

Offline

Have a internal web-app that has an admin option that allows users to edit the lookup data, like account status, being able to add new statuses or change the description of the status. These tables have a property SortOrder, that is used to determine the order the lookup data should show up. The user would drag and drop the row to where they want it and will update the property in the DB via a jQuery Grid Ajax call.

The definition of the drag feature is dependent on the jquery.tablednd.js plugin, so make sure you have it loaded as part of your app.

The definition of the drag-and-drop feature looks as follows:

(var item is the selector of my grid)

$(item).jqGrid({

...

    .navButtonAdd(item + 'Pager', { caption: "", title: "Select Columns", buttonimg: jQueryImageRoot + '/column_Select.gif', position: 'last', onClickButton: null })
    .tableDnD({
        onDrop: function(table, row) {
            $.ajax({
                data: $.tableDnD.serialize(),
                url: $('#ajaxUpdateLookupSortOrderUrl').val() + '/?lookup=' + $('#LookupListWrapper #LookupListSearchWrapper #Lookups').val(),
                type: "POST",
                success: function(data, result) {
                    //Reload so that the SortOrder column is refreshed from the DB with the new Sort Order
                    $(item).trigger('reloadGrid');
                    setTimeout(function() { $(item).setSelection($(row).attr('id')); }, 200);

                },
                error: function(XMLHttpRequest, textStatus, errorThrown) {
                    alert("An error occurred: The operation to update the sort order has failed");
                }
            })
        }
    })
    ;

A couple of points to note:

$('#ajaxUpdateLookupSortOrderUrl').val() - this is a hidden input tag that contains the url of my call.
$(item).trigger('reloadGrid'); - on a successful completion of the request you need to reload the grid so it shows ther new order
setTimeout(function() { $(item).setSelection($(row).attr('id')); }, 200); - this is important to set the timeout as it needs to wait for the grid to be reloaded before trying to highlight the selected/clicked row.

My server-side code (asp.net MVC) method receives the lookup parm fro the httprequest:

public JsonResult UpdateAjaxLookupSortOrderJsonFormatted(string lookup)

Use this value to set the new SortOrder of the moved row. The way to do this is to loop through the incoming request's LookupList[] property.

            foreach (string key in Request.Form["LookupList[]"].Split(',')) {
                int tempKey;
                if (!int.TryParse(key, out tempKey))
                    continue;
                pos++;

                var item = GetGenericLookupitem<T>(tempKey);

                item.SortOrder = pos;
                SaveGenericLookupItem(item);
            }

Hope this helps.

All RSS

Forum Timezone: Europe/Sofia

Most Users Ever Online: 715

Currently Online:
22 Guest(s)

Currently Browsing this Page:
1 Guest(s)