Different Currency In Different Rows

[Michael Rowe]

Hi. I'm wanting to show a different currency symbol per row in my grid. In my data I have a field for currency such as "USD" or "EUR". I want to use this to localize a price column. I tried to change the column format in the queryCellInfo handler, but I think it's too late in the pipeline and it has no effect.

I am using the JavaScript API for my grid. I need to know if there is another event handler I can use to modify the cell format before the default is picked up. The default is "$" as my locale is en-US.

I appreciate any help on this. I've searched online and found no documentation or solution for this problem.

[Venkatesh Ayothi Raman]

Hi Michael, 

Thanks for contacting Syncfusion support. 

We have achieved your requirement using QueryCellInfo event in Grid without giving a currency format in Column. Please refer to the following code example and Help document for more information, 

Code example: 

[GRID] 

 

@(Html.EJ().Grid<SyncfusionMvcApplication9.OrdersView>("FlatGrid") 

. . . 

        .Columns(col => 

        { 

               . . .            col.Field("Freight").HeaderText("Freight").TextAlign(TextAlign.Right).Width(75).Add(); 

. . . 

        }) 

         

        .ClientSideEvents(eve=>eve.QueryCellInfo("QueryCellInfo")) 

        ) 

<script> 

 

    function QueryCellInfo(args) { 

 

        if (args.column.field == "Freight" && args.data.Freight == 29.46) { 

            args.cell.innerHTML = ej.format(args.data.Freight, "C2", "en-GB");//Changing the currency format dynamically 

            

        } 

        if(args.column.field == "Freight" && args.data.Freight == 61.02) 

            args.cell.innerHTML = ej.format(args.data.Freight, "C2", "en-AU");//Changing the currency format dynamically 

         

    } 

 

</script> 

[_Layout.html page] 

   <link rel='nofollow' href="@Url.Content("~/Content/ej/web/Default-theme/ej.widgets.all.min.css")" rel="stylesheet" /> 

    <. . .> 

    <script src="@Url.Content("~/Scripts/ej/ej.web.all.min.js")"></script> 

    <script src="@Url.Content("~/Scripts/ej/ej.unobtrusive.min.js")"></script> 

    <script src="~/Scripts/ej/cultures/ej.culture.en-AU.js"></script> 

    <script src="~/Scripts/ej/cultures/ej.culture.en-GB.js"></script> 

      

Note: Above code example we should give the culture name for applying the format.  

Help document: https://help.syncfusion.com/api/js/ejgrid#events:querycellinfo 

We have also prepared a sample for your convenience which can be download from following link, 

Sample:http://www.syncfusion.com/downloads/support/directtrac/general/ze/SyncfusionMvcApplication9-1023491626 

Regards 

Venkatesh Ayothiraman. 

[Michael Rowe]

Thank you. It worked perfectly.

I created a mapping function to map my currencies to cultures (Ex. 'EUR' => 'de-DE'). I also found the culture definition files for the 15 currencies I needed and minified them into one JS file.

The ej.format function is great. I am now also using it outside of the grid for currency formatting on other pages.

Thanks.

[Venkatesh Ayothi Raman]

Hi Michael, 

Thanks for the update. 

We are very happy to hear that your requirement is achieved. 

Regards, 

Venkatesh Ayothiraman. 

[Cezar]

What is the correct way of using loadCldr with Asp.Net Core?

ej.base.loadCldr('../Scripts/cldr-data/main/pt/currencies.json');


ej.base.setCurrencyCode('BRL'); //set currency code globally 

I need to change my currency format to BRL. I have currencies.json on "/Scripts/cldr-data/main/pt/currencies.json" folder

[Balaji Sekar]

Hi Michael, 

 

Query: What is the correct way of using loadCldr with Asp.Net Core? 

 

Based on the query, we achieved the loading of cldr-data with the required currency file in the DataGrid.   In the example below, we set the BRL currency code using the setCurrencyCode method, then we use the loadCultureFile method to get the cldr-data in JSON format. Since this BRL currency format can be applied to the Grid column data. For your reference, we have shared the code example. 

Code Snippet:  

Index.cshtml 

<ejs-grid id="Grid" dataSource="ViewBag.DataSource"> 

        .   .     .     . 

    </ejs-grid> 

 

<script> 

    document.addEventListener('DOMContentLoaded', function () { 

        setCulture(); 

    }); 

 

 

    function setCulture() {       

        ej.base.setCulture('pt');                 // set the actual culture name here 

        ej.base.setCurrencyCode('BRL');  // Change the currency code  ( default BRL’s  sign: R$) 

       loadCultureFiles('pt'); 

         

 

    } 

 

    function loadCultureFiles(name) { 

 

        var files = ['ca-gregorian.json', 'numbers.json', 'currencies.json', 'timeZoneNames.json']; 

        if (name === 'pt') { 

            files.push('numberingSystems.json'); 

        } 

        var loader = ej.base.loadCldr; 

        var loadCulture = function (prop) { 

            var val, ajax; 

            if (name === 'de' && prop === files.length - 1) { 

                ajax = new ej.base.Ajax(location.origin + location.pathname + '/../../js/cldr-data/supplemental/' + files[prop], 'GET', false); 

            } 

            else { 

                ajax = new ej.base.Ajax(location.origin + location.pathname + '/../../js/cldr-data/main/' + name + '/' + files[prop], 'GET', false); 

            } 

            ajax.onSuccess = function (value) { 

                val = value; 

                loader(JSON.parse(val)); // get the cldr-data in JSON format 

            }; 

            ajax.send(); 

 

        }; 

        for (var prop = 0; prop < files.length; prop++) { 

            loadCulture(prop); 

        } 

    } 

</script> 

 

 

If you facing the any problem , share below details for appropriate solution. 

 

1. Share Grid full code with currency file.
2. Share video demonstration of  problem.
3. If possible share the issue reproducing sample

 

Please get back to us if you need further assistance. 

 

Regards, 

Balaji Sekar