jQuery Grid Plugin - jqGrid - Topic: Drag and Drop and draggable (possible Bug?)

Jazar on Drag and Drop and draggable (possible Bug?)

Mon, 25 Oct 2010 19:25:38 +0300

Great thank you.

tony on Drag and Drop and draggable (possible Bug?)

Mon, 25 Oct 2010 17:55:15 +0300

Hello,

Sorry forgot to include it in the 3.8.1.

Also I have fixed this and you can see the cahnge in GitHub

To Oleg - I do not think tha the second is a bug - there is a option dropbyname whch allow you to set a data after reordering.

http://www.trirand.com/jqgridw.....s#options1

Tony

Jazar on Drag and Drop and draggable (possible Bug?)

Mon, 25 Oct 2010 15:47:14 +0300

tony said:

Thanks Oleg,

I will try to investigate and fix this bug during the weekend.

Regards

Tony

Have you had time to look into this? Does 8.1 fix this issue? Thank you!

tony on Drag and Drop and draggable (possible Bug?)

Fri, 15 Oct 2010 17:37:56 +0300

Thanks Oleg,

I will try to investigate and fix this bug during the weekend.

Regards

Tony

cdavidson on Drag and Drop and draggable (possible Bug?)

Tue, 12 Oct 2010 23:01:08 +0300

Oleg, Thank you for finding that!

That seems to address the error with column chooser. I'll keep testing it, but so far it looks good.

There was also an error with regular UI sortable, but your change seems to have it corrected, too.

As a quick test, I added to the html:
    <div>
        <span>Sortable items:</span>
        <ul id="jqui-sort-sample">
            <li>- this is item number one</li>
            <li>- this is item number two</li>
            <li>- this is item number three</li>
            <li>- this is item number 4</li>
            <li>- this is item number 5</li>
            <li>- this is item number 6</li>
        </ul>
    </div>

Then this script under the starting function:

    jQuery('#jqui-sort-sample').sortable({
        update: function(event, ui) {
            alert('changed');
        }
    });

It seems that the jqueryUI sortables are getting attached to an event within jQgrid. I wonder if that is normal.

Thanks again!

Chris

OlegK on Drag and Drop and draggable (possible Bug?)

Tue, 12 Oct 2010 20:20:36 +0300

Hello!

It seems to be a small dubs in grid.jqueryui.js. The functions accept (line 385) and drop (line 393) will be called not only in case of drag&drop of jqGrid rows, but also for the drag&drop of the rows from the column chooser dialog. So I suggested to replace the lines 386-386

var tid = $(d).closest("table.ui-jqgrid-btable");

