Simple validation when using grid inline editing with server binding

2 posts, 0 answers
  1. Shane
    Shane avatar
    5 posts
    Member since:
    Sep 2015

    Posted 16 Oct 2015 Link to this post

    Hi.  I'm trying to run very simple validation for the grid inline edit function. 

     - GridEditMode.InLine

     - Server binding

     - Trying to add "onsubmit" attribute to the "GridForm" form element (it does not work)

    Or does DataAnnotation based validation works for this case?  If so, please let me know any sample code for that.  I could only see AJAX version or non-grid version.

    Below is my cshtml file:

    @using Kendo.Mvc.UI;
    @using Kendo.Mvc.Extensions;
    @model WebApp.Features.Vendor.Index.Result
    @{
        ViewBag.Title = "Vendor Management";
    }
    <div class="jumbotron">
        <div id="clientsDb">
            @Html.ValidationDiv()
            @(Html.Kendo().Grid((IEnumerable<PayBy.WebApp.Features.Vendor.UiController.Vendor>)Model.Vendors)
            .Name("Grid")
            .Columns(columns =>
            {
                columns.Bound(c => c.VendorName).Title("Name").Width(30);
                columns.Bound(c => c.IsInternal).Title("Internal").Width(30);
                columns.Bound(c => c.AccountName).Title("Account").Width(50);
                columns.Command(commands => commands.Edit()).Width(30);
            })
            .ToolBar(toolbar => toolbar.Create().Text("Add"))
            .Sortable()
            .Editable(editable => editable.Mode(GridEditMode.InLine))
            .HtmlAttributes(new { style = "height: 480px;" })
            .Scrollable()
            .DataSource(dataSource => dataSource
                .Server()
                .Model(model =>
                {
                    model.Id(p => p.Id);
                    model.Field(f => f.AccountName).Editable(false);
                })
                .Create("Update", "Vendor")
                .Update("Update", "Vendor")
                .Sort(sort => sort.Add("VendorShortName").Ascending())
            )
            )
        </div>
    </div>
    <div class="row">
    </div>
    <script>
        var form = $('#GridForm');
        if (form != null) {
            form.attr('onsubmit', 'return ValidateForm();');
        }
        function ValidateForm()
        {
            alert('validate');
            if ($('#VendorName').val().length == 0) {
                alert('[Name] Required field.');
                return false;
            }
            if ($('#VendorName').val().length > 256) {
                alert('[Name] Maximum 256 letters.');
                return false;
            }
            return true;
        }
    </script>

  2. Daniel
    Admin
    Daniel avatar
    2117 posts

    Posted 21 Oct 2015 Link to this post

    Hello,

    The function will not be called because the form id is in the format GridName plus "form" with lowercase letter:
    var form = $('#Gridform');
    Changing the id should resolve the problem but I would recommend using the DataAnnotation attributes instead. Based on the logic in the ValidateForm function, you could set the Required and StringLength attributes on the VendorName property and either initialize a Kendo validator on the form:
    $('#Gridform').kendoValidator();
    or include the jQuery validation scripts.

    Regards,
    Daniel
    Telerik
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  3. UI for ASP.NET MVC is VS 2017 Ready
Back to Top