Kendo MVC [Required] attribute causes .set to fail in js

[Tim]

I have a Kendo().Grid<>() that uses a MVC EditorTemplate to PopUp and allow the fields to be changed.  When I type in the editor template all is well.  However, if I update the field using .set('Field', 'Value') on a field that has the [Required] attribute set in C#, the set does not update the value.

Here is the ViewModel object definition:

public class SampleVM
{
    public int Id { get; set; }
    [Required]
    public string Foo { get; set; }
    public string Bar { get; set; }
}

Here is my Grid definition:

@(Html.Kendo().Grid<SampleVM>()
    .Name("cSampleGrid")
    .DataSource(ds => ds
        .Ajax()
        .Read(r => r.Action("IndexList", "Home"))
        .Create(c => c.Action("CreateIndex", "Home"))
                .Model(m =>
                {
                    m.Id(f => f.Id);
                }

        )
    )
    .ToolBar(t => t.Create().Text("Create Index"))
    .Editable(e => e.Mode(GridEditMode.PopUp))
    .Events(e => e.Edit("OnEditSample"))
)

@section Scripts {
<script>
    function OnEditSample(pEvent) {
        var editDiv = pEvent.container;
        var editWindow = pEvent.container.data('kendoWindow');
        var editable = pEvent.model;
        if (editable.ContactID == 0)
            editWindow.title = 'Create Index';
        else
            editWindow.title = 'Edit Index';
        editWindow.editable = editable;

        $('#cFillButton', pEvent.container).click(function (pEvent) {
            editWindow.editable.set('Foo', 'Foo');
            editWindow.editable.set('Bar', 'Bar');
        });

    }
</script>
}

Here is my editor template:

@model KendoRequiredBug.Models.SampleVM

    @Html.AntiForgeryToken()

        @Html.ValidationSummary(true, "", new { @class = "text-danger" })
        <div class="field-label">
            @Html.LabelFor(model => model.Foo, htmlAttributes: new { @class = "control-label col-md-2" })
        </div>
            <div class="field-editor">
                @Html.EditorFor(model => model.Foo, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.Foo, "", new { @class = "text-danger" })
            </div>

        <div class="field-label">
            @Html.LabelFor(model => model.Bar, htmlAttributes: new { @class = "control-label col-md-2" })
        </div>
            <div class="field-editor">
                @Html.EditorFor(model => model.Bar, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.Bar, "", new { @class = "text-danger" })
            </div>
<div style="clear:both"></div>
<div><a id="cFillButton" class="k-button">Fill</a></div>

When the Fill button is clicked, the Bar field is set properly, however the Foo field is left blank and the "Required field" error message is shown.  If I remove the [Required] attribute from 'Foo', then both fields update as expected.  I am using Kendo 2015.1.429.

Can anyone explain what is going on?

[Kiril Nikolov]

Hello Tim,

I have tried to reproduce the problem in a simple runnable example, but to no avail. Can you please see the attached project and edit it in order to show the issue that you face? Thanks for the cooperation.

Regards,
Kiril Nikolov
Telerik

 

 

[Tim]

Kiril,

Thanks for taking a look.  I put together a full example solution for you.  I think it will demonstrate the issue completely.  Please take a look.

Once the solution comes up, click the "Create Index" button and then the "Fill" button.  The Foo field is required, but is not filled in.  The Bar field is not required, and it is filled in.  If I comment out the "Required" attribute, then Foo is also filled in as expected.

[Kiril Nikolov]

Hello Tim,

The problem comes from the fact that the validation listens for the change event of the input, as it is a UI Validation. So when you change the model, it will not fire the change event and therefore the validation will be fired. In order to workaround this, you can directly set the value of the input and trigger its change event, like this:

function OnEditSample(e) {
        var dataItem = e.model;

        $('#cFillButton', e.container).click(function (pEvent) {
            $(".text-box").eq(0).val("Foo").trigger("change");
            $(".text-box").eq(1).val("Foo").trigger("change");
        });

    }

Regards,
Kiril Nikolov
Telerik