Creating record in inline edit mode generates duplicates

0 Answers 37 Views
Grid
StuartLittle
Top achievements
Rank 1
StuartLittle asked on 28 Jul 2021, 02:32 AM

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
Telerik team
commented on 30 Jul 2021, 12:23 PM

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
Top achievements
Rank 1
commented on 30 Jul 2021, 01:29 PM

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
Telerik team
commented on 04 Aug 2021, 12:30 PM

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

No answers yet. Maybe you can help?

Tags
Grid
Asked by
StuartLittle
Top achievements
Rank 1
Share this question
or