Inline edit - validation not working on DropDownList

[M]

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?

Thanks

[Michael]

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");
                                    console.log(input);
                                    return input > 0;
                                }
                            } 
Breaks in a different way...

[M]

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;

    }

}


[Tom]

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.

[Jon]

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).

[Rosen]

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,
Rosen
the Telerik team

[Rafik]

 

[kahuna]

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

.OptionLabel("Choose...")

to GridForeignKey.cshtml

My Full GridForeignKey.cshtml:

@model object

@(
 Html.Kendo().DropDownListFor(m => m).OptionLabel("Choose...")
        .BindTo((SelectList)ViewData[ViewData.TemplateInfo.GetFullHtmlFieldName("") + "_Data"])
)

[JP]

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 (input.is("[name='MyDropDownId']")) {
               var isValid = true;
               input.attr("data-mydropdownId-msg", "Not valid.");                                                         if(input.val()<1){                                                                                             isValid=false;
                }
                return isValid;
           }
           return true;
          }
}

[Daniel]

Hi,

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.

Regards,
Daniel
Telerik

 

 

[Lasse]

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 + '" />')
  .appendTo(container)
  .kendoDropDownList({
    optionLabel: "Select Item",
    dataTextField: "Text",
    dataValueField: "Value",
    valuePrimitive: true,
    filter: "contains",
    autoBind: false,
    dataSource: {
      transport: {
        read: {
          url: "@Url.Action("GetSelectListData", "Home", new {}).ToHtmlString()"
        }
      }
    },
  });