Hi,
how to create a function that starts at the click event of the pie chart?
i would to pass the selected item to a function
<
kendo-chart-series
>
<
kendo-chart-series-item
type
=
"pie"
[data]="dataSourcePieChart"
categoryField
=
"cost"
field
=
"cost"
>
<
kendo-chart-series-item-labels
position
=
"outsideEnd"
color
=
"#000"
[content]="labelContent">
</
kendo-chart-series-item-labels
>
</
kendo-chart-series-item
>
</
kendo-chart-series
>
Alex
HI
I have an issue with these import statements. They produce errors when I include them in my code.
import { StatePersistingService } from './state-persisting.service';
import { GridSettings } from './grid-settings.interface';
import { ColumnSettings } from './column-settings.interface';
Are there code statements that, I am most probably missing in order for them to work?
Hi
Can you please give or point to an example like the second you have here:https://www.telerik.com/kendo-angular-ui/components/grid/how-to/persist-state/
for the Persistent state of the grid with data from an Endpoint instead of a static JSON file ?
Thanks
<
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');
}
}