Kendo grid update issue - kendo-ui

Question

i'm new to Kendo Grid.Can anyone help me.In Grid if Data is not given onclick of update button validation is raised.but the row gets updated.Update shouldn't happen
#(Html.Kendo().Grid<Project.Models.EmployeeDetail>()
.Name("EmployeeGrid")
.Columns(col =>
{
col.Bound(p => p.EName).Width("15%").Title("Name")
col.Bound(a => a.Address).Title("Address").Width("15%");
col.Command(a => { a.Edit(); }).Width("10%").Title("Edit");
col.Command(a => {a.Destroy();}).Title("Delete").Width("10%");
}
)
.Pageable()
.ToolBar(toolbar => toolbar.Create().Text("Add"))
.Editable(editable => editable.Mode(GridEditMode.InLine))
.DataSource(source => source
.Ajax()
.PageSize(4)
.Model(a => a.Id(b => b.Name))
.Read(read => read.Action("EmpGrid", "Employee"))
.Create(create => create.Action("EmpGridCreate", "Employee"))
.Update(update => update.Action("EmpGridUpdate", "Employee"))
.Destroy(del => del.Action("EmpGridDelete", "Employee"))
)
.Events(e =>
{
e.Save("SaveDetails");
e.Edit("EditDetails");
}))
Save Event Code:
function SaveDetails(e)
{
var result=true;
writeMultipleMessage("error", "", "EName");
var EmpName = $("#EName").val();
if(EmpName ==""|| EmpName == null || EmpName ==undefined)
{
writeMultipleMessage("error", "Please Provide Employee Name", "EName");
e.preventDefault();
result = false;
}
else
{
e.model.EName=EName;
}
writeMultipleMessage("error", "", "Address");
var AddressDet=$("#Address").val();
if (AddressDet == "" || AddressDet == null || AddressDet == undefined) {
writeMultipleMessage("error", "Please provide Address", "Address");
e.preventDefault();
result = false;
}
else {
e.model.Address = Address;
}
var Grid = $("#EmployeeGrid").data("kendoGrid");
Grid.refresh();
}
I have shown my code above
Update is Hitting Save Event.Row is updated though validation is thrown.Row should not get updated
Can anyone Suggest some idea.Thanks in Advance.Sorry if it is a repeated Question.

Answer 1

The issue is that $("#EmpName").val() isn't valid to the row you are trying to update. You have to look in the DOM object for the Kendo Grid row for your Column value. We can use $(e.cell).find() to locate the column you need to get for that row.
Try your JavaScript like this:
function SaveDetails(e)
{
var result=true;
writeMultipleMessage("error", "", "EName");
var EmpName = $(e.cell).find("#EName").val();
if(EmpName ==""|| EmpName == null || EmpName ==undefined)
{
writeMultipleMessage("error", "Please Provide Employee Name", "EName");
e.preventDefault();
result = false;
}
else
{
e.model.EName=EName;
}
writeMultipleMessage("error", "", "Address");
var AddressDet = $(e.cell).find("#Address").val();
if (AddressDet == "" || AddressDet == null || AddressDet == undefined) {
writeMultipleMessage("error", "Please provide Address", "Address");
e.preventDefault();
result = false;
}
else {
e.model.Address = Address;
}
var Grid = $("#EmployeeGrid").data("kendoGrid");
Grid.refresh();
}
Here is Kendo UI's treasure trove of examples for the Kendo UI Grid for further assistance:
Kendo UI Grid Demo projects (MVC version)
Kendo UI Grid Demo projects (HTML5/JS version)