Dragging rows in grids

, , ,
1

I have been asked if a row within a grid can be positioned in a new location by dragging and dropping. For example, using the mouse, move the third record to the top of the list? Any ideas?

Thank you.

2

Hi Todd,

in ROWTABLEAREA2 grids you can add a TREENODE3 control. In the TREENODE3 control you can set the property enabledrag=“true”

This allows the end-users to drag/drop nodes.

In your grid data of Natural you have the fields
2 DRAGINFO (A) DYNAMIC
2 DROPINFO (A) DYNAMIC

When the end-user drops a node then for a grid ‘lines’ the Natural program receives an event
lines.reactOnDrop

Removing the item from the ‘old position’ and inserting the item into the ‘new position’ within the grid needs to be done by the Natural program in this reactOnDrop event. It’s just a notification, the Natural program can decide what to do with it. It can for instance open a pop-up, simply dropping the item or rejecting the drop.

Best Regards,
Christine

3

Thank you Christine. I’ll give this a try and see if it meets our needs.

4

I found an opportunity to give this a try but I’m not getting any results. The change in functionality was apparent once enabledrag on the TREENODE3 was set to true. While debugging however, I’m not seeing any data that allows me to react to the drag & drop.

NATPAGE:

<?xml version="1.0" encoding="UTF-8"?>
<natpage natsinglebyte="true" natkcheck="true" xmlns:njx="http://www.softwareag.com/njx/njxMapConverter">
    <titlebar name="New Natural Page">
    </titlebar>
    <header>
        <button name="Exit" method="onExit">
        </button>
    </header>
    <pagebody>
        <rowtablearea2 griddataprop="lines" rowcount="5" firstrowcolwidths="true">
            <tr>
                <gridcolheader width="30" propref="selected">
                </gridcolheader>
                <label name="Tree" width="100" asheadline="true" textalign="center">
                </label>
                <label name="Field" width="100" asheadline="true" textalign="center">
                </label>
                <hdist>
                </hdist>
            </tr>
            <repeat>
                <str valueprop="selected">
                    <selector valueprop="selected">
                    </selector>
                    <treenode3 width="100" enabledrag="true" validdraginfosprop="drag">
                    </treenode3>
                    <field valueprop="f1" noborder="true" transparentbackground="true">
                    </field>
                    <hdist>
                    </hdist>
                </str>
            </repeat>
        </rowtablearea2>
    </pagebody>
    <statusbar>
    </statusbar>
</natpage>

PROGRAM:

DEFINE DATA LOCAL
1 LINES (1:*)
  2 DRAG (A) DYNAMIC
  2 DRAGINFO (A) DYNAMIC
  2 DROPINFO (A) DYNAMIC
  2 F1 (A) DYNAMIC
  2 LEVEL (I4)
  2 OPENED (I4)
  2 SELECTED (L)
  2 TEXT (A) DYNAMIC
1 #C1 (I4)
END-DEFINE
*
RESIZE ARRAY LINES TO (1:3)
FOR #C1 = 1 TO *OCC(LINES.LEVEL)
  COMPRESS NUMERIC 'TEXT:' #C1 INTO LINES.TEXT (#C1)
  COMPRESS NUMERIC 'F1:' #C1 INTO LINES.F1 (#C1)
  LINES.LEVEL  (#C1) := 1
  LINES.OPENED (#C1) := 2
END-FOR

REPEAT
  PROCESS PAGE USING "EXRSORTA"
*
  DECIDE ON FIRST *PAGE-EVENT
    VALUE U'nat:page.end', U'nat:browser.end',U'onExit'
      /* Page closed.
      ESCAPE BOTTOM
    VALUE U'lines.reactOnContextMenuRequest'
      /* TODO: Implement event code.
      PROCESS PAGE UPDATE FULL
    VALUE U'lines.reactOnDrop'
      /* TODO: Implement event code.
      PROCESS PAGE UPDATE FULL
    VALUE U'lines.reactOnSelect'
      /* TODO: Implement event code.
      PROCESS PAGE UPDATE FULL
    VALUE U'lines.reactOnToggle'
      /* TODO: Implement event code.
      PROCESS PAGE UPDATE FULL
    VALUE U'onExit'
      /* TODO: Implement event code.
      PROCESS PAGE UPDATE FULL
    NONE VALUE
      /* Unhandled events.
      PROCESS PAGE UPDATE
  END-DECIDE
END-REPEAT
*
END

The attached images show where I dropped row 1 onto row 4, and *page-even is lines.reactOnDrop, but draginfo and dropinfo are empty. I then also included a validdraginfosprop value, but that too is empty. I tested in both IE and Chrome in case there was a browser issue, but neither worked.

Any thoughts? Am I missing something?

Thank you.

Debug1.JPG
Debug1.JPG385×842 68.1 KB

Debug2.JPG

5

Hi Todd,

draginfo and dropinfo should be filled. But they are not. I will check if this is a bug.

Best Regards,
Christine

6

Hi Todd,

I implemented a small sample. Everything works fine, no bug.
While implementing it, I found that using the DROPICON instead of a tree control is more user friendly.
The basic concept is: The application fills the draginfo information. In my sample I set the draginfo to the row index. Then in the dropinfo you’ll get the draginfo of the dragged row.

I integrated the sample into the NaturalAjaxDemo so that it will be available with the product. Please find attached the sample. Copy the UI files/subfolders to your njxdemos UI and generate the layouts. A documentation page with a description is contained.

Please let me know if this meets your requirement.

Thanks + Best Regards,
Christine

gridlines_draganddrop.zip (3.91 KB)

1 Like
7

Thank you Christine. It works great and I think this might work for our needs.