Kendo UI for Angular 学习笔记

文本框 textbox：<kendo-textbox></kendo-textbox>

[maxlength]：最大输入长度
[showSuccessIcon] / [showErrorIcon]:显示内置验证图标
kendoTextBoxPrefixTemplate：前后缀 icon
[clearButton]="true" ： TextBox 中呈现 Clear 按钮（"X"）
[(ngModel)]="value变量" ：双向绑定
[disabled]="isDisabled" :禁用组件，isDisabled 变量值为布尔值
[readonly]="true"：只读
(afterValueChanged)="onAfterValueChange($event)":在组件接受新值前实现轻微延迟

<kendo-textbox
[style.width.px]="350"
placeholder="Username"
[maxlength]="maxlength"
[clearButton]="true"
(valueChange)="onValueChange($event)"
[showSuccessIcon]="value.length >= 3"//boolean- 根据开发人员设置的条件呈现验证图标。
showErrorIcon="initial"//组件自我验证-valid, invalid, touched,和 dirty
(focus)="handleFocus()"
```
      <ng-template kendoTextBoxSuffixTemplate>
        <span class="counter">{{ counter }}</span>
      </ng-template>
```
//前缀图标
<ng-template kendoTextBoxPrefixTemplate>
<kendo-svgicon [icon]="menuIcon"></kendo-svgicon>
<button kendoButton fillMode="clear" [svgIcon]="calendarSvg"></button>
<kendo-textbox-separator></kendo-textbox-separator>
</ng-template>

//后缀图标
<ng-template kendoTextBoxSuffixTemplate>
<kendo-textbox-separator></kendo-textbox-separator>
<button kendoButton fillMode="clear" [svgIcon]="calendarSvg"></button>
<kendo-svgicon [icon]="bellIcon"></kendo-svgicon>
</ng-template>

//去抖动值更改 ---默认情况下，Angular Inputs会毫不延迟地处理输入值的每次更新。
但是，输入中的更改可能会触发复杂的操作，例如网络请求。若要处理此类情况，请在组件接受新值之前实现轻微延迟。
(afterValueChanged)="onAfterValueChange( $event)" (valueChange)="onValueChange($ event)"
```
    </kendo-textbox>
  </kendo-label>
```
public rawValue = 0;
public value = 0;
```
public onValueChange(value: number): void {
  this.rawValue = value;
}

public onAfterValueChange(value: number): void {
  this.value = value;
}

public handleFocus(): void {
   console.log('Component is isFocused');
}
```

日期 DatePicker ： <kendo-datepicker></kendo-datepicker>

calendarType="infinite"：日历类型， infinite（默认）/classic
[focusedDate]="focusedDate" ：更改焦点日期，默认为当天
[disabled]="isDisabled" :禁用组件，isDisabled 变量值为布尔值
[readonly]="true"：只读
[readOnlyInput]="true"：不能通过input输入，只能在弹出的日历中选择日期。如果将 readonly 属性值设置为true ，则无论 readOnlyInput 值如何，输入框都只读。
[min]="min" / [max]="max"：您可以通过设置 min 和 max 属性来控制日期范围。如果配置了 min 和 max 属性，并且所选日期值超出此范围，则组件将触发验证错误。或者，为了防止键入超出范围的值，可以将输入呈现为只读状态，允许用户仅从弹出的日历中选择一个值.
```
<kendo-datepicker
        calendarType="classic"
        [value]="value"
        [focusedDate]="focusedDate"
        [disabled]="true"
        [readonly]="true"
        [readOnlyInput]="true"
      ></kendo-datepicker>
```
public focusedDate: Date = new Date(2010, 10, 10);

网格Grid ：<kendo-grid></kendo-grid>

<kendo-grid-column field="xx" ></kendo-grid-column>：默认情况下，当您将 Grid 绑定到数据时，它会自动为数据集中的每个字段生成一列。您可以重写此行为并手动定义必要的列。
<ng-template kendoGridCellTemplate let-dataItem let-rowIndex="rowIndex" let-column="column"></ng-template>：自定义显示cell 内容

<kendo-grid [data]="data">
<kendo-grid-column field="id"></kendo-grid-column> //只显示 field 为 id 的列
```
        <ng-template kendoGridCellTemplate let-dataItem let-rowIndex="rowIndex" let-    column="column">
          <img [src]="dataItem.typeIcon"  />
        </ng-template>
      </kendo-grid-column>
```
<kendo-grid>