if($.data(tid[0],"dnd") !== undefined) {

to the lines

if (!$(d).hasClass('jqgrow')) { return d;}

var tid = $(d).closest("table.ui-jqgrid-btable");

if(tid.length > 0 && $.data(tid[0],"dnd") !== undefined) {

and insert the line

if (!$(ui.draggable).hasClass('jqgrow')) { return; }

as the first line of the drop function (after the 393). After the changes your example will work.

The only bug which stay is that if you change the order of the columns in one grid drag&drop will add the data contain in the grid not corresponds to the column names, but corresponds to the current column order. So the data will be placed without reordering. It is a bug in my opinion.

Best regards
Oleg

cdavidson on Drag and Drop and draggable (possible Bug?)

Tue, 12 Oct 2010 17:53:28 +0300

I still see a problem with it using the latest 3.8. [jQuery 1.4.2 and jQueryUI 1.8.1]

The problem I see is with using jQueryUI sortable. I tried to narrow it down in components and pasted them below.

If you open the column chooser, then try to drag and drop, I get the error "Microsoft JScript runtime error: 'nodeName' is null or not an object". It looks like there is an event within jQgrid that is attaching itself to all sortables from jqueryUI as I see in the path

jQuery UI Droppable 1.8.1 is sending a call to jQgrid in the "drop" : function (opts) section of grid.jqueryui.js.

******************************************************************************************

Here is the HTML (I had to chop the tags as the paste was getting errors on forum, so add your !DOCTYPE and html)

</form>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

******************************************************************************************

Here is the script inside of newScript.js

$(function() {

    jQuery("#tblTop").jqGrid({
        datatype: "local",
        width: 945,
        colNames: ['Ref', 'Entered On', 'Name'],
        colModel: [
             { name: 'id', index: 'id', width: 60, sorttype: "int", searchoptions: { sopt: ['eq', 'ne', 'cn']} },
             { name: 'entdate', index: 'entdate', width: 90, sorttype: 'date', searchoptions: { dataInit: function(el) { $(el).datepicker({ dateFormat: 'mm/dd/yyyy' }); } } },
             { name: 'fullname', index: 'fullname' }
            ],
        pager: '#divTopPager',
        pgbuttons: false,
        pginput: false,
        viewrecords: true,
        caption: 'Top'
    });

    jQuery('#tblTop').jqGrid('navGrid', '#divTopPager', {
        edit: false, add: false, del: false, search: false, refresh: false, view: false
    },
        {}, // edit options
        {}, // add options
        {}, // del options
        {multipleSearch: false, closeOnEscape: true, closeAfterSearch: true }, //search options
        {}
        );

    var lastCell;
    $("#tblBottom").jqGrid({
        datatype: "local",
        //        width: 956,
        width: 945,
        colNames: ['Ref', 'Entered On', 'Name'],
        colModel: [
             { name: 'id', index: 'id', width: 50, editable: false, sorttype: "int" },
             { name: 'entdate', index: 'entdate', editable: false, width: 90, sorttype: 'date' },
             { name: 'fullname', index: 'fullname' }
            ],
        pager: '#divBottomPager',
        pgbuttons: false,
        pginput: false,
        viewrecords: true,
        caption: 'Bottom'
    });

    jQuery('#tblBottom').jqGrid('navGrid', '#divBottomPager', {
        edit: false, add: false, del: false, search: false, refresh: false, view: false
    },
        {}, // edit options
        {}, // add options
        {}, // del options
        {multipleSearch: false, closeOnEscape: true, closeAfterSearch: true }, //search options
        {}
        );

    jQuery('#tblTop').jqGrid('navButtonAdd', '#divTopPager', {
        caption: "Columns",
        buttonicon: 'ui-icon-wrench',
        onClickButton: function() {
            jQuery('#tblTop').jqGrid('columnChooser', {
                done: function(perm) {
                    if (!perm) { return false; }
                    this.jqGrid('remapColumns', perm, true);
                }
            });
        }
    });

    jQuery('#tblBottom').jqGrid('navButtonAdd', '#divBottomPager', {
        caption: "Columns",
        buttonicon: 'ui-icon-wrench',
        onClickButton: function() {
            jQuery('#tblBottom').jqGrid('columnChooser', {
                done: function(perm) {
                    if (!perm) { return false; }
                    this.jqGrid('remapColumns', perm, true);
                }
            });
        }
    });

    jQuery("#tblTop").jqGrid('gridDnD', {
        connectWith: '#tblBottom'
    });

    jQuery("#tblBottom").jqGrid('gridDnD', {
        connectWith: '#tblTop'
    });

    try {
        loadTop();
        loadBottom();
    } catch (e) {
        alert(e.message);
    }

});

jramos on Drag and Drop and draggable (possible Bug?)

Tue, 12 Oct 2010 17:39:28 +0300

Hi guys,

with the last version of the jqgrid and jquery the issue seems to be fixed.

Jazar on Drag and Drop and draggable (possible Bug?)

Tue, 12 Oct 2010 17:32:41 +0300

I am also having this issue and I believe it is a legitimate bug. If anyone can help with this issue please let us know.

To reproduce you need two tables, a jqGrid DnD link, and a draggable jQuery object (the jqGrid column chooser for example). Without even dragging a row, the column chooser will not work correctly.

Thank you.

acundiff on Drag and Drop and draggable (possible Bug?)

Fri, 13 Aug 2010 21:43:15 +0300

I'm having the same issues with all my draggable object failing after calling gridDnD on a grid. Has any progress been made on this?

Thanks

tony on Drag and Drop and draggable (possible Bug?)

Wed, 16 Jun 2010 14:10:43 +0300

Hello,

Could you plese post the test case or provide a link to the problem?

Thanks

Best Regards

Tony

jramos on Drag and Drop and draggable (possible Bug?)

Wed, 09 Jun 2010 20:28:07 +0300

well,

this is definitely not working fine together,

I've reproduced the same code than the example here /jqgridwiki/doku.php?id=wiki:jquery_ui_methods and the draggable elements are not working when the Drag and Drop (jQuery("#grid2″).jqGrid('gridDnD',{connectWith:'#grid1'})) is added ..

I'm using jquery-1.4.2.min.js and jquery-ui-1.8.2.custom.min.js,

any idea why this might be happening?

thanks in advantage guys

jramos on Drag and Drop and draggable (possible Bug?)

Wed, 09 Jun 2010 19:58:29 +0300

Hi all,

is there a known problem with Drag and Drop jqgrid function and jquery ui draggable elements?

when I add jQuery("#grid2").jqGrid('gridDnD',{connectWith:'#grid1'}) into the page

ALL my draggable elements in the page stop working and throw errors,

Any ideas?

Thanks