title: How to create the same form in Group and Permission on Django Templates
body: <p>How can i custom my django templates like admin group page,
  I tried to fetch all fields but its only fetch the avaible permissions and not fetching out chosen permission field
  Please help me, Thanks</p>
  
  <p>The fields i want:
  <a href="https://i.stack.imgur.com/mteX0.png" rel="nofollow noreferrer">enter image description here</a></p>
  
  <p>And then the results i get:
  <a href="https://i.stack.imgur.com/Bn4lg.png" rel="nofollow noreferrer">enter image description here</a></p>
  
  <p>Some code in Forms:</p>
  
  <pre><code>class UserGroupForm(forms.ModelForm):
      class Meta:
          model = Group
          fields = '__all__'
  </code></pre>
  
  <p>Some code in Views:</p>
  
  <pre><code>def save_all(request, form, template_name):
      data = dict()
      error = None
      if request.method == 'POST':
          if form.is_valid():
              form.save()
              data['form_is_valid'] = True
              data['action'] = True
          else:
              data['form_is_valid'] = False
              error = form.errors
  
      context = {
          'form': form,
          'error': error,
      }
      data['html_form'] = render_to_string(template_name, context, request=request)
      return JsonResponse(data)
  
  def create(request):
      if request.method == 'POST':
          form = UserGroupForm(request.POST)
      else:
          form = UserGroupForm()
          form2 = UserPermissionForm()
      return save_all(request, form, 'usergroups/create.html')
  </code></pre>
  
  <p>Some code in Templates:</p>
  
  <pre><code>&lt;form action="" method="post" data-url="{% url 'userroles:create' %}" class="create-form"&gt;
      {% csrf_token %}
      &lt;div class="modal-header"&gt;
          &lt;h5 class="modal-title"&gt;Create Test&lt;/h5&gt;
          &lt;button type="button" class="close" data-dismiss="modal" aria-label="Close"&gt;
            &lt;span aria-hidden="true"&gt;&amp;times;&lt;/span&gt;
          &lt;/button&gt;
      &lt;/div&gt;
      &lt;div class="modal-body"&gt;
          {% if error %}
          &lt;div class="alert alert-danger text-center" role="alert"&gt;
              {% for field, error in error.items %}
                  {{ error | striptags }}
                  &lt;br&gt;
              {% endfor %}
          &lt;/div&gt;
          {% endif %}
          &lt;div class="form-group"&gt;
              {{form}}
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="modal-footer"&gt;
          &lt;button type="button" class="btn btn-secondary" data-dismiss="modal"&gt;Close&lt;/button&gt;
          &lt;button type="submit" class="btn btn-primary"&gt;Save changes&lt;/button&gt;
      &lt;/div&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>Some code in Ajax:</p>
  
  <pre><code>$(document).ready(function(){
  
      var ShowForm = function(){
          var btn = $(this);
          $.ajax({
              url: btn.attr('data-url'),
              type: 'get',
              dataType: 'json',
              beforeSend: function(){
                  $('#modal-test').modal('show')
                  django.jQuery('select.selectfilter, select.selectfilterstacked').each(function () {
                      var $el = $(this),
                          data = $el.data();
                      SelectFilter.init($el.attr('id'), data.fieldName, parseInt(data.isStacked, 10));
                  });
              },
              success: function(data){
                  django.jQuery('select.selectfilter, select.selectfilterstacked').each(function () {
                      var $el = $(this),
                          data = $el.data();
                      SelectFilter.init($el.attr('id'), data.fieldName, parseInt(data.isStacked, 10));
                  });
                  $('#modal-test .modal-content').html(data.html_form);
              }
          })
      };
  
      var SaveForm = function(){
          var form = $(this);
          $.ajax({
              url: form.attr('data-url'),
              data: form.serialize(),
              type: form.attr('method'),
              dataType: 'json',
              success: function(data){
                  if(data.form_is_valid){
                      if(data.deleteData){
                          Swal.fire({
                              type: 'warning',
                              title: 'Your Data is Deleted',
                              showConfirmButton: false,
                              timer: 1500
                          }).then(function(){
                              window.location.href = ''
                          })
                      } else if(data.action) {
                          Swal.fire({
                              type: 'success',
                              title: 'Your action is success',
                              showConfirmButton: false,
                              timer: 1500
                          }).then(function(){
                              window.location.href = ''
                          })
                      }
  
                      $('#modal-test').modal('hide');
                      console.log('Yes')
                  } else {
                      $('#modal-test .modal-content').html(data.html_form)
                      console.log('Not')
                  }
              }
          })
          return false;
      }
  
      //create
      $('.show-form').click(ShowForm);
      $('#modal-test').on('submit', '.create-form', SaveForm);
  
      //update
      $(document).on('click', '.show-form-update', ShowForm);
      $('#modal-test').on('submit', '.update-form', SaveForm);
  
      //delete
      $(document).on('click', '.show-form-delete', ShowForm);
      $('#modal-test').on('submit', '.delete-form', SaveForm);
  
  });
  </code></pre>