Customizing tooltip position and style

6 posts, 0 answers
  1. Michael
    Michael avatar
    26 posts
    Member since:
    Dec 2010

    Posted 04 Nov 2015 Link to this post

    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

  2. Rosen
    Admin
    Rosen avatar
    3234 posts

    Posted 06 Nov 2015 Link to this post

    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
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  3. Kendo UI is VS 2017 Ready
  4. Siti
    Siti avatar
    2 posts
    Member since:
    Apr 2015

    Posted 22 Jul Link to this post

    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.

  5. Rosen
    Admin
    Rosen avatar
    3234 posts

    Posted 25 Jul Link to this post

    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
     
    Get started with Kendo UI in days. Online training courses help you quickly implement components into your apps.
     
  6. Siti
    Siti avatar
    2 posts
    Member since:
    Apr 2015

    Posted 25 Jul in reply to Rosen Link to this post

    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.

  7. Rosen
    Admin
    Rosen avatar
    3234 posts

    Posted 26 Jul Link to this post

    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
     
    Get started with Kendo UI in days. Online training courses help you quickly implement components into your apps.
     
Back to Top
Kendo UI is VS 2017 Ready