Kendo UI for Angular 学习笔记-Toy模板网

这篇具有很好参考价值的文章主要介绍了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]="new Date(2010, 10, 10)" ：焦点日期，默认为当天
[disabled]="isDisabled" :禁用组件，isDisabled 变量值为布尔值
[readonly]="true"：只读
[(ngModel)]="value"：双向绑定
[format]="dd/MMM/yyyy HH:mm:ss":日期格式
[readOnlyInput]="true"：不能通过input输入，只能在弹出的日历中选择日期。如果将 readonly 属性值设置为true ，则无论 readOnlyInput 值如何，输入框都只读。
[min]="min" / [max]="max"：您可以通过设置 min 和 max 属性来控制日期范围。如果配置了 min 和 max 属性，并且所选日期值超出此范围，则组件将触发验证错误。或者，为了防止键入超出范围的值，可以将输入呈现为只读状态，允许用户仅从弹出的日历中选择一个值.
[disabledDates]="[new Date(2019, 5, 1),new Date(2019, 5, 2)]"：禁用指定日期的选择。使用函数 - 此输入的格式为(date: Date) => boolean true 。该方法禁用所提供函数返回的每个日期。;使用日期数组 - 此输入的格式为 Date[]。该方法仅禁用显式列出的日期。;使用天数组 - 此输入的格式为 Day[]。该方法禁用一周中的指定日期。

  <kendo-datepicker
          calendarType="classic"
          [value]="value"
          [focusedDate]="focusedDate"
          [disabled]="true"
          [readonly]="true"
          [readOnlyInput]="true"
          [disabledDates]="disabledDates"
          [(ngModel)]="value" 
        ></kendo-datepicker>

 public focusedDate: Date = new Date(2010, 10, 10);

 public min: Date = new Date(2000, 2, 10);
 public max: Date = new Date(2002, 2, 10);
 public value: Date = new Date(2001, 2, 10);

 public disabledDates = (date: Date): boolean => {
    return date.getDate() % 2 === 0;
  };
 public disabledDates: Date[] = [
    new Date(2019, 5, 1),
    new Date(2019, 5, 2)
  ];
public disabledDates: Day[] = [Day.Saturday, Day.Sunday];

网格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 内容
[locked]="true":锁定（冻结）列，当用户水平滚动网格时始终可见的列。前提条件-1、滚动已启用。2、设置网格的高度选项。3、所有 Grid 列的宽度都以像素为单位显式设置，以便 Grid 能够调整锁定和解锁列的布局。4、如果显式设置了锁定列的总宽度，则不超过可用视口的宽度或网格的宽度。

<kendo-grid [data]="data">



//显示 字段为 id 的列
 <kendo-grid-column field="id"></kendo-grid-column> 

//自定义列显示
<kendo-grid-column title="{{ 'Page2_Label_Cycle' | translate }}" [width]="110">
          <ng-template kendoGridCellTemplate let-dataItem let-rowIndex="rowIndex" let-column="column">
            {{ "Page2_Label_Cycle" | translate }}
            {{ dataItem.cycleId }}
          </ng-template>
</kendo-grid-column>





<kendo-grid>

选项卡 tab: <kendo-tabstrip> </kendo-tabstrip >

TabStrip 显示一组选项卡，其中包含相关内容，使用户能够在单个组件内的不同视图之间切换。

[selected]="true" :默认选中tab
[disabled]="true" ：禁用tab
<ng-template kendoTabTitle>标题内容</ng-template>：自定义tab 标题
<ng-template kendoTabContent>tab内容</ng-template>：自定义tab 内容
title="内容" ：tab 标题
[closable]="true": 显示关闭按钮。可以使用 TabStrip 的 closable 选项为所有选项卡启用此行为，也可以通过 TabStripTab 组件的 closable 选项为每个单独的选项卡启用此行为。

 <kendo-tabstrip [closable]="true">

      <kendo-tabstrip-tab title="Tab 1">
        <ng-template kendoTabContent>
          <p>Tab 1 Content</p>
        </ng-template>
      </kendo-tabstrip-tab>



      <kendo-tabstrip-tab  [selected]="true" [disabled]="true"  [closable]="true">
        <ng-template kendoTabTitle>//自定义tab 标题
          <h4>Tab 2 Title</h4>
        </ng-template>

        <ng-template kendoTabContent>
          <p>Tab 2 Content</p>
        </ng-template>
      </kendo-tabstrip-tab>


      <kendo-tabstrip-tab title="Tab 3">
        <ng-template kendoTabContent>
          <p>Tab 3 Content</p>
        </ng-template>
      </kendo-tabstrip-tab>


    </kendo-tabstrip>

textarea：<kendo-textarea></kendo-textarea>

Angular TextArea 的 Kendo UI 提供了高度可自定义的界面，用于显示多行文本。

