Creating record in inline edit mode generates duplicates

[StuartLittle]

I am using Kendo version 2020.1.114.545

In inline edit mode, when I am adding a new record, its creating duplicates.

Here is my controller code

public ActionResult Employee_Create([DataSourceRequest]DataSourceRequest request, Employee employee)
        {
            repository.CreateEmployee(employee.Name, employee.NetworkID, employee.SeniorityDate, employee.ApplicationDate, employee.Shift);
            return Json(new[] { employee }.ToDataSourceResult(request, ModelState), JsonRequestBehavior.AllowGet);
        }

 

And the razor view

@(Html.Kendo().Grid<PCOSAWeb.Models.Employee>()

                        .Name("EmployeeGrid")
                        .Columns(columns =>
                        {
                            columns.Bound(p => p.Name).Width(300);
                            columns.Bound(p => p.NetworkID).Width(100);
                            columns.Bound(p => p.SeniorityDate).ClientTemplate("#= SeniorityDate ? kendo.toString(kendo.parseDate(SeniorityDate), 'MM/dd/yyyy') : '' #").Filterable(ftb => ftb.Cell(cell => cell.ShowOperators(false))).Width(200);
                            columns.Bound(p => p.ApplicationDate).ClientTemplate("#= ApplicationDate ? kendo.toString(kendo.parseDate(ApplicationDate), 'MM/dd/yyyy') : '' #").Filterable(ftb => ftb.Cell(cell => cell.ShowOperators(false))).Width(200);
                            columns.Bound(p => p.Shift).Width(150);
                            columns.Command(command => { command.Edit(); command.Destroy(); }).Width(200);
                        })
                        .ToolBar(toolbar => toolbar.Create())
                        .Editable(editable => editable.Mode(GridEditMode.InLine))
                        .Pageable(a => a.PageSizes(new int[] { 50, 100 }))
                        .Sortable()
                        .Scrollable()
                        .HtmlAttributes(new { style = "height:700px;" })
                        .Events(events => events.DataBound("onDataBound")
                        )
                .DataSource(dataSource => dataSource
                .Ajax()
                .PageSize(100)
                .Model(model => model.Id(p => p.EmployeeID))
                .Read(read => read.Action("Employees_Read", "Admin"))
                .Update(update => update.Action("Employees_Update", "Admin"))
                .Destroy(destroy => destroy.Action("Employee_Delete", "Admin"))
                .Create(create => create.Action("Employee_Create", "Admin"))
        )
    )

 

Is this a bug? In stackoverflow, someone suggested to return entire record. I am already doing that in the controller.

Please suggest a resolution. Thank you.

 

[Tsvetomir]

Hi, grid-wise the setup is correct and the correct values are returned from the server-side. Could you share the JavaScript function for the DataBound event? As well as, the logic of the CreateEmployee method of your repository? 

It is important to point out that the object that is returned from the server-side should have the Id field set to a value different from 0.

[StuartLittle]

Based on the value of Shift column, I am adding css class
<style>
.dayClass {
background-color: #d3f4ff;
}

.eveningClass {
background: #ffe8d6;
}

.nightClass {
background: #fcf5b0;
}

.noClass {
background: #f4f4f4;
}
</style>

function onDataBound(e) {
var EmployeeGrid = $('#EmployeeGrid').data("kendoGrid");
$("#EmployeeGrid tr.k-alt").removeClass("k-alt");

var items = e.sender.items();
items.each(function (index) {
var dataItem = EmployeeGrid.dataItem(this);
if (dataItem.Shift == 'Days') {
this.className += " dayClass";
}
else if (dataItem.Shift == 'Eves') {
this.className += " eveningClass";
}
else if (dataItem.Shift == 'Mids') {
this.className += " nightClass";
}
else {
this.className += " noClass";
}
})
}

CreateEmployee interacts with DB using Dapper

public int CreateEmployee(string name, string networkID, DateTime seniorityDate, DateTime applicationDate, string shift)
{
var affectedRows = 0;

var parameters = new DynamicParameters();
parameters.Add("@Name", name);
parameters.Add("@NetworkID", networkID);
parameters.Add("@SeniorityDate", seniorityDate);
parameters.Add("@ApplicationDate", applicationDate);
parameters.Add("@Shift", shift);

using (var connection = new SqlConnection(connectionString))
{
try
{
connection.Open();
affectedRows = connection.Execute("usp_CreateEmployee", parameters, null, commandType: CommandType.StoredProcedure);
}
catch (Exception ex)
{
ErrorMailer.Log(ex);
}
finally
{
connection.Close();
}
}

return affectedRows;
}

[Anton Mironov]

Hi, 

I am not quite sure what may be the cause of this behavior in your application. As my colleague, Tsvetomir said, the main reason for the faulty behavior is probably server-related.

When adding a new record, the BackEnd should generate an Id for it. In another case, the inserted item will be treated as a new one every time you refresh the Kendo UI Grid.

The fastest route to getting you up and running is if you could provide a runnable, isolated, sample project. Examining this project will let us replicate the issue locally and further troubleshoot it.

Looking forward to hearing back from you.

Kind Regards,
Anton Mironov