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

4 posts, 0 answers
  1. Tim
    Tim avatar
    4 posts
    Member since:
    Oct 2012

    Posted 22 May 2015 Link to this post

    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?

  2. Kiril Nikolov
    Admin
    Kiril Nikolov avatar
    2564 posts

    Posted 26 May 2015 Link to this post

    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!
     
  3. Kendo UI is VS 2017 Ready
  4. Tim
    Tim avatar
    4 posts
    Member since:
    Oct 2012

    Posted 27 May 2015 in reply to Kiril Nikolov Link to this post

    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.

  5. Kiril Nikolov
    Admin
    Kiril Nikolov avatar
    2564 posts

    Posted 29 May 2015 Link to this post

    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!
     
Back to Top
Kendo UI is VS 2017 Ready