I am using IgniteUI version 16.2.20162.2040 and JqueryUI version 1.11.4.
I have an igGrid with a height of 375px and I have set all the rows in this grid to be draggable using the JqueryUI library. My drop target is another div outside of the grid. I can drag and drop rows successfully onto my drop targets, but the problem happens when my draggable row is dragged beyond the bottom of the grid. The grid begins to scroll as I drag the row outside of the grid.
I need the ability to drag a row outside of the grid without the grid scrolling.
Here is sample of the scrollable portion of my grid:
And here is a sample of my JqueryUI code that makes the rows draggable:
$("#RFDList > tbody > tr").draggable({ helper: "clone", revert: "invalid", cursorAt: { bottom: 0, left: 0 } });
It looks like something went wrong with my initial post. Here is the code for the scrollable portion of my grid:
<div id="RFDList_scroll" class="ui-iggrid-scrolldiv ui-widget-content igscroll-touchscrollable" data-scroll="true" data-onedirection="true" data-xscroller="#RFDList_hscroller" style="overflow-x: hidden; overflow-y: auto; height: 311px;"> <table id="RFDList" role="grid" aria-describedby="RFDList_scroll" cellpadding="0" cellspacing="0" border="0" class="ui-iggrid-table ui-widget-content" style="table-layout: fixed;"> <colgroup></colgroup> <tbody role="rowgroup" class="ui-widget-content ui-iggrid-tablebody ui-ig-record ui-iggrid-record"> <tr data-id="c3bf5936-8786-e711-8135-caf5c8230062" role="row" tabindex="0" class="open-hand-pointer ui-draggable ui-draggable-handle"></tr> <tr class="ui-ig-altrecord ui-iggrid-altrecord open-hand-pointer ui-draggable ui-draggable-handle" data-id="a2a54d20-5a83-e711-8135-caf5c8230062" role="row" tabindex="0"></tr> <tr data-id="ca784490-cb82-e711-8135-caf5c8230062" role="row" tabindex="0" class="open-hand-pointer ui-draggable ui-draggable-handle"></tr> <tr class="ui-ig-altrecord ui-iggrid-altrecord open-hand-pointer ui-draggable ui-draggable-handle" data-id="4d95ba39-cd81-e711-8135-caf5c8230062" role="row" tabindex="0"></tr> <tr data-id="7b02f501-cb81-e711-8135-caf5c8230062" role="row" tabindex="0" class="open-hand-pointer ui-draggable ui-draggable-handle"></tr> </tbody> </table> </div>
Hello Jack,
Thank you for posting in our community.
Can you please provide me a small, isolated, working sample where this issue is reproducible? This is going to be highly appreciated. Having a working sample to debug is going to be very helpful in my further investigation.
Looking forward to hearing from you.
Please feel free to contact me if you need any additional information regarding this matter.
You can see a working JS fiddle here.
Hello jouin,
I am glad that you managed to notice what was causing your issue.
Thank you for choosing Infragistics components.
I apologize for not paying closer attention, but it appears that the jQuery UI "draggable" library provides the following option:
scroll: false
This was the answer to my scrolling problem. I also had to increase the z-index of my draggable row so it would display on top of the grid. Thank you for your help.