Question

是否可以在kendo下拉列表中禁用选项？或者将它们从列表中隐藏？在html中它是：

<div class="example-wrapper">
            <kendo-combobox
                [data]="listItems"
                [textField]="'text'"
                [valueField]="'value'"
                [value]="selectedValue"
                [valuePrimitive]="true">
                <ng-template kendoComboBoxItemTemplate let-dataItem>
                    <span class="template">{{ dataItem.value }}</span> {{ 
                       dataItem.text }}
                </ng-template>
            </kendo-combobox>
</div>

我如何在Kendo DropDown中做到这一点？

which conda

谢谢，

Answer 1

我在他们的Angular Kendo UI文档中看不到他们有什么东西。我建议过滤掉你想要被禁用的元素＆＃39;。您可以使用任何您喜欢的方法。我更喜欢lodash：https://lodash.com/docs/4.17.4#filter

Answer 2

剑道没有解决方案。可以通过以下方式解决：

    <kendo-combobox (valueChange)="valueChange($event);" [placeholder]="'xxx" [data]="data"  [textField]="'Value'" [valueField]="'Value'" >
  <ng-template kendoComboBoxItemTemplate let-dataItem>
    <button class="template"  [disabled]="!dataItem.Max" >{{dataItem.Value}}</button>
  </ng-template>
 </kendo-combobox>

或：

    @Component({
  selector: 'my-app',
  styles: ['.template { display: inline-block; background: #333; color: #fff; border-radius: 50%; width: 18px; height: 18px; text-align: center; } '],
  template: `
    <div class="example-wrapper">
        <kendo-combobox
            [data]="listItems"
            [textField]="'text'"
            [valueField]="'value'"
            [value]="selectedValue"
            [valuePrimitive]="true"
            (open)="onOpen($event)"
        >
            <ng-template kendoComboBoxItemTemplate let-dataItem>
                <button>{{ dataItem.text }}</button>
            </ng-template>
        </kendo-combobox>
    </div>
  `,
  styles: [`
  .disabled {
    pointer-events:none;
    opacity:0.6;         

  }
  `],
  encapsulation: ViewEncapsulation.None
})
export class AppComponent {
    public listItems: Array<{ text: string, value: number }> = [
        { text: "Small", value: 1 },
        { text: "Medium", value: 2 },
        { text: "Large", value: 3 }
    ];

    public selectedValue;

    onValChange(e){

    }
    onOpen(){
      let liArr

      setTimeout(()=>{
        liArr = Array.from(document.getElementsByClassName("k-item"))
        liArr.forEach(el => {
          if(el.innerText.indexOf('Small') != -1){
            el.classList.add("disabled")
          }
      })
      })
    }
}

Answer 3

有可能，

以下示例演示了在DropDownList绑定到复杂数据时，如何使用 itemDisabled 属性禁用特定的列表选项。

https://stackblitz.com/run

https://www.telerik.com/kendo-angular-ui/components/dropdowns/dropdownlist/disabled-items/

Angular Kendo UI在DropDown中禁用选项

3 个答案: