FormCollection - holders/forms as a dictionary?

[gumish]

Would it be usefull to have holders in context also as a dictionary?
For example if want to render collection holders/forms in different parts of the page the iterator through holders is not very comfortable.

So I made this to have a holders also in dictionary:

class CustomEditCollectionView(EditCollectionView):
    """ adds 'form_collection_dict: dict' into context,
         individual forms/holders are easier to access in page template
    """
    def get_context_data(self, **kwargs):
        context = super().get_context_data(**kwargs)
        collection = self.get_form_collection()
        context['form_collection_dict'] = dict(zip(
            collection.declared_holders.keys(),
            collection.__iter__()
        ))
        return context

Then in template I can use:

<django-formset endpoint="{{ request.path }}" csrf-token="{{ csrf_token }}">
  {{ form_collection_dict.form1}}
  ....
  {{ form_collection_dict.form2}}
  <button type="button" click="submit -> proceed !~ scrollToError">Submit</button>
</django-formset>

[jrief]

I don't quite understand what you mean.
Could you please make a sketch of both forms and how they should be aligned.

[gumish]

Maybe I only haven't caught how correctly split the collection in template to single holders to control where I the forms should be rendered. So I helped myself with that 'dictionary solution' (see above).

I would like to render collection for example like this (example with Company and Teams from other threads):

[gumish]

For example I tried to use '{{ form_collection.declared_holders.company }}' in template but nothing was shown.
But '{{ form_collection.declared_holders }}' prints dictonary to template.

[jrief]

You shouldn't split the holders when rendering the template.
Try instead to style the <django-form-collection> used for the company and that used for teams using different CSS classes. The form renderer accepts the argument collection_css_classes. So use two different renderers with different styles each.

[gumish]

Hmm 🤔, I would like to use django-formset for pages full of forms/formsets.
But these holders are in the different parts of the page. For example among holders in need some other elements (alerts ..). Holders can be in various rows/columns and so on. I thought the whole page would be encapsulated in one <django-formset> element.

But for this I need more control over the placing of holders. I guess that only CSS styling/positioning of <django-form-collection>s wouldn't be sufficient enough. Btw it seems to me that collection_css_classes doesn't propagate to the final template well :-/

[jrief]

I will try to create an example as the sketch you posted on March 18th. However, I would move the submit button from the "teams" column into the outer row. Hope that's not a problem.

In the meantime, please test the changes I made for #34 in branch https://github.com/jrief/django-formset/tree/version_1

[jrief]

By applying the formset.renderers.bootstrap.FormRenderer on

class CompanyCollection(FormCollection):
    default_renderer = FormRenderer(collection_css_classes='col card p-3')
    company = CompanyForm()
    teams = TeamCollection()

I was able to render the company example as:

For your use-case, it presumably is easier to apply special styles on the used HTML elements.

An alternative is to override the FormRenderer and replace the default templates.

[gumish]

Yes, it is quite simple use but what if I want to use EditCollectionView in more complex page designs (with headers, alerts, columns, icons and so on)?
I don't know how to do it correctly. By plain css classes I am not able to.

  <django-formset endpoint="{{ request.path }}" csrf-token="{{ csrf_token }}">

    <div class="row">

      <!-- first col -->
      <div class="col-lg-4 mb-3">
        <div class="card">
          <div class="card-header text-bg-dark">
            <i class="bi bi-arrow-repeat"></i>Company Form
          </div>
          <div class="card-body">
            {{ form_collection_dict.company_form }}
            <div class="alert alert-info mb-0" role="alert">
                some info ...
            </div>
          </div>
        </div><!-- card.end -->
      </div><!-- col.end -->

      <!-- second col -->
      <div class="col-lg-8">

        <div class="card mb-3">
          <div class="card-header text-bg-dark">
            <i class="bi bi-signpost-2"></i>
            Company Teams
          </div>
          <div class="card-body">
            {{ form_collection_dict.teams_subcollection }}
            <div class="alert alert-info mb-0" role="alert">
                some info ...
            </div>
          </div>
        </div><!-- card.end -->

        <div class="card mb-3">
          <div class="card-header text-bg-dark">
            <i class="bi bi-signpost-2"></i>
            Some Other Form/Subcollection
          </div>
          <div class="card-body">
            {{ form_collection_dict.other_subcollection }}
          </div>
        </div><!-- card.end -->

        <button type="button" click="submit -> proceed !~ scrollToError" class="btn btn-primary">Odeslat</button>
      </div><!-- col.end -->

    </div><!-- row.end -->
  </django-formset>