UI Interest Group Discussions

cancel
Showing results for 
Search instead for 
Did you mean: 

Ordering Control?

I need a simple way for my users to be able to select and order a number of items. Were this the 1980's, it might suffice to provide two lists ("Available" and "Selected") and some arrow buttons to move items between the lists and up or down on the "Selected" list. Perhaps those lists would also support drag and drop.

I would prefer to provide a larger iconic representation of the items and present them horizontally, since they will ultimately represent column headers in a data file. Drag and drop would of course be needed.

I haven't found anything in LabVIEW ready-made for this. Perhaps I'm just missing it? Maybe there's something in a module I haven't installed?

I'm venturing into making an XControl for the purpose. (I've made some before.) However, I'm not even sure where to begin. The 2D picture control seems to have just painting operations; there's no making a square and then moving it around. Perhaps the 3D picture control allows this. Whichever way, it seems like I'm going to be making a widget toolkit almost from scratch, so I'm thinking there has to be a better way that I'm missing. Any ideas?

0 Kudos
Message 1 of 10
(6,930 Views)

Hi auspex,

Not sure if its exactly the sort of functionality your after but did you consider .NET Datagrid ?

See link below;

http://sine.ni.com/nips/cds/view/p/lang/en/nid/213896

Cheers,

Nick

0 Kudos
Message 2 of 10
(6,456 Views)

I've done this before with an actual table where the operator could drag and drop the column headers to rearrange them. Would that be ok?

If so, just register for mouse down events on the column headers and create code to assess where the columns were dragged to, and then rearrange the column string to match.

Alternatively, you might be able to get some code inspiration from XTabs. This allows the dragging and rearrangement of tabs (just like in Chrome) via drag and drop.

Thoric (CLA, CLED, CTD and LabVIEW Champion)


0 Kudos
Message 3 of 10
(6,456 Views)

It isn't horizontal, but is there a reason you wouldn't use a tree control? You can drag and drop to set the order, and categorize (of course). If you want to actually drag columns around, I would look for an external control. I'm not familiar with Datagrid, but I've seen it mentioned before.

0 Kudos
Message 4 of 10
(6,456 Views)

What I'm looking for is something like jQuery's Sortable.

http://jqueryui.com/sortable/

I don't think .NET is an option for me, since I may have users running MacOS or Linux.

0 Kudos
Message 5 of 10
(6,456 Views)

In this case the table isn't actually there, just what will be the headers.

I'm looking at XTabs now. The tabs of Chrome are a good analogy; I wish I'd thought of them.

0 Kudos
Message 6 of 10
(6,456 Views)

I could use a tree, but it may be worse than two lists.

Part of my motivation is to provide a larger target for manipulation. I'm hoping I can someday make this a touch interface.

Another thing is that the things represented are actually laid out horizontally, so I'm hoping to match that.

0 Kudos
Message 7 of 10
(6,456 Views)

Alas, it seems those controls are locked.

0 Kudos
Message 8 of 10
(6,456 Views)

I think what Thoric suggested could be adapted to do this if you use a single column listbox and handle events.You could do a custom symbol that looks like and up or down arrow. (Example here:  http://digital.ni.com/public.nsf/allkb/1AB08615E1FA73E8862574C2003806D5) Then handle a mouse down event by grabbing the coordinates and rearranging.

0 Kudos
Message 9 of 10
(6,456 Views)

auspex,

I decided to try creating an ordering control as you have described using the new QControl Toolkit.  I have attached the results but you will need to install the QControl Toolkit from the NI LabVIEW Tools Network first for it to work.  The toolkit is free and available here.

Here is a view of what the OrderSelection QControl looks like but it is customizable.  It is based on a picture control.

OrderingSelector.png

The Item image is a PNG in the facade folder in the QControl Class.  You can change it if you want a different look.  Use the "Test OrderSelection.vi" as an example of how to use it in your application.  Using it is as easy as setting the 1D array of Items in a property, getting the value change event on the picture control, and then reading the 1D array of Items back out.

More information and full documentation on the QControl Toolkit is available here.  This OrderSelection QControl and the QControl Toolkit is fully unlocked for viewing.

Enjoy,

The Q

Quentin "Q" Alldredge

Chief LabVIEW Architect, Testeract | Owner, Q Software Innovations, LLC (QSI)
Director, GCentral | Admin, LabVIEW Wiki | Creator, The QControl Toolkit
Certified LabVIEW Architect | LabVIEW Champion | NI Alliance Partner



Message 10 of 10
(6,456 Views)