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

Posted

技术标签:

【中文标题】按钮单击是刷新页面 Kendo Angular ToolBar 溢出按钮【英文标题】:Button Click is refreshing page Kendo Angular ToolBar Overflow button 【发布时间】:2020-03-13 16:09:41 【问题描述】:

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

这是我的代码:

<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();            
);

【问题讨论】:

【参考方案1】:

如果工具栏放置在表单内并单击溢出按钮,则页面将刷新,如下例所示:

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

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

可以通过以编程方式添加属性 type="button" 来避免这种情况,如下所示:

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

【讨论】:

以上是关于按钮单击是刷新页面 Kendo Angular ToolBar 溢出按钮的主要内容,如果未能解决你的问题,请参考以下文章

使用子组件按钮单击关闭 Kendo Angular Dialog

单击表单中的按钮会导致页面刷新

单击表单中的按钮会导致页面刷新

Kendo UI:在按钮单击时获取文本框值

Kendo UI:单击按钮后将网格数据重置为第一页

Kendo Ui Angular2 Grid 分页到第一页