CODEWITHSUNDEEP
djangodjango-formsdjango-templates
witold-gren
witold-gren

Reputation: 173

How to render formset in template django and create vertical table?

How to create this table used formset and extra=3?

Table:

| my name first column | second column | third column | fourth column |

| formset1.field1.label | formset1.field1 | formset2.field1 | formset3.field1 |

| formset1.field2.label | formset1.field2 | formset2.field2 | formset3.field2 |

| formset1.field3.label | formset1.field3 | formset2.field3 | formset3.field3 |

| formset1.field4.label | formset1.field4 | formset2.field4 | formset3.field4 |

In view I create standard formset:

def my_view(request, id_object):
    getobject = get_object_or_404(Model, id=id_object)
    FormSetInit = inlineformset_factory(Model, Model2, form=FormModel2, extra=3)
    FormSet = FormSetInit(instance=getobject, prefix='model2')
    response = {}
    response['Formset'] = FormSet
    return render_to_response('my_template.html', response)

In template 'my_template.html' i try used this:

<table>
{% for form in Formset %}
  {% if forloop.counter == 1 %}
    {% for field in form %}
      {% if forloop.counter < 8 %}
        <tr>
          <td class="first">{{ field.label }}</td>
          <td>{{ field }}</td>
          <td>{{ field }}</td>
          <td class="last">{{ field }}</td>
          {% if forloop.counter !=  7 %}
            </tr>
          {% endif %}
      {% else %}
        {{ field }}
        {% if forloop.last %} </tr> {% endif %}
      {% endif %}
    {% endfor %}
  {% endif %}
{% endfor %}
</table>

But this not a good idea.. :/

Upvotes: 5

Views: 24850

Answers (3)

jsutherl
jsutherl

Reputation: 141

Providing a more recent answer after I landed on this trying to achieve the same thing and ended up implementing with crispy forms

Forms:

from crispy_forms.helper import FormHelper, Layout
...

class MyForm(forms.ModelForm):

    class Meta:
        model = MyModel
        fields = ['field1', 'field2', 'field3']


MyFormSet = modelformset_factory(MyModel, form=MyForm, extra=0)


class MyFormSetHelper(FormHelper):
    def __init__(self, *args, **kwargs):
        super(MyFormSetHelper, self).__init__(*args, **kwargs)
        self.layout = Layout(
            'field1',
            'field2',
            'field3'
        )
        self.template = 'bootstrap/table_inline_formset.html'

Views:

formset = MyFormSet(queryset=my_qs)
helper = MyFormSetHelper()
context = {'formset': formset, 'helper': helper}
return render(request, 'my_template.html', context)

Template:

{% extends "base.html" %}
{% load crispy_forms_tags %}

{% block content %}

<form action="" method="post">
    {% csrf_token %}
    {% crispy formset helper %}
</form>

{% endblock content %}

Upvotes: 3

user3272374
user3272374

Reputation: 21

<table id='supertable' border=1>
<tr>
{% for form in formset %}
    {% if forloop.counter = 1 %}    
    <td>
        <table>
        {% for field in form.visible_fields %}
            <tr><td style="background: cyan; line-height:1; white-space:nowrap;" >{{ field.label_tag }}</td></tr>
        {% endfor %} 
        </table>
    </td>
    {% endif %}
    <td>
        <table>
        {% for field in form.visible_fields %}
            <tr><td style="background: pink; line-height:1; white-space:nowrap;" >{{ field}}</td></tr>
        {% endfor %} 
        </table>
    </td>
{% endfor %} 
</tr>
</table>

Upvotes: 2

orion
orion

Reputation: 116

I was having trouble with this too but managed to get it to work with some help from https://docs.djangoproject.com/en/dev/topics/forms/?from=olddocs#displaying-a-form-using-a-template

Anyways, this is what you can try for the template, it basically iterates through each of the forms:

<table>
    <thead>
        {% for form in Formset.forms %}
            {% if forloop.first %}
                {% for field in form %}
                    <th>{{ field.label_tag }}</th>
                {% endfor %}
            {% endif %}
    </thead>
    <tbody>
            <tr>
                {% for field in form %}
                    <td>{{ field }}</td>
                {% endfor %}
            </tr>
        {% endfor %}
    </tbody>
</table>

Hope that helps! Not sure if it's the best way to do it, but it worked!

Upvotes: 7

Related Questions