rows / cols: 指定初始宽度和高度
resizable="vertical / horizontal / both": 设置调整大小方向.(默认情况下，Textarea 只能垂直调整大小)
resizable="auto"：用户键入时自动调整 TextArea 的高度。(不会调整 TextArea 的宽度。您可以通过 cols 选项或使用 CSS 手动更新它）
resizable="none" ：禁用调整大小，呈现具有固定大小的 TextArea 。
[disabled]="true": 禁用
[readonly]="true"：只读

<kendo-textarea
       placeholder="Tell us a little bit about yourself..."
       [rows]="3"
       [cols]="50"
       resizable="vertical"
 ></kendo-textarea>

多项选择 MultiSelect :<kendo-multiselect></kendo-multiselect>

MultiSelect 值可以是基元（字符串、数字或其他）或复杂值（对象）的数组。

value : 如果值是通过该属性设置的，则必须挂接到 valueChange 事件并手动更新该属性的值。
ngModel : 如果值是由值绑定设置的，则在组件值发生变化后，框架会自动更新模型中对应的字段。
[valuePrimitive]="true":如果 MultiSelect 绑定到复杂对象的数据集，并且 valuePrimitive 属性设置为true ，则其值也将是基元类型（字符串、数字）
[checkboxes]="true"：允许您使用复选框来管理其项目选择。
[tagMapper]="tagMapper":按字母顺序呈现所选数据项。
(removeTag)="removeTag($event)"：可以使用 RemoveTag 事件通知用户将删除组标记中的哪些选定数据项。
<ng-template kendoMultiSelectItemTemplate let-dataItem>
<span class="template">{{ dataItem.value }}</span>
{{ dataItem.text }}
</ng-template> :项模板。
<ng-template kendoMultiSelectHeaderTemplate let-dataItem>
<h4>T-shirt sizes</h4>
</ng-template>:标题模板,
<ng-template kendoMultiSelectTagTemplate let-dataItem>
<span class="template">{{ dataItem.value }}</span>
{{ dataItem.text }}
</ng-template>：标签模板，若要自定义包含所选文本的元素的内容，请使用标记模板。
<ng-template kendoMultiSelectNoDataTemplate>
<h4>
<span class="k-icon k-font-icon k-i-exclamation-circle"></span
><br /><br />
No data here
</h4>
</ng-template>：无数据模板，定义在没有可用数据时自定义下拉列表的内容，请使用无数据模板。
(open)="onOpen($event)"/ (close)="onClose($event)"：控制打开和关闭

<kendo-multiselect
            [data]="listItems"//判定普通数据--》一维数组
            [(ngModel)]="value"
></kendo-multiselect>
public listItems: Array<string> = [
    "Baseball",
    "Basketball",
    "Cricket",
    "Field Hockey",
    "Football",
    "Table Tennis",
    "Tennis",
    "Volleyball",
  ];
public value: any = ["Baseball"];//如果 MultiSelect 绑定到基元值的数据集，则其值将是相同类型的基元数组。





<kendo-multiselect
          [data]="listItems"//绑定复杂数据--》对象
          [(ngModel)]="value"
          textField="text"
          valueField="value"
        ></kendo-multiselect>
 public listItems: Array<{ text: string; value: number }> = [
    { text: "Small", value: 1 },
    { text: "Medium", value: 2 },
    { text: "Large", value: 3 },
  ];
  public value: any = [{ text: "Medium", value: 2 }];//如果 MultiSelect 绑定到对象数据集，则其值将是相同类型的对象。






<kendo-multiselect
          [data]="listItems"
          textField="text"
          valueField="value"
          [valuePrimitive]="true"
          [(ngModel)]="selectedValues"
 >
 </kendo-multiselect>
 public listItems: Array<Item> = [
    { text: "Small", value: 1 },
    { text: "Medium", value: 2 },
    { text: "Large", value: 3 },
  ];
  public selectedValues: number[] = [2];





<kendo-multiselect
          [data]="listItems"
          [(ngModel)]="value"
          textField="text"
          valueField="value"
          [tagMapper]="tagMapper"

          (removeTag)="removeTag($event)"

         (open)="onOpen($event)"
         (close)="onClose($event)"


        >

 <ng-template kendoMultiSelectItemTemplate let-dataItem>//项模板
            <span class="template">{{ dataItem.value }}</span>
            {{ dataItem.text }}
    </ng-template>




</kendo-multiselect>
 public listItems: Array<{ text: string; value: number }> = [
    { text: "Anne Davolio", value: 1 },
    { text: "Nancy King", value: 2 },
    { text: "Robert Fuller", value: 3 },
  ];
  public value: any = [{ text: "Medium", value: 2 }];
  public tagMapper(tags: any[]): any[] {
    return tags.sort((tag1: any, tag2: any): number => {
      return tag1["value"] - tag2["value"];
    });
  }


 public removeTag(event: any): void {
    if (event.dataItem.length) {
      const sizes: string = event.dataItem
        .map((item) => item["text"])
        .join(", ");
      if (!confirm("Are you sure you want to remove " + sizes)) {
        event.preventDefault();
      }
    }
  }


//控制关闭/打开
 public isOpenDisabled: boolean;
 public isCloseDisabled: boolean;
 public onOpen(event: any): void {
    if (this.isOpenDisabled) {
      event.preventDefault();
    }
  }
  public onClose(event: any) {
    if (this.isCloseDisabled) {
      event.preventDefault();
    }
  }

上传文件upload:<kendo-upload></kendo-upload>

Kendo UI for Angular Upload 组件可帮助用户将文件从他们的文件系统发送到配置为接收它们的专用服务器处理程序。选择文件后，它们将通过请求发送到服务器。

[autoUpload]="false":默认情况下，所选文件会立即上传。如果将组件的 autoUpload 选项设置为 false，则仅当用户通过单击按钮明确确认时，才会进行上传。
[multiple]="false":默认情况下，上传允许选择多个文件。如果将组件的“multiple”选项设置为 false，则选择将限制为单个文件。

<kendo-upload [saveUrl]="uploadSaveUrl" [removeUrl]="uploadRemoveUrl">
    </kendo-upload>

uploadSaveUrl = "saveUrl"; 
uploadRemoveUrl = "removeUrl";

选择文件 FileSelect选择文件选择文件 FileSelect：<kendo-fileselect></kendo-fileselect>

Kendo UI for Angular FileSelect 组件可帮助用户从本地文件系统中选择单个或多个文件。当您希望完全控制创建服务器请求和发送表单的过程时，该组件特别有用。

[(ngModel)]="myFiles" :成功选择或删除文件后，该[(ngModel)]值将更新。若要访问所有选定的文件及其详细信息，可以在 select 和 remove 事件处理程序中使用事件数据。该event.files字段提供文件详细信息的数组。每次选择或删除文件时，FileSelect 都会发出 File[] 类型的值。
[disabled]="true": 禁用
[restrictions]="myRestrictions"：限制文件扩展名。可以使用 allowedExtensions 属性定义符合条件的文件类型。未包含在列表中的扩展名文件将被 FileSelect 显示为无效。
[restrictions]="myRestrictions":设置最大文件大小。可以使用 maxFileSize 属性限制允许的最大文件大小（以字节为单位）。如果所选文件超过最大大小，将显示错误消息。
[restrictions]="myRestrictions":设置最小文件大小.可以使用 minFileSize 属性限制允许的最小文件大小（以字节为单位）。如果所选文件小于最小大小，则会显示错误消息。
<kendo-uploaddropzone zoneId="myZone">
Only JPEG and PNG files are allowed.
</kendo-uploaddropzone>:设置外部拖放区.DropZone 指令允许您使用拖放 FileSelect 功能创建自定义元素。若要将自定义元素与 FileSelect 链接，请为 kendoFileSelectDropZone 指令和 FileSelect 选项提供匹配的 zoneId。
<ng-template kendoFileSelectFileTemplate let-files let-state="state">
        <div>Name: {{ files[0].name }} Size: {{ files[0].size }} bytes</div>
      </ng-template>
<ng-template kendoFileSelectFileInfoTemplate let-files>
        <div>Name: {{ files[0].name }}</div>
      </ng-template>：模板。可以使用“文件”模板或“文件信息”模板来控制 FileSelect 显示文件列表的方式。

<kendo-fileselect
     [(ngModel)]="myFiles" //FileSelect 的值是 File 实例的集合
     [restrictions]="myRestrictions"
> 
</kendo-fileselect>

public myFiles: Array<{ [key: string]: string | number }> = [
    { name: "First.txt", size: 500 },
    { name: "Second.jpg", size: 100 },
  ];
public clearModel(): void {
    this.myFiles = null;
  }


public myRestrictions: FileRestrictions = {
    allowedExtensions: [".jpg", ".png"],//文件扩展名
    maxFileSize: 4194304,//最大文件大小
    minFileSize: 1048576,//最小文件大小
  };


<kendo-uploaddropzone zoneId="myZone">
          Only JPEG and PNG files are allowed.
 </kendo-uploaddropzone>
<kendo-fileselect
          zoneId="myZone"
          (select)="onSelect($event)"
          (remove)="onRemove($event)"
          [restrictions]="myRestrictions"
          [showFileList]="false"
>
</kendo-fileselect>


<kendo-fileselect #myFileSelect="kendoFileSelect">
      <ng-template kendoFileSelectFileTemplate let-files let-state="state">
        <div>Name: {{ files[0].name }} Size: {{ files[0].size }} bytes</div>
        <button
          kendoButton
          *ngIf="showButton(state)"
          (click)="remove(myFileSelect, files[0].uid)"
          style="position: absolute; right: .2em;"
        >
          Remove
        </button>
      </ng-template>
</kendo-fileselect>
 public remove(fileSelect: FileSelectComponent, uid: string): void {
    fileSelect.removeFileByUid(uid);
  }
  public showButton(state: FileState): boolean {
    return state === FileState.Selected ? true : false;
  }

TreeView：<kendo-treeview></kendo-treeview>

数据绑定:

nodes （field） - 呈现将可视化为最顶层的集合。
textField （field） - 确定将显示的节点字段。
hasChildren （function） - 确定给定节点是否具有子节点。
children （function） - 根据提供的父节点提供子节点。
kendoTreeViewSelectable：TreeView 允许用户选择单个节点或多个节点。
<ng-template kendoTreeViewNodeTemplate let-dataItem>
<span [ngClass]="iconClass(dataItem)"></span>
{{ dataItem.text }}
</ng-template>：设置节点模板。

<kendo-treeview
           kendoTreeViewExpandable <-- 控制展开-折叠状态.

           [nodes]="data" 
           textField="text" 

           [children]="fetchChildren"  <-- fetchChildren函数，提供子节点.
           [hasChildren]="hasChildren" <--使用fetchChildren函数检查节点是否有子节点.
           [(selectedKeys)]="selectedKeys"

        >
</kendo-treeview>
    public selectedKeys: any[] = ["0_1"];
    public data: any[] = [{
               text: "Furniture", items: [
                   { text: "Tables & Chairs" },
                   { text: "Sofas" },
                   { text: "Occasional Furniture" }
               ]
           }, {
               text: "Decor", items: [
                   { text: "Bed Linen" },
                   { text: "Curtains & Blinds" },
                   { text: "Carpets" }
               ]
           }
       ];

       public fetchChildren(node: any): Observable<any[]> {
           return of(node.items);
       }

       public hasChildren(node: any): boolean {
           //检查父节点是否有子节点。
           return node.items && node.items.length > 0;
       }

富文本： <kendo-editor></kendo-editor>

Angular Editor 的 Kendo UI 使用户能够通过所见即所得（WYSIWYG）界面创建丰富的文本内容，并提供一组用于创建、编辑和格式化文本、段落、列表和其他 HTML 元素的工具。

设置工具栏
设置外观
[(ngModel)]="content"：双向数据绑定。
[value]="content"：单向数据绑定。
弹出层打开富文本框

<kendo-editor
          [(ngModel)]="content"
          name="content"
          style="height: 300px;"
        ></kendo-editor>
 public content = "<p>The <strong>quick</strong> <em>brown</em> fox jumps </p>";

数值NumericTextBox：<kendo-numerictextbox></kendo-numerictextbox>

[decimals]="decimals"：指定小数点分隔符之后的位数。默认情况下，用户输入不受限制。
[maxlength]="500":设置最大输入长度。默认情况下，用户输入不受限制。
[step]="10":设置后，可以使用旋转按钮或和箭头键来增加或减少采用预定义步骤的组件的值。
[(ngModel)]="user.age":双向数据绑定
[spinners]="false"：隐藏增减按钮
[disabled]="true"：禁用
[readonly]="true"：只读
(afterValueChanged)="onAfterValueChange($event)"：去抖动值更改。默认情况下，Angular Inputs 的 Kendo UI 会毫不延迟地处理输入值的每次更新。但是，输入中的更改可能会触发复杂的操作，例如网络请求。若要处理此类情况，最好在组件接受新值之前实现轻微延迟。
format="p"：使用 format 属性控制 NumericTextBox 的格式。它接受字符串或 NumberFormatOptions 参数。默认情况下，格式设置为。format='n2'
[autoCorrect]="true"
[min]="1"
[max]="10"：设置取值范围。可以通过为 NumericTextBox 的 min、max 和 autoCorrect 属性提供值来控制值范围。
事件

 <kendo-numerictextbox
        format="#.00 kg"
        [step]="0.1"
        [value]="value"
        [decimals]="decimals"
        [autoCorrect]="autoCorrect"
        [min]="min"
        [max]="max"
        [(ngModel)]="user.age"
        (afterValueChanged)="onAfterValueChange($event)"
></kendo-numerictextbox>
  public decimals = 3;
  public autoCorrect = true;
  public min = 1;
  public max = 5;
  public value = 2;

this.user = {
      age: 33,
    };

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

菜单 menu ：<kendo-menu> </kendo-menu>

“菜单”（Menu）显示项目的分层列表。

[hoverDelay]="1000":悬停延迟。为了防止意外打开或关闭菜单项，组件在执行操作之前等待 100 毫秒。若要更改悬停时的默认延迟，请使用 hoverDelay 属性。
[openOnClick]="true"：默认情况下，菜单项在悬停时打开。若要指定项必须在单击时打开，而不是在悬停时打开，请使用 openOnClick 属性。用户单击打开项目后，所有菜单项都会在悬停时打开，直到选择其中一个。若要配置此行为，请使用 openOnClick.toggle 选项。[openOnClick]="{ toggle: 'leave' }"项目在悬停时打开，直到选择项目，或者鼠标指针离开菜单并且预定义的延迟过去。[openOnClick]="{ toggle: 'click' }"项目在悬停时打开，但在鼠标指针离开菜单时不关闭。若要关闭项目并避免在悬停时打开菜单，用户必须单击页面上的随机位置。
<ng-template kendoMenuItemTemplate let-item="item">
{{ item.text }}
</ng-template>: 项模板

<kendo-menu [items]="items"> </kendo-menu>
public items: any[] = [
  {
    text: "Item1",
    items: [
      { text: "Item1.1" },
      {
        text: "Item1.2",
        items: [{ text: "Item1.2.1" }, { text: "Item1.2.2" }],
      },
    ],
  },
  {
    text: "Item2",
    items: [{ text: "Item2.1" }, { text: "Item2.2" }, { text: "Item2.3" }],
  },
  {
    text: "Item3",
  },
];

下拉框 DropDownList：<kendo-dropdownlist></kendo-dropdownlist>

textField / valueField :绑定复杂数据（对象),DropDownList 将从data项中提取value 和 text，并以这种方式设置所选值和文本。
值绑定: DropDownList 值可以是基元（字符串、数字或其他）或复杂值（对象）。使用 value 属性。如果该值是通过该value属性设置的，则必须挂接到 valueChange 事件并手动更新该属性的值。使用 ngModel 值绑定。如果值是通过ngModel绑定设置的，则在组件值发生变化后，框架会自动更新模型中对应的字段。
[valuePrimitive]="true":如果 DropDownList 绑定到对象数据集，并且 valuePrimitive 属性设置为 true，则将从对象的 valueField 中提取组件的值。
[defaultItem]="defaultItem"：配置其默认项。defaultItem 属性类型必须与数据类型匹配。例如，如果 data 属性包含对象列表，则必须将defaultItem 定义为与数据项具有相同 textField 和 valueField 的对象。
[itemDisabled]="itemDisabled"：禁用项
<ng-template kendoDropDownListItemTemplate let-dataItem>
<span class="template">{{ dataItem.value }}</span> {{ dataItem.text }}
</ng-template>：模板，自定义下拉列表项和元素的内容。
(close)="onClose($event)"：打开和关闭事件在选项列表即将打开或关闭之前发出。若要阻止相应的操作，请调用事件参数的preventDefault方法。

