Kendo UI MVVM

[Wayne Hiller]

I am using Kendo UI MVVM in my site. I am building tests with the Testing Framework.

I find the HtmlInputControl and assign the Value, I can see it fill in on the page.

I then call input.InvokeEvent( ScriptEventType.OnBlur ); to try and force the Kendo MVVM to assign the value to the model.

It does not seem to work for plain inputs (type=text) or textarea's. Kendo UI ComboBox, Autocomplete, NumbericInput do work with the above process.

Any ideas?

 

 

 

 

 

[Wayne Hiller]

Well as is always the case I figured it out 2 seconds after I created this post lol. In needed a change event too.

            input.InvokeEvent( ScriptEventType.OnChange );
            input.InvokeEvent( ScriptEventType.OnBlur );

 

[Elena]

Hello Wayne,

Great to know you managed to resolve this on your own and sharing what you have found. In case of any further questions do not hesitate to contact us again! Thanks! 

Regards,
Elena Tsvetkova
Progress Telerik

 

 

[Wayne Hiller]

Well it turns out my code only works in Firefox when working with Kendo DropDownLists. I changed to the code to:

 

public static KendoInput SetKendoInput( this Browser browser, HtmlFindExpression expression, string cls, string value ) {
            var control = browser.Find.ByExpression<HtmlControl>( expression );
            Assert.IsNotNull( control, $"Element \"{expression}\" not found" );

            do {
                control = control.Parent<HtmlSpan>();
            } while( !control.CssClass.Contains( cls ) );

            KendoInput input = null;
            if( control != null ) {
                input = control.BaseElement.As<KendoInput>();
            }

            if( input != null ) {
                input.InputValue = value;
                input.InvokeEvent( ScriptEventType.OnChange );
                input.InvokeEvent( ScriptEventType.OnBlur );
            }

            return input;
        }

 

I can see the value get assigned to the DropDown when running a test but when I do Validation client side before posting I get a "Required" validation error like the value was never assigned to the "original html" input.

Should I be calling the Onchange/OnBlur on something else? 

 

 

[Wayne Hiller]

Actually I just noticed that my Validation error is happening server side. So the code I listed above is not forcing the Kendo MVVM to post the value from the control to the model. Should I call the OnChange/OnBlur on the original input maybe?

[Elena]

Hi Wayne,

Thanks for sharing all your findings. 

Have you tried to invoke the events on the original input? Did this change the behavior? 

Regards,
Elena Tsvetkova
Progress Telerik

 

 

[Wayne Hiller]

The only way I could get the things working was to use the HtmlInput.Text field and then fire the Onchange & Onblur events and only in Firefox. The Kendoxxxx.InputValue will not trigger the binding to assign the value to the model. The Kendoxxxxx.TypeText() works in some cases on some browsers but not all. I have my tests working in finrfox but unfortunately it is the slowest browser, wish we could use the new Developer version, much faster.

 

It seems like posting the events that force the bindings to assign the value to the model when assigning to the InputValue should be built into the KendoXxxxxx wrappers. I like assigning the value directly because then the mouse is never involved and it is faster.

 

 

[Elena]

Hi Wayne,

Thank you for getting back. 

It seems that the controls are different in the different browsers. Obviously OnBlur and OnChange are working fine in Firefox but in Chrome probably the JavaScript events are not the same. This is the reason for the observed behavior.

Though using the desktop actions are working fine as you have mentioned at the beginning. I understand it is not the optimal speed for execution but the approach is unified for all browsers and works as expected. 

I hope this will be helpful to you. Thanks! 

Regards,
Elena Tsvetkova
Progress Telerik

 

 

[Wayne Hiller]

Ok that makes sense.  I have it working pretty well in Firefox for what I need on my dev machine. When running on the automation machine I can set it to use the TypeText method instead. Even when using the TypeText method I had problems with the KendoNumericTextBox not working (Not posting the value to the model) when running in InternetExplorer.

 

I also have some issues with the DialogMonitor not working every time.  Is there an example somewhere that shows how it should be used?

I will keep on testing things.

 

[Wayne Hiller]

Actually it was pretty simple to solve.

input is a KenoInput.

input.InputValue = value;

input.CallMethod<string>( "trigger('change')" );

[Elena]

Hello Wayne,

Thanks for sharing the solution. I am glad to know that works now for you! 

Regards,
Elena Tsvetkova
Progress Telerik