or
2 answers
2.5K+ views
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.
1 answer
141 views
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.
Dimiter Topalov
Telerik team
answered
on
08 May 2019
2 answers
414 views
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>1 answer
2.6K+ views
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.
David
Top achievements
Rank 1
Rank 1
answered
on
06 May 2019
13 answers
1.8K+ views
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.302.+-- @progress/kendo-angular-dateinputs@3.5.403.+-- @progress/kendo-angular-dropdowns@3.4.204.+-- @progress/kendo-angular-excel-export@2.3.005.+-- @progress/kendo-angular-grid@3.14.006.+-- @progress/kendo-angular-inputs@4.2.107.+-- @progress/kendo-angular-intl@1.7.008.+-- @progress/kendo-angular-l10n@1.4.009.+-- @progress/kendo-angular-popup@2.5.010.+-- @progress/kendo-data-query@1.5.011.+-- @progress/kendo-drawing@1.5.812.+-- @progress/kendo-theme-bootstrap@3.3.113.+-- @progress/kendo-theme-default@3.5.1
Best regards,
Mojtaba
Daniel
Telerik team
answered
on
06 May 2019
2 answers
2.2K+ views
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-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>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:75Can'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:24Can'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"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:12Can'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:12And 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?
Svet
Telerik team
answered
on
06 May 2019
1 answer
98 views
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 ?
Svet
Telerik team
answered
on
02 May 2019
1 answer
258 views
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?
Svet
Telerik team
answered
on
02 May 2019
4 answers
986 views
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
3 answers
1.1K+ views
I am working on a reactive form that uses the combobox component as an autocomplete to dynamically search for the values that the user is typing into it. We need to use the combobox instead of the actual autocomplete component because we need the value to be the entire underlying object that the user selects.
This form also needs to pre-populate some data given to the component. I accomplish this using FormArrays/FormGroups and binding the combobox component to the value of the form control via the formControlName attribute. The problem I run into though is that when the combobox is bound to the formControl values, the text in the field that is bound to textField is not displayed.
My understanding is that since the objects I'm initializing the form with are not in the data list (i.e. my search results) they won't be displayed. I'd rather like to avoid merging the two lists together as that destroys the separation of concerns between something dynamic (the search results) and the static initial values. I'd also like to not have those initial values pop up as search results since they are already in the form.
I've created a stackblitz that demonstrates my problem. https://stackblitz.com/edit/angular-cyaiax You can see by looking in the console that the initial form state is valid and pre-populated with the values supplied but they aren't displayed. Additionally if you "search" by typing in a combobox and selecting a value it will update the form appropriately and display the text.
Is there a way to make the combobox display the pre-populated values of the formControl it's bound to?
Dimitar
Telerik team
answered
on
30 Apr 2019
