如何在Angular 2 Kendo网格中创建下拉编辑器_如何在angular 2+中停止双击事件触发kendo ui网格标题？_如何在带有Angular 2的Kendo网格中显示和隐藏详细信息行 - 腾讯云开发者社区

如何在Angular 2 Kendo网格中创建下拉编辑器

在Angular 2 Kendo网格中创建下拉编辑器的步骤如下：

首先，确保你已经安装了Angular CLI，并创建了一个新的Angular项目。
在项目中安装Kendo UI库。可以通过以下命令来安装Kendo UI：npm install --save @progress/kendo-angular-grid @progress/kendo-angular-dropdowns
在你的组件中导入所需的模块：import { Component, OnInit } from '@angular/core'; import { GridDataResult, PageChangeEvent } from '@progress/kendo-angular-grid'; import { process, State } from '@progress/kendo-data-query'; import { DropDownListComponent } from '@progress/kendo-angular-dropdowns';
在组件类中定义下拉编辑器的选项列表：public dropdownData: Array<{ text: string, value: number }> = [ { text: 'Option 1', value: 1 }, { text: 'Option 2', value: 2 }, { text: 'Option 3', value: 3 } ];
创建一个自定义的下拉编辑器组件：@Component({ selector: 'app-dropdown-editor', template: ` <kendo-dropdownlist [data]="dropdownData" [valuePrimitive]="true" [textField]="'text'" [valueField]="'value'" (valueChange)="onValueChange($event)" ></kendo-dropdownlist> ` }) export class DropdownEditorComponent implements OnInit { @Input() public value: any; @Output() public valueChange = new EventEmitter();

 constructor() { }

 ngOnInit() {

   this.valueChange.emit(this.value);

 onValueChange(value: any) {

   this.valueChange.emit(value);

}

在网格列中使用下拉编辑器组件：import { Component } from '@angular/core';

@Component({

 selector: 'app-grid',

 template: `

   <kendo-grid [data]="gridData" [pageSize]="pageSize" [skip]="skip" [sort]="sort" [filter]="state.filter" [sortable]="true" [pageable]="true">

     <kendo-grid-column field="productName" title="Product Name"></kendo-grid-column>

     <kendo-grid-column field="category" title="Category"></kendo-grid-column>

     <kendo-grid-column field="unitPrice" title="Unit Price"></kendo-grid-column>

     <kendo-grid-column field="discontinued" title="Discontinued"></kendo-grid-column>

     <kendo-grid-column field="unitsInStock" title="Units In Stock"></kendo-grid-column>

     <kendo-grid-column field="quantityPerUnit" title="Quantity Per Unit"></kendo-grid-column>

     <kendo-grid-column field="supplierID" title="Supplier" editor="dropdownEditor"></kendo-grid-column>

   </kendo-grid>

   <ng-template kendoGridEditorTemplate let-dataItem="dataItem" let-column="column">

     <app-dropdown-editor [(value)]="dataItem[column.field]"></app-dropdown-editor>

   </ng-template>

})

export class GridComponent {

 public gridData: any[] = [

   { productName: 'Product 1', category: 'Category 1', unitPrice: 10, discontinued: false, unitsInStock: 100, quantityPerUnit: '1', supplierID: 1 },

   { productName: 'Product 2', category: 'Category 2', unitPrice: 20, discontinued: true, unitsInStock: 200, quantityPerUnit: '2', supplierID: 2 },

   { productName: 'Product 3', category: 'Category 3', unitPrice: 30, discontinued: false, unitsInStock: 300, quantityPerUnit: '3', supplierID: 3 }

];

 public pageSize = 10;

 public skip = 0;

 public sort: any[] = [];

 public state: State = {

   filter: {

     logic: 'and',

     filters: []

};

}

以上代码示例中，我们创建了一个自定义的下拉编辑器组件DropdownEditorComponent，并在网格列中使用了该组件作为编辑器。在网格列中，我们指定了editor属性为dropdownEditor，并在kendoGridEditorTemplate中使用了app-dropdown-editor组件。

这样，当用户编辑网格中的下拉列时，将会显示自定义的下拉编辑器，并且可以选择下拉选项。

请注意，以上示例中的代码是基于Kendo UI for Angular库的，如果你使用的是其他UI库或框架，可能会有所不同。