Reorder List Rows by Dragging Row to New Position

[Davidk]

Check out this new List Row Drag feature... Reorder List Rows by Dragging Row to New Position. The Alpha team sure has a handle on List dragging... very nice... smooth.

http://aadocuments.s3.amazonaws.com/...easeNotes.Html

[Pat Bremkamp]

Re: Reorder List Rows by Dragging Row to New Position

I'm excited to learn how this works. My question is, now that I've reordered the list, how do I save that order so I can come back to it later? There must be some kind of index built to display the order, but will we have access to it? We do equipment inspections, and I'm getting an idea of the following:
A full list of inspections to be done. Lists for each inspector. Easy to do. Drag the inspections from the full list to the inspector's schedule lists and add motel accommodations. Selwyn has a video on this. Move them up and down based on location, access to the site, readiness of the equipment, etc. This new feature. Now, save those lists in order, for the inspectors to use and confirming emails to the clients. Then as inspections are done, add and drop inspections on the schedule as things happen (and they will) note the time of the inspection and the inspector and send out a revised schedule. How to do those parts?

This could be an intuitive process and much faster than our current manual procedure.

[Steve Workings]

Re: Reorder List Rows by Dragging Row to New Position

I'll be doing this too Pat.

I think you can make a usual callback with the list data:

var data = {dialog.object}.getListData('LIST1');
var dataJSON = JSON.stringify(data);
var _dataToSubmit = A5.ajax.buildURLParam('_listData',dataJSON);
{dialog.object}.ajaxCallback('','','xb','',_dataToSubmit);

Then you'll get it back in Xbasic in the order the user wants:

function xb as c (e as p)
	dim p as p
	p = json_parse(e._listData)	
	debug(1)	' look at "p"
end function

[Davidk]

Re: Reorder List Rows by Dragging Row to New Position

You'd sort your List according to data in the List. As you drag rows in the List you'd update the sort data in the List itself. Sync when the drag is finished or when the user has finished re-ordering the List.

You get the "from" and "to" row numbers in the onMoveEnd event.

[CharlesParker]

Re: Reorder List Rows by Dragging Row to New Position

10-4 on that Pat - the row-drag setup is awesome.

[CharlesParker]

Re: Reorder List Rows by Dragging Row to New Position

DK - so what exactly is going on with the sort order? I wouldn't say you guys are talking WAY over my head but certainly above it at this point. The next time a full reload of the application takes place how would the list be re-drawn in the ammended order? Are row numbers swapped out in the DB or is it an edit to the sql call - I dont think I would like that in a multi-tenant situation?
It looks like steve would be saving the data to a json object to call later - but that needs to be stored somewhere I would imagine. I wouldn't want to rely on local storage for that.

I know in the grid you can save search criteria and load it - which seems like a very similar thing. The issue I have is being a multi-tenant application I want to save search criteria per user. So along that same lines I would like to save on a per company_id and or per user as well. I think that adds a layer of complication. What-ever solutions AS comes up with I am sure they will be great - super impressed with the latest pre-release!

[Davidk]

Re: Reorder List Rows by Dragging Row to New Position

Your data is sorted according your rules... which culminate in a field, or fields, representing that order.

Your sort order, with other data is...

1 George
2 Helen
3 Aaron
4 Michael

In your List you show the name, but not the sort field.

You drag Michael into the 2nd position and then update each sort field with it's new order number.

The List data now looks like...

1 George
2 Michael
3 Helen
4 Aaron

What's nice about the row drag event is that you can decide to re-order the List from the 1st row... or... since you have the from and to row numbers you could do a swap... which would result in...

1 George
2 Michael
3 Aaron
4 Helen

In this case you'd have to re-draw the List.

Lot's of possibilities here... as usual.

Not sure what you're saying about search criteria... as this is about sorting.

[Steve Workings]

Re: Reorder List Rows by Dragging Row to New Position

To add an example:

One of my uses is for water quality testing.

Users want to have the various parameters in a particular order -- and different companies will have different preferences.

So, company A may want, in order:

1. pH
2. Temperature
3. Salinity
4. Alkalinity
etc.

Company B may want these, or other parameters in a completely different order. And that order needs to be preserved and presented exactly the same in the data collection phase, the results editor, and subsequent reporting.

I'll be using the user's sort order to fill the value of the "Sort" field in the table. I have this now, but have been unable to come up with a smooth, easy-to-use interface. This solves the problem nicely.

[Lance Gurd]

Re: Reorder List Rows by Dragging Row to New Position

In my list I have a sort order column (billpagepos) and have used the following code in the onMoveEnd Javascript

var num=lObj._data.length;
for (i=0; i<num; i++){

	lObj.updateRow(i,{Billpagepos:i+1});
}
{dialog.object}.saveListEdits('BOQ_PAGES',{rows: 'allRows'});

The updateRow all works fine, but the savelistedits does not! Could anybody push me in the right direction as to how to save the latest sort order back to the server please. The list is a child which has a detail view.

[Davidk]

Re: Reorder List Rows by Dragging Row to New Position

I believe you need to use .updateTableRow. Have a look here for the difference between the two.

http://documentation.alphasoftware.c...w%20Method.xml

[Lance Gurd]

Re: Reorder List Rows by Dragging Row to New Position

Thanks for looking David.

I am getting the orange triangle to show the records are dirty, but other data from the moved record is copied to records the moved record passes over (including the records primary key) I am then, of course, getting a sync error.

[Davidk]

Re: Reorder List Rows by Dragging Row to New Position

I'm going to build this example into my test UX and have a look.

[Davidk]

Re: Reorder List Rows by Dragging Row to New Position

Did you remember to turn on Detail View for the List?

Also, you're renumbering every row in the List... but you don't really need to do that. You only need to renumber those rows inclusive between "from" and "to". This works...

var startRenum = Math.min(from,to);
var endRenum = Math.max(from,to);

for (i=startRenum; i<=endRenum; i++){
	lObj.updateTableRow(i,{Billpagepos:i+1});
}

{dialog.object}.saveListEdits('BOQ_PAGES',{rows: 'allRows'});

[Lance Gurd]

Re: Reorder List Rows by Dragging Row to New Position

Thanks David, after correcting my schoolboy error of the JSON being case sensitive all works great. Now to spend the weekend implementing this on several other lists

[CharlesParker]

Re: Reorder List Rows by Dragging Row to New Position

David, I just wanted to say thanks for post#13 code to reorder! What a little gem that is. Worked perfectly and completed what I wanted to do. Your contributions and time have been a big part of my learning and growth.