Questions on Kendo UI for Angular Forum

1 answer

554 views

Dropdown Button

Is it possible to add a divider/header within the data array?

Something like.

Item1

-----------------

Header Title

Item2

Button

answered on 10 May 2019

2 answers

2.6K+ views

[Solved] How to globally disabled scrolling when a modal is open

Hi,

When opening a <kendo-dialog> the background is still scrolling.

The work around I found is to set the <body> with an overflow:hidden.

But how to automate this generally for all my modals?

Since this is a modal, I think the kendo-dialog should be disabling the body scrolling.

Any workaround to fix this?

Thanks.

Dialog

answered on 08 May 2019

1 answer

194 views

Example of using selectBy (context: { dataItem: any; index: string; }) => any

Is there an example somewhere of using the selectBy so that the selectionChange event handler is passed a dataItem (or context.dataItem)? I have seen this capability alluded to in some articles, but I have not been able to find examples or get it to work for me. Thank you.

TreeView

answered on 08 May 2019

2 answers

474 views

[Solved] Formatting series item notes

I've got a scatter line chart that I want to add data item notes that will be built from fields in the data item. Currently I'm able to use a template to format tooltips dynamically (see code below). Is there a similar way of accomplishing this with notes? The only samples I can see use the noteTextField on the kendo-chart-series-item which implies adding an additional field on source data items, generating the content for each item in code, and not having the ability to format the contents. I am I missing something?

<kendo-chart-series-item-tooltip>

<ng-template let-dataItem="dataItem">

<span style="font-weight: bold">{{dataItem.productName}}</span> - Total Count

<span style="font-weight: bold">{{dataItem.totalCount}}</span>

<span style="font-weight: bold">{{dataItem.date | amDateFormat:'LL' }}</span>

</ng-template><b

</kendo-chart-series-item-tooltip>

Charts

answered on 07 May 2019

1 answer

2.7K+ views

Set kendo-chart-series-item color

How could I change default color for a bar/column based on its value?

