Telerik Forums
Kendo UI for Angular Forum
1 answer
459 views

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

Hetali
Telerik team
 answered on 19 Nov 2020
2 answers
449 views

 

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?


Dimitris
Top achievements
Rank 1
Veteran
 answered on 19 Nov 2020
1 answer
99 views

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

Dimitris
Top achievements
Rank 1
Veteran
 answered on 19 Nov 2020
1 answer
223 views
I want the drawer to respect the appbar height but i keeps covering all.
 
<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>
Martin Bechev
Telerik team
 answered on 19 Nov 2020
6 answers
353 views

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

 

Martin Bechev
Telerik team
 answered on 18 Nov 2020
3 answers
1.0K+ views

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.

Aliyyah
Top achievements
Rank 1
 answered on 18 Nov 2020
1 answer
105 views
Hi All,
I would like to get support while implementing Angular Chart + a Kendo Range Slider. Please have a look to details below:

What I have so far:
- Kendo Chart Line with a Max/Min value in each axis is working fine. (read-only)
- Range Slider is working fine.

What is not working:
- Not able control (min/max values) chart when user modify the range criteria on Range Slider exclusively for the Y axis.
Only works the category Axis based on the recommendations on this answer.
https://www.telerik.com/kendo-angular-ui/components/charts/elements/selection/#using-selection-as-navigator

What I need:
- Set Chart Zoom In & Out values, based on on Range Slider output for the axis Y.
 I would like to know if is feasible to have both sliders to control the min/max axis.
Please see the attachment and let me know if you need anything else to understand better.
Thanks for your help.
Martin Bechev
Telerik team
 answered on 17 Nov 2020
1 answer
992 views

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

 


Dimitar
Telerik team
 answered on 17 Nov 2020
1 answer
476 views

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];
}

Martin Bechev
Telerik team
 answered on 16 Nov 2020
1 answer
246 views
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');
  }
}
Martin Bechev
Telerik team
 answered on 16 Nov 2020
Narrow your results
Selected tags
Tags
+? more
Top users last month
Jay
Top achievements
Rank 3
Iron
Iron
Iron
Benjamin
Top achievements
Rank 3
Bronze
Iron
Veteran
Radek
Top achievements
Rank 2
Iron
Iron
Iron
Bohdan
Top achievements
Rank 2
Iron
Iron
Richard
Top achievements
Rank 4
Bronze
Bronze
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Jay
Top achievements
Rank 3
Iron
Iron
Iron
Benjamin
Top achievements
Rank 3
Bronze
Iron
Veteran
Radek
Top achievements
Rank 2
Iron
Iron
Iron
Bohdan
Top achievements
Rank 2
Iron
Iron
Richard
Top achievements
Rank 4
Bronze
Bronze
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?