Custom dashboard sorting MarkupAdminDataTable pages

[Raymond Geerts]

I'm building a dashboard, based on the dashboard from Kongondo's Blog.

In there i have Articles and Widgets. Articles are sorted by some date, but for the widgets i want to be able to use manual drag-n-drop sorting.

Widgets are all child pages from a certain parent page.

Is this possible and how would i be able to approach this?

Would it be possible to build manual sorting into MarkupAdminDataTable or should i use PageTable instead?

update: Im looking in to ProcessPageSort to see if i can use that. Seems it needs an AJAX call.

update: Changed title of post

Edited January 20, 2015 by Raymond Geerts

[Martijn Geerts]

What I would try (Never done this before)

- Use jquerui sortable.

- start drag (or something), get de index of the item in the list of pages 

- stop drag (or something), get the new index of the dropped item.

- then from your list get the Page id's from start drag index till stop drag index and make from all id's a comma separated string.  (1234,3241,6473,1001,1234)

Then you need to do a post with Javascript to /processwire/page/sort/, use the following variables:

sort (comma separated list of ID's) 

parent_id

move_id (dragged page)

Edited January 21, 2015 by Martijn Geerts
copy pasted the wrong URL updated the post

[Raymond Geerts]

Thanks Martijn, will take a look at jquery sortable, looks like its easy to setup.

Will have to find out how to add some data attributes to a table row with the MarkupAdminDataTable, or else i might be able to do it with hidden form fields.

[Raymond Geerts]

Ok it seems i have set up everything now.

The table (specificly all children of tbody) are sortable now with

$('.blocksTable > tbody').sortable()

In sortable() i have set some options like axis:"y" and beforeStop

on beforeStop i gather the needed ids to pass as data, for example:

'TOKEN788378384X1421678958':'fXGyHPxU2xSBIFpuDI08ORL1Z1CTC0U5',
'id':1015,
'parent_id':1017,
'sort':'1015,1013,1014'

Where the TOKEN is grabbed from the hidden input field with class _post_token, 'id' is the id from the page that was 'moved', 'parent_id' is the id of the parent page, 'sort' are the ids of the pages in the new order.

These are posted with ajax to /processwire/page/sort/

The problem is i get the following message return, indicating the page is not saved because there are no changes.

{"error":true,"message":"You do not have permission to sort pages using this parent - \/partners\/partnername\/blocks\/"}

The strange thing is the current user has move and sort permissions, so i'm not sure what i'm missing here. Does anybody have a clue?

Edited January 20, 2015 by Raymond Geerts

[Raymond Geerts]

Solved, the parent template "EDIT PAGES" for the current users role, needed to be ticked.

Now it works fine, sorting pages from a custom dashboard within a MarkupAdminDataTable.

[adrianmak]

I'm working on MarkupAdminDataTable. From OP screenshot, how to put a checkbox in front of each row.

My intention is to allow user for multiple row selection to perform some actions like delete pages

[LostKobrakai]

Disable content encoding and just insert the raw html into the table. Just make sure you're entity encoding the html on your own if needed.