Create, edit and delete on client side and Read via dataSource

[David]

Hi!

I am programming a kendo grid. The idea is that the client can add new records through a small popup form. But not save them on the server until I hit a general save button.

The only request it will make to the server will be to save everything and when it loads the page to get the grid data.

Kendo Grid:

@(Html.Kendo().Grid<ParteMovimientoLineaVM>()
    .Name("listadoMovimientosLinea")
    .Mobile()
    .Columns(columns =>
    {
        columns.Bound(model => model.ParteMovimientoLineaID).Hidden();
        columns.Bound(model => model.Cantidad).Title("Cantidad").Width("10%");
        columns.Bound(model => model.TipoMovimiento).Title("Movimiento");
        columns.Bound(model => model.MedioAuxiliar).Title("Medio / Maquinaria");
        columns.Bound(model => model.TipoEstado).Title("Estado / Ret. Completa");
        columns.Command(command => { 
            command.Destroy().Text(" ").IconClass("bi bi-trash");
            command.Edit().Text(" ").IconClass("bi bi-pencil-square");
        });
    })
    .ToolBar(t =>
    {
        t.Custom().Text("Añadir").HtmlAttributes(new { id = "addLineBtn" });
    })
    .Editable(editable =>
    {
        editable.Mode(GridEditMode.PopUp).TemplateName("_FormMovimientoLinea");
    })
    .BindTo(Model.Lineas) // This is a test, it should be a dataSource with the Read Action
)

Template _FormMovimientoLinea:

@model MyPath.Models.Movimientos.ParteMovimientoLineaVM

<fieldset class="k-edit-form-container d-flex flex-column gap-4">
    <div class="k-form-field">
        @(Html.Kendo().NumericTextBoxFor(m => m.Cantidad)
            .Min(1)
            .Step(1)
            .Value(1)
            .Format("n0")
            .Spinners(true)
            .Label(l => l.Content("Cantidad")))
    </div>
    <div class="k-form-field">
        @(Html.Kendo().DropDownListFor(m => m.TipoMovimiento)
            .BindTo(new List<string> { "Movimiento 1", "Movimiento 2", "Movimiento 3" })  // Datos de prueba
            .OptionLabel("Selecciona un movimiento")
            .Label(l => l.Content("Tipo de movimiento"))
        )
    </div>
    <div class="k-form-field">
        @(Html.Kendo().DropDownListFor(m => m.MedioAuxiliar)
            .BindTo(new List<string> { "Medio 1", "Medio 2", "Medio 3" })  // Datos de prueba
            .OptionLabel("Selecciona un medio")
            .Label(l => l.Content("Medio Axuiliar"))
        )
    </div>
    <div class="k-form-field">
        @(Html.Kendo().DropDownListFor(m => m.TipoEstado)
            .Label(l => l.Content("Estado / Ret. Completa"))
            .DataTextField("Text")
            .DataValueField("Value")
            .OptionLabel("Selecciona un estado")
            .DataSource(source =>
            {
                source.ServerFiltering(true);
                source.Read(read => read.Action("GetMantenimientosDropDown", "MantenimientosSimples", routeValues: new { entidad = EMantenimientoGenericoEntidad.TipoEstado }));
            }))
    </div>
</fieldset>

My TypeScript:

AddEventos(): void {
    if (this.grid) {
        this.grid.bind("save", (e: kendo.ui.GridSaveEvent) => {
            if (e.model?.isNew()) {
                console.log("New row save:", e.model);
            }

            e.model!.dirty = false;
            this.grid?.refresh();
        });

        this.grid.bind("remove", (e: kendo.ui.GridRemoveEvent) => {
            console.log("Row delete:", e.model);

            this.grid?.dataSource.remove(e.model!);

            this.grid?.refresh();
        });
    }
}

AddCustomButtonEvent(): void {
    $("#addLineBtn").on("click", () => {
        if (this.grid) {
            this.grid.addRow();
        }
    });
}

The problem I am encountering is in the PopUp buttons, the cancel button deletes the row and the X to close the popup too.

If you could guide me a little how I could solve this problem. Thanks :)

[Anton Mironov]

Hi David,

Thank you for the code snippets and the details provided.

It seems that the described requirements are duplicated in ticket #1668400 in the Support system.

Our Team will come back to you on the ticket. Please keep the communication in one place.

Kind Regards,
Anton Mironov