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>