Question

我正在使用剑道角度工具栏。当用户调整大小时，屏幕溢出按钮可见。但是在单击它会刷新页面。看起来像在回发。

我的代码在这里：

<kendo-toolbar  [overflow]="true" [style.width.%] = "100" >
                <ng-container *ngFor ="let actionBtnItem of actionBtn">
                    <kendo-toolbar-button  *ngIf="(actionBtnItem.name == 'Delete' && !isStandard) || actionBtnItem.name != 'Delete'"
                    [text]="actionBtnItem.name"  type="button"
                    [icon]= "actionBtnItem.icon.split('k-i-')[1]" [className]="(isTopBottomFilterApplied && actionBtnItem.name == 'Top/Bottom' ) ? 'k-button k-state-selected': ''"
                    (click)="show(actionBtnItem.value, $event)">
                </kendo-toolbar-button>
</ng-container>

<kendo-toolbar-splitbutton [data]="downloadData" type="button" [text]="'Download'">Download</kendo-toolbar-splitbutton>
</kendo-toolbar>

我尝试了kendo ui - why do button click refresh the page?此处提供的解决方案，并添加了type =“ button”，但它仅在我的本地环境中有效。当部署在asp.net中时，它将无法正常工作。

我尝试在js文件中执行此操作，但这也无济于事。

$('#action-button-component .k-overflow-anchor').click(function (e) {
  e.preventDefault();            
});

Answer 1

如果将工具栏放置在表单中，然后单击溢出按钮，则刷新页面，如以下示例所示：

https://stackblitz.com/edit/angular-2pfqpa-1kn4kz?file=app/app.component.ts

实际上，这是从2.2.0版开始的Kendo UI for Angular Toolbar程序包中的错误。

可以通过编程添加属性type =“ button”来避免这种情况，如下所示：

ngAfterViewInit（）{ document.querySelector（'。koverflowanchor'）。setAttribute（'type'，'button'）; }

按钮单击刷新页面Kendo Angular ToolBar溢出按钮

1 个答案: