Kendo-vue-ui wrapper kendo-grid-column format phone number in grid

Question

I have been trying to use vuejs filter in kendo-grid-column

<kendo-grid-column field="phone" title="Phone" :template="`kendo.toString(phone) | phoneformat`" width="10%"></kendo-grid-column>

Rather being displayed as formatted string the result is displayed as

Filter I am using as:

const filters = [
  {
    name: "phoneformat",
    execute: value => {
        debugger
      var piece1 = phoneNumber.substring(0, 3); //123
      var piece2 = phoneNumber.substring(3, 6); //456
      var piece3 = phoneNumber.substring(6); //7890

      //should return (123)456-7890
      return kendo.format("({0})-{1}-{2}", piece1, piece2, piece3);
    }
  }
];

export default filters;

I have been registering the filter globally as:

import filters from './shared/extension'

filters.forEach(f => {
   Vue.filter(f.name, f.execute)
})

Help me what i am missing here.

Answer 1

:template="`kendo.toString(phone) | phoneformat`"

You have backticks around the :template attribute value, meaning you're binding the template prop to a JavaScript template literal which evaluates to the literal string

"kendo.toString(phone) | phoneformat"

The solution is to simply bind an expression instead

<kendo-grid-column :template="phone | phoneformat" ...

See

• https://v2.vuejs.org/v2/guide/filters.html
• https://v2.vuejs.org/v2/guide/components-props.html#Passing-Static-or-Dynamic-Props