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

Closing tooltip validation error when dropdown is closed

4 Answers 484 Views
DropDownList
This is a migrated thread and some comments may be shown as answers.
Larry
Top achievements
Rank 1
Larry asked on 22 Jul 2017, 05:48 PM

I'm displaying a tooltip required error message using the validator when the dropdown isn't selected.

When the dropdown is selected, can the error message be automatically hidden?

I'm not worried about displaying other messages so when it's selected, I'd like the error to disappear - but not all errors.

Your suggestions appreciated ...

Thanks,

Larry

 

4 Answers, 1 is accepted

Sort by
0
Dimitar
Telerik team
answered on 25 Jul 2017, 10:23 AM
Hello Larry,

By default, when you select an item in the DropDownList, the focus remains on the input element. This means that in order to clear the validation error, you have to focus out of the DropDownList widget. To demonstrate this behavior, I have prepared a short screencast

Also, the above step can be skipped by attaching a select event handler to the DropDownList and manually hiding the validation tooltip (demonstrated in the following Dojo):
select: function(e) {
  var item = e.item;
  var text = item.text();
        
  if(text !== "") {
    $(".k-dropdown .k-tooltip-validation").hide();
  }
}

Regards,
Dimitar
Progress Telerik
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Larry
Top achievements
Rank 1
answered on 25 Jul 2017, 01:07 PM

Thanks for that information Dimitar. That's the behaviour I'm observing as well.  When I click on another element or outside of the dropdown it re-validates and clears - although that's extra work for the user.

Also the proposed solution is great when there is only one error showing however that isn't always the case. It seems to me that hiding by class will hide everything, and tooltips don't have an ID associated with the control. (Although I could perhaps position them in a span as I've seen before) - in this case extra work for me.

In the select event, would it be possible to trigger a blur and force the focus to the next element in the tab order? Would that hide the tooltip automatically? As a general rule I'd like to auto advance the focus when possible so this could help in other ways also.

Thanks much,

Larry

0
Accepted
Dimitar
Telerik team
answered on 26 Jul 2017, 08:42 AM
Hello Larry,

I have modified the Dojo sample, which now includes two more textboxes besides the DropDownList widget.

You will notice that in the current setup, the change event of the DropDownList is used to trigger the validation manually only for this widget. This will cause the validation tooltip to disappear once you select a valid item from the list and also appear immediately if you select the placeholder ("Select a product").

In addition to the above, I have used jQuery to focus the next input element:
var index = ddlElement.index("input");           
$("input:eq(" + (index +1) + ")").focus();


Regards,
Dimitar
Progress Telerik
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Larry
Top achievements
Rank 1
answered on 26 Jul 2017, 02:19 PM

Thanks much Dimitar!

Regards,I believe that will help and I will use this approach.

Regards,

Larry

Tags
DropDownList
Asked by
Larry
Top achievements
Rank 1
Answers by
Dimitar
Telerik team
Larry
Top achievements
Rank 1
Share this question
or