Multiline button text

[MIDAS]

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]

Hi,

Thank you for the provided code snippet.

What I am noticing is that the HexSplitPipe returns a string, which means that when passed as content for the Button component, it will be treated as text. Therefore, the respective Unicode characters used for line breaks will not be recognized as such.

In order to overcome this issue, I would suggest using the newline character - '\n', combined with 'white-space: pre-line' CSS declaration for the line break to take effect:

return `${firstHalf}\n${secondHalf}`;

.multiline-btn {
    white-space: pre-line
}

Below you can observe a StackBlitz example implementing your approach, modified with the proposed suggestions:

• https://stackblitz.com/edit/angular-qj8vgg

Hope that the provided information is helpful. Let me know in case you have any further questions.

Regards,
Zornitsa
Progress Telerik

[MIDAS]

Many Thanks.... This worked perfectly