Telerik Forums
Kendo UI for Angular Forum
5 answers
814 views

Hi,

I am using kendo-upload an I am looking for the option to view the file after the user uploads it, I want to be able to click on the file name and the file will then be displayed/ downloaded.

Is there any way to get this behaviour?

 

Thank you!

Svet
Telerik team
 answered on 14 Nov 2018
1 answer
336 views

Are there any built in feature to manage a kendo ui grid column binded to an odata v4 source of type enum flags?

If not are there some samples that include this case?

I'm using kendo ui for angular (v 6).

 

Thx in advance

Svet
Telerik team
 answered on 13 Nov 2018
3 answers
533 views

The Dialog component seems to ignore the minWidth, unless I am misunderstanding what the attribute does.  When I shrink the width of my screen the dialog does not resize to minWidth and my content goes off screen.  I have attached a GIF to demonstrate.  This behavior is also present on the examples from the documentation so it is not specific to my setup.

 

Here is my code, as you can see I have the minWidth set to 400px, but the content window does not start resizing until around 100px.  How can I force the dialog to resize appropriately so the content does not go off screen?

 

<kendo-dialog title="TERMS OF USE and PRIVACY POLICY" *ngIf="agreeOpen" (close)="closeAgree()" [minWidth]="400" [width]="500">
  <p class="text-left" [innerHtml]="termsConfig.content"></p>
  <kendo-dialog-actions>
    <button kendoButton (click)="closeAgree()" primary="true">Close</button>
  </kendo-dialog-actions>
</kendo-dialog>
Dimiter Madjarov
Telerik team
 answered on 12 Nov 2018
3 answers
93 views

Is this possible?

I've got the treeview working with selected keys, but I'd like to add the above mentioned functionality. (Using Angular 6)

Thanks

salisbury
Top achievements
Rank 1
 answered on 09 Nov 2018
2 answers
76 views

I'm having issues deciphering the documentation when trying to build the following 100% stacked chart. Is this possible?

 

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

I'm trying to put an icon in a tab, but to do so in a repeatable manner for various tab strips throughout my application. I know I can do the following:

<kendo-tabstrip>
    <kendo-tabstrip-tab>
        <ng-template kendoTabTitle>
              <img src="/images/myicon.png" style="padding-right: 10px;" /> My Tab
        </ng-template>
    </kendo-tabstrip-tab>
</kendo-tabstrip>

The problem is that this is tedious and error-prone when repeated many times. I was thinking of making a directive that I could attach to the kendo-tabstrip-tab component that would override the template, but I'm unsure how to do that and my searches haven't revealed anything. Any suggestions?

Dimiter Topalov
Telerik team
 answered on 09 Nov 2018
1 answer
583 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
712 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
282 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
307 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
Narrow your results
Selected tags
Tags
+? more
Top users last month
Hiba
Top achievements
Rank 1
Iron
Iron
Rob
Top achievements
Rank 3
Bronze
Bronze
Iron
Max
Top achievements
Rank 1
Veteran
Iron
Alina
Top achievements
Rank 1
Rakhee
Top achievements
Rank 1
Iron
Iron
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Hiba
Top achievements
Rank 1
Iron
Iron
Rob
Top achievements
Rank 3
Bronze
Bronze
Iron
Max
Top achievements
Rank 1
Veteran
Iron
Alina
Top achievements
Rank 1
Rakhee
Top achievements
Rank 1
Iron
Iron
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?