Display Mixed Currencies in Grid

Environment

Product	Progress® Kendo UI® Grid for jQuery
Product Version	2017.1.223

Description

I have a global sales application in which the sales staff work on accounts around the globe. They need to see the currency in the culture format of their countries in the same Grid. For example, User 1, $1,000.00, User 2, €2.000,00, User 3, £50.000.000,00.

How can I display different currencies in the same Grid?

Solution

Use a custom approach by utilizing the column.template property of the Grid. This logic requires information about which the correct currency for each displayed data item is and you need to use a manual format for every currency.

<div id="example">
      <div id="grid"></div>
      <script>
        $(document).ready(function() {
          $("#grid").kendoGrid({
            dataSource: {
              type: "odata",
              transport: {
                read: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Orders"
              },
              schema: {
                model: {
                  fields: {
                    OrderID: { type: "number" },
                    Freight: { type: "number" },
                    ShipName: { type: "string" },
                    OrderDate: { type: "date" },
                    ShipCity: { type: "string" }
                  }
                }
              },
              pageSize: 20,
              serverPaging: true,
              serverFiltering: true,
              serverSorting: true
            },
            height: 550,
            filterable: true,
            sortable: true,
            pageable: true,
            columns: [{
              field:"OrderID",
              filterable: false
            },
                      {field:"Freight", template:"#= currency(data)#"},
                      {
                        field: "OrderDate",
                        title: "Order Date",
                        format: "{0:MM/dd/yyyy}"
                      }, {
                        field: "ShipName",
                        title: "Ship Name"
                      }, {
                        field: "ShipCity",
                        title: "Ship City"
                      }
                     ]
          });

        });
        function currency(data){
          if(data.Freight > 40 ){
            return kendo.toString(data.Freight, "£###.##")
          }
          return kendo.toString(data.Freight, "$###.##")
        }
      </script>
    </div>