Posted 10 January 2020, 5:26 am EST
We’re using wijmo flex grid and want to add a message to the grid if there’s no data in the data source.
I have a button click event which gets me the data from the database and populates the Wijmo Flex Grid.
I am using this.auditDataCollectionView._view.length property to check if any data is available , if not show the message "There are no results to display "
When I click the button, the message immediately shows and then after the flexgrid is populated , the message goes away.
It seems that this.auditDataCollectionView._view.length is 0 inititally and when data is populated , the this.auditDataCollectionView._view.length > 0 and then the message goes away.
Am I using the correct property to check i.e this.auditDataCollectionView._view.length to check there is no data in flex grid or I should be using something different. ?
How do I show the message correctly which will only show after the database call with data or no data?
SearchAuditForm(formValues) {
this.LogActionsSelected = formValues.LogActions;
// console.log(this.LogActionsSelected);
const auditSearchFilter: IAuditFilterSelected = {
UserNameSelected: formValues.UserName,
LogActionsSelected : this.LogActionsSelected,
LogTypeSelected: formValues.LogTypes,
StartDateSelected: formValues.StartDate,
EndDateSelected: formValues.Enddate,
ApplicationId: this.selectedApplication.ApplicationId,
ApplicationSelected: this.selectedApplication,
SubApplicationId: this.selectedSubApplication.SubApplicationId
};
this.store.dispatch(
new fromStore.GetAuditLogSearchResults(auditSearchFilter)
);
this.auditSearchResults$ = this.store.select(fromStore.getAuditLogResults);
this.auditSearchResults$.subscribe(data => {
this.auditDataCollectionView = new wjcCore.CollectionView(data);
this.auditDataCollectionLength = this.auditDataCollectionView._view.length;
// Convert to Date
for (let i = 0; i < this.auditDataCollectionView.items.length; i++) {
const item = this.auditDataCollectionView.items[i];
const dt = new Date(item.EventDateUTC);
// item.EventDateUTC = formatDate(dt, 'MM/dd/yyyy h:mm:ss a', 'en-US');
item.EventDateUTC = dt;
}
this.auditDataCollectionView.sortDescriptions.push(
new wjcCore.SortDescription('EventDateUTC', false)
);
// Set Page Size
this.auditDataCollectionView.pageSize = 50;
// return this.auditDataCollectionView;
});
if (this.auditDataCollectionLength === 0) {
this.auditMessage = 'There are no results to display.';
}
}
- "
<wj-flex-grid #gridDetail (initialized)="initGrid(gridDetail)" [itemsSource]="auditDataCollectionView" [autoGenerateColumns]=false [isReadOnly]=true> <wj-flex-grid-column [header]="'Date'" [binding]="'EventDateUTC'" [format]="'MM/dd/yyyy hh:mm:ss tt'" [width]="190" ></wj-flex-grid-column> <wj-flex-grid-column [header]="'Application'" [binding]="'ApplicationName'" [wordWrap] = "true" [width]="200" ></wj-flex-grid-column> <wj-flex-grid-column [header]="'Category'" [binding]="'TypeFullName'" [wordWrap] = "true" [width]="150"></wj-flex-grid-column> <wj-flex-grid-column [header]="'Activity Type'" [binding]="'Action'" [wordWrap] = "true" [width]="200" ></wj-flex-grid-column> <wj-flex-grid-column [header]="'User'" [binding]="'UserName'" [wordWrap] = "true" [width]="150" ></wj-flex-grid-column> <wj-flex-grid-column [header]="'Activity'" [binding]="'Description'" [wordWrap] = "true" [multiLine] = "true" [width]="950"> <ng-template wjFlexGridCellTemplate [cellType]="'Cell'" let-item="item"> <ng-container *ngIf="item.Url !== null"> <a target="_blank" href="{{item.Url}}">{{item.Description}}</a> </ng-container> <ng-container *ngIf="item.Url === null"> {{ item.Description}} </ng-container> </ng-template> </wj-flex-grid-column> <!-- <wj-flex-grid-column [header]="'Log Type'" [binding]="'AuditCategoryName'" [wordWrap] = "true" [width]="200" ></wj-flex-grid-column> --> </wj-flex-grid> <p *ngIf="gridDetail.rows.length === 0">There are no results to display.</p> </div> <ng-template #noAuditLogs> <div class="card-body"> <h5 class="card-title">{{ auditMessage}}</h5> </div> </ng-template>
"
