DataSource from Service

[Tarik Alkathiri]

Dear Supports;

I am using a simple sfgrid to show and edit the data, the Data source of the grid is bended to a list which is in service called TransactionService and it is like this 

public List<TransactionDetailDto> TransactionDetailList { get; private set; } = new List<TransactionDetailDto>();

And it has the StateChanged invokable
I entered the row in ohter component while the grid in deferent component and once I add the the data entered to the mentioned list I call the the invoke the StateChanged in both components
the new row dose not show in the grid, but when I navigate to other page and go back the page which has the component the new row is shown and ever thing is fine.
FWI: I used the MudBlazor table in the same component with the same configuration and the new row is shown as soon as I add it to the list.
Did I missed some thing in sfgrid.
Please kindly help me in this issue.

<SfGrid @ref="@Grid" DataSource="@TransactionService.TransactionDetailList" Height="100px" EnableVirtualization="true">

<GridColumns>

<GridColumn Field=@nameof(TransactionDetailDto.TransactionDetailLineNo) HeaderText="S." TextAlign="TextAlign.Right" Width="120"></GridColumn>

<GridColumn Field=@nameof(TransactionDetailDto.TransactionDetailProductCode) HeaderText="Code" Width="150"></GridColumn>

<GridColumn Field=@nameof(TransactionDetailDto.TransactionDetailProductDescription) HeaderText="Description" TextAlign="TextAlign.Right" Width="130"></GridColumn>

<GridColumn Field=@nameof(TransactionDetailDto.TransactionDetailQuantity) HeaderText="Quantity" TextAlign="TextAlign.Right" Width="140"></GridColumn>

<GridColumn Field=@nameof(TransactionDetailDto.TransactionDetailAmount) HeaderText="Price" TextAlign="TextAlign.Right" Width="150"></GridColumn>

<GridColumn Field=@nameof(TransactionDetailDto.TransactionDetailTotalTaxableFees) HeaderText="Vat" Width="150"></GridColumn>

<GridColumn Field=@nameof(TransactionDetailDto.TransactionDetailNetTotal) HeaderText="Net" Width="150"></GridColumn>

</GridColumns>

</SfGrid>

[Sarveswaran Palani]

Hi Tarik,

We understood your query and we suspect that you are changing the datasource externally and you are trying to call Refresh method of Grid on an event/method  to update the datasource on Grid. We would like to inform that you can bind observable data collection to the Grid so that it will update the data to the Grid by default when the datasource is changed and there is no need of calling refresh method when using  Observable collection. Kindly refer the attached UG for your information.

https://blazor.syncfusion.com/documentation/datagrid/data-binding#observable-collection

This ObservableCollection(dynamic data collection) provides notifications when items added, removed and moved. Then the INotifyCollectionChanged notifies when dynamic changes of add,remove, move and clear the collection and updates the Grid datasource without calling Refresh method externally.

Regards,

Sarveswaran PK

[Tarik Alkathiri]

Thank you very much for your reply.

I will try the  Observable collection.

[Sarveswaran Palani]

Hi Tarik,

Thanks for the update.

Please get back to us if you have any further queries.

Regards,

Sarveswaran PK