CODEWITHSUNDEEP
javascriptangularkendo-uikendo-asp.net-mvckendo-ui-angular2
Amit
Amit

Reputation: 1491

Button Click is refreshing page Kendo Angular ToolBar Overflow button

I am using kendo angular toolbar. When user is resizing screen overflow button is visible. But on click it refreshes the page. Looks like its doing post back.

Here Goes My code:

<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>

I tried the solution provided here kendo ui - why do button click refresh the page? and added type="button" but it works in my local environment only. When deployed in asp.net it doesnot work.

I tried executing this in my js file but this also doesnot help.

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

Upvotes: 4

Views: 664

Answers (1)

svetq
svetq

Reputation: 61

If the the Toolbar is placed inside a form and the overflow button is clicked then the page is refreshed as demonstrated in the following example:

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

Indeed, that is a bug in the Kendo UI for Angular Toolbar package as of version 2.2.0.

That could be avoided by adding programmatically the attribute type="button" as demonstrated below:

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

Upvotes: 2

Related Questions