jQuery Grid Plugin – jqGridjqGrid + tableDnD selected class for row editing removed on mouseclick | Help

jqGrid + tableDnD selected class for row editing removed on mouseclick

Page: 1

No Tags

User

Post

15:47
15/01/2009

Renso

Member

posts 118

Print this Post

I am using the tableDnD with jqGrid. AWESOME! So when I click on the row to move the item, it works fine with no issues.

Once you move your row, I make an ajax call on the tableDnD's onDrop handle. So when the data has been updated by the server I want to reload the grid (which works just fine) so that the sort order (which is also a colModel column the user can see) can be refreshed on the screen. This works great too. Bu now this is where I have the issue. How do I edit the record, that is, your jqGrid adds the "selected" class to the row so that when I click on the jqGrid footer's "edit this record" button it knows what record you selected. I tried to keep a reference with a variable to the row that was clicked on, but even though it successfully adds the "selected" class back to the clicked row after the grid has reloaded, I can see this in Firebug, it just adds it temporarily and then something else removes it again after just a split second, I am not sure what is removing it. I don't know if anyone else has this issue, and ideas. See my code example below:

item = my grid variable:

$(item).jqGrid({

…

        gridComplete: function() {
            $('tr.jqgrow', item).find('td:first').addClass('dragHandle');
            $('tr.jqgrow').hover(function() {
                $(this.cells[0]).addClass('showDragHandle');
            }, function() {
                $(this.cells[0]).removeClass('showDragHandle');
            });
            $(item).tableDnDUpdate();
        },

…

}) //end of jqGrid definition

.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');
                    $(item).find('tr#'+$(row).attr('id')).addClass('selected');//trying to add the class back so that I can click on edit button
                }
            })
        }
    })
    ;

11:38
19/01/2009

tony

Sofia, Bulgaria

Moderator

posts 7010

Print this Post

Hello,

The most common problem here that you should understand is this: (if I understand right)

$(item).trigger('reloadGrid');

After this you should call the expression

$(item).find('tr#'+$(row).attr('id')).addClass('selected');

WITH DELAY.

Use setTimeout for this purpose.

Regards

Tony

P.S. I suggest you to use setSelection for the experssion in blue.

or if this is not possible you should call setGridParam({selrow:'the_id_here'}) after the expression

09:29
20/01/2009

Renso

Member

posts 118

Print this Post

Thank you for your reply Tony.

Since the tableDnD passes in the row parm I was able to use the setSelection after a 200 milisecond delay:

$(item).trigger('reloadGrid');
setTimeout(function() { $(item).setSelection($(row).attr('id')); }, 200);

BTW, 200 miliseconds seems to be the minimum, if I go below this it starts to get unpredictable for larger lists. For example if you have a list of countries 100 is too little. For a list of 10 or so, 50 miliseconds is more than enough, so to be on the safe side and since my list of countries is the biggest I opted for 200ms. Please note that I use the same jqGrid for all my lookups.

02:52
23/06/2012

sProcurement

Member

posts 3

Print this Post

I am trying to use jqgrid treeview with table DND plugin to make tree nodes/leafs ( multiple rows) drag and drop between two grids. I tried to use the code shown here. but it is not working for me. I am very new to jquery world. Please let me know if it is possible ? and will appreciate sharing some example code

thanks

02:53
23/06/2012

sProcurement

Member

posts 3

Print this Post

I forgot to mention that I am using local data

No Tags

Page: 1

You must be logged in to post	Login Register

jQuery Grid Plugin – jqGrid

Forum