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} 
${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} 
${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>
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 E063588E680A7E9E
How can I render the string over two lines in a kendo button