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">
            .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"))
            .Editable(editable => editable.Mode(GridEditMode.InLine))
            .HtmlAttributes(new { style = "height: 480px;" })
            .DataSource(dataSource => dataSource
                .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 class="row">
        var form = $('#GridForm');
        if (form != null) {
            form.attr('onsubmit', 'return ValidateForm();');
        function ValidateForm()
            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;

  2. Daniel
    Daniel avatar
    2110 posts

    Posted 21 Oct 2015 Link to this post


    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:
    or include the jQuery validation scripts.

    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 AJAX banner
Back to Top