backpack hierachical select for nested items : example for newscrud

ArticleCrudController.php

     $this->crud->addField([    // SELECT
                                'label' => 'Category',
                                'type' => 'select2_grouped',//https://github.com/Laravel-Backpack/CRUD/issues/502
                                'name' => 'category_id',
                                'entity' => 'category',
                                'attribute' => 'name',
                                'model' => "Backpack\NewsCRUD\app\Models\Category",
            'group_label_attribute' => 'name',
            'group_entity' => 'Children'
        ]);

select2_grouped.blade.php

<!-- select2 forked from https://github.com/Laravel-Backpack/CRUD/issues/502-->
@php
    $current_value = old($field['name']) ? old($field['name']) : (isset($field['value']) ? $field['value'] : (isset($field['default']) ? $field['default'] : '' ));
function displaysub($entity, $field,$current_value)
                    {

                     foreach ($entity->children()->get() as $child_connected_entity_entry)
                       {
                       if($current_value == $child_connected_entity_entry->getKey()) $selected = " selected "; else $selected="";
                           ?>< <option value="<?= $child_connected_entity_entry->getKey() ?>" <?=$selected ?>>
                           <?= str_repeat (" - " , $child_connected_entity_entry->depth);?>
                           <?= $child_connected_entity_entry->{$field['attribute']}?></option><?php
                            displaysub($child_connected_entity_entry,$field,$current_value);
                        }

                    }
@endphp

<div @include('crud::inc.field_wrapper_attributes') >
    <label>{!! $field['label'] !!}</label>
    @include('crud::inc.field_translatable_icon')
    <?php $entity_model = $crud->getRelationModel($field['entity'],  - 1); ?>

    <?php //print_r($field);exit()?>
    <select
            name="{{ $field['name'] }}"
            style="width: 100%"
            @include('crud::inc.field_attributes', ['default_class' =>  'form-control select2_field'])
    >

        @if ($entity_model::isColumnNullable($field['name']))
            <option value="">-</option>
        @endif

        @if (isset($field['model']))
            <?php $obj = new $field['model'];?>
            @foreach ($obj->firstLevelItems()->get() as $connected_entity_entry)
                <?php if($current_value == $connected_entity_entry->getKey()) $selected = " selected "; else $selected="";?>
                    <option value="{{ $connected_entity_entry->getKey() }}" {{$selected}}>{{ $connected_entity_entry->{$field['attribute']} }}</option>

                <?php

              displaysub($connected_entity_entry,$field,$current_value);
                ?>


            @endforeach
        @endif
    </select>

    {{-- HINT --}}
    @if (isset($field['hint']))
        <p class="help-block">{!! $field['hint'] !!}</p>
    @endif
</div>

{{-- ########################################## --}}
{{-- Extra CSS and JS for this particular field --}}
{{-- If a field type is shown multiple times on a form, the CSS and JS will only be loaded once --}}
@if ($crud->checkIfFieldIsFirstOfItsType($field, $fields))

    {{-- FIELD CSS - will be loaded in the after_styles section --}}
    @push('crud_fields_styles')
        <!-- include select2 css-->
        <link href="{{ asset('vendor/adminlte/bower_components/select2/dist/css/select2.min.css') }}" rel="stylesheet" type="text/css" />
        <link href="https://cdnjs.cloudflare.com/ajax/libs/select2-bootstrap-theme/0.1.0-beta.10/select2-bootstrap.min.css" rel="stylesheet" type="text/css" />
    @endpush

    {{-- FIELD JS - will be loaded in the after_scripts section --}}
    @push('crud_fields_scripts')
        <!-- include select2 js-->
        <script src="{{ asset('vendor/adminlte/bower_components/select2/dist/js/select2.min.js') }}"></script>
        <script>
            jQuery(document).ready(function($) {
                // trigger select2 for each untriggered select2 box
                $('.select2_field').each(function (i, obj) {
                    if (!$(obj).hasClass("select2-hidden-accessible"))
                    {
                        $(obj).select2({
                            theme: "bootstrap"
                        });
                    }
                });
            });
        </script>
    @endpush

@endif
{{-- End of Extra CSS and JS --}}
{{-- ########################################## --}}