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 #dee2e6;padd
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   {    public  data :   any []   =  products ;    public  columns  =   [{  name :   "ProductName"   },   {  name :   "QuantityPerUnit"   }]; }
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"       scale="0.8"     >       <table>         <thead>           <tr>             <th *ngFor="let col of columns">{{ col.name }}</th>           </tr>         </thead>         <tbody>           <tr *ngFor="let dat of gridData"
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>         <button type="button" kendoGridExcelCommand icon="file-excel">           Export to Excel         </button>       </ng-template>       <kendo-grid-column field="ProductID" title="Product ID" [width]="200">       </kendo
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 >        < th > SSN </ th >        < th > Title </ th >        < th > ContactInformation </ th >        < th > PersonId </ th >        < th > Name </ th >      </ tr >    </ thead >    < tbody >      < tr >        < td > null </ td >        < td >  sadfas </ td >        < td
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 the row height      * to account for the bottom border width.      */     encapsulation :   ViewEncapsulation . None ,     styles :   [ `         .k-grid tbody td {             white-space: nowrap;             line-height: 20px;             padding: 8px 12px;         }     ` ],     template :   `       <kendo-grid           [kendoGridGroupBinding]="data"           [navigable]
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"> </kendo-grid-column>     </kendo-grid>   ` }) export   class   AppComponent   {    public  gridData  =   [      {        ProductName :   "Chai" ,        UnitPrice :   18.0 ,        Discontinued :   false      },      {        ProductName :   "Chang" ,        UnitPrice :   19.0 ,    
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 }}"         title="{{ column.Display }}"       >         // {{ dynamicColumns(grid, column) }}       </kendo-grid-column>     </kendo-grid>   ` }) export   class   AppComponent   {    public  gridData :   any []   =  sampleProducts ;    public  columns :   any   =   [      {        Name :   "ProductName&
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"                 [groupable]="true"                 style="height: 300px">                               <kendo-grid-column                  *ngFor="let column of columns;"                     width="{{column.ColumnWidth}}"                    minResizableWidth="{{column.ColumnWidth >= 10 ? (column.ColumnWidth - 10) : column.ColumnWidth }}"                     field="{{column.Name}}"                     title="
Post a Comment
read more »