Unable to use k-invalid-msg and k-invalid on widget

4 posts, 0 answers
  1. Rafa
    Rafa avatar
    13 posts
    Member since:
    Jan 2013

    Posted 22 Jul 2015 Link to this post

    Hi there

    I came across a problem, where I couldn't find a solution yet: I've created a MVVM based form with a kendo combobox (<select data-role="combobox" name="my-element">), a custom invalid message element for this <select> (<span class="k-invalid-msg" data-for="my-element">) and a custom validator. When validating both fields, the <select> and the <input> element of the widget, are given to the validator and are validated correctly. I now face the problem, that I'm not able to show the error message AND append the invalid class to the widget input automatically. There are two possible cases:

    1) The widget <input> is validated. This way the input gets a k-invalid class and I can style the element to give an optical error. But at the same time the message <span> is ignored, since the name of the widget <input> and data-for do not match because kendo had to add an _input extend to the class.

    2) The <select> is validated. This way, the message is shown correctly, but the k-invalid class is given to the hidden <select> element, while the <input> of the widget remains untouched.

    What I would expect is that I can validate the widget <input> while the k-invalid class is appended to the widget itself and the k-invalid-msg <span> I defined for the original <select> element would be used to show the widgets error message. Why is this not the case?

  2. Alexander Valchev
    Admin
    Alexander Valchev avatar
    2875 posts

    Posted 24 Jul 2015 Link to this post

    Hello Patric,

    Is it possible for you to create a small but runnable Dojo page which dmeonstrates your current implementation? In this way I will be able to examine the scenario in details and assist you further.

    Thank you in advance for your time and cooperation.

    Regards,
    Alexander Valchev
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  3. Kendo UI is VS 2017 Ready
  4. Rafa
    Rafa avatar
    13 posts
    Member since:
    Jan 2013

    Posted 27 Jul 2015 in reply to Alexander Valchev Link to this post

    Hi Alexander

    The Dojo is new territory for me. So I hope this works: http://dojo.telerik.com/EmIzA

    It's a simple example of how the validation for kendo widget is handled by my current knowledge. What I am missing here, is an automatic behaviour like on example 3, where the widget input gets an invalid class and the .k-invalid-msg is used as well. Currently this is only possibly with a 'hack' (in my opinion).

    Did I oversee something, or is this the expected behaviour?

     

    Regards

    Patric

  5. Alexander Valchev
    Admin
    Alexander Valchev avatar
    2875 posts

    Posted 29 Jul 2015 Link to this post

    Hello Patric,

    Thank you for the example.

    The issue is caused by the way ComboBox widget works - it creates second input element and hides the original one.

    Custom validation rules should ran over the original hidden input. The 'k-invalid' class is also intended to be added to the original (currently hidden) input.

    One possible option to workaround this is the approach that you demonstrated. Another solution that you may try is using MutationObserver (not supported in old IE browsers).

    Regards,
    Alexander Valchev
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
Back to Top
Kendo UI is VS 2017 Ready