MVC DataAnnotation with dropdown isue

12 posts, 0 answers
  1. Robert
    Robert avatar
    37 posts
    Member since:
    Aug 2015

    Posted 22 Apr Link to this post

    Hi,

     

    I am using MVC data annotation in the class (sample below) everything works ok but I am facing two issues
    1. The class doesn't turn to "k-invalid" after submit click for the kendo comboboxm, therefore, I cannot set the css as red
    2. The conbobox tooltip is behind another control, tooltip doesn't expand it like textbox

    [Required(ErrorMessage = "Car Owner is required.")]
    [Range(1, int.MaxValue, ErrorMessage = "This is invalid.")]
    public int? CarOwnerId { get; set; }

    Thank you!

  2. Robert
    Robert avatar
    37 posts
    Member since:
    Aug 2015

    Posted 25 Apr Link to this post

    By the way, here is what I found. the dropdown should be class="k-input k-invalid" but it is "k-input k-valid" that's the reason it doesn't turn red with CSS I set. should someone please tell me how I can set it up as "k-invalid"?

    thanks

  3. UI for ASP.NET MVC is VS 2017 Ready
  4. Robert
    Robert avatar
    37 posts
    Member since:
    Aug 2015

    Posted 26 Apr in reply to Robert Link to this post

    Here is what I found:

    The dropdown is using "k-valid" which is not correct.
    The hidden dropdown is using "k-invalid" which is correct, so the error message popup, but I can not make it as red.


    thanks
  5. Robert
    Robert avatar
    37 posts
    Member since:
    Aug 2015

    Posted 26 Apr Link to this post

    well.. I cannot find an official way to make it work so I end up hijacking it by using jquery watch to monitor class modification.

     

            monitorAllKendoCombobox: function (currentForm, e) {
                $("#" + currentForm.attr("id")+ " input[data-role=combobox]").each(function () {
                    $(this).watch({
                            properties: "attr_class",
                            callback: function (data, i) {
                                    $(this).parents(".k-combobox").removeClass("has-error");

                                    if ($(this).hasClass("k-invalid"))
                                        $(this).parents(".k-combobox").addClass("has-error");
                            }
                        });
                    });
            },

  6. Ianko
    Admin
    Ianko avatar
    1535 posts

    Posted 27 Apr Link to this post

    Hi Robert,

    The described behavior is expected. ComboBox widget renders two input elements. As you have already found out. Kendo Validator, however, validates based on the model. And as  the visible input is not bound to a model fields, but it is used only as a presentation element it is always evaluated as valid.

    The solution you found is valid and as soon as it works I assume you can safely use it.  

    I would like also to propose another solution: Using the validateInput method and modify the combobox elements as per to the requirements. I cannot suggest modifying the k-valid and k-invalid classes as they are used internally. However, you can add your own classes. Like in this example:

    ...
        @Html.LabelFor(model => model.FieldOne, htmlAttributes: new { @class = "control-label col-md-2" })
        <div class="col-md-10">
            @Html.Kendo().ComboBoxFor(model => model.FieldOne).HtmlAttributes(new { @class = "form-control" })
            @Html.ValidationMessageFor(model => model.FieldOne, "", new { @class = "text-danger" })
        </div>
    ...
    <input id="submitBtn" type="submit" value="Create" class="btn btn-default" />
    ...
    <script>
            $(function () {
                var validator = $("form").kendoValidator().data("kendoValidator");
                 
                $("#submitBtn").click(function () {
                    var comboBoxInput = $("#FieldOne").data("kendoComboBox").input;
     
                    if (!validator.validateInput($("input[name=FieldOne]"))) {
                        comboBoxInput.addClass("my-invalid");
                        console.log(comboBoxInput);
                    } else {
                        comboBoxInput.removeClass("my-invalid");
                    }
                })
            });
    </script>

    Using this approach, you can handle click, focus, blur and other DOM events to better control the visual appearance of the validated inputs. 


    As for the validation messages position. I am not sure why you are getting this results. I suggest you to inspect the CSS that decorates the elements and see whether there are any CSS rules that cause this issue.

    Regards,
    Ianko
    Telerik
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  7. Robert
    Robert avatar
    37 posts
    Member since:
    Aug 2015

    Posted 27 Apr in reply to Ianko Link to this post

    Thank you so much for your suggestion!

     

    I tried your code (validateInput) and it works when user click on submit button but it doesn't work with blur event real time validation. I wonder how can I make the blur works for all dropdowns based on the MVC Data Annotation settings?

     

    Regard to the overlap message, I checked all css and I cannot find it. The error message has no issue with textboxFor and only has issue with comboboxFor. Therefore, in the end, I added forced z-index to make it on the top all the time instead of automatically pushing down like textbox.

     

    thanks!

     

  8. T. Tsonev
    Admin
    T. Tsonev avatar
    2771 posts

    Posted 02 May Link to this post

    Hello,

    Please accept my apologies for the delayed response. Ianko is off duty today, but I'll try to provide some suggestions based on the discussion so far.

    You can attach a change handler to all ComboBox-es in order to be able to update the validation status.
    @Html.Kendo().ComboBoxFor(model => model.FieldOne).HtmlAttributes(new { @class = "form-control" }).Events(e => e.Change("onChange"))

    <script>
        function onChange() {
                    var comboBoxInput = this.input;
     
                    if (!validator.validateInput(this.element)) {
                        comboBoxInput.addClass("my-invalid");
                        console.log(comboBoxInput);
                    } else {
                        comboBoxInput.removeClass("my-invalid");
                    }
        }
    </script>

    I hope this helps.

    Regards,
    T. Tsonev
    Telerik
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  9. Robert
    Robert avatar
    37 posts
    Member since:
    Aug 2015

    Posted 02 May in reply to T. Tsonev Link to this post

    thanks! I will give it a try afterwards! and post updates afterwards
  10. Robert
    Robert avatar
    37 posts
    Member since:
    Aug 2015

    Posted 06 May in reply to Robert Link to this post

    I found another issue with MVC Data Annotation with Kendo dropdownlist.

    The kendo Dropdownlist is an ajax componet after the user type the first letter, it will look up from the server to get filtered return, which is like auto complete control.

    When user and number, such as, 123, it still pass the validation even it is not a valid value from the database lookup. I can I prevent this? (the _input hidden textbox shows it is a valid entry)

     

    thanks!

     

     

  11. Ianko
    Admin
    Ianko avatar
    1535 posts

    Posted 10 May Link to this post

    Hello Robert,

    Typically, the client-side validation only takes care to validate the refex filter. It is not related to the serve-side filtering somehow and it does not know of the existence of such filtering. 

    As a custom solution that you could probably implement is to handle that withing the onChange handler. You call there an AJAX call to the server that checks whether the value is among the bound ones and update the validation state of the widget. As this is considered as a custom solution I am unable to consult about an exact implementation to achieving this. 

    Regards,
    Ianko
    Telerik
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  12. Robert
    Robert avatar
    37 posts
    Member since:
    Aug 2015

    Posted 12 May in reply to Ianko Link to this post

    Thanks.

    Yes, that's what I ended up doing by empty out the dropdown if nothing is matching up from ajax return. However, I don't think this should be a custom solution, I think this should be included with kendo control. All what I have done sounds like I am hijacking kendo controll's behaviors. This is what I don't like to do because it could bring us to the upgrade nightmare.

    I think kendo dropdownlist validation is very lose with MVC Data Annotation. It will be great if you can make it more close to MVC with Data Validation for the future version, I think this will benefit a lot to the MVC customers who like to use MVC standard way to do data validation.

     

    Regards,

  13. Ianko
    Admin
    Ianko avatar
    1535 posts

    Posted 13 May Link to this post

    Hi Robert,

    I am not quite sure how data annotation is related to server filtering in dropdown. Emptying the populated widget when there are not results from the server-side filtering is not directly related to validation too. 

    Native MVC helpers use data annotation by utilizing HTML5 validation. Kendo validation and Kendo widgets are implemented in a similar way. Kendo Validation utilizes the same validation attributes to render HTML5 data attributes for client-side validation. What Kendo validation extends is built-in integration with Kendo widgets and rich set of API and events. 

    That said, in order for client-side validation to mark a field as invalid, AJAX is involved. This is the main part that is considered as custom solution. Tying up validation and some server-side call back is something that should be implemented manually as it is not something that the particular widget should do, aside of filtering its own items.

    In case you have ideas or suggestions regarding client-side validation and the incorporation of data annotation, you can post them here—http://kendoui-feedback.telerik.com/forums/127393-telerik-kendo-ui-feedback. Of course, further technical details will be greatly appreciated in order for the dev team to properly evaluate your query.  Also, you can add details about what is missing in the Kendo MVC wrappers that is included in the native MVC helpers. 

    Regards,
    Ianko
    Telerik
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
Back to Top
UI for ASP.NET MVC is VS 2017 Ready