Grid not refreshing after cell update despite using RefreshGrid

[Krzysztof Palonek]

Hi, when I update status in lower grid, despite updating entity in database, to reflect changes in grid's, I have to manually refresh the whole page. I tried to use StateChanged() and GridRefresh() but it still doesn't work. 

@using BetPay.Enums

@inject IRepositoryWrapper RepositoryWrapper
@rendermode InteractiveServer






<SfGrid @ref="BetGridInstance" DataSource="Bets" AllowPaging="true" AllowSelection="true">
    <GridPageSettings PageSize="7"></GridPageSettings>
    <GridEvents RowSelected="RowSelectHandler" TValue="Bet"></GridEvents>
    <GridColumns>
        <GridColumn Field="@nameof(Bet.Stake)" HeaderText="Stake"></GridColumn>
        <GridColumn Field="@nameof(Bet.TotalOdds)" HeaderText="Total Odds" Format="0.00"></GridColumn>
        <GridColumn Field="@nameof(Bet.PotentialWin)" HeaderText="Potential Win" Format="C2"></GridColumn>
        <GridColumn Field="@nameof(Bet.BetDate)" Format="d" HeaderText="Bet Date" Type="Syncfusion.Blazor.Grids.ColumnType.Date"></GridColumn>
        <GridColumn Field="@nameof(Bet.Bookmaker)" HeaderText="Bookmaker"></GridColumn>
        <GridColumn Field="@nameof(Bet.Status)" HeaderText="Status"></GridColumn>
        <GridColumn Field="@nameof(Bet.IsTaxIncluded)"></GridColumn>
    </GridColumns>
</SfGrid>


<br />


@if (IsBetSelected)
{
    <center>
        <h2>Events for selected bet!</h2>
    </center>


    <SfGrid @ref="EventGridInstance" DataSource="Events" Query="@BuildQuery()" TValue="Event" Toolbar="@(new List<string>() { "Add",  "Delete", "Cancel" })">
        <GridEvents TValue="Event" OnCellSave="OnEventEdit"></GridEvents>
        <GridSelectionSettings Mode="Syncfusion.Blazor.Grids.SelectionMode.Cell"></GridSelectionSettings>
        <GridEditSettings AllowEditing="true" Mode="@EditMode.Batch" AllowAdding="true" AllowDeleting="true" NewRowPosition="NewRowPosition.Bottom"></GridEditSettings>
        <GridColumns>
            <GridColumn Field="@nameof(Event.Odds)" AllowEditing="false" HeaderText="Odds"></GridColumn>
            <GridColumn Field="EventType.Name" AllowEditing="false" HeaderText="Event Type"></GridColumn>
            <GridColumn Field="Category.Name" AllowEditing="false" HeaderText="Category"></GridColumn>
            <GridColumn Field="@nameof(Event.Status)" HeaderText="Status" EditType="EditType.DropDownEdit">
                <EditTemplate>
                    <SfDropDownList ID="StatusEnum" TItem="string" TValue="StatusEnum" DataSource="@StatusValues" @bind-Value="@ddlVal">
                        <DropDownListEvents TValue="StatusEnum" TItem="string" ValueChange="OnEventStatusChanged"></DropDownListEvents>
                        <DropDownListFieldSettings Text="StatusEnum" Value="StatusEnum"></DropDownListFieldSettings>
                    </SfDropDownList>
                </EditTemplate>
            </GridColumn>
        </GridColumns>


    </SfGrid>


}
else
{
    <center>
        <h2>Select bet to display events!</h2>
    </center>


}




@code {


    SfGrid<Bet> BetGridInstance { get; set; }
    SfGrid<Event> EventGridInstance { get; set; }
    private IEnumerable<Bet> Bets { get; set; }
    private IEnumerable<Event> Events { get; set; }
    private Guid? RowIndex { get; set; }
    private bool IsBetSelected;
    private string[] StatusValues = Enum.GetNames(typeof(StatusEnum));
    private StatusEnum ddlVal { get; set; }










    protected override async Task OnInitializedAsync()
    {
        Bets = await RepositoryWrapper.BetRepository.GetAllBetsAsync();
        Events = await RepositoryWrapper.EventRepository.GetAllEventsAsync();


    }


    public async Task RowSelectHandler(RowSelectEventArgs<Bet> Args)
    {


        RowIndex = Args.Data.BetId;
        IsBetSelected = true;
    }


    public async void OnEventStatusChanged(ChangeEventArgs<StatusEnum, string> args)
    {


        ddlVal = args.Value;


    }


    public async void OnEventEdit(CellSaveArgs<Event> args)
    {


        var updatedEvent = args.Data;
        updatedEvent.Status = ddlVal;


        RepositoryWrapper.EventRepository.UpdateEvent(updatedEvent);


        await RepositoryWrapper.SaveAsync();
        await BetGridInstance.Refresh();
        await EventGridInstance.Refresh();
        StateHasChanged();
    }




    private Query BuildQuery()
    {
        if (RowIndex.HasValue)
        {


            return new Query().Where("BetId", "equal", RowIndex);


        }
        else
        {
            return new Query();
        }


    }


}

[Naveen Palanivel]

Hi Krzysztof,

Greetings from Syncfusion support.

We have checked your query with the provided code, we would like to inform that you have not enabled IsPrimaryKey property in your shared code and also we like to inform you that CRUD operation in Grid will take place only based on the unique PrimaryKey column value. So IsPrimaryKey property must be enabled to any one of the unique valued column defined in grid. Only based on primary key value, the CRUD will be properly performed in Grid. Please refer the UG documentation for more information.

