We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

How to Refresh the grid after deleting a record?

Hi,

I'm trying to learn Blazor Syncfusion Grid, with the following details:
1. My datasource is an Array of EmployeeListItemViewModel
2. Delete toolbar buttoms are custom ItemModels as described in ej2ToolbatItems, because I want to run my own delete code to the webapi

Questions
1. How do I refresh the grid after deleting a record? The record is successfully removed from the database, but does not reflect on the grid unless I reload the page.
2. How do I display the icons? am I missing a script or install file? the icon is just blank space

Below is my code

<EjsGrid @ref="ej2Grid" DataSource="@employeelist" Toolbar="@ej2ToolbarItems">
    <GridEvents OnToolbarClick="@ej2ToolbarClickHandler" TValue="EmployeeListItemViewModel"></GridEvents>
    <GridEvents RowSelected="@ej2RowSelectHandler" TValue="EmployeeListItemViewModel"></GridEvents>
    <GridPageSettings PageSize="25"></GridPageSettings>
    <GridColumns>
        <GridColumn Field=@nameof(EmployeeListItemViewModel.Id) HeaderText="ID" TextAlign="TextAlign.Right" Width="120"></GridColumn>
        <GridColumn Field=@nameof(EmployeeListItemViewModel.CompleteName) HeaderText="Name" TextAlign="TextAlign.Left" Width="100%"></GridColumn>
    </GridColumns>
</EjsGrid>

@code {
    EjsGrid<EmployeeListItemViewModel> ej2Grid;

    EmployeeListItemViewModel employeeSelected = new EmployeeListItemViewModel();

    public void ej2RowSelectHandler(RowSelectEventArgs<EmployeeListItemViewModel> args)
    {
        employeeSelected = args.Data;
    }

    List<Object> ej2ToolbarItems = new List<Object>()
    {
        "Search",    
        new ItemModel()
        {
            Text = "Delete",
            TooltipText = "Delete selected record.",
            PrefixIcon = "delete-05",                   <-----------  shows no icon just blank space
            Id = "Delete"
        }
    };

    public async void ej2ToolbarClickHandler(Syncfusion.EJ2.Blazor.Navigations.ClickEventArgs args)
    {
        if (employeeSelected.Id == 0)
        {
            switch (args.Item.Id)
            {
                case "Delete":
                    if (await JsRuntime.InvokeAsync<bool>("confirm", $"Do you waat to delete {employeeSelected.CompleteName}?"))
                    {
                        await Http.DeleteAsync($"api/employees/{employeeSelected.Id}");      <-----------  successfully removes the record in the database
                        ej2Grid.DeleteRow(employeeSelected);                                                     <-----------  but this code does not remove the record or row on screen
                    }
                    await LoadEmployeeList();                                                                             <-----------  even reloading the employeelist array does not refresh the grid
                    break;
                default:
                    break;
            }
        }   
    }

    EmployeeListItemViewModel[] employeelist { get; set; }

    protected override async Task OnInitializedAsync()
    {
        await LoadEmployeeList();
    }

    async Task LoadEmployeeList()
    {
        employeelist = await Http.GetJsonAsync<EmployeeListItemViewModel[]>("api/employees");
    }
}


Thanks in advance!


1 Reply

VN Vignesh Natarajan Syncfusion Team October 3, 2019 01:26 PM UTC

Hi Katrina,  

Greetings from Syncfusion support.  

Query1: “How do I refresh the grid after deleting a record? The record is successfully removed from the database, but does not reflect on the grid unless I reload the page 
 
By default, Grid will be refreshed automatically once a record is added or removed while using the Built-in CRUD operation. From your code example we found that you have use your own method to delete a record from your database. In that case you need to refresh the Grid manually using Refresh() of EjsGrid. 

Refer the below code example.   

<EjsGrid @ref="Grid" DataSource="@Orders" AllowPaging="true" Toolbar="@Toolbaritems"> 
    .            .          .             .              .  
</EjsGrid> 
 
@code{ 
    EjsGrid<Order> Grid; 
    public void Refresh() 
    { 
        Grid.Refresh(); 
    } 

But we also found that you have called the LoadEmployeeList() method (to fetch the new data and bind it to Grid) once you perform Delete operation. Now Grid dataSource has to be updated with new values, since you have retrieved the data from service again. But it not work properly. We are able to reproduce the reported issue at our end too. Currently we are validating you query. So we will update you the further details on 7th October 2019. Till then we suggest you to use Refresh() method of Grid to resolve the issue. 

Query2: “How do I display the icons? am I missing a script or install file? the icon is just blank space 
 
We understand that you need to display icon in the custom toolbar item. We have analyzed your code example and found that you have wrong prefix name for Delete icon. Refer the below code example. 

@{ 
    List<ItemModel> Toolbaritems = new List<Syncfusion.EJ2.Blazor.Navigations.ItemModel>(); 
    Toolbaritems.Add(new Syncfusion.EJ2.Blazor.Navigations.ItemModel() { Text = "Add", Id = "add", TooltipText = "Add Record", PrefixIcon = "e-add" }); 
    Toolbaritems.Add(new Syncfusion.EJ2.Blazor.Navigations.ItemModel() { Text = "Delete", Id = "Delete", TooltipText = "Delete Record", PrefixIcon = "e-delete" }); 
} 
 
<EjsGrid DataSource="@Orders" AllowPaging="true" Toolbar="@Toolbaritems"> 
    .         .           .                .                  .              .  
</EjsGrid> 

   
Refer the below screenshot for the output 

 

Refer our UG documentation for your reference 


Query3: ”  ej2Grid.DeleteRow(employeeSelected)<-----------  but this code does not remove the record or row on screen” 

DeleteRow() method will work only when we enable CRUD operation in Grid. (ie) By enabling the AllowDeleting property of GridEditSettings in EjsGrid. Refer the below code example. 

<EjsGrid DataSource="@Orders" AllowPaging="true" Toolbar="@Toolbaritems"> 
        <GridEditSettings AllowEditing="true" AllowEditOnDblClick="false" AllowDeleting="true"></GridEditSettings> 
.          .           .             .                .  
</EjsGrid> 

And also from your code example, we have found that you have not enabled IsPrimaryKey property any of the available column. Based on the PrimaryKey Column only, CRUD operation will take place. PrimaryKey column must have unique value.  This will also be cause of the issue (DeleteRow method does not work properly). So to resolve the issue, kindly enable IsPrimaryKey property any of the column which has unique value. 

Refer our UG documentation for your reference 



Please get back to us if you have further queries.  

Regards, 
Vignesh Natarajan. 
 


Loader.
Up arrow icon