<kendo-dropdownlist 
    [data]="listItems"
    defaultItem="Select item..."
    [itemDisabled]="itemDisabled"
    (close)="onClose($event)"//防止关闭选项列表
></kendo-dropdownlist>
public listItems: Array<string> = ["Item 1", "Item 2", "Item 3"];//数据绑定到基元数据数组（字符串、数字或其他）
public itemDisabled(itemArgs: { dataItem: string; index: number }) {
    return itemArgs.index === 2; // disable the 3rd item
  }
public onClose(event: any) {
    event.preventDefault();
    // Close the list if the component is no longer focused
    setTimeout(() => {
      if (
        !this.dropdownlist.wrapper.nativeElement.contains(
          document.activeElement
        )
      ) {
        this.dropdownlist.toggle(false);
      }
    });



<kendo-dropdownlist
        [data]="listItems"
        textField="text"
        valueField="value"
        [defaultItem]="defaultItem"
      >
</kendo-dropdownlist>
public listItems: Array<{ text: string; value: number }> = [//数据绑定到复杂数据（对象）数组
    { text: "Small", value: 1 },
    { text: "Medium", value: 2 },
    { text: "Large", value: 3 },
  ];



<kendo-dropdownlist
      [data]="listItems"
      textField="text"
      valueField="value"
      [valuePrimitive]="true"
      [(ngModel)]="selectedValue"
    >
</kendo-dropdownlist>
public listItems: Array<Item> = [
    { text: "Small", value: 1 },
    { text: "Medium", value: 2 },
    { text: "Large", value: 3 },
  ];

  public selectedValue = 2;
}

