Change format of selected choices #71

Closed
HelgeS opened this Issue Dec 3, 2012 · 8 comments

Projects

None yet

2 participants

@HelgeS
HelgeS commented Dec 3, 2012

I'm using autocomplete for a foreign key relation (using autocomplete_light.MultipleChoiceWidget).
Everything works so far, but I have an issue changing the HTML format of the selected choice.

My goal is to display the selected choice in a table row, but the widget always creates span-tags and I do not find the right point to change the formatting.

I tried to change the widget HTML template, but I could not change the markup of the single selected choice, e.g. this is what I get after selected a choice from the autocomplete widget:

<table id="id_teilnehmer-deck" class="deck div" style="">

    <span class="div hilight" data-value="1"><span style="display: inline;" class="remove div">

        X
    </span>VALUE</span></table>

Specifically, I would like to know how to adjust the <span class="div hilight" data-value="1"> tag.

@jpic
Member
jpic commented Dec 3, 2012

I saw that while working on the new docs recently.

You should override Widget.addToDeck, which does choice.clone().

You'll need to make a script like this one: http://django-autocomplete-light.readthedocs.org/en/docs_rewrite/remote.html#javascript-fun which overrides addToDeck instead of getValue.

Also, you'll have to set bootstrap=yourbootstrap in either the python Widget, python Autocomplete, or widget html.

@jpic
Member
jpic commented Dec 3, 2012

My bad, there's an easier option: just make your autocomplete template to present a table, with tr.choice[data-value] elements. Choices are cloned from the autocomplete into the deck when selected.

Let me know if you need add-another support in that as well - I will factor out the HTML/design parts into specific functions.

@HelgeS
HelgeS commented Dec 3, 2012

Thank you, I now use a table in the widget.html and the choice_html_format string in my AutocompleteModelBase implementation returns a table row. This is a good first step for me.

Which files would I have to change in order to extend the choice_html to display further properties of the choice?
Would there also be a possibility to change the template of the remove button, so that it appears in a table cell instead of span? Just changing span to td did not do the trick for me.

I would greatly appreciate if you could make add-another support possible!

@jpic
Member
jpic commented Dec 3, 2012

You should use AutocompleteModelTemplate](http://django-autocomplete-light.readthedocs.org/en/docs_rewrite/template.html) instead, then you could add any further property that you want.

Did you make any progress in the script ? I'm almost done with the refactor, you might have to override at least one function (create a choice from a fresh created by add another). You'll have to make the script that overrides Widget.optionChoice.

@jpic jpic closed this in 84541d2 Dec 3, 2012
@jpic jpic reopened this Dec 3, 2012
@jpic
Member
jpic commented Dec 3, 2012

Install the dev version of django-autocomplete-light please. There is no need to do JS overrides thanks to the the refactor.

Also, try table_autocomplete example app:

https://github.com/yourlabs/django-autocomplete-light/tree/30d078547b2d6ef771ec23d9ff6ab9e43bb53be5/test_project/table_autocomplete

Adapt to your needs and implement in your project.

Close or give feedback on this issue.

When you close this issue, django-autocomplete-light 1.1.3 will be released, including the features that you need.

Thanks for your feedback !

@jpic
Member
jpic commented Dec 3, 2012

I just updated the hosted version by PythonAnywhere: http://jpic.pythonanywhere.com/admin/table_autocomplete/tablewidget/3/

@HelgeS
HelgeS commented Dec 4, 2012

I just tried it within my project and it works like expected.
Now I use the AutocompleteModelTemplate and based my templates on your examples.
Thanks a lot for your help!

@HelgeS HelgeS closed this Dec 4, 2012
@jpic
Member
jpic commented Dec 4, 2012

1.1.3 released, thanks for your feedback !

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment