Kendo grid update issue

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.

piercove piercove · Accepted Answer · 2014-06-11T14:45:33

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)

Kendo grid update issue

1 Answers