Problem while deleting an item

[Matias Mutz]

Hello, i have been doing a CRUD and everything went really good. I only have a problem while deleting an item from my grid. When I try to delete a row all of the grid gets collapsed and it is imposible to see the items. If I refresh the page the item is not any more but i have that problem while deleting. I share you my code so you can see if there is something wrong with it.

@using Syncfusion.Blazor.Grids

@using Syncfusion.Blazor.Data

@using Syncfusion.Blazor.Calendars

@using Syncfusion.Blazor.DropDowns

@using Syncfusion.Blazor.Inputs

@using System.Configuration;

@using System.Data.SqlClient;

@using Syncfusion.Blazor.Navigations

@using Syncfusion.Blazor.Popups

@using Syncfusion.Blazor.Buttons

@using Syncfusion.Blazor.BarcodeGenerator

@inject IJSRuntime JsRuntime

@using SupplyChain

@inject CustomHttpClient Http

@inject NavigationManager NavManager

<div class="col-lg-12 control-section">

    <div class="content-wrapper">

        <div class="row">

            <SfGrid AllowReordering="true" EnablePersistence="true" @ref="Grid" DataSource="@operarios" AllowExcelExport="true" AllowRowDragAndDrop="true" AllowGrouping="true" AllowSorting="true" AllowPaging="true" AllowFiltering="true" Toolbar="@Toolbaritems" ContextMenuItems="@(new List<object>() { "AutoFit", "AutoFitAll", "SortAscending", "SortDescending","Copy", "Edit", "Delete", "Save", "Cancel","PdfExport", "ExcelExport", "CsvExport", "FirstPage", "PrevPage","LastPage", "NextPage"})">

                <GridSelectionSettings Type="Syncfusion.Blazor.Grids.SelectionType.Multiple"></GridSelectionSettings>

                <GridEvents OnToolbarClick="@ClickHandler" OnActionBegin="ActionBegin" TValue="OperarioEntity"></GridEvents>

                <GridEditSettings AllowAdding="true" AllowEditing="true" AllowDeleting="true" Mode="@EditMode.Dialog">

                    <Template>

                        @{

                            var operario = (context as OperarioEntity);

                            <div>

                                <div class="form-row">

                                    <div class="form-group col-md-6">

                                        <label class="e-float-text e-label-top">Id:</label>

                                        <SfNumericTextBox ID="CG_OPER" @bind-Value="@(operario.CG_OPER)" Enabled="@Disabled"></SfNumericTextBox>

                                    </div>

                                    <div class="form-group col-md-6">

                                        <label class="e-float-text e-label-top">Nombre:</label>

                                        <SfTextBox CssClass="customClass" ID="DES_OPER" @bind-Value="@(operario.DES_OPER)"></SfTextBox>

                                    </div>

                                </div>

                                <div class="form-row">

                                    <div class="form-group col-md-6">

                                        <label class="e-float-text e-label-top">Turno:</label>

                                        <SfNumericTextBox ID="CG_TURNO" @bind-Value="@(operario.CG_TURNO)"></SfNumericTextBox>

                                    </div>

                                    <div class="form-group col-md-6">

                                        <label class="e-float-text e-label-top">Rendimiento:</label>

                                        <SfNumericTextBox ID="RENDIM" @bind-Value="@(operario.RENDIM)" TValue="decimal"></SfNumericTextBox>

                                    </div>

                                </div>

                                <div class="form-row">

                                    <div class="form-group col-md-6">

                                        <label class="e-float-text e-label-top">Horas Finales:</label>

                                        <SfNumericTextBox ID="HS_FINAL" @bind-Value="@(operario.HS_FINAL)"></SfNumericTextBox>

                                    </div>

                                    <div class="form-group col-md-6">

                                        <label class="e-float-text e-label-top">Categoria:</label>

                                        <SfDropDownList CssClass="customClass" ID="CG_CATEOP" TItem="CatOpeEntity" @bind-Value="@(operario.CG_CATEOP)" TValue="string" Placeholder="Seleccione la Categoria" DataSource="@categorias">

                                            <DropDownListFieldSettings Value="DES_CATEOP" Text="DES_CATEOP"></DropDownListFieldSettings>

                                        </SfDropDownList>

                                    </div>

                                </div>

                                <div class="form-row">

                                    <div class="form-group col-md-6">

                                        <label class="e-float-text e-label-top">Valor Por Hora:</label>

                                        <SfNumericTextBox ID="VALOR_HORA" @bind-Value="@(operario.VALOR_HORA)"></SfNumericTextBox>

                                    </div>

                                    <div class="form-group col-md-6">

                                        <label class="e-float-text e-label-top">Moneda:</label>

                                        <SfDropDownList CssClass="customClass" ID="MONEDA" TItem="Moneda" @bind-Value="@(operario.MONEDA)" TValue="string" Placeholder="Seleccione la Moneda" DataSource="@MonedaData">

                                            <DropDownListFieldSettings Value="Text" Text="Text"></DropDownListFieldSettings>

                                        </SfDropDownList>

                                    </div>

                                </div>

                                <div class="form-row">

                                    <div class="form-group col-md-6">

                                        <label class="e-float-text e-label-top">Activo:</label>

                                        <SfDropDownList CssClass="customClass" ID="ACTIVO" TItem="EstaActivo" @bind-Value="@(operario.ACTIVO)" TValue="bool" Placeholder="Esta Activo?" DataSource="@ActivoData">

                                            <DropDownListFieldSettings Value="BActivo" Text="Text"></DropDownListFieldSettings>

                                        </SfDropDownList>

                                        @*<SfCheckBox ID="ACTIVO" @ref="CheckBox1" @bind-Checked="@(operario.ACTIVO)" Label="CheckBox1" ValueChange="valueChange"></SfCheckBox>*@

                                    </div>

                                    <div class="form-group col-md-6">

                                        <label class="e-float-text e-label-top">Fecha Final:</label>

                                        <SfDatePicker ID="FE_FINAL" @bind-Value="@(operario.FE_FINAL)"></SfDatePicker>

                                    </div>

                                </div>

                                <div class="form-row">

                                    <div class="form-group col-md-12">

                                        <label class="e-float-text e-label-top">Usuario:</label>

                                        <SfDropDownList CssClass="customClass" ID="USUARIO" TItem="UsuarioEntity" @bind-Value="@(operario.USUARIO)" TValue="string" Placeholder="Seleccione el usuario" DataSource="@usuarios">

                                            <DropDownListFieldSettings Value="Usuario" Text="Usuario"></DropDownListFieldSettings>

                                        </SfDropDownList>

                                    </div>

                                </div>

                                <div class="form-row">

                                    <div class="form-group col-md-12">

                                        <label class="e-float-text e-label-top">Empresa:</label>

                                        <SfDropDownList CssClass="customClass" ID="CG_CIA" TItem="ClienteEntity" @bind-Value="@(operario.CG_CIA)" TValue="int" Placeholder="Seleccione el Cliente" DataSource="@clientes">

                                            <DropDownListFieldSettings Value="CG_CLI" Text="DES_CLI"></DropDownListFieldSettings>

                                        </SfDropDownList>

                                    </div>

                                </div>

                            </div>

                        }

                    </Template>

                </GridEditSettings>

                @foreach (var operario in operarios)

                {

                    <GridColumns>

                        <GridColumn Field=@nameof(operario.CG_OPER) HeaderText="Id" TextAlign="TextAlign.Left" IsPrimaryKey="true"></GridColumn>

                        <GridColumn Field=@nameof(operario.DES_OPER) HeaderText="Nombre" TextAlign="TextAlign.Left"></GridColumn>

                        <GridColumn Field=@nameof(operario.CG_TURNO) HeaderText="Turno" TextAlign="TextAlign.Left"></GridColumn>

                        <GridColumn Field=@nameof(operario.RENDIM) HeaderText="Rendimiento" TextAlign="TextAlign.Left" Width="100"></GridColumn>

                        <GridColumn Field=@nameof(operario.FE_FINAL) HeaderText="Fecha" TextAlign="TextAlign.Left" Type="ColumnType.Date"></GridColumn>

                        <GridColumn Field=@nameof(operario.HS_FINAL) HeaderText="Horas Finales" TextAlign="TextAlign.Left" Width="100"></GridColumn>

                        <GridColumn Field=@nameof(operario.CG_CATEOP) HeaderText="Categoria" TextAlign="TextAlign.Left"></GridColumn>

                        <GridColumn Field=@nameof(operario.VALOR_HORA) HeaderText="Valor x Hora" TextAlign="TextAlign.Left" Width="100"></GridColumn>

                        <GridColumn Field=@nameof(operario.MONEDA) HeaderText="Moneda" TextAlign="TextAlign.Left"></GridColumn>

                        <GridColumn Field=@nameof(operario.ACTIVO) HeaderText="Activo" DisplayAsCheckBox="true" TextAlign="TextAlign.Left"></GridColumn>

                        <GridColumn Field=@nameof(operario.CG_CIA) HeaderText="Empresa" TextAlign="TextAlign.Left"></GridColumn>

                        <GridColumn Field=@nameof(operario.USUARIO) HeaderText="Usuario" TextAlign="TextAlign.Left"></GridColumn>

                    </GridColumns>

                }

            </SfGrid>

        </div>

    </div>

