Base solution for your next web application
Open Closed

PrimengDatatableHelper.getsorting #5091


User avatar
0
abdourahmani created

Hi all,

I've got this error when I put a radtool generated datatable into a modal view.

[attachment=0:js0qs05f]PrimengDataableHelper.getSorting.png[/attachment:js0qs05f]

It only hapens in modal views.

Can somebody help ?

Best regards,

Abdourahmani

Markdown is supported
Copy & paste or drag & drop images (max 30 MB per image)

6 Answer(s)
  • User Avatar
    0
    alirizaadiyahsi created

    Is there another datatable in page(not in modal)? If yes, be sure they have different ids and different primengTableHelper. There is an example in audit logs page. You can check it.

    Markdown is supported
    Copy & paste or drag & drop images (max 30 MB per image)
  • User Avatar
    0
    abdourahmani created

    Hi @alirizaadiyahsi

    let me better explain my situation, using the audit logs page you mentioned.

    As a response to clicking the magnifier button, I open a modal page containing a datatable. It's then that this error appears.

    Best regards,

    Abdourahmani

    Markdown is supported
    Copy & paste or drag & drop images (max 30 MB per image)
  • User Avatar
    0
    ismcagdas created
    Support Team

    @abdourahmani,

    Could you share your javascript code for the modal ?

    Markdown is supported
    Copy & paste or drag & drop images (max 30 MB per image)
  • User Avatar
    0
    abdourahmani created

    Hi @ismcagdas Please find the javascript code for the modal below.

    Regards, Abdourahmani

    import { Component, ViewChild, Injector, Output, EventEmitter } from '@angular/core';
    import { ModalDirective } from 'ngx-bootstrap';
    import {
        PaliersServiceProxy,
        CreateOrEditPalierDto,
        PalierDetailsServiceProxy,
        PalierDetailDto
    } from '@shared/service-proxies/service-proxies';
    import { AppComponentBase } from '@shared/common/app-component-base';
    import { TypePalierLookupTableModalComponent } from './typePalier-lookup-table-modal.component';
    import { CreateOrEditPalierDetailModalComponent } from '@app/main/remuneration/paliers/create-or-edit-palierDetail-modal.component';
    import { DataTable } from 'primeng/components/datatable/datatable';
    import { Paginator } from 'primeng/components/paginator/paginator';
    import { LazyLoadEvent } from 'primeng/components/common/lazyloadevent';
    import { FileDownloadService } from '@shared/utils/file-download.service';
    
    @Component({
        selector: 'createOrEditPalierModal',
        templateUrl: './create-or-edit-palier-modal.component.html'
    })
    export class CreateOrEditPalierModalComponent extends AppComponentBase {
        @ViewChild('createOrEditModal') modal: ModalDirective;
        @ViewChild('typePalierLookupTableModal') typePalierLookupTableModal: TypePalierLookupTableModalComponent;
    
        @ViewChild('createOrEditPalierDetailModal') createOrEditPalierDetailModal: CreateOrEditPalierDetailModalComponent;
        @ViewChild('dataTable') dataTable: DataTable;
        @ViewChild('paginator') paginator: Paginator;
    
        @Output() modalSave: EventEmitter<any> = new EventEmitter<any>();
    
        active = false;
        saving = false;
        advancedFiltersAreShown = false;
        filterText = '';
        maxTauxFilter: number;
        maxTauxFilterEmpty: number;
        minTauxFilter: number;
        minTauxFilterEmpty: number;
    
        palier: CreateOrEditPalierDto = new CreateOrEditPalierDto();
        typePalierDescript = '';
    
        constructor(
            injector: Injector,
            private _paliersServiceProxy: PaliersServiceProxy,
            private _palierDetailsServiceProxy: PalierDetailsServiceProxy,
            private _fileDownloadService: FileDownloadService
        ) {
            super(injector);
        }
    
        show(palierId?: number): void {
            if (!palierId) {
                this.palier = new CreateOrEditPalierDto();
                this.palier.id = palierId;
                this.palier.orderBy = '001';
                this.typePalierDescript = '';
    
                this.active = true;
                this.modal.show();
            } else {
                this._paliersServiceProxy.getPalierForEdit(palierId).subscribe(result => {
                    this.palier = result.palier;
                    this.typePalierDescript = result.typePalierDescript;
    
                    this.active = true;
                    this.modal.show();
                });
            }
        }
    
        savePalier(): void {
            this.saving = true;
            this._paliersServiceProxy
                .createOrEdit(this.palier)
                .finally(() => {
                    this.saving = false;
                })
                .subscribe(() => {
                    this.notify.info(this.l('SavedSuccessfully'));
                    this.close();
                    this.modalSave.emit(null);
                });
        }
    
        openSelectTypePalierModal() {
            this.typePalierLookupTableModal.id = this.palier.typePalierId;
            this.typePalierLookupTableModal.displayName = this.typePalierDescript;
            this.typePalierLookupTableModal.show();
        }
    
        setTypePalierIdNull() {
            this.palier.typePalierId = null;
            this.typePalierDescript = '';
        }
    
        getNewTypePalierId() {
            this.palier.typePalierId = this.typePalierLookupTableModal.id;
            this.typePalierDescript = this.typePalierLookupTableModal.displayName;
        }
    
        close(): void {
            this.active = false;
            this.modal.hide();
        }
    
        getPalierDetails(event?: LazyLoadEvent) {
            this.createOrEditPalierDetailModal.palier = this.palier;
            if (this.primengDatatableHelper.shouldResetPaging(event)) {
                this.paginator.changePage(0);
                return;
            }
    
            this.primengDatatableHelper.showLoadingIndicator();
            this._palierDetailsServiceProxy
                .getAll(
                    this.filterText,
                    this.palier.code, // filtre les elements du palier séléctionné
                    this.maxTauxFilter == null ? this.maxTauxFilterEmpty : this.maxTauxFilter,
                    this.minTauxFilter == null ? this.minTauxFilterEmpty : this.minTauxFilter,
                    this.primengDatatableHelper.getSorting(this.dataTable),
                    this.primengDatatableHelper.getSkipCount(this.paginator, event),
                    this.primengDatatableHelper.getMaxResultCount(this.paginator, event)
                )
                .subscribe(result => {
                    this.primengDatatableHelper.totalRecordsCount = result.totalCount;
                    this.primengDatatableHelper.records = result.items;
                    this.primengDatatableHelper.hideLoadingIndicator();
                });
        }
    
        reloadPage(): void {
            this.paginator.changePage(this.paginator.getPage());
        }
    
        createPalierDetail(): void {
            this.createOrEditPalierDetailModal.show();
        }
    
        deletePalierDetail(palierDetail: PalierDetailDto): void {
            this.message.confirm('', isConfirmed => {
                if (isConfirmed) {
                    this._palierDetailsServiceProxy.delete(palierDetail.id).subscribe(() => {
                        this.reloadPage();
                        this.notify.success(this.l('SuccessfullyDeleted'));
                    });
                }
            });
        }
    
        exportToExcel(): void {
            this._palierDetailsServiceProxy
                .getPalierDetailsToExcel(
                    this.filterText,
                    this.palier.code, // filtre les elements du palier séléctionné
                    this.maxTauxFilter == null ? this.maxTauxFilterEmpty : this.maxTauxFilter,
                    this.minTauxFilter == null ? this.minTauxFilterEmpty : this.minTauxFilter
                )
                .subscribe(result => {
                    this._fileDownloadService.downloadTempFile(result);
                });
        }
    }
    
    Markdown is supported
    Copy & paste or drag & drop images (max 30 MB per image)
  • User Avatar
    0
    abdourahmani created

    @alirizaadiyahsi

    I finally got what you meant, applied it but it didn't help.

    Markdown is supported
    Copy & paste or drag & drop images (max 30 MB per image)
  • User Avatar
    0
    ismcagdas created
    Support Team

    Hi,

    You also need to create a new PrimengDatatableHelper, primengDatatableHelper2 for example and use it for your datatable in the modal. Could you try like that ?

    Markdown is supported
    Copy & paste or drag & drop images (max 30 MB per image)