Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to Display No Data for Export Alert when there is no data found Angular 6 kendo-excelexport Component

Below is the code :i used angular 6 kendo-excelexport ^4.5.0 version component.

<kendo-excelexport [data]="excelDataToExport" [collapsible]="true" fileName="Sample.xlsx" #excelexport>
                <kendo-excelexport-column field="taxMonth" title="Month" [width]="200">
                </kendo-excelexport-column>
                <kendo-excelexport-column field="clientName" title="Client Name" [width]="200">
                </kendo-excelexport-column>
                <kendo-excelexport-column field="alertType" title="Alert Type" [width]="200">

                <kendo-excelexport-column field="Description" title="Description" [width]="200">
                </kendo-excelexport-column>

</kendo-excelexport>
like image 290
Chirag Patel Avatar asked Mar 02 '23 21:03

Chirag Patel


2 Answers

Check the length of excelDataToExport if it is an array. If the length is greater than 0, download the excel sheet else show an alert.

To achieve this, use conditional expression on the click event of the export button.

Please find the working example: Demo

In the example comment/uncomment the data in product.ts file to see the no data alert / download excel respectively.

like image 99
Vikash B Avatar answered Mar 09 '23 00:03

Vikash B


Main idea is to test for the data: if it's present, you can display the table. If it is null, you can display a message. If you bind it in the template, change detection takes care of updating the DOM for you if the data changes after the component is loaded:

<div *ngIf="excelDataToExport">...table code here ....</div>

<div *ngIf="!excelDataToExport">No data to export present</div>

To improve this code even further, you can use templates to avoid using two ngIf-s: ... and define a template:

<ng-template #noDataLabel>No data to export present</ng-template>

It will replace the the div's content. Read more about this in the documentation.

like image 26
ForestG Avatar answered Mar 09 '23 00:03

ForestG