We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
close icon

Grid format not working for calculated column

I have a calculated column in a grid, wont format, the calculated value works fine but the format is not applied:

HowMuch is the column value used and total is the sum of the column

My razor statement is:


<e-grid-column field="Percent" format="P2" template="<span>${HowMuch / @(total)}</span>" width="10"></e-grid-column>

Thanks

Scott

1 Reply

TS Thavasianand Sankaranarayanan Syncfusion Team February 28, 2019 11:40 AM UTC

Hi Scott, 

Greetings from Syncfusion. 

We can achieve your requirement using the numberFormat method in base. In the below code example we have do percentage format for the “EmployeeID” column which has the template. 


<ejs-grid id="Grid" dataSource="ViewBag.dataSource" allowPaging="true"  > 
    <e-grid-editSettings allowAdding="true" allowDeleting="true" allowEditing="true"></e-grid-editSettings> 
    <e-grid-columns> 
        <e-grid-column field="OrderID" headerText="Order ID" isPrimaryKey="true" textAlign="Right" width="100"></e-grid-column> 
        <e-grid-column field="CustomerID" headerText="Customer ID" width="100"></e-grid-column> 
        <e-grid-column field="EmployeeID" headerText="Employee ID" template="#coltemplate" width="100"></e-grid-column> 
        <e-grid-column field="Freight" width="100" ></e-grid-column> 
        <e-grid-column field="Verified" headerText="Verified" width="100"></e-grid-column> 
        
    </e-grid-columns> 
</ejs-grid> 
 
<script id="coltemplate" type="text/template" > 
 
    <span>${format(data)}</span>  // we pass row data to the format function 
 
</script>   
   
<script> 
    var format = function (value) { 
        var intl = new ej.base.Internationalization(); 
        var emp = 100; 
        var formattedValue = intl.formatNumber(value.EmployeeID/emp, { 
            format: 'P2' }); // Format teh template value and also we made the calculation in here 
        return formattedValue; 
    } 
</script> 



Refer the help documentation. 


Regards, 
Thavasianand S. 


Loader.
Live Chat Icon For mobile
Up arrow icon