Hi ,

Which feature are you referring to ? Can you please provide more details ?

Thanks.

Hi

We have sent your request to your email lovechaudharywork@gmail.com

Thanks

hi PxelDots,

I just use plain html template into fresh angular app. but fonts/javascript/clicks/animation/responsive all are not working. Only template is display without working condition.

Regards.

Hi EDMS_123,

The rest you have to manually integrate from default version including javascript plugin integration like a normal way people do when integrating template into their base codes.

declare var KTMenu: any;
declare var KTOffcanvas: any;
declare var KTScrolltop: any;
declare var KTHeader: any;
declare var KTToggle: any;
declare var KTUtil: any;
declare var KTPortlet: any;

All these plugins already included in the file /src/assets/js/demo1/scripts.bundle.js

You can check our sample directive to initialize the Metronic plugin in Angular way using directive; /src/app/core/_base/layout/directives.

For example KTMenu plugin is required for left side menu; https://keenthemes.com/metronic/?page=docs&section=menu

and for KTHeader plugin https://keenthemes.com/metronic/?page=docs&section=header

Thanks

hi pixeldots,

Thanks for reply. I did exactly same as you ask me to do. But after did all that now i got only blank page nothing in it. Can you please elaborate the steps, or share any link or video where did you use these possibilities.

Regards

Hi ,

Thanks.

But how can i put it outside the container under your toolbar next to the blue button

You can not move it outside the container(this is not possible). You can have a custom buttons/links to trigger import function upon click. The above example already shows it. Please refer to the source code of the example.

aha exactly, how i am supposed to used metronics action buttons if the buttons are auto generated by datatables,

<div class="kt-portlet__head-toolbar">
                <div class="kt-portlet__head-wrapper">
                    <div class="kt-portlet__head-actions">
                        <div class="dropdown dropdown-inline">
                            <button type="button" class="btn btn-default btn-icon-sm dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                <i class="la la-download" /> Export
                            </button>
                            <div class="dropdown-menu dropdown-menu-right">
                                <ul class="kt-nav">
                                    <li class="kt-nav__section kt-nav__section--first">
                                        <span class="kt-nav__section-text">Choose an option</span>
                                    </li>
                                    <li class="kt-nav__item">
                                        <a href="#" class="kt-nav__link">
                                            <i class="kt-nav__link-icon la la-print" />
                                            <span class="kt-nav__link-text">Print</span>
                                        </a>
                                    </li>
                                    <li class="kt-nav__item">
                                        <a href="#" class="kt-nav__link">
                                            <i class="kt-nav__link-icon la la-copy" />
                                            <span class="kt-nav__link-text">Copy</span>
                                        </a>
                                    </li>
                                    <li class="kt-nav__item">
                                        <a href="#" class="kt-nav__link">
                                            <i class="kt-nav__link-icon la la-file-excel-o" />
                                            <span class="kt-nav__link-text">Excel</span>
                                        </a>
                                    </li>
                                    <li class="kt-nav__item">
                                        <a href="#" class="kt-nav__link">
                                            <i class="kt-nav__link-icon la la-file-text-o" />
                                            <span class="kt-nav__link-text">CSV</span>
                                        </a>
                                    </li>
                                    <li class="kt-nav__item">
                                        <a href="#" class="kt-nav__link">
                                            <i class="kt-nav__link-icon la la-file-pdf-o" />
                                            <span class="kt-nav__link-text">PDF</span>
                                        </a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                         
                        <a href="{{ route('admin.auth.user.create') }}" class="btn btn-brand btn-elevate btn-icon-sm" data-toggle="tooltip" title="{{ __('NEW USER') }}">
                            <i class="la la-plus" />
                            {{ __('NEW USER') }}
                        </a>
                    </div>
                </div>
            </div>

and this is my JS:

