Related objects interface should be tighter (edit_inline)

[Adrian Holovaty]

The admin interface for related objects and the ordering interface need some tighter integration.

Currently, anything that can be ordered goes in the right sidebar of the admin change form, with no relation to the actual input fields for those objects.

The adding, removing, editing and ordering of related objects should be tied together in one part of the form.

Specific areas for enhancement:

• Adding related objects should be easier. Now you have to "save and continue" to get an extra set of fields to add a new related object. You should be able to click "add new object" to add another set of blank fields inline on the page.
• Deleting related objects should be easier. Now you have to clear the "core fields" of a related object to delete it. You should be able to click "delete" to delete the object, or at least mark it for deletion when you click save on the main object.
• Ordering of related objects should be clearly tied to editing those objects. Now the ordering interface is completely separate. You should be use the same list of objects to set the order (by dragging) or select that object for editing or deleting (by clicking).

[Wilson Miner]

Here is a mockup of a proposed interface for related objects (edit_inline).

​http://media.wilsonminer.com/images/django/related-objects-mock.gif

Proposed changes (implemented with JS/Ajax):

• Adding objects: Clicking the "Add another..." link below the related objects would dynamically add a new row with blank fields.
• Deleting objects: Clicking the "delete" icon next to each related object row would "mark" that object for deletion when you click save. The row would be grayed out, the fields would be disabled. The delete link would transform to a "restore" icon, which would remove that object from the deletion list and reactivate the fields.
• Ordering objects: Clicking the row outside the field or button areas would allow the entire row to be dragged with a "move" cursor and dropped in a new position in the order.

Obviously, this is a long way from being implemented, and the heavy lifting will need to be done in the javascript, but this should give us a starting point.

[Simon Willison]

That mockup is very sexy indeed. There needs to be a fallback for when JS isn't available - maybe just a text box with an "order-by-this-number" integer in it that gets hidden when the JS is loaded.

[anonymous]

That's exactly what I was thinking re: ordering. There would be an integer field at the beginning of each row that would be hidden by the javascript.

I'm not sure what the fallback is for the delete behavior. As I described it, I think it would require some Ajax hooks to store a list of objects to be deleted on save. Maybe just maintain the "clear core fields to delete" method as a noscript fallback.

[robert@…]

Surely the fallback can just do multiple "POST"s to the same url, and only the one from the submit button means "Save this object". This could be done with validation in the manipulator I think. (Maybe manipulators need to be expanded to include the state "editing, but not finished", as distinct from errors.)

Then a normal up/down image buttons fallback can be used.

[anonymous]

Just let the Neanderthals that don't have JS enabled or have a really old browser use the current way of doing things. It's not like it's impossible to do, it's just harder. If you want easier, use a newer browser. Netscape 4 compatibility is too much hassle these days, and should have the lowest possible priority.

[Wilson Miner]

Also, here's a mockup of how edit_inline STACKED would work. This is going to be a little more complicated to set up, but this is the basic idea. Drag and drop the rows to reorder. Click a row to select. The fields on the right would be populated with information for the the currently selected field.

​http://media.wilsonminer.com/images/django/related-objects-stacked.gif

[Jason Huggins]

1) wilson, can you post a higher res copy of the "X" (delete) icon, so I can patch my own version of Django in the meantime?

2) Would you consider using code from ​http://script.aculo.us/ to handle the sorting?
There is a demo for sortable elements: ​http://script.aculo.us/demos/ajax/sortable_elements
Ignoring the "AJAX" part of it, and only looking at the JavaScript source code, it looks like it would be very easy to integrate.

[jim-django@…]

Has there been any progress on this since september? The new admin is integrated now, and it looks like the javascript debate has settled on Dojo; is this still being worked on?

[Jacob]

Indeed it is -- I've been hacking on this behind the scenes. Expect to see the results pretty soon.

[Gary Wilson <gary.wilson@…>]

restored and added to cc.

[Eugene]

Hi!
Great feature! I've just thinked of this!
Is it possible to use it now? What could be done to make this feature ready for use?

[starplant@…]

I would very like to see this implemented!

[(none)]

Milestone Version 1.1 deleted

[Gary Wilson <gary.wilson@…>]

Removed keyword spam. Marking this accepted since many people seem interested, and there aren't really any drawbacks.

[taavi223@…]

I wanted to add that if you have 'max_num_in_admin' set to something for the related object then the JS should respect that value to that and not allow you to add more sets of fields once you reach that number. I bring this up, because in certain instances you want to only have one related object. One example that springs to mind are users and profiles, and although you don't have to worry about 2 profiles being saved for a single user (unique = True in the ForeignKey would throw a validation error), it would be rather confusing if the interface allowed you to have two forms but wouldn't let you save both of them.

