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

MVC DataAnnotation with dropdown isue

11 Answers 426 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
Robert
Top achievements
Rank 1
Robert asked on 22 Apr 2016, 07:01 PM

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!

11 Answers, 1 is accepted

Sort by
0
Robert
Top achievements
Rank 1
answered on 26 Apr 2016, 12:29 AM

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

0
Robert
Top achievements
Rank 1
answered on 26 Apr 2016, 03:47 PM
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
0
Robert
Top achievements
Rank 1
answered on 27 Apr 2016, 12:53 AM

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");
                        }
                    });
                });
        },

0
Ianko
Telerik team
answered on 27 Apr 2016, 07:17 AM
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
0
Robert
Top achievements
Rank 1
answered on 27 Apr 2016, 04:52 PM

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!

 

0
T. Tsonev
Telerik team
answered on 02 May 2016, 07:48 AM
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
0
Robert
Top achievements
Rank 1
answered on 02 May 2016, 08:58 PM
thanks! I will give it a try afterwards! and post updates afterwards
0
Robert
Top achievements
Rank 1
answered on 06 May 2016, 08:49 PM

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!

 

 

0
Ianko
Telerik team
answered on 10 May 2016, 12:52 PM
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
0
Robert
Top achievements
Rank 1
answered on 12 May 2016, 06:41 PM

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,

0
Ianko
Telerik team
answered on 13 May 2016, 06:40 AM
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
Tags
General Discussions
Asked by
Robert
Top achievements
Rank 1
Answers by
Robert
Top achievements
Rank 1
Ianko
Telerik team
T. Tsonev
Telerik team
Share this question
or