Keep focus on validator fails

[Bart]

I have a client who requested when a kendo control can't validate, the focus is kept on the invalidate object.
This is something that to my knowledge isn't supported by default by the components.

So i've tried something like writing a validation rule like this (raw example, won't work)

rule :function(input){
    var isValid = false;
     //some code to do validation
     if(!isValid){
        var kendoComponent = $(input.id).data("kendoCombobox");
        input.focus();
    }
    return isValid
}

 

The problem i'm having is that before input.focus(), the next component shortly ahs focus, and by setting the focus to the invalidate compinent, the next components validation is triggered as well. The next component says it's invalid, and thus calls for the focus. Creating an endless loop between these 2 components each asking for focus.

To try and counter this, i've kept a dominantfield status. If the validation is triggerd for a none dominant component, that component should always say "i'm valid" thus not calling for focus. As far is i can determine following stacktraces and output logging, this code is working, though somewhere focus is still being called on the second component causing an infinite loop. while the custom code i wrote in my validation ruls never call .focus() on the second component. I can't figure out why the components would still keep trying to get focus. or why in the telerik js code, an infite loop would be created.

Any thoughts on why this infinte loop could be created, or any input as how else this functionality can be obtained?

[Bart]

Oké, in the mean time, i've been able to try some more things out. I've come to a state where my code to gain focus is absolutly not the issue anymore. the .focus() function is no longer part of my validation rules.

However i can still reproduce a situation where 2 telerik controls try to get focus simultaniously and they keep trying to get focus, thus an infinite loop of 2 controls alternating their focus.

Setup:

-webpage with 2 telerik comboboxes, both are required.
-We need a dual screens.
-windows 8 (might be reproducable in other windows versions)
-browser, i've confirmed this in IE 11 end Chrome 42

 

Steps to reproduce:
select both combobxos, --> their validationmessage ust show up. Now set focus to the first combobox.
Press the 'windows logo' key, then select the second combobox.
The expected result here would be that the second combobox is the active element/combobox, but instead the 2 comboboxes keep alternating their focus.

[Georgi Krustev]

Hello Bart,

I am afraid that the given information is not enough the fully understand the case. Would it be possible to send us a simple Dojo demo that demonstrates the issue? This will help us to review the issue locally and follow you up with more details.

Regards,
Georgi Krustev
Telerik

 

 

[Ashraf]

I have a similar problem wherein the validator function is called in an infinite loop when lets say I change a date and then tab on to move to qty column. I have put a bunch of alerts FYR (Apologies in advance!)

http://dojo.telerik.com/uhupObIy

 

In this example, I am trying to validate the date - either picked through datepicker or even if it is keyed in manually ; and if it is less than the current date, it should automatically default to current date

 

Could you advise?

 

[Neli]

Hi Ashraf,

In order to validate the DatePicker in the Grid I would suggest you to create a custom rule for it. Below you will find an example of how the Validator could be extended:

 

 $.extend(true, kendo.ui.validator, {
            rules: { // custom rules
              datevalidation: function (input) {
                //check if it is the OrderDate field
                if (input.is("[name=OrderDate]") && input.val()) {
                  var currentDate = new Date()
                  var isNewer = new Date($(input).val()) > currentDate;         
                  return isNewer;
                }
                return true;
              }
            },
            messages: {
              datevalidation: "The selected day could not be in the past"
            }
          });

 

You could also subscribe to the Grid cellClose event. In the event handler, you could get a reference to the DatePicker. Then, you could bind change event handler to the DatePicker and change the value of the widget if needed:

 

 
          $("#grid").kendoGrid({
            edit:  function(e) {             
              $('#OrderDate').data('kendoDatePicker').bind('change', datePickerChange)
            },
           .....
          })

 

 

 function datePickerChange(e){
          	 var value = this.value();
                var current = new Date();
                if(value < current){
                  $('#OrderDate').data('kendoDatePicker').value(current)
                }
          }

 

Here is a Dojo example where this is demonstrated. 

Regards,
Neli
Progress Telerik

[Ashraf]

OK I am trying to do a simple date format validation using the kendo ui validator function in the method you recommended - and if I attempt to input a date even in valid format, it gets stuck in a recursive loop. Can you please help? Dojo link below - Again apologies for the alerts :)

 

https://dojo.telerik.com/EcoMisoS

 

[Ashraf]

Getting the below error as well in the console when I try

 

 

[Neli]

Hi Ashraf,

I will need a little bit more time to review the provided sample. I will get back to you once I have more information to share.
Thank you very much for your patience.

Regards,
Neli
Progress Telerik

[Neli]

Hello Ashraf,

Could you please wrap the implementation for extending the validator as in the example below:

(function ($, kendo) {
         $.extend(true, kendo.ui.validator, {
           ...
          });
       })

This should resolve the issue with the error described in the screenshot you have provided.

However, I would suggest you revise the implementation of the Grid change event handler. In the handler you are trying to trigger the change event as follows:

 e.items[0].shipDate.trigger("change");

As the ' e.items[0].shipDate' is not a reference to a widget another error is observed. In case you need to trigger a change event of a widget, you need first to get a reference to it. Below is an example:

$('[name="shipDate"]').data('kendoDatePicker').value(today);
$('[name="shipDate"]').data('kendoDatePicker').trigger("change");

Here you will find the modified Dojo example.

I hope you will find the provided information helpful.

Regards,
Neli
Progress Telerik

[Ashraf]

Thanks Neli that worked like a charm!!

One small issue though regarding date validation -
If I type in a date like "2021-04-03abcd" , it is an invalid date, but it does not throw a format error like I would expect...Rather it removes the "abcd" and moves on to the next cell....Is that a kendo limitation?

[Ivan Danchev]

Removing characters entered after the valid date is the DatePicker's default behavior.