</div>

<style>

    .form-group.col-md-6 {

        width: 200px;

    }

    label.e-float-text {

        position: relative;

        padding-left: 0;

        top: 10%;

    }

    .e-input-group.e-control-wrapper.customClass {

        color: black;

        background-color: lightblue;

    }

</style>

<SfQRCodeGenerator Width="200px" Height="150px" Value="http://www.aerre.com.ar/">

    <QRCodeGeneratorDisplayText text=" "></QRCodeGeneratorDisplayText>

</SfQRCodeGenerator>

@code {

    private SfGrid<OperarioEntity> Grid;

    //SfCheckBox CheckBox1;

    public void Refresh()

    {

        Grid.Refresh();

    }

    private List<Object> Toolbaritems = new List<Object>(){

        "Search",

        "Add",

        "Edit",

        "Delete",

        "Print",

        new ItemModel { Text = "Copy", TooltipText = "Copy", PrefixIcon = "e-copy", Id = "copy" },

        //new ItemModel { Text = "Excel", TooltipText = "Copy", PrefixIcon = "e-copy", Id = "copy" },

        "ExcelExport"

    };

    public bool Enabled = true;

    public bool Disabled = false;

    List<OperarioEntity> operarios = new List<OperarioEntity>();

    List<CatOpeEntity> categorias = new List<CatOpeEntity>();

    List<UsuarioEntity> usuarios = new List<UsuarioEntity>();

    List<ClienteEntity> clientes = new List<ClienteEntity>();

    protected override async Task OnInitializedAsync()

    {

        operarios = await Http.GetFromJsonAsync<List<OperarioEntity>>("api/Operario");

        operarios = operarios.OrderByDescending(s => s.CG_OPER).ToList();

        categorias = await Http.GetFromJsonAsync<List<CatOpeEntity>>("api/CatOpe");

        usuarios = await Http.GetFromJsonAsync<List<UsuarioEntity>>("api/Usuarios");

        clientes = await Http.GetFromJsonAsync<List<ClienteEntity>>("api/Cliente");

        await base.OnInitializedAsync();

    }

    public void ActionBeginHandler(ActionEventArgs<OperarioEntity> args)

    {

        if (args.RequestType == Syncfusion.Blazor.Grids.Action.BeginEdit)

        {

            // The Textbox component is disabled using its Enabled property

            this.Enabled = false;

        }

        else

        {

            this.Enabled = true;

        }

    }

    public class Moneda

    {

        public string ID { get; set; }

        public string Text { get; set; }

    }

    List<Moneda> MonedaData = new List<Moneda> {

    new Moneda() { ID= "Mon1", Text= "Peso Argentino"},

    new Moneda() { ID= "Mon2", Text= "Dolar"},

    new Moneda() { ID= "Mon3", Text= "Euro"}};

    public class EstaActivo

    {

        public bool BActivo { get; set; }

        public string Text { get; set; }

    }

    List<EstaActivo> ActivoData = new List<EstaActivo> {

    new EstaActivo() { BActivo= true, Text= "SI"},

    new EstaActivo() { BActivo= false, Text= "NO"}};

    /*public void valueChange(Syncfusion.Blazor.Buttons.ChangeEventArgs args)

    {

        if (CheckBox1.Checked == true)

        {

            chkbox2 = false;

            chkbox3 = false;

        }

    }*/

    public async Task ActionBegin(ActionEventArgs<OperarioEntity> args)

    {

        if (args.RequestType == Syncfusion.Blazor.Grids.Action.Save)

        {           //from here you can call the AddMethod of you database.

            bool found = false;

            foreach (var operario in operarios)

            {

                if (operario.CG_OPER == args.Data.CG_OPER)

                {

                    OperarioEntity ur = new OperarioEntity();

                    ur.CG_OPER = args.Data.CG_OPER;

                    ur.DES_OPER = args.Data.DES_OPER;

                    ur.CG_TURNO = args.Data.CG_TURNO;

                    ur.RENDIM = args.Data.RENDIM;

                    ur.FE_FINAL = args.Data.FE_FINAL;

                    ur.HS_FINAL = args.Data.HS_FINAL;

                    ur.CG_CATEOP = args.Data.CG_CATEOP;

                    ur.VALOR_HORA = args.Data.VALOR_HORA;

                    ur.MONEDA = args.Data.MONEDA;

                    ur.ACTIVO = args.Data.ACTIVO;

                    ur.CG_CIA = args.Data.CG_CIA;

                    ur.USUARIO = args.Data.USUARIO;

                    await Http.PutAsJsonAsync($"api/Operario/{args.Data.CG_OPER}", ur);

                    found = true;

                    Refresh();

                }

            }

            if (!found)

            {

                OperarioEntity ub = new OperarioEntity();

                ub.CG_OPER = args.Data.CG_OPER;

                ub.DES_OPER = args.Data.DES_OPER;

                ub.CG_TURNO = args.Data.CG_TURNO;

                ub.RENDIM = args.Data.RENDIM;

                ub.FE_FINAL = args.Data.FE_FINAL;

                ub.HS_FINAL = args.Data.HS_FINAL;

                ub.CG_CATEOP = args.Data.CG_CATEOP;

                ub.VALOR_HORA = args.Data.VALOR_HORA;

                ub.MONEDA = args.Data.MONEDA;

                ub.ACTIVO = args.Data.ACTIVO;

                ub.CG_CIA = args.Data.CG_CIA;

                ub.USUARIO = args.Data.USUARIO;

                await Http.PostAsJsonAsync("api/Operario", ub);

                Refresh();

            }

        }

        if (args.RequestType == Syncfusion.Blazor.Grids.Action.Delete)

        {

            try

            {

                if (args.Data != null)

                {

                    bool isConfirmed = await JsRuntime.InvokeAsync<bool>("confirm", "Seguro de que desea eliminar el Operario?");

                    if (isConfirmed)

                    {

                        //operarios.Remove(operarios.Find(m => m.CG_OPER == args.Data.CG_OPER));

                        await Http.DeleteAsync($"api/Operario/{args.Data.CG_OPER}");

                        operarios = operarios.OrderBy(s => s.CG_OPER).ToList();

                        Refresh();

                    }

                }

            }

            catch (Exception ex)

            {

            }

        }

        await LoadOperarios();

    }

    public async Task ClickHandler(Syncfusion.Blazor.Navigations.ClickEventArgs args)

    {

        if (args.Item.Text == "Copy")

        {

            /*var temp = this.Grid.GetSelectedRowIndexes(); // return the details of selceted record

            message = temp.ToString();*/

            if (this.Grid.SelectedRecords.Count > 0)

            {

                foreach (OperarioEntity selectedRecord in this.Grid.SelectedRecords)

                {

                    bool isConfirmed = await JsRuntime.InvokeAsync<bool>("confirm", "Seguro de que desea copiar el Operario?");

                    if (isConfirmed)

                    {

                        OperarioEntity Nuevo = new OperarioEntity();

                        Nuevo.DES_OPER = selectedRecord.DES_OPER;

                        Nuevo.CG_TURNO = selectedRecord.CG_TURNO;

                        Nuevo.RENDIM = selectedRecord.RENDIM;

                        Nuevo.FE_FINAL = selectedRecord.FE_FINAL;

                        Nuevo.HS_FINAL = selectedRecord.HS_FINAL;

                        Nuevo.CG_CATEOP = selectedRecord.CG_CATEOP;

                        Nuevo.VALOR_HORA = selectedRecord.VALOR_HORA;

                        Nuevo.MONEDA = selectedRecord.MONEDA;

                        Nuevo.ACTIVO = selectedRecord.ACTIVO;

                        Nuevo.CG_CIA = selectedRecord.CG_CIA;

                        Nuevo.USUARIO = selectedRecord.USUARIO;

                        operarios.Add(Nuevo);

                        await Http.PostAsJsonAsync("api/Operario", Nuevo);

                        operarios = operarios.OrderBy(s => s.CG_OPER).ToList();

                        Refresh();

                    }

                }

            }

        }

        if (args.Item.Text == "Excel Export")

        {

            await this.Grid.ExcelExport();

        }

    }

    private async Task LoadOperarios()

    {

        operarios = await Http.GetFromJsonAsync<List<OperarioEntity>>("api/Operario");

        operarios = operarios.OrderByDescending(s => s.CG_OPER).ToList();

        StateHasChanged();

    }

}

