This is a migrated thread and some comments may be shown as answers.
Kendogrid validation alert to show only text
5 Answers 22 Views
This is a migrated thread and some comments may be shown as answers.
spidy
Top achievements
Rank 1
spidy asked on 18 Jul 2018, 02:30 PM

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');

5 Answers, 1 is accepted

Sort by
0
Eyup
Telerik team
answered on 19 Jul 2018, 12:16 PM
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.
0
spidy
Top achievements
Rank 1
answered on 19 Jul 2018, 12:40 PM

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.

0
spidy
Top achievements
Rank 1
answered on 19 Jul 2018, 12:41 PM
I dont want to remove it, but want to show in red text color.
0
spidy
Top achievements
Rank 1
answered on 20 Jul 2018, 06:36 AM
Can anyone look into this?
0
Eyup
Telerik team
answered on 23 Jul 2018, 11:14 AM
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.
Tags
Grid
Asked by
spidy
Top achievements
Rank 1
Answers by
Eyup
Telerik team
spidy
Top achievements
Rank 1
Share this question
or