展开/折叠 ExpansionPanel ：<kendo-expansionpanel></kendo-expansionpanel>

Angular ExpansionPanel 的 Kendo UI 提供了一个详细信息摘要视图，使用户能够展开或折叠内容。

title="Colombia" ：设置标题
subtitle="South America"：设置副标题
<ng-template kendoExpansionPanelTitleDirective>
<div [style.marginRight.px]="10">
dddddddd
</div>
</ng-template>:标题模板，自定义标头。该指令将覆盖 title 和 subtitle 属性。
[(expanded)]="true":默认情况下，ExpansionPanel 处于折叠状态。若要展开它，请将 expanded 属性设置为true 。该属性支持双向绑定，并且可以通过编程方式进行更新，以立即展开或折叠 ExpansionPanel。
[disabled]="true":禁用.即使禁用了 ExpansionPanel，仍然可以通过 API 展开和折叠其内容。

<kendo-expansionpanel 
title="Colombia" 
subtitle="South America"
[(expanded)]="true"
>

  <ng-template kendoExpansionPanelTitleDirective>
   111
      </ng-template>

    </kendo-expansionpanel>

提示框Popover：<kendo-popover> </kendo-popover>

弹出框表示具有与单个或多个 UI 元素相关的丰富内容的弹出窗口。它可以在目标元素悬停、单击或聚焦时显示。

