Details
-
Type: Improvement
-
Status: Closed
-
Priority: Major
-
Resolution: Fixed
-
Affects Version/s: 1.8.2
-
Fix Version/s: EE-1.8.2.GA_P03, 2.1-Beta, 3.0, EE-2.0.0.GA_P01
-
Component/s: ICE-Components
-
Labels:None
-
Environment:All browsers
-
Assignee Priority:P1
-
ICEsoft Forum Reference:
-
Workaround Exists:Yes
-
Workaround Description:Scroll with arrow keys or implement the changes shown above.
Description
I had the same error as vicky49.
In my case I use a tree as an Explorer to cut and paste nodes with drag and drop.
Example:
<ice:panelGroup scrollHeight="500px" id="scroll_id">
<ice:tree ...
<ice:treeNode>
...
<ice:panelGroup draggable="true"
dropTarget="true"
dropTargetScrollerId="scroll_id"
...
>
...
</ice:panelGroup>
</ice:treeNode>
</ice:tree>
</ice:panelGroup>
The tree is located, as shown above, in a Scrollable Div. The scroll bars will be shown, if the nodes are expanded. In order to drop a node in another unseen node you have to scroll the area. Actually you can only do it with the arrow keys. An autoscroll is not implemented.
After copious research, I found the "scroll" attribute in the Draggable function in the script.aculo.us framework. This enables the auto scroll function using drag and drop. If a node is hovered over the bottom of the Scrollable Div, the area is automatically scrolled down.
In order to add this feature, I changed the GroupRenderer.java and DragDrop.java class and used 'dropTargetScrollerId' as scroll id.
I overloaded the DragDrop.addDragable and called them in the GroupRenderer as you can see in the following lines:
String scrollid = (String) uiComponent.getAttributes().get("dropTargetScrollerId");
if (scrollid != null && scrollid.trim().length() > 0) {
calls += DragDrop.addDragable(uiComponent, uiComponent.getClientId(facesContext), handleId,
dragOptions, dragMask, facesContext);
} else {
calls += DragDrop.addDragable(uiComponent.getClientId(facesContext), handleId, dragOptions, dragMask,
facesContext);
}
In the DragDrop class I get the correct part of the id:
String scrollid = (String) uiComponent.getAttributes().get("dropTargetScrollerId");
if (scrollid != null && scrollid.trim().length() > 0) {
UIComponent scroller = D2DViewHandler.findComponentInView(facesContext.getViewRoot(), scrollid);
if (scroller != null) {
scrollid = scroller.getClientId(facesContext);
}
}
And add the id as an attribute to the JavaScript function:
if (scrollid != null && scrollid.trim().length() > 0) {
ea.add("scroll", scrollid);
}
Could you implement a similar feature in the next version, please?
In version 2.0 it is also not implemented.
In my case I use a tree as an Explorer to cut and paste nodes with drag and drop.
Example:
<ice:panelGroup scrollHeight="500px" id="scroll_id">
<ice:tree ...
<ice:treeNode>
...
<ice:panelGroup draggable="true"
dropTarget="true"
dropTargetScrollerId="scroll_id"
...
>
...
</ice:panelGroup>
</ice:treeNode>
</ice:tree>
</ice:panelGroup>
The tree is located, as shown above, in a Scrollable Div. The scroll bars will be shown, if the nodes are expanded. In order to drop a node in another unseen node you have to scroll the area. Actually you can only do it with the arrow keys. An autoscroll is not implemented.
After copious research, I found the "scroll" attribute in the Draggable function in the script.aculo.us framework. This enables the auto scroll function using drag and drop. If a node is hovered over the bottom of the Scrollable Div, the area is automatically scrolled down.
In order to add this feature, I changed the GroupRenderer.java and DragDrop.java class and used 'dropTargetScrollerId' as scroll id.
I overloaded the DragDrop.addDragable and called them in the GroupRenderer as you can see in the following lines:
String scrollid = (String) uiComponent.getAttributes().get("dropTargetScrollerId");
if (scrollid != null && scrollid.trim().length() > 0) {
calls += DragDrop.addDragable(uiComponent, uiComponent.getClientId(facesContext), handleId,
dragOptions, dragMask, facesContext);
} else {
calls += DragDrop.addDragable(uiComponent.getClientId(facesContext), handleId, dragOptions, dragMask,
facesContext);
}
In the DragDrop class I get the correct part of the id:
String scrollid = (String) uiComponent.getAttributes().get("dropTargetScrollerId");
if (scrollid != null && scrollid.trim().length() > 0) {
UIComponent scroller = D2DViewHandler.findComponentInView(facesContext.getViewRoot(), scrollid);
if (scroller != null) {
scrollid = scroller.getClientId(facesContext);
}
}
And add the id as an attribute to the JavaScript function:
if (scrollid != null && scrollid.trim().length() > 0) {
ea.add("scroll", scrollid);
}
Could you implement a similar feature in the next version, please?
In version 2.0 it is also not implemented.
Issue Links
- depends on
-
ICE-6913 Update Scriptaculous library to fix incompatibilities introduced by the Prototype update to 1.7 version
- Closed
This feature was added but it's only supported for regular panelGroup's at the moment. It is not supported for panelGroup's inside trees nor for panelPositioned, as the implementation in these two cases is not straight-forward. These two cases will be addressed in ICE-6924 and ICE-6925, respectively.