Make a Drag and Drop one or several line in a grid on another grid ???????

View: New views

2 Messages — Rating Filter: Alert me

Make a Drag and Drop one or several line in a grid on another grid ???????

by paulolopes81 :: Rate this Message:

Reply to Author | View Threaded | Show Only this Message

I found this code in the RialtoDemo and I think it's really good but The problem is that I can not do the same thing with a grid.
Is it possible to do the same thing with a grid or Make a Drag and Drop one or several line in a grid on another grid??????

kind regards

/*** THE CODE ****/
<rialto:layout name="demoLayout">
<rialto:frame name="frame1" title="Test area: JUST DRAG AND DROP THE BLUE DIV" open="true" top="0"
left="0" width="100%" height="100%" dynamic="false" draggable="false">

<rialto:grid name="oTable" top="200" left="5" height="250" bNavig="false" autoWidth="false" boolPrint="false" multiSelect="true">
<rialto:gridHeader title="Ref" type="string" width="80"/>
<rialto:gridHeader title="Product" type="string" width="100"/>
<rialto:gridHeader title="Price" type="date" width="100"/>
<rialto:gridHeader title="Count" type="string" width="60"/>
<rialto:gridLine>
<rialto:gridCell value="1933-00001"/>
<rialto:gridCell value="SMITH JOHN"/>
<rialto:gridCell value="05/11/1974"/>
<rialto:gridCell value="140"/>
</rialto:gridLine>
<rialto:gridLine>
<rialto:gridCell value="1933-00002"/>
<rialto:gridCell value="DO IT"/>
<rialto:gridCell value="05/11/1974"/>
<rialto:gridCell value="'+img+'"/>
</rialto:gridLine>
</rialto:grid>

//EXAMPLE 1:DRAG ANDROP BETWEEN A TREEVIEW AND AN IMAGE

var treeview0=new rialto.widget.Tree({left:18,position:"absolute",
withRoot:true,draggableNode:true,
width:269,top:19,name:"treeview0",height:130,parent:frame1});
var treenode2=new rialto.widget.TreeNode({text:"treenode",open:true,name:"treenode2"});
treeview0.addNode(treenode2);
var treenode3=new rialto.widget.TreeNode({text:"treenode",open:true,name:"treenode3"});
treenode2.addNode(treenode3);
var treenode4=new rialto.widget.TreeNode({text:"treenode",open:true,name:"treenode4"});
treenode3.addNode(treenode4);
var treenode5=new rialto.widget.TreeNode({text:"treenode",open:true,name:"treenode5"});
treenode2.addNode(treenode5);
var treenode6=new rialto.widget.TreeNode({text:"treenode",open:true,name:"treenode6"});
treenode5.addNode(treenode6);

this.dash=new rialto.widget.Image("rialtoEngine/images/trash.png",392,49,frame1,"image","");










//Target Missile
var oHtml=this.dash.getHtmlExt();
rialto.widgetBehavior.affect(oHtml,'Target',{domain:'tree.node'});
oHtml.receiveAfterDrop = function(oSpecs) {
var node=oSpecs.oRia;
node.remove()
oThis.dash.setSrcOut(rialtoConfig.pathRialtoE+'images/trashFull.png');
}

</rialto:frame>
</rialto:layout>

Re: Make a Drag and Drop one or several line in a grid on another grid ???????

by Cyril Balit :: Rate this Message:

Reply to Author | View Threaded | Show Only this Message

Hello,

Here is a little example that allow D&D between 2 grids. But you have to
use an image in a cell to catcth the drag start

myGrid = new
rialto.widget.Grid({classname:'noimg_',top:10,left:10,height:250,
arrHeader:[{title:"1",type:"string",width:30},
{title:"Title1",type:"string",width:150},
{title:"Title2",type:"string",width:150},
{title:"",type:"string",width:20}],
name:'myGrid',
parent:document.body,withContextualMenu:true,

navigationMode:false,row:5,cellActive:false,sortable:true,multiSelect:fa\
lse
,lineHeight:16,boolPrint:true,switchable:false,clickable:true
,autoResizableW:false,autoResizableH:false,
writable:false});

for(var i=0;i<50;i++) {
//arr.push([i,new Date(),0.568,"t3",new Date()]);
myGrid.addOneLine([i,"t1","t2",'']);
}

myGrid2 = new
rialto.widget.Grid({classname:'noimg_',top:10,left:600,height:250,
arrHeader:[{title:"1",type:"string",width:30},
{title:"Title1",type:"string",width:150},
{title:"Title2",type:"string",width:150},
{title:"",type:"string",width:10}],
name:'myGrid',
parent:document.body,withContextualMenu:true,

navigationMode:false,row:5,cellActive:false,sortable:true,multiSelect:fa\
lse
,lineHeight:16,boolPrint:true,switchable:false,clickable:true
,autoResizableW:false,autoResizableH:false,
writable:false});