title="Header content" :设置标题
body="Main content":设置内容
<button kendoPopoverAnchor [popover]="myPopover">Show Popover</button>
<kendo-popover #myPopover >
</kendo-popover>：通过按钮打开提示框
showOn="hover" ：打开方式
position="right/left/bottom/top"：定位
<ng-template kendoPopoverTitleTemplate>
<div class="popover-title">xx</div>
</ng-template>:定义模板.kendoPopoverTitleTemplate - 指定 Popover 标题部分的内容。如果与 title 属性一起提供，则模板将优先。
kendoPopoverBodyTemplate - 指定 Popover 正文部分的内容。如果与属性一起提供，则模板将优先。kendoPopoverActionsTemplate - 指定弹出框操作按钮部分的内容。
<kendo-popover ... [templateData]="getContextData">
   <ng-template kendoPopoverBodyTemplate let-anchor let-data="data">
       <div>{{ data.foo }}</div>
   </ng-template>
</kendo-popover> : 将数据传递到 Popover 模板.

<button
      kendoPopoverAnchor
      [popover]="myPopover"
    >
      Show Popover
</button>

<kendo-popover 
    [templateData]="getContextData"
    #myPopover 
    position="right"
    title="Popover Title" 
    body="Popover Body">

<ng-template kendoPopoverBodyTemplate let-anchor let-data="data">
    <div>{{ data.foo }}</div>
</ng-template>


<ng-template kendoPopoverTitleTemplate>
        <div class="popover-title">Pumpkin Waffles</div>
      </ng-template>

      <ng-template kendoPopoverBodyTemplate>
        <img class="picture" [src]="wafflesImg" />
        <div>{{ wafflesRecipe }}</div>
      </ng-template>

      <ng-template kendoPopoverActionsTemplate>
        <button kendoButton fillMode="flat" themeColor="primary">
          <span class="k-icon k-font-icon k-i-heart-outline"></span>
          Like
        </button>
      </ng-template>
</kendo-popover>

public getContextData = (anchor: Element) => {
    return {
        foo: "bar"
    }
}

单选按钮 RadioButton :kendoRadioButton

[(ngModel)]="useIp":成双向绑定
[disabled]="true":禁用

 <input type="radio" name="useIp" [value]="false" [(ngModel)]="useIp" kendoRadioButton id="useIp-false" />
 <input type="radio" name="useIp" [value]="true" [(ngModel)]="useIp" kendoRadioButton id="useIp-true" />

多选按钮 CheckBox ：kendoCheckBox

[disabled]="true":禁用
[(ngModel)]="useIp":成双向绑定

 <input type="checkbox" kendoCheckBox />

弹出窗： <kendo-window></kendo-window>

Angular Window 的 Kendo UI 在非模态 HTML 窗口中显示内容，该窗口可以移动和调整大小(可以通过拖动调整大小手柄来更改其尺寸)。

title="xx"：设置 Window 的标题。
<kendo-window-titlebar>:设置菜单
*ngIf="true":默认情况下，窗口是可见的。要控制其可见性，请使用 ngIf 指令。
[(width)]="windowWidth"
[(height)]="windowHeight":定义 Window 的尺寸
[minWidth]="200"
[minHeight]="200"：默认情况下，窗口允许您通过拖动其边缘（调整手柄大小）来调整其大小。若要控制此行为，请使用可调整大小的绑定。可以使用 minWidth 和 minHeight 绑定控制 Window 的最小允许尺寸。
[(top)]="windowTop"
[(left)]="windowLeft"：设置 Window 的位置。默认情况下， Window 位于视口的中心。
[draggable]="isDraggable"：是否允许通过拖动来移动窗口。

<button kendoButton *ngIf="!opened" (click)="toggle(true)">Open</button>
    
<kendo-window 
    *ngIf="opened" 
    (close)="toggle(false)"  
    [(width)]="windowWidth"
    [(height)]="windowHeight"
    [(top)]="windowTop"
    [(left)]="windowLeft"
    [draggable]="isDraggable"
>

      <kendo-window-titlebar>
        <div style="font-size: 18px; line-height: 1.3em;">
          <span class="k-icon k-font-icon k-i-print"></span> Print this page
        </div>
        <button kendoWindowMaximizeAction></button>
        <button kendoWindowRestoreAction></button>
        <button kendoWindowCloseAction></button>
      </kendo-window-titlebar>

      <p style="margin: 30px; text-align: center;">内容</p>