I was thinking that I could use "color" property of the kendo-chart-series-item (https://www.telerik.com/kendo-angular-ui/components/charts/api/SeriesItemComponent/)

"<kendo-chart-series-item type="column" [data]="data?.ColumnData?.slice(1)" axis="secondAxis" name="Packs" [color]="checkColor($point)">"

public checkColor(point) {
console.log("Point:", point);
}

However when code runs "point" is undefined.

General Discussions

answered on 06 May 2019

13 answers

2.0K+ views

PDF export not working

Hello,

I am using PDF export for my grids as the typical way; i.e., having a button with kendoGridPDFCommand directive applied, and a kendo-grid-pdf component inside the grid. This was working nicely with no problem. I had not tested Export To PDF for a while and now I see it is not working; when I press the button the grid is stuck in loading state (i.e., showing loading icon).

The only thing (related to Export PDF) that has changed during this time is that kendo packages have been updated. So, my suspicion is that it has been broken because of some inconsistencies in kendo packages. Here is the list of kendo packages I am using:

01.+-- @progress/kendo-angular-buttons@4.3.3

02.+-- @progress/kendo-angular-dateinputs@3.5.4

03.+-- @progress/kendo-angular-dropdowns@3.4.2

04.+-- @progress/kendo-angular-excel-export@2.3.0

05.+-- @progress/kendo-angular-grid@3.14.0

06.+-- @progress/kendo-angular-inputs@4.2.1

07.+-- @progress/kendo-angular-intl@1.7.0

08.+-- @progress/kendo-angular-l10n@1.4.0

09.+-- @progress/kendo-angular-popup@2.5.0

10.+-- @progress/kendo-data-query@1.5.0

11.+-- @progress/kendo-drawing@1.5.8

12.+-- @progress/kendo-theme-bootstrap@3.3.1

13.+-- @progress/kendo-theme-default@3.5.1

Best regards,

Mojtaba

Grid

answered on 06 May 2019

2 answers

2.2K+ views

[Solved] Kendo UI Angular test

We have been working on a Angular 7 Kendo UI application and things are going well. The application compiles and runs fine.

We are now getting into Angular testing with the default Jasmine/Karma. First 'ng test' showed pages of issues. So I decided to start from scratch with a new Angular app and slowly copy over the functionality.

I modified the app.component.ts and its html which includes kendo-splitter and its kendo-splitter-pane

<kendo-splitter orientation="horizontal" kendoRippleContainer>

<kendo-splitter-pane *ngIf="showNav && !hideNav" [collapsible]="false" [resizable]="false" size="180px">

<div class="fordav-logo"></div>

<kendo-panelbar [selectable]="true" [expandMode]="single">

<kendo-panelbar-item *ngFor="let route of panelBarArray"

...... Removed for brevity

>

</kendo-panelbar-item>

</kendo-panelbar>

</kendo-splitter-pane>

<kendo-splitter-pane>

<kendo-splitter orientation="vertical">

<kendo-splitter-pane *ngIf="showNav" [scrollable]="false" [collapsible]="false" [resizable]="false" size="52px">

...... Removed for brevity

</kendo-splitter-pane>

<kendo-splitter-pane>

<router-outlet></router-outlet>

</kendo-splitter-pane>

</kendo-splitter>

</kendo-splitter-pane>

</kendo-splitter>

The output of Karma v4.1.0

Failed: Template parse errors:

Can't bind to 'collapsible' since it isn't a known property of 'kendo-splitter-pane'.

1. If 'kendo-splitter-pane' is an Angular component and it has 'collapsible' input, then verify that it is part of this module.

2. If 'kendo-splitter-pane' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.

3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("orientation="horizontal" kendoRippleContainer>

<kendo-splitter-pane *ngIf="showNav && !hideNav" [ERROR ->][collapsible]="false" [resizable]="false" size="180px">

<div class="fordav-logo"></div>

"): ng:///DynamicTestModule/AppComponent.html@1:53

Can't bind to 'resizable' since it isn't a known property of 'kendo-splitter-pane'.

1. If 'kendo-splitter-pane' is an Angular component and it has 'resizable' input, then verify that it is part of this module.

2. If 'kendo-splitter-pane' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.

3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("l" kendoRippleContainer>

<kendo-splitter-pane *ngIf="showNav && !hideNav" [collapsible]="false" [ERROR ->][resizable]="false" size="180px">

<div class="fordav-logo"></div>

<kendo-panelbar [se"): ng:///DynamicTestModule/AppComponent.html@1:75

Can't bind to 'selectable' since it isn't a known property of 'kendo-panelbar'.

1. If 'kendo-panelbar' is an Angular component and it has 'selectable' input, then verify that it is part of this module.

2. If 'kendo-panelbar' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.

3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("" [resizable]="false" size="180px">

<div class="fordav-logo"></div>

<kendo-panelbar [ERROR ->][selectable]="true" [expandMode]="single">

<kendo-panelbar-item *ngFor="let route of pane"): ng:///DynamicTestModule/AppComponent.html@3:24

Can't bind to 'expandMode' since it isn't a known property of 'kendo-panelbar'.

1. If 'kendo-panelbar' is an Angular component and it has 'expandMode' input, then verify that it is part of this module.

2. If 'kendo-panelbar' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.

3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("" size="180px">

<div class="fordav-logo"></div>

<kendo-panelbar [selectable]="true" [ERROR ->][expandMode]="single">

<kendo-panelbar-item *ngFor="let route of panelBarArray"

"): ng:///DynamicTestModule/AppComponent.html@3:44

Can't bind to 'selected' since it isn't a known property of 'kendo-panelbar-item'.

1. If 'kendo-panelbar-item' is an Angular component and it has 'selected' input, then verify that it is part of this module.

2. If 'kendo-panelbar-item' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.

3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("id]="route.path"

[title]="route.data.title ? route.data.title : route.path"

[ERROR ->][selected]="'/' + route.path == selectedId"

[routerLink]="route.children?null:route.path""): ng:///DynamicTestModule/AppComponent.html@7:12

Can't bind to 'expanded' since it isn't a known property of 'kendo-panelbar-item'.

1. If 'kendo-panelbar-item' is an Angular component and it has 'expanded' input, then verify that it is part of this module.

2. If 'kendo-panelbar-item' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.

3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("' + route.path == selectedId"

[routerLink]="route.children?null:route.path"

[ERROR ->][expanded]="'/' + route.path == selectedParent"

(click)="itemClick(route.children?null:ro"): ng:///DynamicTestModule/AppComponent.html@9:12

And many more lines.

Do you have advice on proceeding with testing on components that include Kendo UI elements?

Do you have documentation on Angular testing for Kendo UI Angular usage?

General Discussions

answered on 06 May 2019

1 answer

124 views

Vnext Angular Demo Links

I know there is an Angular Demo link here: https://www.telerik.com/kendo-angular-ui/components/

But is there a vnext demo site for Angular Components?

https://www.telerik.com/kendo-angular-ui/components/vnext ?

General Discussions

answered on 02 May 2019

1 answer

296 views

Convert Filters to Url Parameters

Hello, I have looked everywhere, but I have what I feel is a pretty simple need. I have a grid, that needs to filter by a few different things, however, I am working with an API that has specific parameters.

So my question is, how can I convert the filters to a querystring or path parameters?

Grid

answered on 02 May 2019

4 answers

1.0K+ views

[Solved] Chart Category Axis Item labels Position

Hi

I have a stacked bar chart that I want to have the Chart Category Axis Item labels positioned to right.

By using the position attribute which of type AxisLabelsPosition ( 'start' | 'end' | 'onAxis' | ''), I can place the columns to the right of the series bar.

However, in my sample

https://stackblitz.com/edit/angular-hmqp9n?file=app/app.component.ts

It appears as though only 2 columns can appear to the right, the other column gets wrapped to the 'start' of the category axis

Any ideas how to get 3 columns to the right of the series bar ?

Thanks

Charts