Format phone number from string in grid column

[Erik]

I've tried a bunch of stuff to make this work and haven't been successful.  I have a 10-digit string coming back from the database (e.g. "5554441212") and would like it shown in a grid column as "[phone]" in the simplest way possible.  It doesn't need to be editable -- just displayed cleanly.

I've got a sample runnable (doesn't work fully) in StackBlitz.

https://stackblitz.com/edit/angular-iu5hcl

 

Any guidance appreciated.

-Erik

 

[Rick]

Hello Erik,

The general ability to format a string as a phone-number is not specifically built into the Grid component in the Kendo UI for Angular package. We provide the ability to use a template in the Grid cell, and from within that template the value can be transformed as needed. The "Angular way" of transforming values would be to use a pipe. Since a phone number pipe is not included in the Angular API, a custom pipe can be made to handle this task.

I have forked your StackBlitz example, and provided a custom pipe based on the information in this StackOverflow article: Angular2 {pipes} - How to format a phone number?

StackBlitz Example: https://stackblitz.com/edit/angular-iu5hcl-7jdpkk

Additional Information:
Kendo UI for Angular: Grid: Cell Templates


Regards,
Rick
Progress Telerik

[Erik]

This is awesome.  Thanks a lot Rick!!!