Telerik Forums
Kendo UI for Angular Forum
1 answer
18 views

Is it possible to create a button with two lines of text?

 

I have a grid with a column for uniqueIDs. As these are usually 32 chars long I would like to display them over two lines within a button (the button will link to a page that displays a log of the end 2 end processing for that id). I have created a pipe to transform the given uniqueID into two lines of text. My pipe is:


export class HexSplitPipe implements PipeTransform {
  transform(value: string): string {
    // will take given sting and split into two lines
    const length = value.length;
    const halfLength = Math.floor(length / 2);
    // If the length is even, split evenly into two lines
    if (length % 2 === 0) {
      const firstHalf = value.substring(0, halfLength);
      const secondHalf = value.substring(halfLength);
      return `${firstHalf}
&#10${secondHalf}`;
    } else {
      // If the length is odd, add one more character to the first line
      const firstHalf = value.substring(0, halfLength + 1);
      const secondHalf = value.substring(halfLength + 1);
      return `${firstHalf}
&#10${secondHalf}`;
    }
  }

}

My component has the following in the uniqueID grid-column:

<kendo-grid-column field="uniqueID" title="UID" [width]="240">
        <ng-template kendoGridCellTemplate let-dataItem>
            <button kendoButton (click)="btnE2EHistoryClick(dataItem.uniqueID)"
title=
"Click to see full processing history">{{dataItem.uniqueID | hexSplit}}</button>
        </ng-template>
   

</kendo-grid-column>

If my UniqueID = 028F88D7E5D26C5CE063588E680A7E9E
If want to get:
028F88D7E5D26C5C
E063588E680A7E9E

Instead I get: 028F88D7E5D26C5C&#13;&#10;E063588E680A7E9E

 

How can I render the string over two lines in a kendo button

 

Zornitsa
Telerik team
 answered on 12 Feb 2024
0 answers
15 views

Hello,

I would like to know if this is expected behavior, if I have to possibly adjust my code, or if this is a bug.

The issue is when typing and selecting a font family or size and then selecting the left button of the color gradient or background the style will get reset to the default values for font family and style. Or, maybe this is due to the underlying ProseMirror change in node. 

 

Please see my ScreenPal for demonstration of the issue.  

https://somup.com/cZnhrjpi34

Thank you for your help.

Stephanie
Top achievements
Rank 1
 updated question on 05 Feb 2024
1 answer
18 views

Hi,

I am trying to add KendoButton at runtime using NgComponentOutlet. The button rendered successfully but I am not able to set the inner text for it. Any idea how to do that? Here is the code.

Component.html

<ng-container *ngComponentOutlet="currentButton.component; inputs: currentButton.inputs;">  
</ng-container>

 

Component.ts

  get currentButton(){
    return {
      component: ButtonComponent ,
      inputs: { size: 'large', fillMode: 'solid', themeColor: 'primary', innerText: 'Click Me' },
      module: ButtonsModule
    }
  }


The above code sets the other inputs properly and it is reflected in the UI component [e.g. themeColor], but not the innerText. Here is the screenshot.

Is there any way to achieve this?

Thank you in advance.

Martin
Telerik team
 answered on 15 Jan 2024
1 answer
134 views

Hello,

I have a button that has a tooltip.  I have a requirement to add a hyperlink inside this tooltip. When I hover the the button, this tooltip should appear with a hyperlink inside. I can click on this link to navigate to an external site like https://www.telerik.com/kendo-angular-ui

Is it possible to have a hyperlink inside a tooltip for Kendo UI for Angular?

Thank you in advance for your help.

Simeon
Telerik team
 answered on 27 Oct 2023
0 answers
137 views

Greetings

I am using the Kendo buttons and the Kendo utils, among others in our application. Recently, I was updating to later angular versions, namely from v11 to v16, as we have fallen too much behind. The packages for the Angular versions 6-11 do not have problems when building. The above packages, from angular v14-16, both the v8.2.2 and the v13.1.0 for buttons and the utils since the first have the following problem:

When I'm trying to import anything from @progress/kendo-angular-grid/utils and the button.service from @progress\kendo-angular-buttons, the IDE recognizes correctly the folder address and imports everything automatically without problems. When I'm trying to build or serve the application, though, it cannot find the packages under no circumstances. I tried to modify the path in the IDE, prefixed with 'node_modules', no result. I have discarded the node_modules folder and cleared the npm cache many times, again no result. I also uninstalled and reinstalled everything from the kendo libraries and any dependencies, again no result. 

I built a new project in angular 16, as well, where the said packages work correctly. I cannot find for any reason which dependencies or anything else is causing the problem, so I'm asking you if you have any idea why. I am attaching below the package.json in a text file to see which other packages we are using and a screenshot of the errors, as well.

Thanks in advance

devnb
Top achievements
Rank 1
 asked on 14 Jul 2023
