<kendo-appbar [position]="'top'"> <kendo-appbar-section> <button kendoButton [look]="'clear'"> <kendo-icon [name]="'menu'"></kendo-icon> </button> </kendo-appbar-section> <kendo-appbar-section> <h1 class="appbar-title">{{ title }}</h1> </kendo-appbar-section> <kendo-appbar-spacer></kendo-appbar-spacer></kendo-appbar><kendo-drawer-container> <kendo-drawer #menuDrawer [mode]="menuDrawerMode" [expanded]="menuDrawerExpanded"> <ng-template kendoDrawerHeaderTemplate > <div kendoRippleContainer> <button kendoButton [look]="'flat'" style="display: block; width: 100%;"> <kendo-icon [name]="'arrow-left'" [size]="'medium'"></kendo-icon> </button> </div> </ng-template> </kendo-drawer> <kendo-drawer-content> <router-outlet></router-outlet> </kendo-drawer-content></kendo-drawer-container>
I just turned on multi column sorting in one of my grids I use. When sorting on multiple columns, the index of the sort is not shown.
Am I missing a style sheet to load or component in my module to make this happen?
Example page is:
https://test.tropicos.org/name/25509881 go to the Specimen Tab on this screen.
HTML:
<kendo-grid #nameSpecimenGrid [data]="gridDataResult" [loading]="isSearching" [pageSize]="state.take" [pageable]="{ buttonCount: 5, info: true, type: pageableType, previousNext: true }" [skip]="state.skip" [sort]="state.sort" [sortable]="{ allowUnsort: true, mode: 'multiple' }" [resizable]="true" [reorderable]="true" (dataStateChange)="onDataStateChange($event)">
Imported styles...
@import './theme/variables';@import './theme/tropicos-layout-variables';@import '~@progress/kendo-theme-default/scss/toolbar/_index.scss';@import '~@progress/kendo-theme-default/scss/button/_index.scss';@import '~@progress/kendo-theme-default/scss/autocomplete/_index.scss';@import '~@progress/kendo-theme-default/scss/menu/_index.scss';@import '~@progress/kendo-theme-default/scss/tabstrip/_index.scss';@import '~@progress/kendo-theme-default/scss/input/_index.scss';@import '~@progress/kendo-theme-default/scss/radio/_index.scss';@import '~@progress/kendo-theme-default/scss/switch/_index.scss';@import '~@progress/kendo-theme-default/scss/scrollview/_index.scss';@import '~@progress/kendo-theme-default/scss/notification/_index.scss';@import '~@progress/kendo-theme-default/scss/popup/_index.scss';@import '~@progress/kendo-theme-default/scss/dialog/_index.scss';@import '~@progress/kendo-theme-default/scss/grid/_index.scss';@import '~@progress/kendo-theme-default/scss/pager/_index.scss';@import '~@progress/kendo-theme-default/scss/action-buttons/_index.scss';@import '~@progress/kendo-theme-default/scss/ripple/_index.scss';@import '~@progress/kendo-theme-default/scss/multiselect/_index.scss';@import '~@progress/kendo-theme-default/scss/dropdownlist/_index.scss';@import '~@progress/kendo-theme-default/scss/tooltip/_index.scss';@import '~@progress/kendo-theme-default/scss/panelbar/_index.scss';@import '~@progress/kendo-theme-default/scss/datetime/_index.scss';@import '~@progress/kendo-theme-default/scss/checkbox/_index.scss';@import '~@progress/kendo-theme-default/scss/common/_index.scss';@import '~@progress/kendo-theme-default/scss/dropzone/_index.scss';@import '~@progress/kendo-theme-default/scss/numerictextbox/_index.scss';@import '~@progress/kendo-theme-default/scss/combobox/_index.scss';@import '~@progress/kendo-theme-default/scss/calendar/_index.scss';@import '~@progress/kendo-theme-default/scss/card/_index.scss';

Hello,
I am using the autoFitColumns method on my grid and the column resize works perfect, but when I moved the horizontal scroll to the end and apply a filter on a column or a reorder, the grid refreshes and the scroll jumps to the left. This behaviour also ocur in your auto-fitting example: https://www.telerik.com/kendo-angular-ui/components/grid/columns/resizing/#toc-auto-fitting-the-content
I will like the grid mantains the scroll position after any refresh just like it use to happen without autofit.
Another alternative I explored is using the scrollTo method after call the autoFitColumns method. But I was unable to capture the last column visible after the refresh.
I will appreciate your help. Thanks.

Hi,
I see that if an input in dialog focus(), we can not close the dialog with "Escape" key press.
Is there a general setting that can help me achieve this?
--
Or is there a way that I can trigger dialog close function with a general event?
document.querySelector(".k-dialog-content input")
.addEventListener("keydown",function(e){ if(e.key == "Escape") { this.closest(".k-dialog")._wishToClose_(); } });
Hi, I have two grids to export to excel in one worksheet. #gridData is main grid with report data, #grid1 is report filter data. However, if user doesn't wants to see #grid1 in excel, it should only export #grid to excel. Can you tell me what I need to change with these codes? Thank you.
--first grid
<kendo-grid #grid [data]="gridData" (excelExport)="onExcelExport($event, grid1)">
<ng-template kendoGridToolbarTemplate>
<button type="button" kendoGridExcelCommand><span class="k-icon k-i-file-excel"></span>Export to Excel</button>
</ng-template>
<kendo-grid-excel fileName="reportname" ></kendo-grid-excel>
</kendo-grid>
--second grid
<kendo-grid [data]="dataFilters" (excelExport)="onExcelExport1($event)" #grid1 [height]="50" >
<kendo-grid-excel [fileName]="reportname" ></kendo-grid-excel>
</kendo-grid>
public onExcelExport(e: any, grid): void {
e.preventDefault();
this.sheetData = e;
grid.saveAsExcel();
}
onExcelExport1(e){
let dataFromFirstGrid = this.sheetData.workbook.sheets[0].rows;
e.workbook.sheets[0].rows.push({cells: []});
e.workbook.sheets[0].rows = [...e.workbook.sheets[0].rows, ...dataFromFirstGrid];
}

If the editor is in readonly mode, I can't change its contents programmatically. I would expect that the user is not allowed to change the content, but not the developer. See the example below - if I click the button "Click me" the text in the editor does not change. I would expect it to change to "bla".
Is that possible in readonly or disabled mode?
import { Component } from "@angular/core";@Component({ selector: "my-app", template: ` <kendo-editor [value]="value" [readonly]="true" style="height: 370px;" ></kendo-editor> <button (click)="onClickme()">Click me</button> `})export class AppComponent { public value = "eeeeee"; onClickme() { this.value = 'bla'; console.log('clicked'); }}
Hello,
I'm currently trying to export an excel file from a grid with a custom filename. Everywhere I look the go-to suggestion is to use the
ExcelExportEventand
e.workbook.fileNameto update the file name. This doesn't appear to work anymore. Looking into the source code I found the following lines trying to save a file:
saveFile(options) {toDataURL(options).then((dataURL) => {saveAs(dataURL, this.fileName, {forceProxy: this.forceProxy,proxyURL: this.proxyURL});});}
This clearly indicates that this.fileName is used, which is initialized once to "Export.xlsx" and then never read back from the event again.
Is this intended behaviour? If so, has the ability to override the export name completely been removed?
Best Regards
Philipp
Hello,
I need an on close event of each tab in a tabstrip component in Angular typescript.
How can we achieve that please ??
Thanks
