Recent

Custom Controls Using Angular Material

Git Repo:  https://github.com/yawahang/ohcontrols Features DatePicker (Date Picker, Time Picker, Date Time Picker, and many more) RatingPicker (Vertical, Horizontal, Custom Icons) Select (Single Select, MultiSelect, Single Column, MultiColumn) Recursive Treeview

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-grid-column>

      <kendo-grid-column field="ProductName" title="Product Name">
      </kendo-grid-column>

      <kendo-grid-column
        field="Category.CategoryName"
        title="Category"
        [hidden]="true"
      >
      </kendo-grid-column>

      <kendo-grid-excel
        fileName="Products.xlsx"
        [fetchData]="allData"
      ></kendo-grid-excel>
    </kendo-grid>
  `
})
export class AppComponent {
  public products: any[] = products;

  public group: any[] = [
    {
      field: "Category.CategoryName"
    }
  ];

  constructor() {
    this.allData = this.allData.bind(this);
  }

  public allData(): ExcelExportData {
    const result: ExcelExportData = {
      data: process(products, {
        group: this.group,
        sort: [{ field: "ProductID", dir: "asc" }]
      }).data,

      group: this.group
    };

    return result;
  }
}

Comments

Top Posts

SQL Server Symmetric Key & Certificate based Encryption With AES_256 Algorithm

Kendo Grid Angular Column Width, minResizableWidth dynamic

Kendo Grid AutoFit Columns