</kendo-window>

 public windowWidth = 600;
 public windowHeight = 500;
 public windowTop = 100;
 public windowLeft = 50;
 public isDraggable = true;//是否可以拖动
// 最初不显示窗口
  public opened = false;
  public close(): void {
    this.opened = false;
  }
  public open(): void {
    this.opened = true;
  }

对话框Dialog：<kendo-dialog></kendo-dialog>

Angular Dialog 的 Kendo UI 通过与 Angular 模态组件交互来传达特定信息并提示用户执行某些操作。

title="xx"：设置弹出层的标题。
[width]="400"
[height]="300"：定义大小
<kendo-dialog-actions><kendo-dialog-actions>：指定操作按钮
*ngIf="true":默认情况下，窗口是可见的。要控制其可见性，请使用 ngIf 指令。

  <button kendoButton *ngIf="!opened" (click)="open()">Open dialog</button>
    
<kendo-dialog *ngIf="opened" (close)="close()">
    <kendo-dialog-titlebar>
        <div style="font-size: 18px; line-height: 1.3em;">
          <span class="k-icon k-font-icon k-i-print"></span> Print this page
        </div>
    </kendo-dialog-titlebar>

      <p style="margin: 30px; text-align: center;">A sample print dialog.</p>


<kendo-dialog-actions [layout]="actionsLayout">
        <button kendoButton (click)="onDialogClose()">Cancel</button>
        <button kendoButton (click)="onDeleteData()" themeColor="primary">
          Delete
        </button>
</kendo-dialog-actions>
</kendo-dialog>

public opened = true;
public close(): void {
    this.opened = false;
}
public open(): void {
    this.opened = true;
}

public onDialogClose(): void {
    alert("No data deleted.");
    this.opened = false;
}
public onDeleteData(): void {
    alert("Data deleted.");
    this.opened = false;
 }

项目列表 ListBox ：<kendo-listbox ></kendo-listbox>

Angular ListBox 的 Kendo UI 是一个显示项目列表的组件。它允许在两个或多个 ListBox 组件之间进行项选择、重新排序和传输。Angular ListBox 包括一个工具栏，允许您在列表中上下移动项目、将它们从一个列表移动到另一个列表或删除它们。

[data]="arry"：数据绑定，接受数组 - 字符串或对象。如果是对象，则需要使用 textField 。
[toolbar]="{position: "left", tools: ['moveUp', 'moveDown','remove'] }": 工具栏设置
<ng-template kendoListBoxItemTemplate let-dataItem>
<span>{{ getName(dataItem) }}</span>
</ng-template>:自定义项的内容。
(actionClick)="handleActionClick($event)"：每次按下按钮都会触发 actionClick 事件。
kendoListBoxDataBinding：该指令会自动处理 actionClick 事件。用户与工具栏交互时，该指令会相应地修改原始数据数组。该指令接受 connectedWith 输入属性，该属性允许用户将多个列表框连接在一起并在它们之间移动项。

 <kendo-listbox
      kendoListBoxDataBinding
      [data]="europeanCountries"
      [connectedWith]="asia"
      (actionClick)="handleActionClick($event)"
    >
    </kendo-listbox>
    <kendo-listbox #asia [data]="asianCountries" [toolbar]="false">
        <ng-template kendoListBoxItemTemplate let-dataItem>
            <span>{{ getName(dataItem) }}</span>
          </ng-template>
    </kendo-listbox>

 public getName(item: { countryName: string; value: number }): string {
    return "Hi, " + item.countryName;
  }
 public europeanCountries: string[] = [
    "Germany",
    "France",
    "Austria",
    "Belgium",
    "Denmark",
    "Netherlands",
  ];
  public asianCountries: string[] = [
    "China",
    "Japan",
    "Indonesia",
    "Nepal",
    "Thailand",
    "Yemen",
  ];
public handleActionClick(event: ActionName): void {
    const index: number = this.listbox.selectedIndex;

    if (event === "moveUp" && index > 0) {
      const newIndex = index - 1;
      const temp = this.data[newIndex];
      this.data[newIndex] = this.data[index];
      this.data[index] = temp;
      this.listbox.selectItem(newIndex);
    }

    if (event === "moveDown" && index < this.data.length - 1) {
      const newIndex = index + 1;
      const temp = this.data[newIndex];
      this.data[newIndex] = this.data[index];
      this.data[index] = temp;
      this.listbox.selectItem(newIndex);
    }
  }

切换 Switch： <kendo-switch></kendo-switch>

Angular Switch 的 Kendo UI 使用户能够在选中和未选中状态之间切换。

onLabel="Enable"
offLabel="Disable"：标签文案
[(ngModel)]="checked" :双向绑定
[disabled]="true" ：禁用
[readonly]="true"：只读

 <kendo-switch [(ngModel)]="checked"></kendo-switch>
 public checked = true;

自动完成 AutoComplete：<kendo-autocomplete></kendo-autocomplete>

Angular AutoComplete 的 Kendo UI 是一个表单组件，它根据键入的文本提供建议。

[data]="listItems"：可以绑定基元数据（字符串、数字或其他）数组和复杂数据（对象）数组。当绑定到对象时，需要定义 valueField 。
[value]="value" ：只能是字符串值。“自动完成”不支持包含换行符的值。
[(ngModel)]="value"：双向绑定
[filterable]="true"
(filterChange)="handleFilter($event)"：在每个字符输入上，组件都会触发一个 filterChange事件。如果该属性filterable未设置为 true，则组件的内置搜索功能将取而代之。然后，每次击键都会调用搜索，并且列表中与输入匹配的第一项会成为焦点。
[kendoDropDownFilter]="{
caseSensitive: false,
operator: "startsWith",
}"：执行不区分大小写的搜索
[itemDisabled]="itemDisabled"：禁用项
<ng-template kendoAutoCompleteItemTemplate let-dataItem>
<span style="color: #00F;">{{ dataItem }}</span>
</ng-template>：项模板

