Now that we have successfully implemented the Set Language control on a form, and figured out a means of passing the selected language to a subform, it’s time to explore how well the Set Language control performs in translating text on an editable view (a datagrid).

DEMONSTRATION

The goal of Test #2 is to determine how well the Set Language control performs in translating the text of a simple datagrid.

Composition

This demonstration is comprised of a single form containing the Set Language control and associated switching mechanism, and a single editable view which displays a simple datagrid of translatable text, without search or paging controls.

Dependencies

As in Test #1, this demonstration requires proper configuration of the Set Language file and the presence of a resource file in the K2 SmartForms\bin directory (see previous post for the complete path).

Walkthrough

Form

The form consists of only the Set Language mechanism featured in Demonstration #1 (the controls were on the view in that demo).

The mechanism is comprised of the three language buttons preceded by a “Language” label, the Set Language control (hidden) and a Language Data label to record the value of the current language preference (hidden), in advance of the addition of a modal dialog as was implemented in Demonstration #1.

As in Test #1, clicking each button causes translation of the objects exposed on the form.

SmartObject

The SmartObject is a simple SmartObject containing text for which translations are available from the Set Language resource file. For us to determine whether translations are working, we must include only data which has translations in the resource(s).

View

The SmartForm view is an Editable View of a simple SmartObject. The view is not configured to enable search or paging. (These features will be tested later.)

When the view is added to the form, the form looks like this:

Clicking the Swedish language button changes the appearance of all visible elements on display, with a single exception – the “(Add new row)” prompt at the bottom of the grid.

Upon closer inspection, we find the tooltip text is not translated.

One workaround to this is to stop the tooltips from appearing through the addition of jQuery literals. It’s not ideal, as translating the tooltips would be preferred. The workaround is explored in detail below.

Discoveries

Some Text Not Affected

This is an expansion of the note in the previous post.

The translation-related properties of the Set Language control include a litany of controls, but some of the mechanisms K2 offers in their SmartForms product are as yet unaffected by translation. These include message prompts and window titles. (It was the inability to translate the message text that prompted me to use the subform approach described in the walkthrough of Test #1.)

With regard to datagrid translations, the “Add new row” prompt at the bottom of an Editable View remains untranslated, as do the auto-generated tooltip values in the column headers and body.

Workarounds

Add a New Row link

One workaround for the presence of the untranslated “(Add new row)” prompt is to simply remove the prompt. This can be achieved by opening the properties of the Editable View and disabling the Add new row link.

Unchecking the box will remove the link.

Title Attributes (aka “Tooltips”)

Of additional concern is the lack of translation for HTML title attributes. K2 SmartForms tends to create title attributes for all of the columnar data in its data grids, like the column header pictured below:

One workaround for this is to hide the title attributes by using a jQuery command inside of Data Label controls within the grid.

To remove the tooltips from the datagrid headers, perform the following steps:

1. Drag a Data Label control onto the editable view and drop it into a new column.
2. Name the column header something obvious, like “Remove Title Literal,” to prevent confusing it with your (actual) data columns.

   

3. In the column body properties, ensure the Visible and Literal properties are checked, then click on the ellipses of the Expression field. (A screenshot follows step 7.)
4. Add a new Expression.
5. Paste the following into the expression field:
   

   jQuery(document).ready(function(){
   $("[title]").attr("title","");
   });

   
   The command instructs all objects that have a title attribute to replace the contents of that attribute with nothing.

6. Save the new Expression.
7. When returned to the body properties of the new column, ensure your new Expression is selected.

   

8. Configure the Data Label Column properties (emphasized in the screenshot, below). Uncheck the Visible property to ensure the new column is not displayed on the form.

   

After saving your edits and clicking the runtime link on the form, the title attribute should no longer appear in either the header or body of the datagrid.

The final installment is going to be a large one — it will review the Multilingual control inside a datagrid with both search and paging enabled.