0

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

Output 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.

Rasik
  • 1,961
  • 3
  • 35
  • 72

1 Answers1

0
: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

tony19
  • 125,647
  • 18
  • 229
  • 307
Phil
  • 157,677
  • 23
  • 242
  • 245
  • i have tried the solution, but getting the error, `Property or method "kendo" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property...` – Rasik Feb 07 '19 at 04:04
  • Well, you haven't shown your `data` or `computed` properties so how would I know. Try just `:template="phone | phoneFormat"` (see updated answer) – Phil Feb 07 '19 at 04:05
  • `phone` is not my custom `data` or computed properties it the properties that directly bind to the `kendo-grid-column` from the `api call`. May be i need to return `phone` from some `methods`. and it will filter properly. – Rasik Feb 07 '19 at 04:14