使用Typescript的角剑道网格如何使用数据透视表样式生成动态列？

问题描述 投票：0回答：1

[我想知道如何在Angular 4及更高版本的Kendo Grid中使用诸如枢轴样式的打字稿生成动态列。

我已经尝试使用Telerik / Progress网站中提供的Kendo自动生成的列示例。

这里是剑道提供的示例示例

https://www.telerik.com/kendo-angular-ui/components/grid/columns/auto-generated/

期望透视样式剑道网格

angular typescript dynamic pivot kendo-grid
1个回答
0
投票

这里是示例代码，我所做的就是我从上面的Kendo Grid自动生成的列中获取了示例，并对其进行了更改-由Udhaya Kannan提供的示例

app.component.ts
-----------------

import { Component } from "@angular/core";
import { sampleProducts } from "./products";
import { Product } from "./product.model";
import { distinct } from "@progress/kendo-data-query";

interface ColumnSetting {
  field: string;
  title: string;
  format?: string;
  type: "text" | "numeric" | "boolean" | "date";
}

interface GroupColumnSetting {
  title: string;
  supplierId: number;
}

@Component({
  selector: "my-app",
  template: `
    <kendo-grid
      [kendoGridBinding]="gridData"
      [filterable]="true"
      scrollable="none"
    >
      <kendo-grid-column
        field="ProgramCode"
        title="Main Program Code"
      ></kendo-grid-column>
      <kendo-grid-column-group
        [headerStyle]="{ 'text-align': 'center' }"
        *ngFor="let groupColumn of groupColumns"
        title="{{ groupColumn.title }}"
        [locked]="false"
      >
        <kendo-grid-column field="ProductID" title="Product-ID">
          <ng-template kendoGridCellTemplate let-dataItem>
            {{ getProductID(dataItem.ProductID, groupColumn.supplierId) }}
          </ng-template>
        </kendo-grid-column>
        <kendo-grid-column field="SupplierID" title="Supplier-ID">
          <ng-template kendoGridCellTemplate let-dataItem>
            {{ getSupplierID(dataItem.ProductID, groupColumn.supplierId) }}
          </ng-template>
        </kendo-grid-column>
        <kendo-grid-column field="ProductName" title="Product-Name">
          <ng-template kendoGridCellTemplate let-dataItem>
            {{ getProductName(dataItem.ProductID, groupColumn.supplierId) }}
          </ng-template>
        </kendo-grid-column>
      </kendo-grid-column-group>
    </kendo-grid>
  `
})
export class AppComponent {
  public gridData: any[] = distinct(sampleProducts, "ProgramCode");
  public arrayResult: Product[] = sampleProducts;

  public isAssociatedIds(
    supplierID: number,
    groupColumnSupplierID: number
  ): boolean {
    return supplierID == groupColumnSupplierID;
  }

  public getProductName(productID: number, supplierID: number): string {
    const localProduct = this.arrayResult.find(
      x => x.ProductID == productID && x.SupplierID == supplierID
    );

    return localProduct.ProductName;
  }

  public getProductID(productID: number, supplierID: number): number {
    const localProduct = this.arrayResult.find(
      x => x.ProductID == productID && x.SupplierID == supplierID
    );

    return localProduct.ProductID;
  }

  public getSupplierID(productID: number, supplierID: number): number {
    const localProduct = this.arrayResult.find(
      x => x.ProductID == productID && x.SupplierID == supplierID
    );

    return localProduct.SupplierID;
  }

  public groupColumns: GroupColumnSetting[] = [
    {
      title: "Supplier Test 1",
      supplierId: 1
    },
    {
      title: "Supplier Test 2",
      supplierId: 2
    }
  ];

  public columns: ColumnSetting[] = [
    {
      field: "ProductName",
      title: "Product Name",
      type: "text"
    },
    {
      field: "UnitPrice",
      format: "{0:c}",
      title: "Unit Price",
      type: "numeric"
    },
    {
      field: "FirstOrderedOn",
      format: "{0:d}",
      title: "First Ordered",
      type: "date"
    }
  ];
}


product.model.ts
----------------
export class Product 
 {
    ProductID: number;
    ProductName: string;
    SupplierID: number;
    ProgramCode: string;
    CategoryID: number;
    QuantityPerUnit: string;
    UnitPrice: number;
    UnitsInStock: number;
    UnitsOnOrder: number;
    ReorderLevel: number;
    Discontinued: boolean;
    Category: Category;
    FirstOrderedOn: Date;
  }

  export class Category {
    CategoryID: number;
    CategoryName: string;
    Description: string;
  }

products.ts
-----------

export const sampleProducts = [
  {
    ProductID: 1,
    ProductName: "Chai",
    SupplierID: 1,
    ProgramCode: "ABC",
    CategoryID: 1,
    QuantityPerUnit: "10 boxes x 20 bags",
    UnitPrice: 18,
    UnitsInStock: 39,
    UnitsOnOrder: 0,
    ReorderLevel: 10,
    Discontinued: false,
    Category: {
      CategoryID: 1,
      CategoryName: "Beverages",
      Description: "Soft drinks, coffees, teas, beers, and ales"
    },
    FirstOrderedOn: new Date(1996, 8, 20)
  },
  {
    ProductID: 2,
    ProductName: "Chang",
    SupplierID: 1,
    ProgramCode: "XYZ",
    CategoryID: 1,
    QuantityPerUnit: "24 - 12 oz bottles",
    UnitPrice: 19,
    UnitsInStock: 17,
    UnitsOnOrder: 40,
    ReorderLevel: 25,
    Discontinued: false,
    Category: {
      CategoryID: 1,
      CategoryName: "Beverages",
      Description: "Soft drinks, coffees, teas, beers, and ales"
    },
    FirstOrderedOn: new Date(1996, 7, 12)
  },
  {
    ProductID: 3,
    ProductName: "Aniseed Syrup",
    SupplierID: 1,
    ProgramCode: "TET",
    CategoryID: 2,
    QuantityPerUnit: "12 - 550 ml bottles",
    UnitPrice: 10,
    UnitsInStock: 13,
    UnitsOnOrder: 70,
    ReorderLevel: 25,
    Discontinued: false,
    Category: {
      CategoryID: 2,
      CategoryName: "Condiments",
      Description: "Sweet and savory sauces, relishes, spreads, and seasonings"
    },
    FirstOrderedOn: new Date(1996, 8, 26)
  },
  {
    ProductID: 4,
    ProductName: "Chef Anton's Cajun Seasoning",
    SupplierID: 1,
    ProgramCode: "NAM",
    CategoryID: 2,
    QuantityPerUnit: "48 - 6 oz jars",
    UnitPrice: 22,
    UnitsInStock: 53,
    UnitsOnOrder: 0,
    ReorderLevel: 0,
    Discontinued: false,
    Category: {
      CategoryID: 2,
      CategoryName: "Condiments",
      Description: "Sweet and savory sauces, relishes, spreads, and seasonings"
    },
    FirstOrderedOn: new Date(1996, 9, 19)
  },
  {
    ProductID: 5,
    ProductName: "Chef Anton's Gumbo Mix",
    SupplierID: 1,
    ProgramCode: "GMO",
    CategoryID: 2,
    QuantityPerUnit: "36 boxes",
    UnitPrice: 21.35,
    UnitsInStock: 0,
    UnitsOnOrder: 0,
    ReorderLevel: 0,
    Discontinued: true,
    Category: {
      CategoryID: 2,
      CategoryName: "Condiments",
      Description: "Sweet and savory sauces, relishes, spreads, and seasonings"
    },
    FirstOrderedOn: new Date(1996, 7, 17)
  },
  {
    ProductID: 1,
    ProductName: "Chai 2",
    SupplierID: 2,
    ProgramCode: "ABC",
    CategoryID: 1,
    QuantityPerUnit: "10 boxes x 20 bags",
    UnitPrice: 18,
    UnitsInStock: 39,
    UnitsOnOrder: 0,
    ReorderLevel: 10,
    Discontinued: false,
    Category: {
      CategoryID: 1,
      CategoryName: "Beverages",
      Description: "Soft drinks, coffees, teas, beers, and ales"
    },
    FirstOrderedOn: new Date(1996, 8, 20)
  },
  {
    ProductID: 2,
    ProductName: "Chang 2",
    SupplierID: 2,
    ProgramCode: "XYZ",
    CategoryID: 1,
    QuantityPerUnit: "24 - 12 oz bottles",
    UnitPrice: 19,
    UnitsInStock: 17,
    UnitsOnOrder: 40,
    ReorderLevel: 25,
    Discontinued: false,
    Category: {
      CategoryID: 1,
      CategoryName: "Beverages",
      Description: "Soft drinks, coffees, teas, beers, and ales"
    },
    FirstOrderedOn: new Date(1996, 7, 12)
  },
  {
    ProductID: 3,
    ProductName: "Aniseed Syrup 2",
    SupplierID: 2,
    ProgramCode: "TET",
    CategoryID: 2,
    QuantityPerUnit: "12 - 550 ml bottles",
    UnitPrice: 10,
    UnitsInStock: 13,
    UnitsOnOrder: 70,
    ReorderLevel: 25,
    Discontinued: false,
    Category: {
      CategoryID: 2,
      CategoryName: "Condiments",
      Description: "Sweet and savory sauces, relishes, spreads, and seasonings"
    },
    FirstOrderedOn: new Date(1996, 8, 26)
  },
  {
    ProductID: 4,
    ProductName: "Chef Anton's Cajun Seasoning 2",
    SupplierID: 2,
    ProgramCode: "NAM",
    CategoryID: 2,
    QuantityPerUnit: "48 - 6 oz jars",
    UnitPrice: 22,
    UnitsInStock: 53,
    UnitsOnOrder: 0,
    ReorderLevel: 0,
    Discontinued: false,
    Category: {
      CategoryID: 2,
      CategoryName: "Condiments",
      Description: "Sweet and savory sauces, relishes, spreads, and seasonings"
    },
    FirstOrderedOn: new Date(1996, 9, 19)
  },
  {
    ProductID: 5,
    ProductName: "Chef Anton's Gumbo Mix 2",
    SupplierID: 2,
    ProgramCode: "GMO",
    CategoryID: 2,
    QuantityPerUnit: "36 boxes",
    UnitPrice: 21.35,
    UnitsInStock: 0,
    UnitsOnOrder: 0,
    ReorderLevel: 0,
    Discontinued: true,
    Category: {
      CategoryID: 2,
      CategoryName: "Condiments",
      Description: "Sweet and savory sauces, relishes, spreads, and seasonings"
    },
    FirstOrderedOn: new Date(1996, 7, 17)
  }
];

app.module.ts
-------------
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { FormsModule } from '@angular/forms';
import { GridModule } from '@progress/kendo-angular-grid';

import { AppComponent } from './app.component';

@NgModule({
  imports: [ BrowserModule, BrowserAnimationsModule, FormsModule, GridModule ],
  declarations: [ AppComponent ],
  bootstrap: [ AppComponent ]
})

export class AppModule { }
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.