Drag n Drop treeGrid

23 July, 2008 - 23:59 — Jay

Hi,
Could someone please give me an idea on how to do drag and drop of rows in a treeGrid.
I am able to drag each columns in a treeGrid, but not the entire row. Is there anyway we could do that?

                <b:treeGrid id="treeGridid" width="auto" height="200px" readonly="true" selectMultiple="false" rowClasses="rowClass1, rowClass2" dataSource="exampleSource" e:behavior="b:dragBase" dragReceive="allowedDrop">

                        <b:treeGridCol select="title" label="Title" width="200px" />

                        <b:treeGridCol select="genre" label="Genre" width="100px" />

                        <b:treeGridCol select="rating" label="Rating" width="70px" align="right" />

                        <e:handler event="dragStart" propagate="stop" type="application/javascript">

                        <![CDATA[

                                if (this.getProperty('focusedRow') != -1) {

                                        var text = event.viewTarget.lastChild.nodeValue;

                                        if (!text || text == null || text == 'undefined') { return; }

                                        var oSymbol = document.createElement('span');

                                        oSymbol.setAttribute('id', '1000');

                                        oSymbol.appendChild(document.createTextNode(text));

                                        oSymbol.className = 'dragSymbol';

                                        this.symbol = oSymbol;

                                        document.body.appendChild(oSymbol);

                                        btl.drag.dragManager.doDrag(this, event.viewTarget, event.startX, event.startY, oSymbol, 20, 10, 1, false, event.viewTarget.childNodes);

                                }

                        ]]>

                        </e:handler>

</b:treeGrid>

This code drags the column header too. How can we prevent that.

Jay

Looks like some test code

24 July, 2008 - 02:21 — tordona

Looks like some test code from me. cool.

Depending on what you want to do exactly, there are a few possible ways to drag the entire row.

You could use event.viewTarget and crawl the DOM. The parent TR element of the row you want to drag would be: event.viewTarget.parentNode.parentNode

If you want the raw data, you could btl.dataSource.getValue to pull each field that you want.

var myDataSource = bb.document.getElementById(this.getAttribute('dataSource'));

var selected = this.getProperty('selectedIndex');

var myfield1 = btl.dataSource.getValue(myDataSource, selected, 'myfield1', null);

var myfield2 = btl.dataSource.getValue(myDataSource, selected, 'myfield2', null);

var text = myfield1 + ' ' myfield2;

As for the column header being dragged also, I don't know honestly. As I am unable to reproduce that.

Hope that helps some.

Hi tordona, Thanks for the

28 July, 2008 - 21:35 — Jay

Hi tordona,
Thanks for the info. I could able to drag the entire row.
And yes, I used your test code on listgrid.

How can we drop a row on a treegrid . Basically we need to update the underlying datasource when a row is dropped. Any suggestions?
I am using the gridData.xml as localdata, that comes with the backbase distribution.

Regards
Jay

Client Framework