Building an Angular Data Grid With Filtering

Kendo UI's powerful component library allows you to quickly go from conception to building complete applications. It has over 100 components that can be easily integrated into your React, Angular or Vue applications. Kendo UI is actually a collection of four native JavaScript libraries, each built for its corresponding framework. What’s more, as we mentioned earlier, these components are extremely theme customization and you can adjust their appearance as you want.

The real advantage of Kendo UI is that it takes on the heavy lifting . Excellent style is important, but what really distinguishes Kendo UI from other component frameworks is its out-of-the-box feature.

For example: data processing . You don't have to spend a lot of time looking for the best way to bind your data to components, Kendo UI has handled it all for you, allowing you to spend more time focusing on theme design and UI optimization.

To understand how Kendo UI simplifies data processing, the best way is to actually do it, so...

Let's take a look at the Angular Grid component

This is the data grid component of Kendo UI for Angular. It contains a lot of data, right? What we see is a list of employees showing each person’s name, images, and other information.

Like all Kendo UI components, it is not a simple data grid component that is common across multiple frameworks. This data grid is specially built and designed for Angular, just as their KendoReact Grid components are specifically designed for React.

Usually, a simple<table> Elements <em>may</em> satisfy the needs, right? But Kendo UI for Angular's data grid contains many additional features that can significantly improve the user experience. You can immediately notice that it provides interactive features such as exporting data to Excel or PDF. There are many other extraordinary features that would otherwise take a lot of time and effort to achieve.<h3 id="filter"> filter</h3> <p> There is a function here: filtering of data grids. Suppose you are looking at a list of employees similar to the data grid example above, but the company has thousands of employees. Without a range of features like search, sortable, and paging, it is difficult to find a specific person—and Kendo UI's data grid has these capabilities.</p> <p> Users can quickly parse data bound to an Angular data grid. You can filter through a dedicated filter row, or by clicking the filter menu pop-up from the filter icon in the column header.</p> <p> The documentation for Kendo UI is excellent. Here's how to get the component up and running quickly:</p> <h3 id="First-import-the-component"> First, import the component</h3> <p> There is no trick here - importing a data grid like importing any other component:</p> <pre class="brush:php;toolbar:false"> &lt;code&gt;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';&lt;/code&gt;</pre> <h3 id="Next-call-the-component"> Next, call the component</h3> <pre class="brush:php;toolbar:false"> &lt;code&gt;@Component({ selector: 'my-app', template: `&lt;kendo-grid&gt; // ...&lt;/kendo-grid&gt; ` })&lt;/code&gt;</pre> <p> Of course, this is incomplete because next we have to...</p> <h3 id="Configure-Components"> Configure Components</h3> <p> The key feature we want to enable is filtering, but Kendo's Angular Grid accepts various functional parameters that can be enabled in one fell swoop, such as sorting and grouping, pagination, and virtualization.</p> <p> filter? It is only possible to bind it to the column header with just one line of code.</p> <pre class="brush:php;toolbar:false"> &lt;code&gt;@Component({ selector: 'my-app', template: `&lt;kendo-grid filter=&quot;&quot; kendogridselectby=&quot;id&quot; true=&quot;&quot;&gt; // etc.&lt;/kendo-grid&gt; ` })&lt;/code&gt;</pre> <h3 id="Then-mark-the-rest-of-the-UI"> Then, mark the rest of the UI</h3> <p> We won't go into it in depth here. There is an excellent example of what looks like in Kendo UI's documentation. This is also a good time to deal with styles, which are done in style parameters. Similarly, the theme setting of Kendo UI components is very simple.</p> <p> Even before we insert the actual data, we already have a nice-looking data grid!</p> <h3 id="Finally-bind-the-data"> Finally, bind the data</h3> <p> When we import components, you may have noticed that we import the "employee" data at the same time. We need to bind that data to the component. Now, people like me may be hiding in the corner and crying, but Kendo UI makes the process too simple.</p> <pre class="brush:php;toolbar:false"> &lt;code&gt;// 在初始化时激活组件export class AppComponent implements OnInit { // 将员工数据绑定到组件@ViewChild(DataBindingDirective) dataBinding: DataBindingDirective; // 将网格的数据源设置为员工数据文件public gridData: any[] = employees; // 将数据源应用于Grid 组件视图public gridView: any[]; public mySelection: string[] = []; public ngOnInit(): void { this.gridView = this.gridData; } // 开始处理数据public onFilter(inputValue: string): void { this.gridView = process(this.gridData, { filter: { // 设置逻辑类型(and/or) logic: &quot;or&quot;, // 定义筛选器及其运算符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; } // ... }&lt;/code&gt;</pre> <h3 id="Let-s-take-a-look-at-the-demo-again"> Let's take a look at the demo again</h3> <p> Such powerful features are achieved with minimal effort. The Kendo UI API is very broad, and even the most complex features are very simple.</p> <p> We haven't even touched on other great features of Kendo UI components yet. For example, accessibility. Can you imagine how much thought it takes to make such a component easy to access? Like all other powerful features we have obtained, Kendo UI solves accessibility issues for us, taking on the heavy lifting of creating a keyboard-friendly UI that complies with WCAG 2.0 Alice, Section 508, and WAI-ARIA standards.</p> <p> Get started with Kendo UI Data Grid!</p> </table>

The above is the detailed content of Building an Angular Data Grid With Filtering. For more information, please follow other related articles on the PHP Chinese website!