Reference : https://blazor.syncfusion.com/documentation/datagrid/editing

 <SfGrid @ref="EventGridInstance" DataSource="Events" Query="@BuildQuery()" TValue="Event" Toolbar="@(new List<string>() { "Add",  "Delete", "Cancel" })">
        <GridEvents TValue="Event" OnCellSave="OnEventEdit"></GridEvents>
        <GridSelectionSettings Mode="Syncfusion.Blazor.Grids.SelectionMode.Cell"></GridSelectionSettings>
        <GridEditSettings AllowEditing="true" Mode="@EditMode.Batch" AllowAdding="true" AllowDeleting="true" NewRowPosition="NewRowPosition.Bottom"></GridEditSettings>
        <GridColumns>
            <GridColumn Field="@nameof(Event.Odds)" AllowEditing="false"  IsPrimaryKey="true" HeaderText="Odds"></GridColumn>
            <GridColumn Field="EventType.Name" AllowEditing="false" HeaderText="Event Type"></GridColumn>
            <GridColumn Field="Category.Name" AllowEditing="false" HeaderText="Category"></GridColumn>
            <GridColumn Field="@nameof(Event.Status)" HeaderText="Status" EditType="EditType.DropDownEdit">

 

Please get back to us if you need further assistance

Regards,

Naveen Palanivel

[Krzysztof Palonek]

Hi Naveen,

thanks for the reply, I added the "IsPrimaryKey" attribute, but the grid still doesn't update.

   <SfGrid @ref="EventGridInstance" DataSource="Events" Query="@BuildQuery()" TValue="Event" Toolbar="@(new List<string>() { "Add",  "Delete", "Cancel" })">
       <GridEvents TValue="Event" OnCellSave="OnEventEdit"></GridEvents>
       <GridSelectionSettings Mode="Syncfusion.Blazor.Grids.SelectionMode.Cell"></GridSelectionSettings>
       <GridEditSettings AllowEditing="true" Mode="@EditMode.Batch" AllowAdding="true" AllowDeleting="true" NewRowPosition="NewRowPosition.Bottom"></GridEditSettings>
       <GridColumns>
           <GridColumn Field="@nameof(Event.EventId)" IsPrimaryKey="true" IsIdentity="true" Visible="false"></GridColumn>
           <GridColumn Field="@nameof(Event.Odds)" AllowEditing="false" HeaderText="Odds"></GridColumn>
           <GridColumn Field="EventType.Name" AllowEditing="false" HeaderText="Event Type"></GridColumn>
           <GridColumn Field="Category.Name" AllowEditing="false" HeaderText="Category"></GridColumn>
           <GridColumn Field="@nameof(Event.Status)" HeaderText="Status" EditType="EditType.DropDownEdit">
               <EditTemplate>
                   <SfDropDownList ID="StatusEnum" TItem="string" TValue="StatusEnum" DataSource="@StatusValues" @bind-Value="@ddlVal">
                       <DropDownListEvents TValue="StatusEnum" TItem="string" ValueChange="OnEventStatusChanged"></DropDownListEvents>
                       <DropDownListFieldSettings Text="StatusEnum" Value="StatusEnum"></DropDownListFieldSettings>
                   </SfDropDownList>
               </EditTemplate>
           </GridColumn>
       </GridColumns>
   </SfGrid>

[Monisha Saravanan]

Hi Krzysztof,

We have validated the shared code and we suspect that you are facing issues in updating the chosen values from dropdown without refreshing it externally.

If so, we suggest you to try using the below solution. Here we have passed the corresponding row context and updated the selected value in the context. So that it will be reflected immediately. Kindly check the below attached sample and code snippet for your reference.

Sample: https://blazorplayground.syncfusion.com/embed/VZrfXYsHUxEfUckw?appbar=true&editor=true&result=true&errorlist=true&theme=bootstrap5

 

<SfGrid @ref="EventGridInstance" DataSource="Events" TValue="Event" Toolbar="@(new List<string>() { "Add", "Delete", "Cancel" })">

    <GridEvents TValue="Event" OnCellSave="OnEventEdit"></GridEvents>

    <GridSelectionSettings Mode="Syncfusion.Blazor.Grids.SelectionMode.Cell"></GridSelectionSettings>

    <GridEditSettings AllowEditing="true" Mode="@EditMode.Batch" AllowAdding="true" AllowDeleting="true" NewRowPosition="NewRowPosition.Bottom"></GridEditSettings>

 

    <GridColumns>

        <GridColumn Field="@nameof(Event.Status)" HeaderText="Status" EditType="EditType.DropDownEdit">

            <EditTemplate>

                <SfDropDownList ID="StatusEnum" TItem="string" TValue="string" DataSource="@StatusValues" @bind-Value="@ddlVal">

                    <DropDownListEvents TValue="string" TItem="string" ValueChange="((args)=>OnEventStatusChanged(args, context as Event))"></DropDownListEvents>

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

                </SfDropDownList>

            </EditTemplate>

        </GridColumn>

    </GridColumns>

</SfGrid>

 

@code {

    private SfGrid<Event> EventGridInstance;

    public List<Event> Events { get; set; }

    public List<string> StatusValues { get; set; } = new List<string> { "Pending", "Active", "Closed" };

    private string ddlVal = "Pending";

 

    // Handle the event when the status is changed in the dropdown

    private void OnEventStatusChanged(ChangeEventArgs<string,string> args, Event val)

    {

        ddlVal = args.Value;

        val.Status = args.Value;

    }

 

 

Kindly get back to us if you have further queries.

Regards,

Monisha