Hello,
Do we have any marquee ui control based on telerik (for angular)?
Thank in advance :)
Vamshi

I was trying to follow the provided example for using the treeview with flat data. However, I keep getting this error "this.originalData.slice is not a function
at FlatDataBindingDirective.set [as nodes] '
My data is flat and remote (the example was local data). Here is my code in the component:
@Component({
selector: 'app-treeview',
styles: [`
:host {
height: 600px;
overflow: auto;
}
`],
template: `
<kendo-treeview
[nodes]="myitem"
textField="Text"
kendoTreeViewExpandable
kendoTreeViewFlatDataBinding
idField="ItemID"
parentIdField="ParentId">
</kendo-treeview>
`
})
export class TestTreeComponent implements OnInit {
public myitems: Observable<any[]>;
constructor(private myitemService: myItemsService) { }
public ngOnInit(): void {
this.myitems= this.myitemService.getMyItemss();
}
And in the service:
getMyItems(): Observable<any> {
return this.http.get(this.globalService.getURLRoot() + this.urlRoute)
.map( res => {
this.data = res;
return this.data;
});
}
I have also tried removing the Observables with the same result. I know the data can be retrieved because if I change "[nodes]="myitem"" to "[nodes]="myitem | async", all the items are returned with no hierarchy structure.
thank you.
Hi
I'm trying to upgrade my progress controls to 2018 R3 from 2018 R1. I am using Angular 5.2.3
The issue is the LocalizationService isn’t getting injected into the tootltip directive.
So this code is failing since localizationService is null
this.dynamicRTLSubscription =
this.localizationService.changes.subscribe(function(e) {
return t.direction = e.rtl ? "rtl" : "ltr"
})
I noticed on the tooltip samples use Angular 6, so Im not sure if this could be a version issue. The code worked fine with 2018 R1
Currently I am not immediately planning to upgrade to Angular 6 as I need to make several code modifications for the Rxjs library updates
Any suggestions would be appreciated, thanks
Hello
In this component I miss vertical spinners, so I extended your implementation
It would be great if you could adopt my implementation in your branch, so I don't have to maintain a private package for each new release of the kendo-angular-inputs package
Vertical spinners are much more useable when it comes to mobile devices, and the changes are minimal
<ng-container kendoNumericTextBoxLocalizedMessages i18n-increment="kendo.numerictextbox.increment|The title for the **Increment** button in the NumericTextBox" increment="Increase value" i18n-decrement="kendo.numerictextbox.decrement|The title for the **Decrement** button in the NumericTextBox" decrement="Decrease value"></ng-container><span class="k-numeric-wrap" [class.k-state-disabled]="disabled" [class.k-state-focused]="focused"> <span class="k-select" *ngIf="spinners && verticalSpinners" [kendoEventsOutsideAngular]="{ mouseup: releaseArrow, mouseleave: releaseArrow }"> <span (mousedown)="arrowPress(ArrowDirection.Down, $event)" [attr.aria-label]="decrementTitle" [title]="decrementTitle" [class.k-state-active]="arrowDirection === ArrowDirection.Down" class="k-link" > <i class="fa fa-minus k-icon-vertical"></i> </span> </span> <input role="spinbutton" class="k-input" autocomplete="off" autocorrect="off" [id]="focusableId" [attr.aria-valuemin]="min" [attr.aria-valuemax]="max" [attr.aria-valuenow]="value" [attr.title]="title" [attr.placeholder]="placeholder" [tabindex]="tabIndex" [class.k-formatted-value]="!focused" [disabled]="disabled" [readonly]="readonly" (focus)="handleFocus()" (blur)="handleBlur()" [kendoEventsOutsideAngular]="{ dragenter: handleDragEnter, keydown: handleKeyDown, input: handleInput }" #numericInput /> <span class="k-select" *ngIf="spinners && !verticalSpinners" [kendoEventsOutsideAngular]="{ mouseup: releaseArrow, mouseleave: releaseArrow }"> <span (mousedown)="arrowPress(ArrowDirection.Up, $event)" [attr.aria-label]="incrementTitle" [title]="incrementTitle" [class.k-state-active]="arrowDirection === ArrowDirection.Up" class="k-link k-link-increase" > <span class="k-icon k-i-arrow-n"></span> </span> <span (mousedown)="arrowPress(ArrowDirection.Down, $event)" [attr.aria-label]="decrementTitle" [title]="decrementTitle" [class.k-state-active]="arrowDirection === ArrowDirection.Down" class="k-link k-link-decrease" > <span class="k-icon k-i-arrow-s"></span> </span> </span> <span class="k-select" *ngIf="spinners && verticalSpinners" [kendoEventsOutsideAngular]="{ mouseup: releaseArrow, mouseleave: releaseArrow }"> <span (mousedown)="arrowPress(ArrowDirection.Up, $event)" [attr.aria-label]="incrementTitle" [title]="incrementTitle" [class.k-state-active]="arrowDirection === ArrowDirection.Up" class="k-link" > <i class="fa fa-plus k-icon-vertical"></i> </span> </span></span>/** * Specifies whether the **Up** and **Down** spin buttons renered left and right of the input - spinners must be true. */@Input() public verticalSpinners: boolean = false;
.k-icon-vertical { margin-top: 10px; padding-left: 1px;}
Best regards
JĂĽrgen

First I'd like to say that I was working with the PDF Export and Drawing API's to build a quote/invoice with repeating header section and complex cells for specific parts, prices, etc. and the automatic paging and repeatHeaders worked out wonderfully.
One thing I'm still trying to figure out is how to add something like the {{pageCount}} of {{pageTotal}} without having a grid involved. Is there anything in the API's that I can use to achieve this effect and if not is there a way I can perhaps interact with the repeat header to hook the Javascript to it that I'd need to make this happen?

In JQuery, we have:
"editable": { "createAt": "bottom"},
Do we have something similar in Angular?

I have a treeview working with multiple columns but I need the buttons in those columns to be aligned. The jquery example found here: https://www.telerik.com/forums/treeview-with-columns-in-node
was helpful but it relies on the data containing the row level information. I don't want to have to add and maintain that in my datastructure. Is there another way to do it.
Here is my code:
@Component({
selector: 'app-treeview',
template: `
<kendo-treeview
[nodes]="treeNodes"
[isExpanded]=""
textField="Text"
kendoTreeViewExpandable
kendoTreeViewFlatDataBinding
idField="Ordinal"
parentIdField="OrderNumber">
<ng-template kendoTreeViewNodeTemplate let-dataItem>
<div style="width:1500px;">
<div style="display: inline-block;width:40%">
{{dataItem.Text}}
</div>
<div style="display:inline; width:30%;">
<button class="btn btn-primary">{{dataItem.NRName}}</button>
</div>
<div style="display:inline; width:30%; ">
<button class="btn btn-primary">{{dataItem.RECName}}</button>
</div>
</div>
</ng-template>
</kendo-treeview>
`
})
Any suggestions are appreciated.

Are there example out there on how single or double row click event work?
Thanks,
Bryian Tan

Hi,
I am having with editing grid cell.
The issue is that once the cell is clicked, I can only type one character then the cursor disappears (lose focus on the cell I am typing). All other commands like add, remove, cancel works normally (especially the add when a new row is added for editing and saved).
My idea is to allow users to add/create/edit/remove data to the grid and then submit the grid data afterward.
I create a small project on GitHub to illustrate this: Could you help me point out the issue?
Thanks.

To date for most of my maintenance tables I'm currently using a variant of the following:
https://www.telerik.com/kendo-angular-ui/components/grid/editing/editing-reactive-forms/
It's working quite well as far as the add/edit/delete functions however I have situations often where I'm implementing the kendoGridCellTemplate to replace a GUID with the name its associated with (assuming the given column has a dropdown list for editing). I'd like to be able to provide the end user with the ability to filter on the name values and, if possible, sort alphabetically on them.
I did see that there was a tutorial for reusable filters at the bottom of this page:
https://www.telerik.com/kendo-angular-ui/components/grid/filtering/built-in-template/
The kendo-multiselect looks like it could suffice for my needs but I notice that the demos for the filterChange all work from the premise that the grid is being supplied by public gridData: any[]. The pattern I'm using is public view: Observable<GridDataResult> which filterBy doesn't seem to take.
Do you have any suggestions on how I could integrate this approach with a grid based in 'view | async' data? I've thought about using the this.xservice.map(data => process(data.filter(x), this gridstate)) but I'm not sure how I'd phrase the connection between the filterService and the data.filter option. Also assuming I may have more than one column where I need to perform data substitutions this approach could get tricky.
