当前位置: 首页 > 最新文章 > 正文

UIAngularkendo表格api(kendo工具是哪里的)

本文主要介绍如何安装和开始使用Kendo UI for Angular。然后创建一个简单的应用程序,其中包含一些Kendo UI for Angular组件,应用程序源代码可供您参考。最后,您将学习如何为Kendo UI for Angular激活许可。Kendo UI for Angular官方最新版免费下载试用,历史版本下载,在线文档和帮助文件下载-慧都网设置Angular项目最新的Kendo

admin

本文主要介绍如何安装和开始使用Kendo UI for Angular。然后创建一个简单的应用程序,其中包含一些Kendo UI for Angular组件,应用程序源代码可供您参考。最后,您将学习如何为Kendo UI for Angular激活许可。Kendo UI for Angular官方最新版免费下载试用,历史版本下载,在线文档和帮助文件下载-慧都网设置Angular项目最新的Kendo UI for Angular包面向当前Angular长期支持版本,直到最新的官方Angular版本。- CSS2. 新应用生成后,将src/app/app.component.html的内容替换为:

Hello Kendo UI for Angular!

3. 然后,在浏览器中构建并打开Angular应用程序:cd kendo-angular-appng serve -o接下来,我们将向应用程序添加一些数据,然后将其绑定到一个DropDownList和一个网格中。向应用程序添加一个 Kendo UI Angular DropDownList,并将其绑定到一个对象数组。

本文主要介绍如何安装和开始使用Kendo UI for Angular

  • 首先完成安装步骤。
  • 然后创建一个简单的应用程序,其中包含一些Kendo UI for Angular组件,应用程序源代码可供您参考。
  • 最后,您将学习如何为Kendo UI for Angular激活许可。

Kendo UI for Angular官方最新版免费下载试用,历史版本下载,在线文档和帮助文件下载-慧都网

设置Angular项目

最新的Kendo UI for Angular包面向当前Angular长期支持版本,直到最新的官方Angular版本。

1. 开始使用Angular最简单方法是使用 Angular CLI 工具,要搭建项目结构,请按照该工具的安装说明进行操作:

npm install -g @angular/cli
ng new kendo-angular-app

ng new命令将提示您进行新Angular应用程序的一些设置,使用这些:

  • 实施更严格的类型检查和捆绑预算? - No
  • 添加Angular路由?Yes
  • 样式表格式? - CSS

2. 新应用生成后,将src/app/app.component.html的内容替换为:

<h1>Hello Kendo UI for Angular!</h1>

3. 然后,在浏览器中构建并打开Angular应用程序:

cd kendo-angular-app
ng serve -o

接下来,我们将向应用程序添加一些数据,然后将其绑定到一个DropDownList和一个网格中。

添加数据

通过向应用程序添加一些数据来准备使用专业的数据驱动UI组件,为简单起见,将使用静态本地 JSON 数据和可以修改来使用远程数据的服务,创建以下三个文件并从 GitHub 中的链接文件复制粘贴它们的内容:

  • src/app/data.products.ts
  • src/app/data.categories.ts
  • src/app/product.service.ts

添加下拉列表

Kendo UI for Angular是通过多个NPM包分发的,范围为@progress。向应用程序添加一个 Kendo UI Angular DropDownList,并将其绑定到一个对象数组。

1. 使用ng add命令时,DropDowns包安装需要一个步骤:

ng add @progress/kendo-angular-dropdowns

ng add命令还会自动安装默认Kendo UI主题。

2. 打开src/app/app.component.ts并从data.categories导入类别:

import { categories } from "./data.categories";

3. 在同一个文件中,声明将在DropDownList声明中使用的变量,defaultItem确定最初选择的项目:

export class AppComponent {public dropDownItems = categories;public defaultItem = { text: "Filter by Category", value: null };}

4. 最后,打开src/app/app.component.html并添加DropDownList标记:

<p><kendo-dropdownlist [data]="dropDownItems" [defaultItem]="defaultItem" textField="text" valueField="value" ></kendo-dropdownlist></p>

DropDownList 现在应该可以在您的示例页面上运行了。

添加网格

继续添加一个Kendo UI for Angular网格。

1. 首先,安装Grid npm包和所有依赖项:

ng add @progress/kendo-angular-grid

2. 在src/app/app.component.ts中导入必要的类型和数据服务:

import { GridDataResult, PageChangeEvent } from "@progress/kendo-angular-grid";import { SortDescriptor } from "@progress/kendo-data-query";import { ProductService } from "./product.service";import { Observable } from "rxjs";

3. 在组件声明中添加ProductService作为提供程序:

@Component({selector: 'app-root',templateUrl: './app.component.html',styleUrls: ['./app.component.css'],providers: [ProductService]})

4. 添加将用于对 Grid 进行分页和排序的 AppComponent 类成员:

export class AppComponent {// ...public gridItems: Observable<GridDataResult>;public pageSize: number = 10;public skip: number = 0;public sortDescriptor: SortDescriptor[] = [];public filterTerm: number = null;constructor(private service: ProductService) {this.loadGridItems();}public pageChange(event: PageChangeEvent): void {this.skip = event.skip;this.loadGridItems();}private loadGridItems(): void {this.gridItems = this.service.getProducts(this.skip,this.pageSize,this.sortDescriptor,this.filterTerm);}public handleSortChange(descriptor: SortDescriptor[]): void {this.sortDescriptor = descriptor;this.loadGridItems();}}

5. 最后,在 src/app/app.component.html 中添加 Grid 标记,在浏览器中重建并检查 Grid:

<kendo-grid [data]="gridItems | async" [pageSize]="pageSize" [skip]="skip" [pageable]="true"(pageChange)="pageChange($event)" [sortable]="true" [sort]="sortDescriptor" (sortChange)="handleSortChange($event)"[height]="400"><kendo-grid-column field="ProductID" title="ID" width="50"></kendo-grid-column><kendo-grid-column field="ProductName" title="Product Name"></kendo-grid-column><kendo-grid-column field="Category.CategoryName" title="Category"></kendo-grid-column><kendo-grid-column field="UnitPrice" title="Unit Price" width="140" format="{0:c}"></kendo-grid-column><kendo-grid-column field="Discontinued" width="140" filter="boolean"><ng-template kendoGridCellTemplate let-dataItem><input type="checkbox" [checked]="dataItem.Discontinued" disabled /></ng-template></kendo-grid-column></kendo-grid>

我们应用程序中的 Grid 实例可以排序和分页,它使用单元格模板中的 UnitPrice 列和复选框的数字格式来显示布尔值 Discontinued 字段。

Kendo UI for Angular是Kendo UI系列商业产品的最新产品。Kendo UI for Angular是专用于Angular开发的专业级Angular组件。telerik致力于提供纯粹的高性能Angular UI组件,无需任何jQuery依赖关系。


了解最新Kendo UI最新资讯,请关注Telerik中文网!


上一篇: Access树控件实践开发(1)BOM是什么? 下一篇:谷歌平板nexus10刷机包(谷歌nexus10刷机)
返回顶部