Forum
Log In
Home
Topic RSS
19:58
09/06/2010
Offline
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
20:28
09/06/2010
Offline
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
14:10
Moderators
30/10/2007
Offline
Hello,
Could you plese post the test case or provide a link to the problem?
Thanks
Best Regards
Tony
For professional UI suites for Java Script and PHP visit us at our commercial products site - guriddo.net - by the very same guys that created jqGrid.
21:43
13/08/2010
Offline
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
17:32
01/09/2010
Offline
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.
17:39
09/06/2010
Offline
Hi guys,
with the last version of the jqgrid and jquery the issue seems to be fixed.
17:53
12/10/2010
Offline
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)
<head runat="server">
<title></title>
<link href="jQueryUI/qqwebrater/jquery-ui-1.8.2.custom.css" rel="stylesheet" type="text/css" />
<link href="jqGrid/css/ui.jqgrid.css" rel="stylesheet" type="text/css" />
<link href="jqGrid/css/ui.multiselect.css" rel="stylesheet" type="text/css" />
</head>
<body>
<form id="form1" runat="server">
<div>
<table id="tblTop">
</table>
<div id="divTopPager">
</div>
</div>
<div>
<table id="tblBottom">
</table>
<div id="divBottomPager">
</div>
</div>
</form>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script src="jQueryUI/jquery-ui-1.8.1.custom.min.js" type="text/javascript"></script>
<script src="jqGrid/src/i18n/grid.locale-en.js" type="text/javascript"></script>
<script src="jqGrid/src/ui.multiselect.js" type="text/javascript"></script>
<script src="jqGrid/js/jquery.jqGrid.min.js" type="text/javascript"></script>
<script src="newScript.js" type="text/javascript"></script>
</body>
******************************************************************************************
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);
}
});
function loadTop() {
var unassignData = [
{ id: '100', entdate: '05/01/2010', fullname: 'Ryn, Ann' },
{ id: '101', entdate: '05/01/2010', fullname: 'Smith, Joe' },
{ id: '145', entdate: '05/01/2010', fullname: 'Roy, Al' },
{ id: '146', entdate: '05/02/2010', fullname: 'Howard, Rachael' },
{ id: '157', entdate: '05/02/2010', fullname: 'Hernandez, Leo' },
{ id: '168', entdate: '05/03/2010', fullname: 'Smith, Alice' },
{ id: '177', entdate: '05/04/2010', fullname: 'Jones, Jacob' },
{ id: '199', entdate: '05/05/2010', fullname: 'French, Teresa' },
{ id: '202', entdate: '05/06/2010', fullname: 'Collins, Louis' },
{ id: '215', entdate: '05/06/2010', fullname: 'Madden, Brent' }];
for (var i = 0; i <= unassignData.length; i++) { jQuery('#tblTop').jqGrid('addRowData', i + 1, unassignData[i]); } }
function loadBottom() {
var myLeadData = [
{ id: '102', entdate: '05/01/2010', fullname: 'Jonson, Fred' },
{ id: '160', entdate: '05/05/2010', fullname: 'Smith, Bob' },
{ id: '210', entdate: '05/02/2010', fullname: 'Kennedy, Nancy' },
{ id: '211', entdate: '05/03/2010', fullname: 'Anders, Harry'}];
for (var i = 0; i <= myLeadData.length; i++) { jQuery('#tblBottom').jqGrid('addRowData', i + 1, myLeadData[i]); } }
20:20
10/08/2009
Offline
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
23:01
12/10/2010
Offline
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
17:37
Moderators
30/10/2007
Offline
Thanks Oleg,
I will try to investigate and fix this bug during the weekend.
Regards
Tony
For professional UI suites for Java Script and PHP visit us at our commercial products site - guriddo.net - by the very same guys that created jqGrid.
15:47
01/09/2010
Offline
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!
17:55
Moderators
30/10/2007
Offline
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
For professional UI suites for Java Script and PHP visit us at our commercial products site - guriddo.net - by the very same guys that created jqGrid.
Most Users Ever Online: 715
Currently Online:
32 Guest(s)
Currently Browsing this Page:
1 Guest(s)
Top Posters:
OlegK: 1255
markw65: 179
kobruleht: 144
phicarre: 132
YamilBracho: 124
Renso: 118
Member Stats:
Guest Posters: 447
Members: 11373
Moderators: 2
Admins: 1
Forum Stats:
Groups: 1
Forums: 8
Topics: 10592
Posts: 31289
Newest Members:
, razia, Prankie, psky, praveen neelam, greg.valainis@pa-tech.comModerators: tony: 7721, Rumen[Trirand]: 81
Administrators: admin: 66
