Localization

[Jadranko Dragoje]

How to localize Grid widget?
I need to localize strings like:

• Drag a column header and drop it here to group by that column
• Show rows with value that:
• Is Equal to
• etc.

[Alex]

I am also interested in doing this.
Can someone help us ?

[Alexander Valchev]

Hello guys,

The text of the controls in the filter menu could be changed through the configuration options. For example:

filterable: {
    messages: {
        info: "Custom header text:", // sets the text on top of the filter menu
        filter: "CustomFilter", // sets the text for the "Filter" button
        clear: "CustomClear", // sets the text for the "Clear" button
    },
    operators: {
        //filter menu for "string" type columns
        string: {
            eq: "Custom Equal to",
            neq: "Custom Not equal to",
            startswith: "Custom Starts with",
            contains: "Custom Contains",
            endswith: "Custom Ends with"
        }
   }

Regarding the text in the group header - it can be modified through jQuery script.

$(".k-grouping-header").html("Custom grouping header text");

For convenience I have attached an example illustrating how to customize the text of all grid controls. I hope this will help.

Kind regards,
Alexander Valchev
the Telerik team

[Daniel]

Hey Alexander

Isn´t it possible to localize all grids at once?
doesn´t make sense to do it with every single grid if i use a bunch of them does it?

thanks in advance

[Daniel]

also, i can´t find a way to localize "And" and "Or" in the filter popup.

[Alexander Valchev]

Hello Daniel,

In this code library project you can find an example explaining how to localize the "And"/"Or" strings of the filter menu.
If you want to reuse the configuration options I suggest to define them as an objects (outside the grid). For example:

var filterableConfiguration = {
    name: "FilterMenu",
    extra: true, // turns on/off the second filter option
    messages: {
        info: "Custom header text:", // sets the text on top of the filter menu
        filter: "CustomFilter", // sets the text for the "Filter" button
        clear: "CustomClear", // sets the text for the "Clear" button
        //.....
    },
    operators: {
        //....
    }
};

$("#grid1").kendoGrid({
    filterable: filterableConfiguration,
    //....
});

$("#grid2").kendoGrid({
    filterable: filterableConfiguration,
    //....
});

Kind regards,
Alexander Valchev
the Telerik team

[Daniel]

Hi Alexander

I´ve allready seen that, but theres no "translation" of "And" and "Or" in that.
But i´ll try to find it.
Thanks for the response.

[Alexander Valchev]

Hello Daniel,

Please check the last part of the code from the code library's html file (line number 257)

//changes the text of the "And" and "Or" of the filter menu
$("select[name='logic']").each(function() {
    //changes the dataSource of the "And/Or" dropdown
    $(this).data("kendoDropDownList").dataSource.data([
        {text: "CustomAnd", value: "and"}, //sets the text of the "And" option
        {text: "CustomOr", value: "or"} //sets the text of the "Or" option
    ]);
    //sets the default selected list option
    $(this).data("kendoDropDownList").select(0);
});

In case I misunderstood you, could you please provide an example of what you want to achieve?

Regards,
Alexander Valchev
the Telerik team

[Daniel]

damn, i´ve really missed that.
shame on me :D

btw. is there a special reason why kendo doesnt have a "single translation file" for things like that?

[Atanas Korchev]

Hello,

The reason is that we haven't implemented that yet.

Greetings,
Atanas Korchev
the Telerik team

[Peter]

Hi Alexander, about the "And" and "Or" in filter window, I have two questions:
1. I saw this code, but I still can not make it work, in my codes, I am using kendo-min.js, but yours using "<

script type="text/javascript" src="http://cdn.kendostatic.com/2012.1.229/js/kendo.all.min.js"></script>", Could that be the main issues?
2. How to make the cutomized text pointing to my resource file?
For example, instead of hardcodeing the text, I add the static text in Resource file for two languages, then pointing to it.
 filterable: {
     ...
     messages: {
                     info: Resources.Info_Text    //Info_Text in Resources file with value: "Custom header text", but this does not work.

                      ......

$("select[name='logic']").each(function() {

//changes the dataSource of the "And/Or" dropdown

$(this).data("kendoDropDownList").dataSource.data([

{text: "CustomAnd", value: "and"}, //sets the text of the "And" option

{text: "CustomOr", value: "or"} //sets the text of the "Or" option

]);

//sets the default selected list option

$(this).data("kendoDropDownList").select(0);

});

[Peter]

Hi Alexander, about the "And" and "Or" in filter window, I have two questions:
1. I saw this code, but I still can not make it work, in my codes, I am using kendo-min.js, but yours using "<

script type="text/javascript" src="http://cdn.kendostatic.com/2012.1.229/js/kendo.all.min.js"></script>", Could that be the main issues?
2. How to make the cutomized text pointing to my resource file?
For example, instead of hardcodeing the text, I add the static text in Resource file for two languages, then pointing to it.
filterable: {
...
messages: {
info: Resources.Info_Text //Info_Text in Resources file with value: "Custom header text", but this does not work.

......

$("select[name='logic']").each(function() {

//changes the dataSource of the "And/Or" dropdown

$(this).data("kendoDropDownList").dataSource.data([

{text: "CustomAnd", value: "and"}, //sets the text of the "And" option

{text: "CustomOr", value: "or"} //sets the text of the "Or" option

]);

//sets the default selected list option

$(this).data("kendoDropDownList").select(0);

});

[Markus]

This issue still persists. With the code above you can't realize the and/or issue.

Regards Markus.

[Alexander Valchev]

Hi guys,

Regarding the problem with the "and/or" text customization, in the latter version the filter menu mark-up is changed and as a result the original selector used in the code library project is not relevant. What is more important is that now you can customize the text right from the configuration options. Here is the syntax:

filterable: {
    messages: {
        info: "Custom header text:", // sets the text on top of the filter menu
        filter: "CustomFilter", // sets the text for the "Filter" button
        clear: "CustomClear", // sets the text for the "Clear" button

        // when filtering boolean numbers
        isTrue: "custom is true", // sets the text for "isTrue" radio button
        isFalse: "custom is false", // sets the text for "isFalse" radio button

        //changes the text of the "And" and "Or" of the filter menu
        and: "CustomAnd",
        or: "CustomOr"
    },

The code library project is updated and can be downloaded from the here.

@Peter
I tested this scenario and got everything to work as expected. Could you please check the attached sample project and let me know what I am missing? The file resources.js contains one object called Resources with property named Info_Text.

//resources.js
var Resources = {
    Info_Text: "Test Info Text"
}

//grid configuration (line 113)
messages: {
    info: Resources.Info_Text, // sets the text on top of the filter menu

Kind regards,
Alexander Valchev
the Telerik team

[Peter]

Hi Alexander,Thanks for your quick response, the "And" and "Or" issues is resolved as the posted solution which is using config option.
However, you may misunderstood my question regarding to the Resources file, I do not think Resources.js is the solution.

Basically, what my question was related how to globalize the Filter window, (how to make the Filter window billingulized by Resource.resx file)
For example, I have two resouces files: Resouces.resx and Resources.fr.resx, in each file, I have a string as:
Resouces.resx with Infor_text : " This is English title" and Resources.fr.resx with Infor_text : " This is French title", then when I click the English (language), the label in Filter window will reference to the Resources.resx file, French(language) will reference to Resources.fr.resx file.
Now, my mvc web project are globalized well except the Filter window, please let me know if you have any solution for this issue. thanks a lot,

Atanas Korchev posted a solution in here: http://www.kendoui.com/forums/framework/globalization/about-implementing-globalization-in-kendo-ui-help-please.aspx
But I can not apply it to my web project, as my site is pure Javascript code, can not reference that build .dll file.

[VasVas]

Dear Alexander,

I'm unsing Kendo mvc wrappers version Q12013 RTL language

I used this jquery to change the

$(".k-grouping-header").html("Custom grouping header text");

 "drag A COLUMN"

After  the change when I drag the column header to the top of the grid it disapears and is not seen, so grouping  can be changed between columns but can not be canceled all together  like in english, where the grouping header is seen on top with an X next to it.

Yours,

Ariel

[VasVas]

I found this solution,

http://www.kendoui.com/forums/framework/globalization/complete-solution-for-language-localization-of-all-text-strings-in-an-app.aspx#2117178

Could you translate to the HTML HELPER SYNTX

how would this be translated
groupable: {
    messages: {
      empty: "Arraste colunas aqui para agrupar pelas mesmas"
    }
  }

I think a post explaining the localization in the asp.net, php . jsp wrappers would be a big help

Yours,

Ariel

[VasVas]

What would be the syntax of the more complex settings like:
filterable: {
        messages: {
            info: "Título:", // sets the text on top of the filter menu
            filter: "Filtrar", // sets the text for the "Filter" button
            clear: "Limpar", // sets the text for the "Clear" button
             
            // when filtering boolean numbers
            isTrue: "é verdadeiro", // sets the text for "isTrue" radio button
            isFalse: "é falso", // sets the text for "isFalse" radio button
             
            //changes the text of the "And" and "Or" of the filter menu
            and: "E",
            or: "Ou"
        },
        operators: {
            //filter menu for "string" type columns
            string: {
                eq: "Igual a",
                neq: "Diferente de",
                startswith: "Começa com",
                contains: "Contém",
                endswith: "Termina em"
            },

Yours,

Ariel

[Alexander Valchev]

Hi VasVas,

Regarding your first question:

groupable: {
  messages: {
    empty: "Arraste colunas aqui para agrupar pelas mesmas"
  }
}

.Groupable(g => g.Messages(m => m.Empty("Arraste colunas aqui para ....")))

Regarding your second question, you should follow the same pattern and use FilterableOperatorsBuilder. For example:

filterable: {
    operators: {
        string: {
            contains: "custom msg"
        }
    }
}

.Filterable(f => f.Operators(op => op.ForString(s => s.Contains("custom msg"))))

Regards,
Alexander Valchev
Telerik

[VasVas]

    @(Html.TashtitHelper().Grid(Model).Name("Grid")
.Columns(columns =>
{
    columns.Bound(p => p.ProductID).Groupable(false);
    columns.Bound(p => p.ProductName);
    columns.Bound(p => p.UnitPrice);
    columns.Bound(p => p.UnitsInStock);
    

})
.Scrollable(scrolling => scrolling.Enabled(true))
.Sortable(sorting => sorting.Enabled(true))
.Pageable(paging => paging.Enabled(true))
.Filterable(filtering => filtering.Enabled(true))
.Events(events => events.Change("onChange"))
.Selectable(selecting => selecting.Mode(GridSelectionMode.Single))
.DataSource(dataSource => dataSource
    .Ajax()
    .Model(model => model.Id(p => p.ProductID))
    )
.Filterable(filterable => filterable.Messages(messages =>
    {
        messages.Info("MY CUSTOM VAL");
        messages.Filter("MY CUSTOM VAL");
        messages.Clear("MY CUSTOM VAL");
        messages.IsFalse("MY CUSTOM VAL");
        messages.IsTrue("MY CUSTOM VAL");
        messages.Or("MY CUSTOM VAL");
        messages.And("MY CUSTOM VAL");
        
    }))
.Filterable(filterable => filterable.Operators(operators =>
    {
        operators.ForString(stringOperator => stringOperator.IsEqualTo("MY CUSTOM VAL"));
        operators.ForString(stringOperator => stringOperator.IsNotEqualTo("MY CUSTOM VAL"));
        operators.ForString(stringOperator => stringOperator.StartsWith("MY CUSTOM VAL"));
        operators.ForString(stringOperator => stringOperator.Contains("MY CUSTOM VAL"));
        operators.ForString(stringOperator => stringOperator.EndsWith("MY CUSTOM VAL"));
        operators.ForString(stringOperator => stringOperator.DoesNotContain("MY CUSTOM VAL"));
        operators.ForNumber(numberOperator => numberOperator.IsEqualTo("MY CUSTOM VAL"));
        operators.ForNumber(numberOperator => numberOperator.IsNotEqualTo("MY CUSTOM VAL"));
        operators.ForNumber(numberOperator => numberOperator.IsGreaterThan("MY CUSTOM VAL"));
        operators.ForNumber(numberOperator => numberOperator.IsGreaterThanOrEqualTo("MY CUSTOM VAL"));
        operators.ForNumber(numberOperator => numberOperator.IsLessThan("MY CUSTOM VAL"));
        operators.ForNumber(numberOperator => numberOperator.IsLessThanOrEqualTo("MY CUSTOM VAL"));
        operators.ForDate(dateOperator => dateOperator.IsEqualTo("MY CUSTOM VAL"));
        operators.ForDate(dateOperator => dateOperator.IsGreaterThan("MY CUSTOM VAL"));
        operators.ForDate(dateOperator => dateOperator.IsGreaterThanOrEqualTo("MY CUSTOM VAL"));
        operators.ForDate(dateOperator => dateOperator.IsLessThan("MY CUSTOM VAL"));
        operators.ForDate(dateOperator => dateOperator.IsLessThanOrEqualTo("MY CUSTOM VAL"));
        operators.ForDate(dateOperator => dateOperator.IsNotEqualTo("MY CUSTOM VAL"));
        
    }))
.Groupable(g => g.Messages(messages => messages.Empty("MY CUSTOM VAL")))

   )
recnetly I came accros this doc on the kendo ui site , about the possibilty of using the kendo.mvc.dll's sattilite resx files or custom local resx files built from the kendo.mvc project supplied with the kendo mvc Complete version. I fallowed the instructions in the doc to the letter and this solution does not work. The resource files contain translations of the grid , upload,  pager for grid and filter for grid. the doc is Linked here
After I failded to implement this solution I found this post
www.kendoui.com/forums/framework/globalization/complete-solution-for-language-localization-of-all-text-strings-in-an-app.aspx#2117178

My question is Does the Resx solution for localization/globalization work with kendo ui wrappers Q1 2013 version, is the problem because these are server side wrappers and they must create\inject code equivelent to the one above .
If this solution of using RESX files does not work this mean I must use the code above when using my grids and upload controls?

Yours,

Ariel

[Mentor Graphics]

Hello, 

I'm trying to localize the grid's filter.

I was able to localize all the strings using the documentation, but I can not localize  the datepicker in the date filter.

Is there a way to do it?

Thanks

Eran

[VasVas]

Dear Eran,
add these statments to your _Layout.chtml or bundels mvc4
add this script files
Loclizing the datepicker is done using the kendo.culture. + culture + .min.js
located in the scripts/cultures librery
and

<script>
kendo.culture("culture");
</script>

this will change things the icon for the currency of the country, the first letter of the week day , months name, date format ect.

Yours,

Ariel

[Smitty]

Hi Alex, I am trying to do something similar to your example on reusing the configuration options to apply to all the pages. However I am getting an error "Cannot read property 'filterable' of undefined "

Below is the full code
var grid = $(".k-grid");

        var filterableConfiguration =
        {
            name: "FilterMenu",
            extra: true, // turns on/off the second filter option
            messages: {
                info: "Custom header text:", // sets the text on top of the filter menu
                filter: "CustomFilter", // sets the text for the "Filter" button
                clear: "CustomClear", // sets the text for the "Clear" button
                //.....
            },
            operators:
            {
                //filter menu for "string" type columns
                string:
                {
                    eq: "Custom Equal to",
                    neq: "Custom Not equal to",
                    startswith: "Custom Starts with",
                    contains: "Custom Contains",
                    endswith: "Custom Ends with"
                },
                //filter menu for "number" type columns
                number:
                {
                    eq: "Custom Equal to",
                    neq: "Custom Not equal to",
                    gte: "Custom Is greater than or equal to",
                    gt: "Custom Is greater than",
                    lte: "Custom Is less than or equal to",
                    lt: "Custom Is less than"
                },
                //filter menu for "date" type columns
                date: {
                    eq: "Custom Equal to",
                    neq: "Custom Not equal to",
                    gte: "Custom Is after or equal to",
                    gt: "Custom Is after",
                    lte: "Custom Is before or equal to",
                    lt: "Custom Is before"
                },
                //filter menu for foreign key values
                enums: {
                    eq: "custom Is Equal to",
                    neq: "custom Is Not equal to"
                }
            }
        }

        grid.kendoGrid({
            filterable: filterableConfiguration //error is occuring right here
        });

Please let me know if you have any thought on this.

Thanks in advance,

Smitty