Finally, I think that since we're working on this, we should have some way to quickly clear a related object's inline form (perhaps the delete option could double for this). If I have a long form and I fill in all the fields, then decide I don't want to add that related object, I'd have to manually go back clear all the core=True fields, which could be very time consuming, especially if the I don't know which ones they are. Just my 2¢.

[Gary Wilson <gary.wilson@…>]

Thomas Steinacher has posted a link in a comment in #3433 to ​some code on his web site (that uses the ​mootools JavaScript library) for adding of a new set of edit_inline fields, though I'm not positive that he gives Django the right to use it.

[Thomas Steinacher <tom@…>]

Feel free to use my code in Django. Should I attach the code to this ticket? And it wouldn't be difficult to remove the mootools dependency, if you don't like it.

[Gary Wilson <gary.wilson@…>]

Replying to Thomas Steinacher <tom@eggdrop.ch>:

Feel free to use my code in Django. Should I attach the code to this ticket? And it wouldn't be difficult to remove the mootools dependency, if you don't like it.

If you could create a patch to attach to the ticket, that would be very helpful. As far as the mootools dependency, I don't think the core developers want to couple Django to any specific JavaScript library.

[Thomas Steinacher <tom@…>]

If you could create a patch to attach to the ticket, that would be very helpful. As far as the mootools dependency, I don't think the core developers want to couple Django to any specific JavaScript library.

Everything I could attach right now are the files that you can already download ​on my website (dynamicforms.py/js). But I don't have a patch against the Django admin application.

[Brian Rosner <brosner@…>]

Reverting spam.

[xuefeng8@…]

I would very like to see this implemented! ​月餅

[cammmm@…]

+1 for this feature. Can we get a status update? (I may be willing to code this myself)

[James Bennett]

Replying to cammmm@gmail.com:

+1 for this feature. Can we get a status update? (I may be willing to code this myself)

It's being worked on as part of newforms-admin.

[anonymous]

django is beautiful. compliments

[Brian Rosner]

This ticket is not fixed, but very close ;) Probably a bot of some sort.

[Brian Rosner]

Tagging with nfa-someday as this is functionality that is not critical to the merge of the newforms-admin branch.

[cecil]

Well,as you pointed in your story, it's difficult to find a way from this situation. I'm crossing fingers for everybody who is in this situation. ​Good Luck!

[anonymous]

cc changed from oliver@…, cmlenz@…, gary.wilson@…, mhf@…, tom@…, django@…, brosner@…, tom85@… to oliver@…, ​ouzze@yahoo.net, cmlenz@…, gary.wilson@…, mhf@…, tom@…, django@…, brosner@…, tom85@…, dan.popovici@….

[anonymous]

cc changed from oliver@…, cmlenz@…, gary.wilson@…, mhf@…, tom@…, django@…, brosner@…, tom85@… to oliver@…, ouzze@…, ​servil@yahoo.com, cmlenz@…, gary.wilson@…, mhf@…, tom@…, django@…, brosner@…, tom85@…, dan.popovici@….

[anonymous]

cc changed from oliver@…, cmlenz@…, gary.wilson@…, mhf@…, tom@…, django@…, brosner@…, tom85@… to oliver@…, ouzze@…, ​servil@yahoo.net!, cmlenz@…, gary.wilson@…, mhf@…, tom@…, django@…, brosner@…, tom85@…, dan.popovici@….

[Michael P. Jung <mpjung@…>]

Very sexy interface mock up. :)

[mrts]

Marking as post-1.0 as it clearly is not in scope for 1.0.

[barbuza]

dynamic adding and ajax deleting for tabular mode. to enable, add js to Media class in ModelAdmin of your models

[barbuza]

for STACKED editing, i think, we should use one of javascript libraries. there will be tons of work without one of them.

[Frank Malina]

I've tested the diff, you enclosed.

One other problem is that when a new empty line is added, it should automatically have a delete icon to remove the added node. It's needed in case user added more nodes than needed or intended.

There is no draggable, as Wilson proposed for sorting. Draggables are quite easy to do with JQuery and JQuery UI library. I guess JQquery is the favorite library amongst Django people and core developers, so it makes sense. There is some code that could be used: ​http://www.isocra.com/2008/02/table-drag-and-drop-jquery-plugin/

Frank ​http://vizualbod.com

[anonymous]

I'm running latest django svn trunk and I've applied inline-tabular.diff patch.
I was getting a javascript syntax error and I've changed the 121 line in django/contrib/admin/media/js/admin/InlineObjectsTabular.js to:

