Customizing tooltip position and style

[Michael]

Hello,

I have a textbox with a simple required field validator using kendo. I would like to style it using a new CSS class created by us like this:

<span class="label">Name:</span>
<input type="text" name="Name" class="k-textbox" required data-required-msg="Please enter a name." />
<span class="k-invalid-msg k-x-invalid-msg-block" data-for="Name"></span>

The problem is that whenever the validation happens our CSS class named k-x-invalid-msg-block is removed from the tooltip span or replaced by another HTML construct that looks like this:

<span class="k-widget k-tooltip k-tooltip-validation k-invalid-msg" data-for="Name" role="alert">
<span class="k-icon k-warning"> </span>
Please enter a name.
</span>

As you can see our k-x-invalid-msg-block is gone. Is this on purpose? What is the preferred way of styling the tooltip then?

All I would like to do is add a "display:block;" since I need to display the tooltip below the input.

Kind regards,

Krisztián

[Rosen]

Hello Krisztian,

The reason for the described behavior is that the element you have set is used only as a placeholder - it will be substituted with the actual validation message element. This message element is constructed using the errorTemplate template. Thus, you should specify a new, custom template which to have the appropriate markup and styling:

<script>
    $("#myform").kendoValidator({
        errorTemplate: '<span class="k-widget k-tooltip k-tooltip-validation k-x-invalid-msg-block">' +
                 '<span class="k-icon k-warning"> </span> #=message#</span>'"
    });
</script>

Regards,
Rosen
Telerik

 

 

[Siti]

Hi Admin,

Is it possible for errorTemplate to support translate filter too?

It is possible to use the following in grid's template:

template : "{{ 'MESSAGE.Error' | translate}}" .

But i'm unable to get the translation work in validator errorTemplate using the similar syntax:

errorTemplate : "{{ #:message# | translate}} " 

I try to use the js way in template.

errorTemplate : "# $filter('translate')('MESSAGE.Error') #" . It says the $filter is not defined.

Please illuminate on this. Thanks a lot.

[Rosen]

Hello Siti,

It is not possible to use filters inside the Validator template. However, you should be able to set the error template as a function and use the translate service to translate the text. Similar to the following:

<form kendo-validator k-error-template="errorTemplate">
     <!--.......->
</form>

<script>
  angular.module('app', ['pascalprecht.translate', "kendo.directives"])
    .config(['$translateProvider', function($translateProvider){
      $translateProvider.translations('en_US', {
        // texts....
      });
      $translateProvider.preferredLanguage('en_US');
    }])
    .controller('ctrl', ['$scope', '$translate', function($scope, $translate) {

      $scope.errorTemplate = function(data) {
        return '<span class="k-widget k-tooltip k-tooltip-validation k-x-invalid-msg-block">' +
             '<span class="k-icon k-warning"> </span>' + $translate.instant(data.message) + '</span>'
      };

    }]);
</script>

Regards,
Rosen
Telerik by Progress

 

 

[Siti]

Thanks Rosen. Really appreciate your response.

I have emplemented the approach and it works. I tweek a bit by putting the errorTemplate as kendo options as I want to pass it to other form too.

In my forms: <form kendo-validator k-options="validatorOptions">

In my app.js : validatorOptions = { errorTemplate: function(data) { return '<span class="k-widget k-tooltip k-tooltip-validation k-invalid-msg">' + '<span class="k-icon k-warning"> </span>' + $filter("translate")(data.message) + '</span>' }

Just another incomplete event, the message span would not change language unless there is another interaction again with the field. *Set aside if I do submission of the form, that one work great, all the span message change language accordingly*

For example, the span is already showing the message. Then I change the language. I will only see the span message in my updated language if I interact with the field (eg:clicking on the field).

It would be great if the error template could translate once the language change. Like what 'template' in grid does. It can accept {{'LABELS' | translate}}

Would appreciate if u hv any suggestion on that.

[Rosen]

Hello Siti,

I'm afraid that this is not possible as with this approach the changes in the translation are not tracked and the element is not re-rendered.

Regards,
Rosen
Telerik by Progress