Kendogrid validation alert to show only text

6 posts, 0 answers
  1. spidy
    spidy avatar
    5 posts
    Member since:
    Mar 2018

    Posted 18 Jul Link to this post

    While using kendogrid column validator I can see orange color alert with warning icon.

     

    I want to change this style and just want to show the text in red color below the input columns.

    Is it possible ?

     

    I tried to use errorTemplate but they did not work.

     

     $('#grid').data('kendoGrid').addRow();
     var tr = $('#grid').find('.k-grid-edit-row');
     $(tr).kendoValidator().data('kendoValidator').setOptions({
        errorTemplate: '<span>#message</span>'
     });
     
     
     $(tr).kendoValidator({
           errorTemplate: '<span>#message</span>'
     }).data('kendoValidator');

  2. Eyup
    Admin
    Eyup avatar
    3535 posts

    Posted 19 Jul Link to this post

    Hi Spidy,

    You can remove the validation altogether or hide the validation tooltip using CSS:
    <style>
      .k-tooltip-validation{
        display:none !important;     
      }
    </style>

    Here is a live sample:
    https://dojo.telerik.com/iBoFilEQ/2

    I hope this will prove helpful.


    Regards,
    Eyup
    Progress Telerik
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  3. spidy
    spidy avatar
    5 posts
    Member since:
    Mar 2018

    Posted 19 Jul Link to this post

    I made some progress since yesterday.

    I have added validator in databound event

    dataBound: (e: kendo.ui.GridDataBoundEvent): void => {
    this.setValidator();
    },

     

    public setValidator(): void {
    $('#grid').kendoValidator({
    errorTemplate: '<span class="custom-error">#=message#</span>'
    });
    }

     

    .custom-error {
    color: red;
    }

     

    Now I can see text in red color initially.

    But when I click on update button, it again shows the old alert template.

    In my update button click I am calling validate and saverow()

     click(e: any): void {
                  e.preventDefault();
                  let grid = $('#grid').data('kendoGrid');
                  let tr = $(e.target).closest('tr');
                  let validated: boolean = $(tr).kendoValidator().data('kendoValidator').validate();
                  if (validated) {
                    grid.saveRow();
                    grid.refresh();
                    $(tr).find('.k-grid-cust-edit, .k-grid-delete').show();
                    $(tr).find('.k-grid-cust-update, .k-grid-cust-cancel').hide();
                  }
                }

     

    If I click back again on any input and then alert tooltip, I can again see alert in red text color.

    Not sure why its showing old alert tooltip when its already replaced in validator options.

  4. spidy
    spidy avatar
    5 posts
    Member since:
    Mar 2018

    Posted 19 Jul in reply to Eyup Link to this post

    I dont want to remove it, but want to show in red text color.
  5. spidy
    spidy avatar
    5 posts
    Member since:
    Mar 2018

    Posted 20 Jul Link to this post

    Can anyone look into this?
  6. Eyup
    Admin
    Eyup avatar
    3535 posts

    Posted 23 Jul Link to this post

    Hello,

    This can be achieved using CSS directly, instead of implementing templates:
    <style>
      .k-tooltip-validation.k-invalid-msg{
        color:red;
      }
      .k-tooltip-validation.k-invalid-msg .k-i-warning{
        display:none;       
      }
    </style>

    Here is a modified version of the live dojo sample:
    https://dojo.telerik.com/iBoFilEQ/4

    Please give it a try and let me know if it works for you.

    Regards,
    Eyup
    Progress Telerik
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top