Is it possible to configure drag / drop rowReorder and dropdown sub-menu items - and indent?

koniahin

I'm attempting to use datatables editor to manage a bootstrap navbar with dropdown items and make it display such that dropdown items are arranged under the parent activator and indented, something like:

Home
Services
    svc 1
    svc 2
    svc3
About
Projects
    pro1
    pro2
    pro3
Contact

This is more/less how Wordpress and probably many other CMS menu managers work. What I have currently is a single level, default datatables structure. It more or less works but is confusing to view. Is there a way to create this structure?

A less-preferred alternate approach I have in mind would be by creating a 2 level editor approach.

level 1 - to manage / display items on the main level
level 2 - once main level items is created, set it up to make available a sub-editor for each main menu item.

The above approach would mean that you would not get a full picture of the navbar in a view. You would have to click on a Services link to view/update items attached to Services. It takes an extra hop to get to view level 2.

Is there another approach to meet the goal? Suggestions?

allan

With one level of nesting, yes, this shouldn't be a problem. You would set the rowGroup.dataSrc option to match the data point that provides the grouping (you'd probably also want to put that column index orderFixed to force the sort to be by grouping first.

With two or more levels, I think it might get a bit more tricky. I've not actually experimented with RowReorder and RowGroups' new ability to do multi-level nesting.

Allan

koniahin

I could not figure out how to get this to work - so I hired a freelance developer who knows datatables and he could not get it to work.

All that we need is one level like I depicted in the original post description.

You drag a top level item such as Services to below Projects and the Services sub-items follow the Services menu item:

Home
About
Projects
    pro1
    pro2
    pro3
Services
    svc 1
    svc 2
    svc3
Contact

Can you provide a working example with code?

kthorngren

If I understand your requirements correctly I would consider using Child Detail Rows along with the RowReorder extension.

Projects, Services, etc would be the main Datatable rows which can be reordered. pro1, pro2, pro3 would be child detail rows of Projects and the same for svc1, etc. The child detail rows would move with the "parent" row.

Here is a simple example:
http://live.datatables.net/xarefida/1/edit

The text (Project, Services, About, etc) can be clicked on to reorder.

For extra credit I changed the plus and minus sign used by the Child Detail Rows example to Font Awesome arrows.

Kevin

koniahin

Thank you; I'm not javascript-skilled so understanding what you're doing is beyond me. I will need to run it by the developer and see what he says.

I looked at the example, did see that if you drag top level items that the subitems follow. That is great.

The next bit is to be able to drag the sub-items around, perhaps reordering under the parent or possibly dragging to another parent.

Is that also possible?

With the way datatables editor typically works you click on an item to open the popup editor. In my real-life situation I would be doing so to update properties for each item - item name, item alias, alignment, published, etc.

Would this still be doable with both parent and child items?

kthorngren

The next bit is to be able to drag the sub-items around, perhaps reordering under the parent or possibly dragging to another parent.

Its possible but the child rows are not controlled by Datatables. You could use something like jQuery UI or HTML5 draggable items. Or you can setup the child rows as another Datatable per the next question. If you do this then you can use the RowReorder extension.

Would this still be doable with both parent and child items?

If you want to use Editor with the Child rows then you will want to refer to the Parent / child editing in child rows blog.

Kevin

koniahin

Thank you. What I'm reading into this is that there are 2 ways of getting this done,
1) using something like jQuery UI, html draggable or 2) Parent/child editing and the page you're referring to.

Meaning that I can go back to the developer with this info and he can take it from there.

kthorngren

If you want to use the Editor then you will need option 2. If you do this and you want to drag and drop between the child tables it will get complicated. I did create a couple threads on this; one for jQuery UI and the other for HTML5.

Otherwise without the need for editing you should be able to use one of the drag and drop libraries between the child detail rows. Still might be a bit complicated for the need to add and remove the drag events on the child details as they are shown and hidden.

If I understand your requirements then I feel that either option 1 or 2 should be doable.

Kevin