Posts

Showing posts from September, 2018

Recent

Print Html table in new window

  printReport(): void {     let gridWindow = window.open(null, 'Print', 'toolbar=no, menubar=no, dialog=no, location=no, status=yes, resizable=yes, scrollbars=yes');     let htmlStart =       '<!DOCTYPE html>' +       '<html>' +       '<head>' +       '<meta charset="utf-8" />' +       '<title>' + this.report + '</title>' +       '<style type="text/css" media="print">@page {margin: 0.38in 0.1in 0.4in 0.1in;}</style>' + // print margin       '<style type="text/css">table{width:100%;margin-bottom:1rem;background-color:transparent;border-collapse:collapse}table thead{background:#dee2e6}table thead th{vertical-align:bottom;padding:.2rem;border:none;border-left:.5px solid #c1c6cc;border-right:.5px solid #c1c6cc;text-align:center}table tbody tr td{border-left:.5px solid #dee2e6;border-right:.5px solid...
Post a Comment
read more »

Kendo Excel Export

https://stackblitz.com/edit/angular-stiojo?embed=1&file=app/app.component.ts import   {   Component   }   from   "@angular/core" ; import   {  products  }   from   "./products" ; @ Component ({   selector :   "my-app" ,   template :   `     <button type="button" class="k-button" (click)="excelexport.save()">       Export To Excel     </button>     <kendo-excelexport [data]="data" fileName="Products.xlsx" #excelexport>       <kendo-excelexport-column *ngFor="let col of columns" [field]="col.name">       </kendo-excelexport-column>     </kendo-excelexport>   ` }) export   class   AppComponent   {    pub...
Post a Comment
read more »

Kendo Pdf Export

https://stackblitz.com/edit/ng-kendo-pdf-export-kk-12?embed=1&file=app/app.component.ts&view=preview import   {   Component   }   from   "@angular/core" ; import   {  products  }   from   "./products" ; @ Component ({   selector :   "my-app" ,   template :   `     <div class="example-config">       <button kendo-button (click)="pdf.saveAs('table.pdf')">         Save As PDF...       </button>     </div>     <kendo-pdf-export       *ngIf="reportPdfGrid"       paperSize="A4"       margin="2cm"       landscape="true"       repeatHeaders="true" ...
Post a Comment
read more »

Kendo Grid Export To Excel All Data

  https://stackblitz.com/edit/angular-tud43m?embed=1&file=app/app.component.ts import   {   Component   }   from   "@angular/core" ; import   {  process  }   from   "@progress/kendo-data-query" ; import   {   ExcelExportData   }   from   "@progress/kendo-angular-excel-export" ; import   {  products  }   from   "./products" ; @ Component ({   selector :   "my-app" ,   template :   `     <kendo-grid       [kendoGridBinding]="products"       [height]="400"       [group]="group"       [pageable]="true"       [pageSize]="10"     >       <ng-template kendoGridToolbarTemplate>        ...
Post a Comment
read more »

Html to Excel

https://jsfiddle.net/59hs0nxu/ < table   id = "tableId" >    < thead >      < tr >        < th > HireDate </ th >        < th > Organization </ th >        < th > Skill </ th >        < th > Office </ th >        < th > DOB </ th >        < th > Department </ th >        < th > Status </ th >        < th > Recruiter </ th >        < th > since </ th >        < th > JobPortal </ th >        < th > Task </ th >        < th > Address </ th > ...
Post a Comment
read more »

Kendo Grid Virtual Scrolling / Endless Scrolling with sorting

https://stackblitz.com/edit/angular-q57v7f?embed=1&file=app/app.component.ts import   {   Component ,   ViewEncapsulation   }   from   '@angular/core' ; import   {   GridDataResult ,   PageChangeEvent   }   from   '@progress/kendo-angular-grid' ; import   { process  }   from   '@progress/kendo-data-query' ; @ Component ({     selector :   'my-app' ,      /*      * Set a fixed row height of 36px (20px line height, 2 * 8px padding)      *      * [row height] = [line height] + [padding] + [border]      *      * Note: If using the Kendo UI Material theme, add 1px to...
Post a Comment
read more »

Add Serial Number in KendoGrid

https://stackblitz.com/edit/angular-65vwz5-i7meqj?embed=1&file=app/app.component.ts import   {   Component   }   from   "@angular/core" ; @ Component ({   selector :   "my-app" ,   template :   `     <kendo-grid [data]="gridData">       <kendo-grid-column title="SN." width="*">         <ng-template kendoGridCellTemplate let-dataItem let-rowIndex="rowIndex">           {{ rowIndex + 1 }}         </ng-template>       </kendo-grid-column>       <kendo-grid-column field="ProductName"> </kendo-grid-column>       <kendo-grid-column field="UnitPrice"> ...
Post a Comment
read more »

Kendo Grid AutoFit Columns

https://stackblitz.com/edit/angular-prf8kx-nlbjax?embed=1&file=app/app.component.ts import   {   Component   }   from   "@angular/core" ; import   {  sampleProducts  }   from   "./products" ; import   {   GridComponent   }   from   "@progress/kendo-angular-grid" ; @ Component ({   selector :   "my-app" ,   template :   `     <kendo-grid       #grid       [data]="gridData"       [resizable]="true"       style="height: 300px"     >       <kendo-grid-column         *ngFor="let column of columns; trackBy: dynamicColumns(grid)"         field="{{ column.Name }}"  ...
Post a Comment
read more »

Kendo Grid Angular Column Width, minResizableWidth dynamic

https://stackblitz.com/edit/ng-kendo-grid-col-width-kk-12?embed=1&file=app/app.component.ts&view=preview import   {   Component   }   from   '@angular/core' ; import   {  sampleProducts  }   from   './products' ; @ Component ({     selector :   'my-app' ,     template :   `         <kendo-grid                 [data]="gridData"                 [reorderable]="true"                 [resizable]="true"                 [scrollable]="true"                ...
Post a Comment
read more »