xmlhttp.open('POST', "delete-inline/"+name+'/'+id+'/', true);

But I can't see any change in the admin forms.
What should I do?

Thanks in advance.

[anonymous]

a

[Patrick Kranzlmueller]

about a year ago, the status was "This ticket is not fixed, but very close ;)".
any updates on this?

[Florian Apolloner]

anonymous having fun?!

[(none)]

Milestone post-1.0 deleted

[juriejan]

i'm looking at implementing this. anyone made any progress that i can possibly build upon? should i start a discussion on django-developers about this?

[Collin Anderson]

Correct me if I am wrong, but there are already some implementations out there using jQuery, and we just need to make our own implementation without requiring a library.

​http://www.arnebrodowski.de/blog/507-Add-and-remove-Django-Admin-Inlines-with-JavaScript.html

​http://www.djangosnippets.org/snippets/1053/ (Simon's Orderable inlines using drag and drop with jQuery UI)

[juriejan]

That's the way it seems to me too. But I believe there is a whole discussion on using too much Javascript in the standard shipment of Django. It seems to me that this would be better suited for distribution as a separate application.

Let's continue the discussion at ​http://groups.google.co.za/group/django-developers/browse_thread/thread/50dd66128b2f486f

[anonymous]

"That's the way it seems to me too. But I believe there is a whole discussion on using too much Javascript in the standard shipment of Django. It seems to me that this would be better suited for distribution as a separate application. "

Well obviously django doesnt want to favor any js lib but on the other hand it would be rather stupid to reinvent the wheel. I guess this is why this issue is still open. Obiviously this is a bad circle. We want nice js and ajax bells and whistles but we dont want to favor any js lib (even if jquery is the best ;) the result? the admin will remain rigid. third party admins like ​http://code.google.com/p/sorl-curator/ will take over.

[James Wheare]

Um, hate to break it to you but... the admin already is a contrib app so I'm not sure choosing a JS library would suggest any sort of core endorsement of a library. It's possible to get too shackled to ideals of impartiality sometimes. Occasionally you know... building things is good. :)

[anonymous]

Not choosing a js lib just wastes human resource.

[anonymous]

please, choose a js library

[Smith]

test

[Jannis Leidel]

(In [12297]) Fixed #12508 - Added ability to dynamically add inlines in the admin app.

Refs #13. Also introduces an empty_form attribute on formsets to make it easier to implement dynamic forms.

Many thanks to Zain Memon for the initial patch from his Summer of Code 2009 project, Stanislaus Madueke for his django-dynamic-formset app and all the other people helping out.

[Mathijs de Bruin]

So far, it seems that no work has been done on this issue for a long time. Meanwhile, I am sure that it is still a feature that many users would like to see integrated into the Django admin. Given that, by now, people have made the wise decision to ship jQuery with the Django admin, it seems to me as about time to start fixing this issue.

Currently, if order_with_respect_to is specifeid in a Model's Meta field is specified, a cute _order field is indeed added to the Model's database table. However (AFAIK because of the underscore), this field is not represented at all in the Admin interface. This implies that - for now - it is still easier to explicitly add some Integer ordering field to a Model rather than using the much more elegant, available, but disfunctional, API that ships with Django.

As fixing/completing this feature should be fairly easy for someone who's used to getting into the debts of the (very scarcely documented) Admin/Model internals, it might not even be too unrealistic to have this fixed before 1.3 or the first point release after.

To make it a bit easier, I have made a start by providing this patch which fixes at least the get_ordered_objects method of Model's _meta. This causes the Admin to load a non-existant file dom-drag.js which should be replaced by a jQuery equivalent thereof. This one's attached to #2137 for now. Furthermore, the InlineModelAdmin's formset should have it's can_order parameter set to True, I believe, to allow for the ordering to get through to the Admin in the first place. A (broken) patch for this is attached to #9338.

Meanwhile, I have spotted the following tickets relating to this same issue - parts of which I used for writing the - still very incomplete - patch:

• #13296
• #9338
• #2137

[Jannis Leidel]

Which patch are you referring to?

[Mathijs de Bruin]

@jezdez Apparently I could not attach my patch to the message itself. It should have become clear in this last edit. :)

[Jacob]

Results of a discussion with Russ:

This ticket has basically been "fixed" by Zain's GSoC project adding dynamic add/remove. Since then it's sorta become a dumping ground for slightly related features, but there really isn't anything that can be done to move this ticket forward any more. It's become a laundry list. Thus, I'm closing this as fixed; the various relation issues here should be moved (and in most part have been already moved) to new tickets.