Kendo UI让你有可能从一个基本的想法变成一个成熟的应用程序，这要归功于一个庞大的组件库。我们谈论的是超过100个组件，这些组件可以让你随意放入你的应用程序中，无论你使用的是React、Angular还是Vue--它们都可以工作。这是因为Kendo UI实际上是由四个JavaScript库捆绑而成的，每个库都是为各自的框架原生构建的。但不仅如此，正如我们之前所介绍的，这些组件具有超强的主题性，以至于你可以让它们成为你想要的样子。
但Kendo UI的真正亮点是：它能处理繁重的工作。样式设计很好，但Kendo UI与其他组件框架的区别在于它开箱即用的功能。
例如：数据。与其把所有的时间都花在找出将数据绑定到一个组件的最佳方法上，这只是一个必然的结果，最终使你能够把更多的时间集中在主题设计和使UI恰到好处。
也许了解Kendo UI使数据工作变得多么微不足道的最好方法就是看它的实际操作，所以......
让我们来看看Angular Grid组件
这是Kendo UI的Angular数据网格组件。里面有很多数据，对吗？我们现在看到的是一个员工列表，它显示了每个人的姓名、图像和其他信息。
就像Kendo UI的所有组件一样，它不像有一个数据网格组件，他们将其方块化，以便在多个框架中工作。这个数据网格是从零开始的，专门为Angular设计的，就像他们的KendoReact网格组件是专门为React设计的。
现在，通常情况下，一个简单的<table> 元素就可以做到这一点，对吗？但是Kendo UI for Angular的数据网格充满了额外的东西，使它具有更好的用户体验。请注意，它提供了交互式的功能，例如将数据导出到Excel或PDF。此外，还有一些其他非琐碎的功能，否则将花费大量的时间和精力来制作这个组件。
过滤功能
这里有一个给你：过滤数据的网格。假设你在看一个员工的列表，就像上面的数据网格例子一样，但是一个公司有成千上万的员工。如果不考虑一系列的功能，如搜索、可排序的列和分页，就很难找到一个特定的人--所有这些Kendo UI的数据网格都能做到。
用户可以快速解析绑定在Angular数据网格上的数据。过滤可以通过一个专门的过滤行来完成，也可以通过点击列头的过滤图标时弹出的过滤菜单来完成。
过滤数据的一种方法是点击列头，选择过滤选项，并设置标准。
Kendo UI的文档很不错。下面是我们如何快速启动和运行的方法。
首先，导入该组件
这里没有任何技巧--像其他组件一样导入数据网格。
import { Component, OnInit, ViewChild } from '@angular/core';
import { DataBindingDirective } from '@progress/kendo-angular-grid';
import { process } from '@progress/kendo-data-query';
import { employees } from './employees';
import { images } from './images';
接下来，调用该组件
@Component({
selector: 'my-app',
template: `
<kendo-grid>
// ...
</kendo-grid>
`
})
这当然是不完整的，因为接下来我们必须...
配置该组件
我们想启用的关键功能是过滤，但Kendo的Angular Grid采取了各种可以一次性启用的功能参数，从排序和分组，到分页和虚拟化，仅举几例。
筛选？只需一句话就能将其绑定到列标题上：
@Component({
selector: 'my-app',
template: `
<kendo-grid
[kendoGridBinding]="gridView"
kendoGridSelectBy="id"
[selectedKeys]="mySelection"
[pageSize]="20"
[pageable]="true"
[sortable]="true"
[groupable]="true"
[reorderable]="true"
[resizable]="true"
[height]="500"
[columnMenu]="{ filter: true }"
>
// etc.
</kendo-grid>
`
})
然后，对用户界面的其他部分进行标记
我们不会在这里深入探讨。Kendo UI的文档中有一个很好的例子来说明这一点。这也是一个很好的时间来进行样式设计，这在styles 参数中完成。同样，为Kendo UI组件设计主题是很容易的。
到目前为止，在我们将任何实际的数据插入其中之前，我们已经有了一个漂亮的数据网格：
最后，绑定数据
当我们导入该组件时，你可能已经注意到我们在这个过程中导入了 "雇员 "数据。我们需要将这些数据绑定到组件上。现在，像我这样的人可能会在这个时候跑到一个角落里哭泣，但Kendo UI让这种情况发生得太容易了。
// Active the component on init
export class AppComponent implements OnInit {
// Bind the employee data to the component
@ViewChild(DataBindingDirective) dataBinding: DataBindingDirective;
// Set the grid's data source to the employee data file
public gridData: any[] = employees;
// Apply the data source to the Grid component view
public gridView: any[];
public mySelection: string[] = [];
public ngOnInit(): void {
this.gridView = this.gridData;
}
// Start processing the data
public onFilter(inputValue: string): void {
this.gridView = process(this.gridData, {
filter: {
// Set the type of logic (and/or)
logic: "or",
// Defining filters and their operators
filters: [
{
field: 'full_name',
operator: 'contains',
value: inputValue
},
{
field: 'job_title',
operator: 'contains',
value: inputValue
},
{
field: 'budget',
operator: 'contains',
value: inputValue
},
{
field: 'phone',
operator: 'contains',
value: inputValue
},
{
field: 'address',
operator: 'contains',
value: inputValue
}
],
}
}).data;
this.dataBinding.skip = 0;
}
// ...
}
让我们再看看那个演示
这是以最小的努力获得的很大的力量。Kendo UI的API非常广泛，即使是最复杂的功能也变得非常简单。
我们甚至还没有提到Kendo UI组件所带来的其他美妙的好处。以可及性为例。你能想象到为使这样一个组件具有可访问性而需要考虑的所有问题吗？就像我们得到的所有其他强大的功能一样，Kendo UI也为我们解决了可访问性问题，承担了制作一个符合WCAG 2.0 Alice标准、符合Section 508和WAI-ARIA标准的键盘友好用户界面的重任。
