kendo ui 工具栏 - 如何以编程方式选择按钮

Question

是否有与“getSelectedFromGroup”等效的方法来设置按钮组中的某个按钮？

如果我使用

将按钮设置为默认按钮

{ type: "button", id: "Thought", text: "Thought", togglable: true, group: "buttonGroup", selected: true },

{ type: "button", id: "Speech", text: "Speech", togglable: true, group: "buttonGroup" },

..当我这样做时它不会改变..

...

Toolbar.toggle("#Speech", true);

...

但是，如果我最初没有使用 [...button... , selected: true"] 设置默认按钮，一切正常

如果我不设置默认按钮，我的代码会出错。如果我确实设置了默认按钮，我以后无法在代码中更改它，因为似乎没有这样做的方法。

那么，如何使用代码更改按钮组中的选定按钮？

非常感谢任何帮助！

谢谢

Answer 1

不确定该操作是否指的是 Angular 的 Kendo UI。如果是这样，我能找到的唯一方法是通过每个按钮上的 ViewChild Button 指令。我只有两个，所以不是那么困难，但如果你的按钮是通过编程方式创建的，那么这将不起作用。

组件.ts

  @ViewChild("currentButton", { read: ButtonDirective }) public currentButton!: ButtonDirective;
  @ViewChild("historyButton", { read: ButtonDirective }) public historyButton!: ButtonDirective;

  public toCurrent(isTrue: boolean) {
    if (isTrue) {
      DoSomething();
    }
  }

  public toHistory(isTrue: boolean) {
    if (isTrue) {
      DoSomethingElse();
    }
  }

Component.html

<kendo-buttongroup selection="single">
          <button          
            class="btn btn--secondary"
            kendoButton
            #currentButton
            [toggleable]="true"
            [selected]="true"
            (selectedChange)="toCurrent($event)"
          >
            <span><span class="k-icon k-i-check-circle"></span>Current</span>
          </button>
          <button          
            class="btn btn--secondary"
            kendoButton            
            #historyButton
            [toggleable]="true"
            [selected]="false"
            (selectedChange)="toHistory($event)"
          >
            <span><span class="k-icon k-i-clock"></span>History</span>
          </button>
        </kendo-buttongroup>

Answer 2

这里演示如何以编程方式更改网格工具栏