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

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

3 Answers 105 Views
MVVM
This is a migrated thread and some comments may be shown as answers.
Tim
Top achievements
Rank 1
Tim asked on 22 May 2015, 03:20 PM

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?

3 Answers, 1 is accepted

Sort by
0
Kiril Nikolov
Telerik team
answered on 26 May 2015, 10:59 AM

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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Tim
Top achievements
Rank 1
answered on 27 May 2015, 03:16 PM

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.

0
Kiril Nikolov
Telerik team
answered on 29 May 2015, 06:57 AM

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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
Tags
MVVM
Asked by
Tim
Top achievements
Rank 1
Answers by
Kiril Nikolov
Telerik team
Tim
Top achievements
Rank 1
Share this question
or