<script>
        $(document).ready(function() {
            $('#tabla-usuarios').DataTable({
                dom: "B<'row mt-4'<'col-sm-6'l><'col-sm-6'f>>" + "<'row'<'col-sm-12'tr>>" + "<'row'<'col-sm-5'i><'col-sm-7'p>>",
                processing: true,
                serverSide: true,
                autoWidth: false,
                ajax: {
                    url: '{{ route("admin.auth.user.get") }}',
                    type: 'get',
                    data: {status: 1, trashed: false},
                    error: function (xhr, err) {
                        if (err === 'parsererror')
                            location.reload();
                    }
                },
                columns: [
                    {data: 'first_name', name: 'first_name'},
                    {data: 'last_name', name: 'last_name'},
                    {data: 'username', name: 'username'},
                    {data: 'email', name: 'email'},
                    {data: 'confirmed', name: 'confirmed', className: 'text-center'},
                    {data: 'social', name: 'social'},
                    {data: 'updated_at', name: 'updated_at'},
                    {data: 'actions', name: 'actions', searchable: false, sortable: false}
                ],
                select: true,
                buttons: {
                    buttons: [
                        {
                            extend: 'collection',
                            text: 'Exportar',
                            buttons: [
                                { extend: 'copy',
                                    text: '<u>C</u>opiar',
                                    key: {
                                        key: 'c',
                                        altKey: true
                                    }
                                },
                                { extend: 'print',
                                    text: 'Imprimir'
                                },
                                'excel',
                                'csv',
                                'pdf'
                            ]
                        },

                    ]
                },
                initComplete: function () {
                    this.api().columns([0]).every(function () {
                        let column = this;
                        let header = $('#tabla-usuarios').DataTable().column( this.index() ).header() ;
                        let input = document.createElement("input");
                        $(input).attr('class', 'form-control');
                        $(input).attr('placeholder', $(header).html() );

                        $(input).appendTo($(column.footer()).empty())
                            .on('keyup', function () {
                                let val = $.fn.dataTable.util.escapeRegex($(this).val());

                                column.search( val ? '^'+val+'$' : '', true, false ).draw();
                            });
                    });

                    this.api().columns([0, 1, 2, 3, 4]).every(function () {
                        let column = this;
                        let header = $('#tabla-usuarios').DataTable().column( this.index() ).header() ;
                        let input = document.createElement("input");
                        $(input).attr('class', 'form-control');
                        $(input).attr('placeholder', $(header).html() );

                        $(input).appendTo($(column.footer()).empty())
                            .on('keyup', function () {
                                let val = $.fn.dataTable.util.escapeRegex($(this).val());

                                column.search(val ? val : '', true, false).draw();
                            });

                    });

                },
                lengthMenu: [[5, 10, 25, 50, -1], [5, 10, 25, 50, '{{ __('Todos') }}']],
                columnDefs: [ {
                    targets: [7],
                    orderable: false,
                    searchable: false
                } ],
                aaSorting: [[ 0, 'asc' ]],
                language: {
                    buttons: {
                        copyTitle: 'Añadido al portapapeles',
                        copyKeys: 'Presione <i> ctrl </i> o <i>\u2318 </i> + <i> C </i> para copiar los datos de la tabla al portapapeles. <br /> <br /> Para cancelar, haga clic en este mensaje o presione Esc.',
                        copySuccess: {
                            _: '%d filas copiadas',
                            1: '1 fila copiada'
                        }
                    },
                    sSearchPlaceholder: '{{ __('Buscar...') }}',
                    search: '',
                    lengthMenu: '{{ __('Mostrar') }}   _MENU_   {{ __('Registros') }}',
                    zeroRecords: '{{ __('No se encontraron resultados') }}',
                    info: '{{ __('Mostrando página') }} _PAGE_ {{ __('de') }} _PAGES_',
                    infoEmpty: '{{ __('No hay registros disponibles') }}',
                    infoFiltered: '({{ __('filtrado de') }} _MAX_ {{ __('registros en total') }})',
                    sInfo: '{{ __('Mostrando del') }} _START_ {{ __('al') }} _END_ {{ __('de') }} _TOTAL_ {{ __('registros por página') }}',
                    paginate: {
                        previous: '{{ __('Anterior') }}',
                        next: '{{ __('Siguiente') }}'
                    },
                    processing: '{{ __('Procesando...') }}',
                }

            });

        });
    </script>

how i am supposed to tell datatables that the export buttons needs to be inside your portlet head toolbar ? you are telling me this is not possible then why does the design have it in there ? im not setting up manual buttons they are auto generated by datatables buttons

Hi,

Thanks for your feedback. Our layouts are best optimization for modern displays and device sizes. You can try to adjust it for your screen by changing “col-xl-4” to “col-md-4”. However we will check and try to fix it for 1366px size as well in the next update.

Thanks.

1366 is the default and the most laptop screen resolution.

you should consider this.

can you make a hot fix for the this in a rush soon update… ??

thank you keenthemes.

Hi,

Noted. We will provide a fix in the next update v6.0.4 latest by the next week.

Thanks.

The folder assets/vendors/global is missing

Hi

Starting version 6.0.2, by default assets folder does not exist and it will be generated only after running gulp task.

Thanks

But what happens with classic version which doesn’t use gulp?

Hi,

The classic version includes precompiled assets.

Regards

If you download the 6.0.3 version and look at classic version, the assets/vendors/global is missing which has some assets needed