Attachment: Images_a4fd214c.zip

[Renjith Singh Rajendran]

Hi Matias, 

Greetings from Syncfusion support. 

We tried to reproduce the reported problem by creating a sample based on the shared codes with our latest version 18.2.0.55. But we could not face the reported problem when perform Delete action in our application. We are attaching the sample for your reference, please download the sample from the link below, 

Sample : https://www.syncfusion.com/downloads/support/directtrac/general/ze/Syncfusion_Grid_Issue1608913029 

Kindly refer the above attached sample, and if you still face difficulties, then we need the following details for better assistance. 

1. Share the sample which you have tried from your side. This would be helpful for us to validate the problem based on your scenario.
2. Share the details of any exception if you have faced any when perform deleting in Grid.
3. Share with us the exact scenario or proper replication procedure.
4. Or if possible, reproduce the problem with the attached sample and share with us for further analysis.

And also we suggest you to bind the “OnActionFailure” event to Grid. This event will be triggered for every failure in Grid. Please share the details you get in the “args” of this event handler for further analysis. 

Documentation : https://blazor.syncfusion.com/documentation/datagrid/events/#onactionfailure 

The provided information will help us analyze the problem, and provide you a solution as early as possible. 

Regards, 

Renjith Singh Rajendran 

[Matias Mutz]