//DD
var setup={bMUpAction : false,
bRectLim : false,
ghost : {bIcone : true, aspect: 'icon'},
domainTargets:'grid',
targetChoice : 'firstIsBetter'};

for(var i=0;i<50;i++) {
//arr.push([i,new Date(),0.568,"t3",new Date()]);
var img = new
rialto.widget.Image('../rialtoEngine/imagesDemo/frame_edit.png','5','0')\
;
myGrid.addObjectInCell(i,3,img);
img.setProperty('data',myGrid.tabData[i]);

//rialto.widgetBehavior.affect(img.getHtmlExt(),'Missile',setup);

rialto.widgetBehavior.affect(myGrid.getHtmlLineFromIndex(i),'Missile',se\
tup);
}

//rialto.widgetBehavior.affect(myGrid.getHtmlExt(),'Missile',setup);

var oHtml=myGrid2.getHtmlExt();
rialto.widgetBehavior.affect(oHtml,'Target',{domain:'grid'});
oHtml.receiveAfterDrop = function(oSpecs) {
var img=oSpecs.oRia;
var data=img.getProperty("data");
indLine=myGrid2.addOneLine(data);
}

I let you try

Cyril

--- In rialto-dev@..., "paulolopes81" <paulolopes81@...>
wrote:
>
> I found this code in the RialtoDemo and I think it's really good but
The problem is that I can not do the same thing with a grid.
> Is it possible to do the same thing with a grid or Make a Drag and
Drop one or several line in a grid on another grid??????
>
>
> kind regards
>
> /*** THE CODE ****/
> <rialto:layout name="demoLayout">
> <rialto:frame name="frame1" title="Test area: JUST DRAG AND DROP THE
BLUE DIV" open="true" top="0"
> left="0" width="100%" height="100%" dynamic="false"
draggable="false">
>
> <rialto:grid name="oTable" top="200" left="5" height="250"
bNavig="false" autoWidth="false" boolPrint="false" multiSelect="true">

> <rialto:gridHeader title="Ref" type="string" width="80"/>
> <rialto:gridHeader title="Product" type="string" width="100"/>
> <rialto:gridHeader title="Price" type="date" width="100"/>
> <rialto:gridHeader title="Count" type="string" width="60"/>
> <rialto:gridLine>
> <rialto:gridCell value="1933-00001"/>
> <rialto:gridCell value="SMITH JOHN"/>
> <rialto:gridCell value="05/11/1974"/>
> <rialto:gridCell value="140"/>
> </rialto:gridLine>
> <rialto:gridLine>
> <rialto:gridCell value="1933-00002"/>
> <rialto:gridCell value="DO IT"/>
> <rialto:gridCell value="05/11/1974"/>
> <rialto:gridCell value="'+img+'"/>
> </rialto:gridLine>
> </rialto:grid>
>
>
>
> //EXAMPLE 1:DRAG ANDROP BETWEEN A TREEVIEW AND AN IMAGE
>
> var treeview0=new rialto.widget.Tree({left:18,position:"absolute",
> withRoot:true,draggableNode:true,
>

width:269,top:19,name:"treeview0",height:130,parent:frame1});
> var treenode2=new
rialto.widget.TreeNode({text:"treenode",open:true,name:"treenode2"});
> treeview0.addNode(treenode2);
> var treenode3=new
rialto.widget.TreeNode({text:"treenode",open:true,name:"treenode3"});
> treenode2.addNode(treenode3);
> var treenode4=new
rialto.widget.TreeNode({text:"treenode",open:true,name:"treenode4"});
> treenode3.addNode(treenode4);
> var treenode5=new
rialto.widget.TreeNode({text:"treenode",open:true,name:"treenode5"});
> treenode2.addNode(treenode5);
> var treenode6=new
rialto.widget.TreeNode({text:"treenode",open:true,name:"treenode6"});
> treenode5.addNode(treenode6);
>
>
>
> this.dash=new
rialto.widget.Image("rialtoEngine/images/trash.png",392,49,frame1,"image\
","");
>
> 
> 
> 
> 
> 
> 
> <!--
oThis.dash.setSrcOut(rialtoConfig.pathRialtoE+'images/trashFull.png');--\

>
> 
>
>
> //Target Missile
> var oHtml=this.dash.getHtmlExt();
> rialto.widgetBehavior.affect(oHtml,'Target',{domain:'tree.node'});
> oHtml.receiveAfterDrop = function(oSpecs) {
> var node=oSpecs.oRia;
> node.remove()
>

oThis.dash.setSrcOut(rialtoConfig.pathRialtoE+'images/trashFull.png');
> }
>
>
>
>
> </rialto:frame>
> </rialto:layout>
>