0 answers
60 views

I want to configure a custom button for the editor toolbar as described here https://www.telerik.com/kendo-angular-ui/components/toolbar/custom-control-types/  However, the button should not always be there, depending on in which other component the editor is used. So, I wanted to approach the issue by using content projection with ng-content. I implemented the custom button and placed ng-content tag into the kendo-editor definition. However, when I try to project the custom button to the editor it does not work. The button is absent.

Below my editor implementation in an own component "my-editor".

<kendo-editor #editor
              [placeholder]="placeholder"
              [(ngModel)]="content"
              [iframe]="false"
>
  <kendo-toolbar>
    <kendo-toolbar-buttongroup>
      <kendo-toolbar-button kendoEditorBoldButton></kendo-toolbar-button>
      <kendo-toolbar-button kendoEditorItalicButton></kendo-toolbar-button>
      <kendo-toolbar-button kendoEditorUnderlineButton></kendo-toolbar-button>
    </kendo-toolbar-buttongroup>
    <ng-content></ng-content>             <!-- The place where the custom buttons should be inserted -->
  </kendo-toolbar>
</kendo-editor>

I inject the custom button like that

<my-editor>
  <custom-button></custom-button>
</my-editor>

Ewgenij
Top achievements
Rank 1
Veteran
 updated question on 07 Jul 2023
1 answer
67 views

Hi guys,
I have used "kendo-toolbar-button" for my toolbar button but recently I got a warning in the console to replace [icon] with [svgIcon].  As I have many pages to modify, I would appreciate it if anybody let me know if there is another method to prevent this modification.

Thanks
Behnam

 <kendo-toolbar-button
                [icon]="'star'"
                [title]="'PROCESSES.FLOWCHART.REMOVE_FAVOURITE' | translate"
                    *ngIf="flowchart?.IsUserFavorite && flowchart?.IsLatest && !flowchart?.IsVisibilityRestricted"
                    (click)="removeFavourite()"
                >
               

</kendo-toolbar-button>

 

Warning message

Kendo UI for Angular: Icon type is set to 'svg', but only font icon name is provided. The "checkbox-checked" font icon will be rendered instead.
progress-kendo-angular-icons.mjs:407 Kendo UI for Angular: Icon type is set to 'svg', but only font icon name is provided. The "printer" font icon will be rendered instead.
progress-kendo-angular-icons.mjs:407 Kendo UI for Angular: Icon type is set to 'svg', but only font icon name is provided. The "star" font icon will be rendered instead.
progress-kendo-angular-icons.mjs:407 Kendo UI for Angular: Icon type is set to 'svg', but only font icon name is provided. The "menu" font icon will be rendered instead.

Hetali
Telerik team
 answered on 06 Jul 2023
0 answers
29 views

Hi,

I have the kendo ui angular button in my form. Due to multiple languages and options within the form, button text is sometimes too big to fit, so we are using ellipsis. But we still want user to be able to see full text when it brings mouse over it, so we are using title attribute to display full text.

Naturally, depending on various parameters button is disabled.

However, if the button is disabled, title attribute is ignored and not shown. 

Is this a bug or it is intentional behavior? (regular html button without kendo displays it normally).

Thank yo and regards,

Vedad

 


Vedad
Top achievements
Rank 2
Bronze
Bronze
Veteran
 asked on 28 Jun 2023
1 answer
66 views

Hi, I'm trying to use `kendoButton` directive as a hostDirectives, but only support standalone directives., any plan to update kendo directives to standalone ? 

@Component({
selector: 'wrapper-button',
standalone: true,
hostDirectives: [
kendoButton,
//other directives
],
template: `
<button></button> `,
imports: [
ButtonModule
]
})
Yanmario
Telerik team
 answered on 01 Jun 2023
1 answer
26 views

Hi, 

I am trying to use toggleable button in my angular app to allow user to display some data automatically (or not).

My first question is, if user sets that he wants it, I save this in my database, and next time when user returns, I want to set the state of the button to be toggled. However, I can't find any property or anything to do this.

Is it possible at all and how if it is? :)

Second thing that I noticed is that, when I toggle button, it gets its style correctly, but when I click further, it reverts to its visual as if it wasn't toggled. This is my button setup..and I use the button as part of kendo ui angular app bar.

<button kendoButton [toggleable]="true" (selectedChange)="showAutoInfo($event)" fillMode="clear" rounded="full"
size="small">
<kendo-icon name="info"></kendo-icon>
</button>

 

Thank you.

Regards,

Vedad


Yanmario
Telerik team
 answered on 21 Mar 2023
Top users last month
Dominik
Top achievements
Rank 1
Giuliano
Top achievements
Rank 1
Dominic
Top achievements
Rank 1
Glendys
Top achievements
Rank 1
Iron
NoobMaster
Top achievements
Rank 2
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?