Hi,
Just want to start this off with: well done with the new Rad Tool features, they are extremely helpful and will make life so much easier with the generation from existing tables especially. Thanks!
I am not sure if this has been mention before by someone.
When an entity is generated it is correct. however, when you load the entity again and regenerate it, it seems to mess up the bindings on the grids.
[attachment=0:53psbal7]ServiceCallTaskFieldsSwappedAroundAfterRegeneration.PNG[/attachment:53psbal7]
Example of fields in the grid that is mixed up.
Task is correct
Details -> Text under completed(Supposed to be a bool)
Hours Required -> Numbers under subject
Completed -> Under 2nd subject.
I am using Core + Angular 5.4.1
Thanks,
Gideon Badenhorst
9 Answer(s)
-
0
When you regenerate an entity, are the fields correctly loaded to extension interface?
Also, can you share the component.html file here?
-
0
I had this problem too. It's happen when we make changes to our properties (remove/add).
-
0
Yes, the entity loads correctly.
The bindings in the html side looks fine and i can't really see anything wrong on the componen.ts either.
Here is the component.ts:
import { Component, Injector, ViewEncapsulation, ViewChild } from '@angular/core'; import { ActivatedRoute } from '@angular/router'; import { Http } from '@angular/http'; import { ServiceCallTasksServiceProxy, ServiceCallTaskDto } from '@shared/service-proxies/service-proxies'; import { NotifyService } from '@abp/notify/notify.service'; import { AppComponentBase } from '@shared/common/app-component-base'; import { TokenAuthServiceProxy } from '@shared/service-proxies/service-proxies'; import { CreateOrEditServiceCallTaskModalComponent } from './create-or-edit-serviceCallTask-modal.component'; import { ViewServiceCallTaskModalComponent } from './view-serviceCallTask-modal.component'; import { appModuleAnimation } from '@shared/animations/routerTransition'; import { Table } from 'primeng/components/table/table'; import { Paginator } from 'primeng/components/paginator/paginator'; import { LazyLoadEvent } from 'primeng/components/common/lazyloadevent'; import { FileDownloadService } from '@shared/utils/file-download.service'; import * as moment from 'moment';
@Component({ templateUrl: './serviceCallTasks.component.html', encapsulation: ViewEncapsulation.None, animations: [appModuleAnimation()] }) export class ServiceCallTasksComponent extends AppComponentBase {
@ViewChild('createOrEditServiceCallTaskModal') createOrEditServiceCallTaskModal: CreateOrEditServiceCallTaskModalComponent; @ViewChild('viewServiceCallTaskModalComponent') viewServiceCallTaskModal: ViewServiceCallTaskModalComponent; @ViewChild('dataTable') dataTable: Table; @ViewChild('paginator') paginator: Paginator; advancedFiltersAreShown = false; filterText = ''; taskFilter = ''; detailsFilter = ''; maxHoursRequiredFilter : number; maxHoursRequiredFilterEmpty : number; minHoursRequiredFilter : number; minHoursRequiredFilterEmpty : number; completedFilter = -1; serviceCallSubjectFilter = ''; serviceCallScheduleSubjectFilter = ''; constructor( injector: Injector, private _http: Http, private _serviceCallTasksServiceProxy: ServiceCallTasksServiceProxy, private _notifyService: NotifyService, private _tokenAuth: TokenAuthServiceProxy, private _activatedRoute: ActivatedRoute, private _fileDownloadService: FileDownloadService ) { super(injector); } getServiceCallTasks(event?: LazyLoadEvent) { if (this.primengTableHelper.shouldResetPaging(event)) { this.paginator.changePage(0); return; } this.primengTableHelper.showLoadingIndicator(); this._serviceCallTasksServiceProxy.getAll( this.filterText, this.taskFilter, this.detailsFilter, this.maxHoursRequiredFilter == null ? this.maxHoursRequiredFilterEmpty: this.maxHoursRequiredFilter, this.minHoursRequiredFilter == null ? this.minHoursRequiredFilterEmpty: this.minHoursRequiredFilter, this.completedFilter, this.serviceCallSubjectFilter, this.serviceCallScheduleSubjectFilter, this.primengTableHelper.getSorting(this.dataTable), this.primengTableHelper.getSkipCount(this.paginator, event), this.primengTableHelper.getMaxResultCount(this.paginator, event) ).subscribe(result => { this.primengTableHelper.totalRecordsCount = result.totalCount; this.primengTableHelper.records = result.items; this.primengTableHelper.hideLoadingIndicator(); }); } reloadPage(): void { this.paginator.changePage(this.paginator.getPage()); } createServiceCallTask(): void { this.createOrEditServiceCallTaskModal.show(); } deleteServiceCallTask(serviceCallTask: ServiceCallTaskDto): void { this.message.confirm( '', (isConfirmed) => { if (isConfirmed) { this._serviceCallTasksServiceProxy.delete(serviceCallTask.id) .subscribe(() => { this.reloadPage(); this.notify.success(this.l('SuccessfullyDeleted')); }); } } ); } exportToExcel(): void { this._serviceCallTasksServiceProxy.getServiceCallTasksToExcel( this.filterText, this.taskFilter, this.detailsFilter, this.maxHoursRequiredFilter == null ? this.maxHoursRequiredFilterEmpty: this.maxHoursRequiredFilter, this.minHoursRequiredFilter == null ? this.minHoursRequiredFilterEmpty: this.minHoursRequiredFilter, this.completedFilter, this.serviceCallSubjectFilter, this.serviceCallScheduleSubjectFilter, ) .subscribe(result => { this._fileDownloadService.downloadTempFile(result); }); }}
-
0
The entity itself is fine by the looks of it and the updating and viewing handles the data correctly. The only weird part is the grid.
-
0
I've just tested it again and grid bindings were fine. I couldn't reproduce your issue.
Could you also share the component.html file?
-
0
sure, here it is:
That is what I don't understand, everything looks fine and it is an extremely weird scenario where I can't find where the data mappings go wrong.
i have about 4 entities if i remember correctly which is currently doing this.
<div [@routerTransition]> <div class="m-subheader"> <div class="d-flex align-items-center"> <div class="mr-auto col-xs-6"> <h3 class="m-subheader__title m-subheader__title--separator"> <span>{{l("ServiceCallTasks")}}</span> </h3> <span class="m-section__sub"> {{l("ServiceCallTasksHeaderInfo")}} </span> </div> <div class="col-xs-6 text-right"> <button (click)="exportToExcel()" class="btn btn-outline-success"><i class="fa fa-file-excel-o"></i> {{l("ExportToExcel")}}</button> <button *ngIf="isGranted('Pages.ServiceCallTasks.Create')" (click)="createServiceCallTask()" class="btn btn-primary blue"><i class="fa fa-plus"></i> {{l("CreateNewServiceCallTask")}}</button> </div> </div> </div> <div class="m-content"> <div class="m-portlet m-portlet--mobile"> <div class="m-portlet__body">
<form class="horizontal-form" autocomplete="off"> <div class="m-form m-form--label-align-right"> <div class="row align-items-center m--margin-bottom-10"> <div class="col-xl-12"> <div class="form-group m-form__group align-items-center"> <div class="input-group"> <input [(ngModel)]="filterText" name="filterText" autoFocus class="form-control m-input" [placeholder]="l('SearchWithThreeDot')" type="text"> <span class="input-group-btn"> <button (click)="getServiceCallTasks()" class="btn btn-primary" type="submit"><i class="flaticon-search-1"></i></button> </span> </div> </div> </div> </div> <div class="row m--margin-bottom-10" [hidden]="!advancedFiltersAreShown"> <div class="col-md-12"> <div class="m-separator m-separator--dashed"></div> </div> <div class="col-md-3"> <div class="m-stack m-stack--ver m-stack--general m-stack--demo"> <div class="form-group"> <div class="m-stack__item"> <label>{{l("Task")}}</label> <div class="m-separator m-separator--dashed"></div> <input type="text" class="form-control" name="taskFilter" [(ngModel)]="taskFilter"> </div> </div> </div> </div> <div class="col-md-3"> <div class="m-stack m-stack--ver m-stack--general m-stack--demo"> <div class="form-group"> <div class="m-stack__item"> <label>{{l("Details")}}</label> <div class="m-separator m-separator--dashed"></div> <input type="text" class="form-control" name="detailsFilter" [(ngModel)]="detailsFilter"> </div> </div> </div> </div> <div class="col-md-3"> <div class="m-stack m-stack--ver m-stack--general m-stack--demo"> <div class="form-group"> <div class="m-stack__item"> <label>{{l("MinMax")}} {{l("HoursRequired")}}</label> <div class="m-separator m-separator--dashed"></div> <input type="number" class="form-control" [(ngModel)]="minHoursRequiredFilter" placeholder="{{l('MinValue')}}" name="minHoursRequiredFilter" /> </div> <div class="m-stack__item"> <input type="number" class="form-control" [(ngModel)]="maxHoursRequiredFilter" placeholder="{{l('MaxValue')}}" name="maxHoursRequiredFilter" /> </div> </div> </div> </div> <div class="col-md-3"> <div class="m-stack m-stack--ver m-stack--general m-stack--demo"> <div class="m-stack__item"> <label for="CompletedFilterSelect">{{l("Completed")}}</label> <div class="m-separator m-separator--dashed"></div> <select class="form-control" name="CompletedFilter" id="CompletedFilterSelect" [(ngModel)]="completedFilter"> <option value="-1">{{l("All")}}</option> <option value="0">{{l("False")}}</option> <option value="1">{{l("True")}}</option> </select> </div> </div> </div> <div class="col-md-3"> <div class="m-stack m-stack--ver m-stack--general m-stack--demo"> <div class="form-group"> <div class="m-stack__item"> <label>({{l("ServiceCall")}}) {{l("Subject")}}</label> <div class="m-separator m-separator--dashed"></div> <input type="text" class="form-control" name="serviceCallSubjectFilter" [(ngModel)]="serviceCallSubjectFilter"> </div> </div> </div> </div> <div class="col-md-3"> <div class="m-stack m-stack--ver m-stack--general m-stack--demo"> <div class="form-group"> <div class="m-stack__item"> <label>({{l("ServiceCallSchedule")}}) {{l("Subject")}}</label> <div class="m-separator m-separator--dashed"></div> <input type="text" class="form-control" name="serviceCallScheduleSubjectFilter" [(ngModel)]="serviceCallScheduleSubjectFilter"> </div> </div> </div> </div> </div> <div class="row margin-bottom-10"> <div class="col-sm-12"> <span class="clickable-item text-muted" *ngIf="!advancedFiltersAreShown" (click)="advancedFiltersAreShown=!advancedFiltersAreShown"><i class="fa fa-angle-down"></i> {{l("ShowAdvancedFilters")}}</span> <span class="clickable-item text-muted" *ngIf="advancedFiltersAreShown" (click)="advancedFiltersAreShown=!advancedFiltersAreShown"><i class="fa fa-angle-up"></i> {{l("HideAdvancedFilters")}}</span> </div> </div> </div> </form> <div class="row align-items-center"> <div class="primeng-datatable-container" [busyIf]="primengTableHelper.isLoading"> <p-table #dataTable (onLazyLoad)="getServiceCallTasks($event)" [value]="primengTableHelper.records" rows="{{primengTableHelper.defaultRecordsCountPerPage}}" [paginator]="false" [lazy]="true" [scrollable]="true" ScrollWidth="100%" [responsive]="primengTableHelper.isResponsive" [resizableColumns]="primengTableHelper.resizableColumns"> <ng-template pTemplate="header"> <tr> <th style="width: 130px" [hidden]="!isGrantedAny('Pages.ServiceCallTasks.Edit', 'Pages.ServiceCallTasks.Delete')">{{l('Actions')}}</th> <th style="width: 150px" pSortableColumn="serviceCallTask.task"> {{l('Task')}} <p-sortIcon field="serviceCallTask.task"></p-sortIcon> </th> <th style="width: 150px" pSortableColumn="serviceCallTask.details"> {{l('Details')}} <p-sortIcon field="serviceCallTask.details"></p-sortIcon> </th> <th style="width: 150px" pSortableColumn="serviceCallTask.hoursRequired"> {{l('HoursRequired')}} <p-sortIcon field="serviceCallTask.hoursRequired"></p-sortIcon> </th> <th style="width: 150px" pSortableColumn="serviceCallTask.completed"> {{l('Completed')}} <p-sortIcon field="serviceCallTask.completed"></p-sortIcon> </th> <th style="width: 150px" pSortableColumn="serviceCallSubject"> {{l('Subject')}} <p-sortIcon field="serviceCallSubject"></p-sortIcon> </th> <th style="width: 150px" pSortableColumn="serviceCallScheduleSubject"> {{l('Subject')}} <p-sortIcon field="serviceCallScheduleSubject"></p-sortIcon> </th> </tr> </ng-template> <ng-template pTemplate="body" let-record="$implicit"> <tr> <td style="width: 130px" [hidden]="!isGrantedAny('Pages.ServiceCallTasks.Edit', 'Pages.ServiceCallTasks.Delete')"> <div class="btn-group dropdown" normalizePosition> <button class="dropdown-toggle btn btn-sm btn-primary" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <i class="fa fa-cog"></i><span class="caret"></span> {{l("Actions")}} </button> <ul class="dropdown-menu"> <li> <a (click)="viewServiceCallTaskModal.show(record)">{{l('View')}}</a> </li> <li> <a *ngIf="permission.isGranted('Pages.ServiceCallTasks.Edit')" (click)="createOrEditServiceCallTaskModal.show(record.serviceCallTask.id)">{{l('Edit')}}</a> </li> <li> <a *ngIf="permission.isGranted('Pages.ServiceCallTasks.Delete')" (click)="deleteServiceCallTask(record.serviceCallTask)">{{l('Delete')}}</a> </li> </ul> </div> </td> <td style="width:150px">{{record.serviceCallSubject}}</td> <td style="width:150px">{{record.serviceCallScheduleSubject}}</td> <td style="width:150px">{{record.serviceCallTask.task}}</td> <td style="width:150px">{{record.serviceCallTask.details}}</td> <td style="width:150px">{{record.serviceCallTask.hoursRequired}}</td> <td style="width:150px"> <div *ngIf="record.serviceCallTask.completed" class="text-center"><i class="fa fa-check-circle m--font-success" title="True"></i></div> <div *ngIf="!record.serviceCallTask.completed" class="text-center"><i class="fa fa-times-circle" title="False"></i></div> </td> </tr> </ng-template> </p-table> <div class="primeng-paging-container"> <p-paginator rows="{{primengTableHelper.defaultRecordsCountPerPage}}" #paginator (onPageChange)="getServiceCallTasks($event)" [totalRecords]="primengTableHelper.totalRecordsCount" [rowsPerPageOptions]="primengTableHelper.predefinedRecordsCountPerPage"> </p-paginator> <span class="total-records-count"> {{l('TotalRecordsCount', primengTableHelper.totalRecordsCount)}} </span> </div> </div> </div> </div> </div> </div> <createOrEditServiceCallTaskModal #createOrEditServiceCallTaskModal (modalSave)="getServiceCallTasks()"></createOrEditServiceCallTaskModal> <viewServiceCallTaskModal #viewServiceCallTaskModal></viewServiceCallTaskModal></div>
-
0
The problem only occurs when i have navigation properties included it seems. normal entities with only primitive properties work as should.
-
0
Hi, I've just reproduce it. The bug is simple but annoying.
In the header section; primitive properties first, then navigation properties, But in the data section; navigation properties first, then primitive properties.
So re-ordering them should fix this issue. And we have to fix this of course.
-
0
Thank you Yekalkan
