单击按钮刷新页面 Kendo Angular 工具栏溢出按钮

Question

我正在使用 kendo angular 工具栏。当用户调整屏幕大小时溢出按钮可见。但是点击它会刷新页面。看起来它正在做 post。

这是我的代码：

<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

确实，这是 Kendo UI 中 Angular 工具栏包的一个错误，自版本 2.2.0 起。

这可以通过以编程方式添加属性 type="button" 来避免，如下所示：

ngAfterViewInit(){ document.querySelector('.koverflowanchor').setAttribute('type','button'); }

单击按钮刷新页面 Kendo Angular 工具栏溢出按钮

Button Click is refreshing page Kendo Angular ToolBar Overflow button

javascript

kendo-ui

kendo-asp.net-mvc

kendo-ui-angular2

angular