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. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

How to Refresh the grid after deleting a record?

Thread ID:

Created:

Updated:

Platform:

Replies:

148030 Oct 2,2019 04:42 PM UTC Oct 3,2019 01:26 PM UTC Blazor 1
loading
Tags: Grid
Katrina
Asked On October 2, 2019 04:42 PM UTC

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!


Vignesh Natarajan [Syncfusion]
Replied On 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. 
 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon