How to format percent in column

[Danyelle]

I have a column called result, the value is a decimal. So my actual value would be 97.00 which appears as 97 on the gird. That is fine, but I want to be able to display it as 97% on the grid. When I try to format it to use the % sign it appears as 9700%.

9700% should show as 97%

Code:

<ejs-grid id="Grid" dataSource="@Model.TestHistory" height="510px" allowPaging="true" allowSorting="true" allowFiltering="true" allowGrouping="true" allowReordering="true" allowResizing="false" allowMultiSorting="true" allowPdfExport="true" allowExcelExport="true" toolbarClick="toolbarClick" toolbar="@(new List<string>() {"Print", "PdfExport", "ExcelExport", "Search"})">

            <e-grid-filterSettings type="Excel"></e-grid-filterSettings>

            <e-grid-pagesettings pageCount="6" pageSize="16" pageSizes="@(new string[] {"5", "10", "16", "20", "All"})"></e-grid-pagesettings>

            <e-grid-sortsettings columns="cols"></e-grid-sortsettings>

            <e-grid-columns>

                ...

                <e-grid-column field="Result" headerText="Results" format= "#%"></e-grid-column>

                <e-grid-column field="Passed" headerText="Status" valueAccessor="valueAccessor" filter="@(new {itemTemplate = "#itemTemplate"})"></e-grid-column>

            </e-grid-columns>

        </ejs-grid>

[Manivel Sellamuthu]

Hi Danyelle, 

Greetings from Syncfusion support. 

By default while applying the percentage format the number values will be multiplied by 100. So to display the value as 97% the actual value should be as “0.97”.  

However you can use valueAccessor of the Grid column for your requirement which allows custom value formatting. Please refer the below code example, sample and documentation link for  more information. 

<div class="control-section"> 

    <ejs-grid #grid [dataSource]='data' allowPaging='true' [pageSettings]='pageSettings' [allowExcelExport]='true'> 

        <e-columns> 

            <e-column field='OrderID' headerText='Order ID' width='120' textAlign='Right' isPrimaryKey='true'></e-column> 

            <e-column field='Percent' headerText='Percentage' [valueAccessor]='valueAccess' width='120' textAlign='Right'></e-column>             

            <e-column field='ShipCountry' headerText='Ship Country' width='150'></e-column> 

        </e-columns> 

    </ejs-grid> 

</div> 

. . . 

export class AppComponent { 

    public data: Object[]; 

    public 

    public toolbar: string[]; 

    public hierarchyOrderdata: Object[] = [ 

    { 

        OrderID: 10248, CustomerID: 'VINET', EmployeeID: 5, OrderDate: new Date(8364186e5), 

        ShipName: 'Vins et alcools Chevalier', ShipCity: 'Reims', ShipAddress: '59 rue de l Abbaye', 

        ShipRegion: 'CJ', ShipPostalCode: '51100', ShipCountry: 'France', Percent: 97.00, Verified: !0 

    }, 

    { 

        OrderID: 10249, CustomerID: 'TOMSP', EmployeeID: 6, OrderDate: new Date(836505e6), 

        ShipName: 'Toms Spezialitäten', ShipCity: 'Münster', ShipAddress: 'Luisenstr. 48', 

        ShipRegion: 'CJ', ShipPostalCode: '44087', ShipCountry: 'Germany', Percent: 10.00, Verified: !1 

    }, 

. . . 

 

    public ngOnInit(): void { 

. . . 

    } 

 

    public valueAccess = (field: string, data1: object, column: object) => { 

    return data1[field] + '%'; 

} 

} 

Sample: https://stackblitz.com/edit/angular-percentage164001?file=app.component.html 

Documentation: https://ej2.syncfusion.com/angular/documentation/grid/columns/#valueaccessor 

Please let us know, if you need further assistance. 

Regards, 

Manivel