Inline edit - validation not working on DropDownList

11 posts, 0 answers
  1. M
    M avatar
    29 posts
    Member since:
    Oct 2012

    Posted 12 Nov 2012 Link to this post

    When a field is bound to a DropDownList it can't be validated in inline edit mode.

    I have a field which is set as required in the schema. This field is bound to a DropDownList when the grid is in inline edit mode. This is all working fine -- but validation is failing -- users are able to save the row without making a selection (the first entry of the DropDownList is displayed, but 'null' is saved with the row's data for this field).

    I've also noticed that in all the Grid examples that use a DropDownList - validation is not enabled on any of the fields. Maybe it's just not supported -- in which case it's a bit of a deal breaker.

    If I'm wrong, then can somebody please explain how you combine validation with DropDownLists on an inline editable grid?

  2. Michael
    Michael avatar
    1 posts
    Member since:
    Oct 2012

    Posted 14 Nov 2012 Link to this post

    I was able to make some progress with this problem by creating a custom validation handler. Like so...

                                validation: { 
                                    custom: function(input){
                                        input.attr("data-custom-msg", "test");
                                        return input > 0;
    Breaks in a different way...
  3. M
    M avatar
    29 posts
    Member since:
    Oct 2012

    Posted 15 Nov 2012 Link to this post

    Thanks Michael,

    That's certainly progress. I can now at least prevent the row being saved.

    I'm using: the following, which checks that it's dealing with the correct input. I simply can't get a validation error message to appear though, probably because the input field is hidden.

    I've searched through these forums, and the question of how to do validation of a DropDownList in a Grid comes up a few times, but there has never been any input from Telerik -- it seems it's just something they haven't thought of. 
    validation: {
        required: true,
        contract: function(input){
            if (input.attr('data-value-field')=='contract_id'){
                return input.val() > 0;
            return true;
  4. Tom
    Tom avatar
    44 posts
    Member since:
    Jun 2007

    Posted 16 Nov 2012 Link to this post

    Same problem for me. I've created a custom validation and I know its actually getting to the code, and in testing I can return true or false to force it to show, but I don't see anything. Look forward to seeing what happens on this thread. The other standard text fields all show their validation correctly. But my dropdownlist does not.
  5. Jon
    Jon avatar
    3 posts
    Member since:
    Nov 2012

    Posted 09 Jan 2013 Link to this post

    I ran into the same problem, and it turned out (for me at least) that it was in fact validating, it is just hidden - due to poor design. When you use a drop down, it nests the input in a span. Kendo places the warning message as a sibling to the input, so it is there, just hidden. If you look at the DOM it should look something like:

    <span style="" class="k-widget k-dropdown k-header" unselectable="on" role="listbox" aria-haspopup="true" aria-expanded="false" tabindex="0" aria-busy="false"><input data-text-field="Field" data-value-field="ID" data-bind="value:Field" data-role="dropdownlist" style="display: none;" data-unique-msg="Validation Message" aria-invalid="true" class="k-invalid"><div class="k-widget k-tooltip k-tooltip-validation k-invalid-msg" style="margin: 0.5em;" data-for="" role="alert"><span class="k-icon k-warning"> </span>Validation Message<div class="k-callout k-callout-n"></div></div></span>
    Notice that the validation is there, but in the span. If you pull out the validation message out of the span, it will show up (use jQuery to append it to the parent <td> element).
  6. Rosen
    Rosen avatar
    3253 posts

    Posted 14 Jan 2013 Link to this post

    Hello Jon,

    As you may know, when validating widgets you should use validation message placeholder in order to instruct where the message should be placed. This is required as the widget usually renders a more complex html around the input element which is validated.

    All the best,
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  7. Rafik
    Rafik avatar
    2 posts
    Member since:
    Jan 2013

    Posted 25 Jan 2013 Link to this post


  8. kahuna
    kahuna avatar
    6 posts
    Member since:
    Jun 2007

    Posted 08 Jul 2013 Link to this post

    Suddenly, the inline grid validation for a drop down list magically started working when I added:
    to GridForeignKey.cshtml

    My Full GridForeignKey.cshtml:
    @model object
     Html.Kendo().DropDownListFor(m => m).OptionLabel("Choose...")  
            .BindTo((SelectList)ViewData[ViewData.TemplateInfo.GetFullHtmlFieldName("") + "_Data"])
  9. JP
    JP avatar
    3 posts
    Member since:
    Jan 2015

    Posted 09 Jul 2015 in reply to Rosen Link to this post

    Is there any example to do this? . Your link doesn't explain a lot. I use a dropdownlist in a grid but my validation doesn't work for my dropdownlist.


    validation: {
    dropdownlistValidation:function(input) {
                if ("[name='MyDropDownId']")) {
                    var isValid = true;
                    input.attr("data-mydropdownId-msg", "Not valid.");                                                         if(input.val()<1){                                                                                             isValid=false;
                     return isValid;
                return true;

  10. Daniel
    Daniel avatar
    2231 posts

    Posted 14 Jul 2015 Link to this post


    I am not sure if I understand correctly the issue but with the code that you provided the message will not be shown because of incorrect attribute. The attribute should be in the format data-RuleName-msg. I created an example based on the custom editor demo that demonstrates using the provided validation rule.

    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  11. Lasse
    Lasse avatar
    58 posts
    Member since:
    Oct 2010

    Posted 28 Apr 2016 in reply to kahuna Link to this post

    Thanks! That just saved me several hours of headache!!

    That also works using jQuery:

    $('<input name="'+ options.field +'" data-text-field="Text" data-value-field="Value" data-bind="value:' + options.field + '" />')
        optionLabel: "Select Item",
        dataTextField: "Text",
        dataValueField: "Value",
        valuePrimitive: true,
        filter: "contains",
        autoBind: false,
        dataSource: {
          transport: {
            read: {
              url: "@Url.Action("GetSelectListData", "Home", new {}).ToHtmlString()"
Back to Top