Overview:

I attended TechEd India 2013 which was held at Bangalore on Mar 18 & 19. I was talking to couple of developers on their experience with our Rad Controls. One of the developer with whom I was talking to wanted to know if localizing string is easy or difficult with our Grid. He was talking about the static texts which we have in our Grids like – message shown on the group bar, message shown in mouse over of columns for sorting, message shown in our filter menu items etc. His project was looking at using a 3rd party control and localizing the controls with minimal effort was one of the main criteria for them. I told him that it was as easy as creating one file and adding it to the project. In this post we will explore our option on localizing Telerik controls in general the RadGrid.

Global Resource Files:

When you download and install the RadControls for ASP.NET AJAX, we also ship resource files for all our controls and is installed in “App_GlobalResources” folder. Below is a screen shot of the resource files installed on your hard disk:

Fig1: Global Resources for RadControls

Notice the resource file for Grid high lighted. The file name is RadGrid.Main.resx. This contains all the resource string for neutral culture and will be used by our RadGrid control.

When you create a ASP.NET project, you can add certain specific named folders which the ASP.NET recognizes and specific types of content can be kept in this folder. One such folder is App_GlobalResources and can contain resources namely .resx files and .resources files. These are compiled into assemblies with global scope. These resources are strongly typed and can be accessed programmatically also.

Steps involved in Localizing the RadGrid

Following steps are involved in localizing the RadGrid:

1. Add RadGrid.Main.resx file to your application’s App_GlobalResources folder
2. Create a language pack i.e. RadGrid.Main.<locale id>.resx and add it to App_GlobalResources folder
3. Set the culture to use on the RadGrid

We will go through the above steps one by one in following sections.

1. Adding RadGrid resource files:

Open Visual Studio and create a new project. Select Telerik > Web template and “C# RadControls Web Application”.

Fig2: New Project Dialog

Once Visual Studio finishes creating the project, solution will look like below:

Fig3: Solution Explorer

Open Default.aspx and add a RadGrid from the toolbox. We will bind the grid to Products table from Northwind database. We will make use of OpenAccess to create a Data Model or Domain Model and OpenAccess Data Source for data binding. If you are not familiar with OpenAccess, it is a free ORM tool from Telerik. I encourage you to download and play with it. Add a new item to the project of type “Telerik OpenAccess Domain Model”.

Fig4: Add New Item Context Menu

For this demo, I have selected only Products table and created my OpenAccess Domain Model. Here is how the domain model should look like now:

Fig5: OpenAccess Domain Model Diagram

After adding the domain model, do a build to make sure everything is ok. Next, open the Default.aspx in designer mode, click on the smart tag of RadGrid, the smart tag property window will be shown. From the choose data source dropdown select <New data source> option. You will be presented with “Choose a Data Source Type” window. Select OpenAccessLinqDataSource. Specify  name for the data source and proceed. Next in “Select OpenAccess Context Type” window, it will automatically select the domain model we have added and select the products table as the entity and click Next. In “Configure Data Selection” window select the columns that needs to be shown on the grid and click Finish. Now we have  a data source and our RadGrid is bound to that data source. Enable Paging, Sorting, Grouping and Filtering on the grid by using the smart tag.

Fig6: RadGrid Smart Tag

Add a new folder called “App_GlobalResources”. Add RadGrid.Main.resx file from App_GlobalResources folder found in your RadControls for ASP.NET AJAX installation folder and paste it in your applications App_GlobalResources folder. At this point run the application and you will see the below output of the grid:

Fig7: RadGrid output

Notice the static text on – grouping bar, Sort tool tip (when you mouse over on the columns), filter conditions and the page size. So we will see how to localize these.

2. Add language pack:

For the purpose of this blog post I will try to create a French language pack or resource file and the RadGrid will use the strings from it to display the static text. In order to add a language pack for RadGrid, copy the RadGrid.Main.resx and paste it in App-GlobalResources folder. Rename the pasted file to RadGrid.Main.fr-FR.resx. Here fr-FR is the locale that we would like to localize the grid. This can be any other locale that you need to support in your applications. If you double click RadGrid.Main.fr-FR.resx in Visual Studio, you will see the resource editor open and show the strings as a grid. Here is the screenshot of that:

Fig8: RESX Editor

As you can see we see the string name and value for that. Since we copied from language neutral resource file, the values are all in English locale. Now all we are required to do is to change the value of the keys to French locale. I will use Bing translator to translate the values and replace them in the RadGrid.Main.fr-FR.resx. After translating some of the values to French, here is how the RESX file looks like:

Fig9: French Resource File

3. Set locale on RadGrid

In order for the RadGrid to pick up the right locale you can either set the Culture property of the RadGrid explicitly or set the Culture property to CurrentUICulture. For the purpose of this demo, I am explicitly setting the culture of RadGrid to fr-FR i.e. French.

Fig10: RadGrid Culture property

Here is the RadGrid with culture set to fr-FR:

Fig11: RadGrid localized to fr-FR locale

Note: The column headers are not localized because I haven’t provided any strings for them. You can pretty much use the same global resource file and use the resource strings instead of the static text. This blog post was to show how parts of RadGrid can be easily localized.

Summary:

With simple 3 steps we were able to localize different texts of RadGrid without much hassle. All we needed to do was to create a language pack and keep it in App_GlobalResources folder. All Telerik controls respect the ASP.NET folder and know how to use the resources from this folder. Hope this helps you all those folks who are looking at localizing our controls. Do leave any feedback if you may have.