Format phone number from string in grid column

3 posts, 1 answers
  1. Erik
    Erik avatar
    52 posts
    Member since:
    Jan 2011

    Posted 17 Dec 2018 Link to this post

    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 "(555) 444-1212" 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

     

  2. Answer
    Rick
    Admin
    Rick avatar
    14 posts

    Posted 17 Dec 2018 Link to this post

    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
    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
  3. Erik
    Erik avatar
    52 posts
    Member since:
    Jan 2011

    Posted 18 Dec 2018 Link to this post

    This is awesome.  Thanks a lot Rick!!!
Back to Top