Hi Renjith Singh Rajendran,

Thank you for your reply. I have been trying to solve the problem but i could not. As you request for my code i will share it in the attachd files zone. The specific problem is in the file ListOperarioComponent.Razor which is inside Operarios carpet which is also inside Components folder. If you know to know more about the code or something like that let my know please.

Regards, 

Matias Mutz.

Attachment: SupplyChain_a39fa05.rar

[Renjith Singh Rajendran]

Hi Matias, 

Thanks for sharing the details. 

We have analyzed the shared sample. We could see that you are changing the DataSource of Grid in OnActionBegin handler by calling the LoadOperarios method. This caused the reported problem. Because of calling the LoadOperarios method triggered the OnActionBegin event again and again, causing the DataSource of Grid to update constantly and spinner is shown continuously in Grid. We could face the problem as like in the below video, 

Video : https://www.syncfusion.com/downloads/support/directtrac/general/ze/crudproblem731790677 

Note : As we could not load data in your shared sample due to sql connection problems, we have used our own dummy data for loading data in Grid. 

We have analyzed your requirement, and we could see that, your requirement is to update the your datasource in your service after perform CRUD operation in Grid. Based on this scenario, it is recommended to use Custom way of Binding data to Grid instead of handling actions in OnActionBegin event. With this you can handle the CRUD operations in Grid in a custom way by overriding our default methods Insert/InsertAsync, Remove/RemoveAsync, Update/UpdateAsync. You can update your datasource in service and customize the CRUD actions based on your requirement in these methods and return the value to update in Grid. So there is no need for calling Refresh or updating the DataSource of Grid manually. 

Please refer the below documentation for more details regarding performing CRUD operations in Custom Way of Binding data to Grid. 

https://blazor.syncfusion.com/documentation/datagrid/custom-binding/#crud-operation 

Please get back to us if you need further assistance. 

Regards, 

Renjith Singh Rajendran