bootstrap-collection problem

[paolo79837]

Good morning to all, I'm using symfony2.3, propel, admingeneratorbundle. I used bootstrap-collection (afe_collection_table) and I would like to understand how I can customize the view of the fields (or use the original template subform). I tried to follow this post:

http://mrzard.github.io/blog/2013/10/30/customize-form-prototype-for-collections-in-symfony2/

when I specify the fields of interest in prototype.twig, the same fields are no longer displayed on the page. why??

Thanks for any suggestions

[ioleo]

@paolo79837 bootstrap_collection field view blocks are defined in Resources/views/Form/form_widgets.html.twig, you have to customize (overwrite) afe_collection_table_widget and/or afe_collection_table_item blocks

[paolo79837]

@loostro thank you very much for your suggestion. Could you give me a practical example of how I can overwrite each field?

[ioleo]

@paolo79837 use twig embed tag to overwrite (locally) some blocks, eg:

{# this is in your custom page template #}
{% embed "AvocodeFormExtensionsBundle:Form:form_widgets.html.twig" %}
    {# Embed is like an "include" tag, except you can overwrite some stuff from the included template #}
    {% block afe_collection_table_item %}
        {{ parent() }}  {# use parent to include the original block #}
        <p>My customization appended!</p> {# add your custom stuff #}
    {% endblock afe_collection_table_item %}

    {% block afe_collection_table_widget %}
        {# you may want to change the entire block - don't use parent then #}
         <table>
             <tbody>
                 <tr><td>I've hacked <i>collection_table</i> to not display anything! Mwaha!</td></tr>
             </tbody>
         </table>
    {% endblock afe_collection_table_widget %}
{% endembed %}

I hope this helps :)

[paolo79837]

@loostro Thank you. if I use embed tag​​, I get this error: Variable 'attr' does not exist in AvocodeFormExtensionsBundle: Form: form_widgets.html.twig at line 7

where line 7 is: {% set attr = attr|merge({'class': 'control-group' }) %}

[ioleo]

@paolo79837 it seems something is wrong with the scope of your block, you're not getting variables passed into it, I'm sorry but I'm on a deadline now and have no time to analyze your problem now.. you'll have to take it on your own from here :(

[paolo79837]

@loostro thanks anyway. I will try to find a solution! I added the ability to clone the collection: I'm attaching the code, hoping it can help someone!

Resources/views/Form/BootstrapCollection/collection_delete.html.twig

{# clone #} class="btn btn-primary duplica" title="Clone"> class="icon-repeat icon-white"> {# end clone #}

/bundles/avocodeformextensions/bootstrap-collection/js/bootstrap-collection.js

    // clone //
            $('.'+ this.element.id + '_actions .duplica').click(function(e){

        e.preventDefault(); 
        var addingEvent = $.Event('adding');
                that.$element.trigger(addingEvent);
                    that._onDuplicate(this);
                    that.$element.trigger('added');
            });  
    // end clone //

    // clone //
     _onDuplicate: function(elem) {

    var new_item = $('#'+ this.element.id).data('prototype');
        var new_id = this.nextId;

        new_item = new_item.replace(new RegExp('label__', 'g'), this.options.trans.new_label);
        new_item = new_item.replace(new RegExp(this.options.prototype_name, 'g'), new_id);
        $new_item = $(new_item);
        if (this.options.allow_delete) {
            var that = this;
            $new_item.find('.delete').click(function(){
                var deletingEvent = $.Event('deleting');
                var $targetedElement = $(this).closest('.collection-item');
                that.$element.trigger(deletingEvent, [ $targetedElement ]);
                if (!deletingEvent.isDefaultPrevented()) {
                    that._onDelete(this);
                    that.$element.trigger('deleted', [ $targetedElement ]);
                }
            });
        }

        this.nextId++;

        $('#'+ this.element.id +' > .collection').append($new_item);

        this.options.javascript.call(window, this.element.id + '_' + new_id);

        if (this.options.sortable) {
            this._onChange();
        }

        // Copia valori dei vecchi campi

        // Ottiene l'elenco di tutti gli elementi input che stanno sotto un div di classe 'controls' a partire 
        // dal più vicino elemento di classe 'collection-item' (cioè la riga della tabella)
        $(elem).closest('.collection-item').find('.controls input').each(function(){
          // Estrae l'id del campo da copiare
            var oldid = $(this).attr('id');

            // Sostituisce l'indice numerico con il nuovo valore
            if (oldid) {

                var newid = oldid.replace(new RegExp('[0-9]+(?!.*[0-9])+', 'g'), new_id);
                // Copia il valore
                $('#' + newid).val($('#' + oldid).val());
            }
        });

        $(elem).closest('.collection-item').find('.controls select').each(function(){

            // Estrae l'id del campo da copiare
            var oldid = $(this).attr('id');
            // Sostituisce l'indice numerico con il nuovo valore
            if (oldid) {
                var newid = oldid.replace(new RegExp('[0-9]+(?!.*[0-9])+', 'g'), new_id);
                // Copia il valore
                $('#' + newid).val($('#' + oldid).val());
            }
        });

        $(elem).closest('.collection-item').find('.controls textarea').each(function(){

            // Estrae l'id del campo da copiare
            var oldid = $(this).attr('id');
            // Sostituisce l'indice numerico con il nuovo valore
            if (oldid) {
                var newid = oldid.replace(new RegExp('[0-9]+(?!.*[0-9])+', 'g'), new_id);
                // Copia il valore
                $('#' + newid).val($('#' + oldid).val());
            }
        });

        $(elem).closest('.collection-item').find('.contols input[type="checkbox"]').each(function(){

            // Estrae l'id del campo da copiare
            var oldid = $(this).attr('id');

            // Sostituisce l'indice numerico con il nuovo valore
            if (oldid) {
                var newid = oldid.replace(new RegExp('[0-9]+(?!.*[0-9])+', 'g'), new_id);
                // Copia il valore
                $('#' + newid).val($('#' + oldid).val());
            }
        });
    },
    // end clone //