<kendo-autocomplete
      [data]="listItems"
      [value]="country"
      valueField="text"
      [filterable]="true"
      (filterChange)="handleFilter($event)"
      [kendoDropDownFilter]="{
        caseSensitive: false,
        operator: "startsWith",
      }"
      [itemDisabled]="itemDisabled"
      [(ngModel)]="country"
    >

    <ng-template kendoAutoCompleteItemTemplate let-dataItem>
          <span style="color: #00F;">{{ dataItem }}</span>
        </ng-template>


</kendo-autocomplete>
public itemDisabled(itemArgs: { dataItem: string; index: number }): boolean {
    return itemArgs.index === 2; // 禁用第3个
  }

public listItems: Array<string> = [
    "Albania",
    "Andorra",
    "Armenia",
    "Austria",
    "Azerbaijan",
  ];
public country = "Austria";
handleFilter(value) {
    if (value.length >= 3) {//输入三个字符以上
      this.data = this.source.filter(
        (s) => s.toLowerCase().indexOf(value.toLowerCase()) !== -1
      );
    } else {
      this.autocomplete.toggle(false);
    }
  }

选项列表 ComboBox ：<kendo-combobox></kendo-combobox>

Angular ComboBox 的 Kendo UI 是一个表单组件，可让您从选项列表中进行选择。它是<select>元素的更丰富版本，支持数据绑定、筛选、模板和输入自定义值。

ComboBox 的值可以是基元（字符串、数字或其他）或复杂值（对象）。

基元数据类型包括：String、Number、Undefined、Null

[data]="listItems"：当绑定对象数据时，需定义 textField 和 valueField 属性。
[value]="value" ：须挂接到 valueChange 事件并手动更新该属性的值。
[(ngModel)]="value"：双向绑定，如果 ComboBox 绑定到对象数据集，则其值将是相同类型的对象。而设置 [valuePrimitive]="true"后，则值是基元值。
[filterable]="true"
(filterChange)="handleFilter($event)"：在每个字符输入上，组件都会触发一个 filterChange事件。如果该属性filterable未设置为 true，则组件的内置搜索功能将取而代之。然后，每次击键都会调用搜索，并且列表中与输入匹配的第一项会成为焦点。
[kendoDropDownFilter]="{
caseSensitive: false,
operator: "startsWith",
}"：不区分大小写的搜索
[itemDisabled]="itemDisabled"：禁用项
<ng-template kendoComboBoxItemTemplate let-dataItem>
<span class="template">{{ dataItem.value }}</span>
{{ dataItem.text }}
</ng-template>：项模板，自定义列表项的内容

 interface Item {
  text: string;
  value: number;
}
<kendo-combobox
      [data]="listItems"
      textField="text"
      valueField="value"
      [(ngModel)]="selectedItem"
      [filterable]="true"
      (filterChange)="handleFilter($event)"
      [itemDisabled]="itemDisabled"

    >

 <ng-template kendoComboBoxItemTemplate let-dataItem>
          <span class="template">{{ dataItem.value }}</span>
          {{ dataItem.text }}
        </ng-template>

</kendo-combobox>
public listItems: Array<Item> = [
    { text: "Small", value: 1 },
    { text: "Medium", value: 2 },
    { text: "Large", value: 3 },
  ];
public selectedItem: Item = this.listItems[1];

handleFilter(value) {
    if (value.length >= 3) {//输入》3字符
      this.data = this.source.filter(
        (s) => s.text.toLowerCase().indexOf(value.toLowerCase()) !== -1
      );
    } else {
      this.combo.toggle(false);
    }
  }

public itemDisabled(itemArgs: { dataItem: any; index: number }) {
    return !itemArgs.dataItem.inStock;//禁用
  }

ProgressBar 进度条：<kendo-progressbar></kendo-progressbar>

ProgressBar 显示和跟踪任务的进度，并支持多种标签格式、水平和垂直方向以及不同方向的渲染。

[max]="10" / [min]="-10":定义范围的开始值和结束值
[value]="20":设置 ProgressBar 的值
[(ngModel)]="value":
[indeterminate]="true":设置为不确定状态，可以指示 ProgressBar 中的任务仍在进行中。
[disabled]="true":禁用
orientation="vertical"：方向，默认Horizontal 。
[reverse]="true"：反转 ProgressBar 方向
[animation]="true"：启用动画，默认情况下，ProgressBar 的动画处于禁用状态。

<kendo-progressbar [value]="value"></kendo-progressbar>
 public value = 0;

圆进度条 CircularProgressBar：<kendo-circularprogressbar></kendo-circularprogressbar>

CircularProgressBar 在完全封闭的圆弧上显示和跟踪任务的进度，允许自定义中心模板和根据进度使用不同的颜色。

<ng-template
kendoCircularProgressbarCenterTemplate
let-color="color"
let-value="value"
>
<span [style.color]="color">value: {{ value }}</span>
</ng-template>：中心模板，在圆中心呈现自定义内容。作为上下文，模板提供当前颜色和值。
[progressColor]="[{from: 0,to: 25,color: "#F42E17"}]":可以设置为单个颜色字符串（string），也可以自定义每个进度阶段的颜色（数组）。
[animation]="true"：启用动画，默认情况下，ProgressBar 的动画处于禁用状态。
style="width: 400px; height: 400px;"：设置大小，默认情况下，CircularProgressBar 以 200x200 像素的大小呈现。

<kendo-circularprogressbar [progressColor]="colors" [value]="value">

      <ng-template
        kendoCircularProgressbarCenterTemplate
        let-color="color"
        let-value="value"
      >
        <span [style.color]="color">value: {{ value }}</span>
      </ng-template>

