Telerik Forums
Kendo UI for Angular Forum
1 answer
150 views

Hi,

it is possible to find out the item that currently selected or set active by user without drag(event or index).
In my case, i would like to update a neighboring component when the user click an item in the sortable.
Thanks in advance for your answer

Svet
Telerik team
 answered on 20 Nov 2020
3 answers
405 views

Hi,

I just started a news project (angular). I want to apply a custom material dark theme using SCSS. I :

- Created a base dark indigo
- Installed base theme by `yarn add @progress/kendo-theme-material`
- Copied and renamed variables.scss as dark.scss in my themes folder
- Added Google fonts to index.html
- Edited my styles.scss file :

`

/* You can add global styles to this file, and also import other style files */

@import "~@progress/kendo-theme-material/dist/all.scss";
@import 'themes/dark.scss';

body {
  font-family: Roboto, sans-serif;
}

`

Fonts are ok. I can see styles applied on controls according to material design. But dark theme is not applied. Background is white. Any idea ?

Thanks,

Martin Bechev
Telerik team
 answered on 20 Nov 2020
1 answer
523 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
512 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
128 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
290 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
422 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.1K+ 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
129 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
1.1K+ 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
Narrow your results
Selected tags
Tags
+? more
Top users last month
Jake
Top achievements
Rank 1
RBarnes
Top achievements
Rank 1
Iron
Iron
Rami
Top achievements
Rank 1
Iron
Veteran
Nathan
Top achievements
Rank 1
Kumeri
Top achievements
Rank 1
Iron
Veteran
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Jake
Top achievements
Rank 1
RBarnes
Top achievements
Rank 1
Iron
Iron
Rami
Top achievements
Rank 1
Iron
Veteran
Nathan
Top achievements
Rank 1
Kumeri
Top achievements
Rank 1
Iron
Veteran
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?