Kendo Grid

[Medhanth]

How to display % symbol for the value which was assigned from back end.

 

  { field: "CompletePer", title: "% Complete", headerAttributes: { title: '% Complete"' }, width: 80 }

 

for example CompletePer is 85 it should be 85%

i tried with template but its giving decimal values 85.00% Expected out is 85%

[Hetali]

Hi Kongal,

In order to add '%' along with the Grid row value, use either of the following two methods in the CellTemplateDirective:

1. Simply add '%' after the value:

<kendo-grid-column field="UnitsInStock" title="% Complete" width="120">
  <ng-template kendoGridCellTemplate let-dataItem>
    {{dataItem.UnitsInStock}}%
  </ng-template>
</kendo-grid-column>

2. Use Number formatting:

<kendo-grid-column field="UnitPrice" title="%" width="80">
  <ng-template kendoGridCellTemplate let-dataItem>
    {{intl.formatNumber(dataItem.UnitPrice/100, "p")}}
  </ng-template>
</kendo-grid-column>

This StackBlitz example demonstrates both the methods to add '%' after the value.

I hope this helps. Please let me know if you have any further questions pertaining to this case.

Regards,
Hetali
Progress Telerik

[Medhanth]

I am loading grid using J query and angular js, i dont think so i have option to add the above which you have mentioned.

I tried with below which below code it is working as expected but iam getting some extra space ex: 85 %. expected out put 85%

 

 { field: "CompletePer", title: "% Complete", headerAttributes: { title: '% Complete"' }, template: '# if ( CompletePer == null || CompletePer == 0 ) { ## } else {##=kendo.format("{0:p0}", CompletePer / 100)##}#', width: 100 },

[Hetali]

Hi Kongal,

Thank you for the update.

The Kendo UI Number Formatting by default adds space before the '%' sign.

In order to remove the space between the number and the '%' sign, define the following columns.template function:

$("#grid").kendoGrid({
  columns: [{
    field: "percent",
    title: "% Complete",
    template: function (dataItem) {
      if (dataItem.percent)
        return '<span>'+ (dataItem.percent+'%') +'<span>';
      else 
        return '<span>'+ dataItem.percent +'<span>';
    }
  }]
});

In this Dojo example, the '%' sign is added after the value without any space in the '% Complete' column.

If you have any further questions pertaining to columns.template property in the Kendo UI Grid, please let me know.

Regards,
Hetali
Progress Telerik