How to use Angular pipes in JqxGrid's cell renderer

Question

I am using JqxGrid inside Angular 5, i have some fields in grid which are numbers, and i want to format them with number pipe of angular. but the problem is that jqxGrid is not considering pipe as angular feature and printing it as it is. here is how i am trying to achieve this using cell renderer

    formatNumber = (row, columnfield, value, defaulthtml, columnproperties,rowdata) =>
  { 
      return '<span style="margin: 4px; float: ' + columnproperties.cellsalign + ';">${{' + value + ' | number }}</span>'; 
  };

for example if value is 123456, i am getting ${{123456 |number}} what i want to get is $123,456. i have defined my columns and source in component.ts file.

You cannot access pipe using "|" when not in Angular's scope. You have to import and call pipe's transform method directly in you component. Check this answer: https://stackoverflow.com/a/35152297/1335825 — soachishti, Jul 13 '18 at 10:43

score 1 · Answer 1 · answered Jul 17 '18 at 18:39

CodingFreak's solution probably works, and I recommend using it, but here is another solution if you're adamant about using the Angular Pipe directive.

In your component.ts file, inject the CurrencyPipe service:

constructor(public cp: CurrencyPipe) { }

Then, in your app.module.ts or component.ts file, be sure to include the CurrencyPipe service in your providers:

providers: [ CurrencyPipe ]

Lastly, you can use the pipe as follows:

formatNumber = (row, columnfield, value, defaulthtml, columnproperties,rowdata) =>
{ 
    return '<span style="margin: 4px; float: ' + columnproperties.cellsalign + ';">$' + this.cp.transform(value, "USD") + '</span>'; 
};

Go to the Angular Documentation for more options.

score 0 · Accepted Answer · answered Jul 17 '18 at 17:29

cellsrenderer function can only return the HTML code hence any angular code wouldn't work when you return that through this function.

Instead you can use the cellsformat property and assign it to the column for which you are having that numeric data.

Refer to the official documentation here:jqxGrid Cells Formatting

Define your columns as below to get the expected output as "$123,456":

let columns: any[] = [];
columns = $.merge(columns,[
     // datafield is the name of the property from which you are assigning value from your data.  
     // text is the name of the column in the grid.
     // cellsformat:"c" indicates currency numbers. 
     {text:"Number Column", datafield:"price", cellsrenderer: this.formatnumber, cellsformat:"c"} 
]);

JSFiddle: Click Here

How to use Angular pipes in JqxGrid's cell renderer

2 Answers2