Localizing your Data Grid

The Data Grid is one of the cool new OutSystems features that came out this year. It allows you to develop ‘excel-like’ pages, where the user can interact with data in an extremely dynamic fashion. Data Grids aren’t just fancy, they are useful for all situations in which a user needs to do a lot of data mutations in one go. They allow users to go as granular or high-level as they need to, edit a bunch of fields in one go and add columns with additional data. 

All in all, it is a very dynamic solution that can be useful in many Internal Operations use-cases. If you want to learn how to use one, we have a video that will help.

The price you pay for the agility of this component is that it is also in the more advanced spectrum of OutSystems development. This means that when, during a POC, I needed to ensure that the data grid displayed the right data formatting for Europeans I was temporarily unsure. Thanks to Google and a healthy dose of persistence, we managed to figure it out. As per usual, once you know how to do it, it is actually very simple. So, in order to help you get to the answer quicker, I thought I’d write the solution down.

The first thing to know is that the Data Grid is based on Grapecity’s Wijmo. Wijmo is a quite extensive solution that includes the answer to many of your Data Grid desires. Say that you want to localize your data…. Wijmo has got you covered.You can browser their website for more info. 

In Wijmo the way to localize your data is to add a culture file. Culture files with language/country specific format descriptors and UI strings are shipped in the separate @grapecity/wijmo.cultures package. You can download them from the website, or build your own. The globalization section of their documentation actually provides you with a lot of information.

To add this onto your datagrid, first you need to upload the javascript file in the resources in Service Studio. Make sure to set the Deploy Action to ‘Deploy to Target Directory,’ to avoid wondering why it is not working for five minutes.

To use it we need to actually include the javascript in the header of our web block or screen. So grab your HttpRequestHandler plugin and import the ‘AddJavascriptTag’ server action. Copy the runtime path of the resource into the URL input parameter of the server action.  

Publish and navigate to your screen. If all went well, things should be localized to the culture of your choice. 

In my case:

Before, prices given in a xx.xx format

After, prices given in a xx,xx format:

While this article was focused on localizing the data, you can use the same steps to deal with many of the more advanced Data Grid questions. Wijmo is a well documented product, and googling their solution for dealing with these issues is always a good first step. If they already have javascript that you can use, download, import and utilize. Piece of cake! (Which reminds me, I really need to go and eat some cake. Have a nice day!)