Telerik Forums
Kendo UI for Angular Forum
1 answer
526 views

Hello,
Do we have any marquee ui control based on telerik (for angular)?

Thank in advance :)

Vamshi

Dimiter Topalov
Telerik team
 answered on 09 Nov 2018
7 answers
663 views

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.

 

 

 

 

Jennifer
Top achievements
Rank 1
 answered on 08 Nov 2018
3 answers
253 views

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

 

 

David
Top achievements
Rank 1
 answered on 08 Nov 2018
3 answers
268 views

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

 

  • In the HTML-Template two additional <spans> for the extra buttons
<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>

  • An extra property
/**
 * Specifies whether the **Up** and **Down** spin buttons renered left and right of the input - spinners must be true.
 */
@Input() public verticalSpinners: boolean = false;

 

  • A CSS class (I think you would adopt it to your structure)
.k-icon-vertical {
    margin-top: 10px;
    padding-left: 1px;
}

 

Best regards

JĂĽrgen

Dimiter Topalov
Telerik team
 answered on 08 Nov 2018
7 answers
663 views

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?

Dimiter Topalov
Telerik team
 answered on 08 Nov 2018
1 answer
1.3K+ views

In JQuery, we have:

"editable": {
    "createAt": "bottom"
},

 

Do we have something similar in Angular?

Dimiter Topalov
Telerik team
 answered on 08 Nov 2018
1 answer
812 views

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.

Svet
Telerik team
 answered on 08 Nov 2018
1 answer
8.6K+ views

Are there example out there on how single or double row click event work?

 

Thanks,

Bryian Tan

Dimiter Topalov
Telerik team
 answered on 07 Nov 2018
2 answers
2.0K+ views

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.

Svet
Telerik team
 answered on 06 Nov 2018
9 answers
1.5K+ views

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.

Dimiter Topalov
Telerik team
 answered on 06 Nov 2018
Narrow your results
Selected tags
Tags
+? more
Top users last month
Rob
Top achievements
Rank 3
Bronze
Bronze
Iron
Sergii
Top achievements
Rank 1
Iron
Iron
Dedalus
Top achievements
Rank 1
Iron
Iron
Lan
Top achievements
Rank 1
Iron
Doug
Top achievements
Rank 1
Want to show your ninja superpower to fellow developers?
Top users last month
Rob
Top achievements
Rank 3
Bronze
Bronze
Iron
Sergii
Top achievements
Rank 1
Iron
Iron
Dedalus
Top achievements
Rank 1
Iron
Iron
Lan
Top achievements
Rank 1
Iron
Doug
Top achievements
Rank 1
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?