</kendo-circularprogressbar>
public value = 25;
public colors: ProgressColor[] = [
    {
      from: 0,
      to: 25,
      color: "#F42E17",
    },
    {
      from: 25,
      to: 50,
      color: "#F8DE7E",
    },
    {
      from: 50,
      to: 75,
      color: "#F2E349",
    },
    {
      from: 75,
      to: 100,
      color: "#4A9E24",
    },
  ];

分页 Pager：<kendo-datapager></kendo-datapager>

[currentPage]="1": 所显示页面的索引。
[pageSize]="5" 当前页数。
[skip]="0":当前跳过值。
[total]="100":总数。
[totalPages]="100":可用页数。
[previousNext]="true": 切换一组“上一个”和“下一个”按钮。
[pageSizeValues]="2" :使用页面大小选项切换 DropDownList，并允许您提供可用页面大小列表。
[info]="true":切换有关当前页面和记录总数的信息。

<kendo-datapager
        [attr.aria-controls]="contentId"
        [style.width.%]="100"
        [pageSize]="pageSize"
        [skip]="skip"
        [total]="total"
        (pageChange)="onPageChange($event)"
      >
 </kendo-datapager>

拖放：kendoDropTarget

kendoDragTarget：设置拖动目标。之后，用户可以通过拖放来更改其位置。当元素设置为 DragTarget 时，它将在用户交互时，发出以下事件：onPress - 在按下拖动目标时触发。onRelease - 在按下拖动目标后释放时触发。onDragReady - 当 dragDelay 过去且用户能够拖动元素时触发。onDragStart - 在开始拖动元素时触发。onDrag - 在拖动元素时触发。onDragEnd - 当元素的拖动结束且用户释放元素时触发。
kendoDropTarget：设置放置目标。文章来源地址https://www.toymoban.com/news/detail-782685.html

<button kendoButton kendoDragTarget themeColor="primary">
      <span class="k-icon k-font-icon k-i-move k-icon-md"></span>
      Drag Me!
    </button>

到了这里，关于Kendo UI for Angular 学习笔记的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！

Kendo UI for Angular 学习笔记

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

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

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

选项卡 tab: <kendo-tabstrip> </kendo-tabstrip >

textarea：<kendo-textarea></kendo-textarea>

多项选择 MultiSelect :<kendo-multiselect></kendo-multiselect>

上传文件upload:<kendo-upload></kendo-upload>

选择文件 FileSelect选择文件选择文件 FileSelect：<kendo-fileselect></kendo-fileselect>

TreeView：<kendo-treeview></kendo-treeview>

富文本： <kendo-editor></kendo-editor>

数值NumericTextBox：<kendo-numerictextbox></kendo-numerictextbox>

菜单 menu ：<kendo-menu> </kendo-menu>

下拉框 DropDownList：<kendo-dropdownlist></kendo-dropdownlist>

展开/折叠 ExpansionPanel ：<kendo-expansionpanel></kendo-expansionpanel>

提示框Popover：<kendo-popover> </kendo-popover>

单选按钮 RadioButton :kendoRadioButton

多选按钮 CheckBox ：kendoCheckBox

弹出窗： <kendo-window></kendo-window>

对话框Dialog：<kendo-dialog></kendo-dialog>

项目列表 ListBox ：<kendo-listbox ></kendo-listbox>

切换 Switch： <kendo-switch></kendo-switch>

自动完成 AutoComplete：<kendo-autocomplete></kendo-autocomplete>

选项列表 ComboBox ：<kendo-combobox></kendo-combobox>

ProgressBar 进度条：<kendo-progressbar></kendo-progressbar>

圆进度条 CircularProgressBar：<kendo-circularprogressbar></kendo-circularprogressbar>

分页 Pager：<kendo-datapager></kendo-datapager>

拖放：kendoDropTarget

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏

支付宝扫一扫领取红包，优惠每天领

二维码1

二维码2

Kendo UI for Angular 学习笔记

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

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

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

选项卡 tab: <kendo-tabstrip> </kendo-tabstrip >

textarea：<kendo-textarea></kendo-textarea>

多项选择 MultiSelect :<kendo-multiselect></kendo-multiselect>

上传文件upload:<kendo-upload></kendo-upload>

选择文件 FileSelect选择文件 选择文件 FileSelect：<kendo-fileselect></kendo-fileselect>

TreeView：<kendo-treeview></kendo-treeview>

富文本： <kendo-editor></kendo-editor>

数值NumericTextBox：<kendo-numerictextbox></kendo-numerictextbox>

菜单 menu ：<kendo-menu> </kendo-menu>

下拉框 DropDownList：<kendo-dropdownlist></kendo-dropdownlist>

展开/折叠 ExpansionPanel ：<kendo-expansionpanel></kendo-expansionpanel>

提示框Popover：<kendo-popover> </kendo-popover>

单选按钮 RadioButton :kendoRadioButton

多选按钮 CheckBox ：kendoCheckBox

弹出窗： <kendo-window></kendo-window>

对话框Dialog：<kendo-dialog></kendo-dialog>

项目列表 ListBox ：<kendo-listbox ></kendo-listbox>

切换 Switch： <kendo-switch></kendo-switch>

自动完成 AutoComplete：<kendo-autocomplete></kendo-autocomplete>

选项列表 ComboBox ：<kendo-combobox></kendo-combobox>

ProgressBar 进度条：<kendo-progressbar></kendo-progressbar>

圆进度条 CircularProgressBar：<kendo-circularprogressbar></kendo-circularprogressbar>

分页 Pager：<kendo-datapager></kendo-datapager>

拖放：kendoDropTarget

相关文章

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏

支付宝扫一扫领取红包，优惠每天领

二维码1

二维码2

选择文件 FileSelect选择文件选择文件 FileSelect：<kendo-fileselect></kendo-fileselect>