This is a migrated thread and some comments may be shown as answers.

Kendo Widgets MVVM validationMessage binding (multi-language site)

5 Answers 580 Views
MVVM
This is a migrated thread and some comments may be shown as answers.
Guillermo
Top achievements
Rank 1
Guillermo asked on 31 Aug 2012, 02:36 PM
Hi all,

I'm wondering if anybody founds a work around for the binding of custom attributes to kendo widgets.

A very useful scenario for me would be the binding of the validator attributes like validaitonMessage or pattern. I'm working in a site that must be displayed in multiple languages, and I'm binding every label and localized rules to a model that controls the translation and how that input would behave based on the language. 

Thanks

5 Answers, 1 is accepted

Sort by
0
Alexander Valchev
Telerik team
answered on 05 Sep 2012, 02:56 PM
Hello Guillermo,

To achieve that I would recommend using the MVVM attribute binding. As an example:

Kind regards,
Alexander Valchev
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Guillermo
Top achievements
Rank 1
answered on 05 Sep 2012, 03:17 PM
Hi Alexander
Thanks for replying... 
I'm aware of the attribute binding capabilities of MVVM, but it seems they are not supported on kendo widgets...

Please check: http://jsfiddle.net/7UYYZ/2/ 
If you run that script you will see a javascript error is raise with the following message:
The attr binding is not supported by the DropDownList widget  
 
0
Accepted
Alexander Valchev
Telerik team
answered on 10 Sep 2012, 12:50 PM
Hello Guillermo,

First of all let me apologize, I did not paid attention that you would like to bind the validation messages of Kendo widgets.

In that case I would recommend to define the validation messages as a functions that get and return the values of MVVM fields. As an example:
var validator = $("#example").kendoValidator({
    messages: {
        required: function(input) {
            var name = input.attr("name"),
                msg = viewModel.get("reqMsg");
            return name + msg;
        }
    }
}).data("kendoValidator");

For convenience I prepared a sample page using this approach in action.

Regards,
Alexander Valchev
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Guillermo
Top achievements
Rank 1
answered on 10 Sep 2012, 05:35 PM
Hi Alexander
It works as expected. Thank you very much.
I will like to add that you may need to check for your input type to select the proper required message.

var validator = $("#example").kendoValidator({
    messages: {
        required: function(input) {
            if(input.is("select")){
              msg = viewModel.get("selectReqMsg");
            }
            else{
              msg = viewModel.get("inputReqMsg");
            }
            return msg;
        }
    }
}).data("kendoValidator");

In general, I bound every label to a property on the model and it works as expected but I don't know if its a better way to handle translations. Do yo have any recommendations? 

Thanks
0
Alexander Valchev
Telerik team
answered on 12 Sep 2012, 02:48 PM
Hi Guillermo,

Thank you for the feedback.
The KendoUI validator does not have a build-in translation functionality, so in order to dynamically change the warning's text I suggest using this approach.

Regards,
Alexander Valchev
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Tags
MVVM
Asked by
Guillermo
Top achievements
Rank 1
Answers by
Alexander Valchev
Telerik team
Guillermo
Top achievements
Rank 1
Share this question
or