How to refresh TreeGrid after datasource is re-retrieved from database

[Yoshiro]

Hello,

I am using TreeGrid, two Combo boxes and a Button on my razor page. When user selects a value from the combo boxes, and clicks the button, I want the Tree Grid to be refreshed with new data that is retrieved from the database. My code looks like below. The button click is not refreshing the data, the grid shows the old data.

===============================

<div class="card-header">

<div class="row">

    <div class="col-4">

<!-- First dropdown --->

<SfComboBox @ref="PeriodDropdown" TValue="DateTime" TItem="Period" Placeholder="Select a Quarter End" DataSource="@periods"

    @bind-Value="@SelectedPeriod">

    <ComboBoxFieldSettings Value="Id" Text="Text"></ComboBoxFieldSettings>

    <ComboBoxEvents TItem="Period" TValue="DateTime" ValueChange="@PeriodChangeHandler"></ComboBoxEvents>

</SfComboBox>

    </div>

    <div class="col-4">

     <!-- Second dropdown --->

<SfComboBox @ref="BoardDropdown" TValue="string" TItem="BoardSelector" Placeholder="Select Board" DataSource="@boards"

    @bind-Value="@SelectedBoard">

    <ComboBoxFieldSettings Value="Id" Text="Text"></ComboBoxFieldSettings>

    <ComboBoxEvents TItem="BoardSelector" TValue="string" ValueChange="@BoardChangeHandler"></ComboBoxEvents>

</SfComboBox>

    </div>

    <div class="col-4">

     <!-- Button to kick off the TreeGrid refresh which is not working -->

<SfButton @ref="LoadBtn" @onclick="onLoadClickAsync" IsPrimary="true">Load</SfButton>

    </div>

</div>

<!-- Start of Tree Grid -->

<SfTreeGrid @ref="TreeGrid" DataSource="@TreeData" IdMapping="Id" ParentIdMapping="ParentId" TreeColumnIndex="0" RowHeight="20"

Toolbar="@(new List<string>() { "ExcelExport" })" AllowExcelExport="true" Height="600px" >

<TreeGridEvents QueryCellInfo="QueryCellInfoHandler" OnToolbarClick="ToolbarClickHandler" TValue="Instrument"></TreeGridEvents>

<TreeGridColumns>

    <TreeGridColumn Field="CoreDisplay" HeaderText="Core Display" Width="100" TextAlign="Syncfusion.Blazor.Grids.TextAlign.Left"></TreeGridColumn>

    <TreeGridColumn Field="ICE" HeaderText="ICE" Width="50" TextAlign="Syncfusion.Blazor.Grids.TextAlign.Center"></TreeGridColumn>

    <TreeGridColumn Field="Bloomberg" HeaderText="Bloomberg" Width="50" TextAlign="Syncfusion.Blazor.Grids.TextAlign.Center"></TreeGridColumn>

    <TreeGridColumn Field="PricingDirect" HeaderText="PricingDirect" Width="50" TextAlign="Syncfusion.Blazor.Grids.TextAlign.Center"></TreeGridColumn>

    <TreeGridColumn Field="Refinitiv" HeaderText="Refinitiv" Width="50" TextAlign="Syncfusion.Blazor.Grids.TextAlign.Center"></TreeGridColumn>

    <TreeGridColumn Field="Markit" HeaderText="Markit" Width="50" TextAlign="Syncfusion.Blazor.Grids.TextAlign.Center"></TreeGridColumn>

    <TreeGridColumn Field="AB" HeaderText="AB" Width="50" TextAlign="Syncfusion.Blazor.Grids.TextAlign.Center"></TreeGridColumn>

    <TreeGridColumn Field="Total" HeaderText="Total" Width="50" TextAlign="Syncfusion.Blazor.Grids.TextAlign.Center"></TreeGridColumn>

</TreeGridColumns>

</SfTreeGrid>

<!-- End of TreeGrid -->

@code {

    SfTreeGrid<Instrument> TreeGrid;

    List<SecurityPriceModel> prices;

    SfComboBox<DateTime,Period> PeriodDropdown;

    SfComboBox<string, BoardSelector> BoardDropdown;

    SfButton LoadBtn;

   //default initial values to load the Tree

    public DateTime SelectedPeriod = new DateTime(2022,9,30);

    public string SelectedBoard = "AB";

    public class Period

    {

        public string Text { get; set; }

        public DateTime Id { get; set; }

    }

    public class BoardSelector

    {

        public string Text { get; set; }

        public string Id { get; set; }

    }

    public List<Instrument> TreeData = new List<Instrument>();

    public List<Period> periods = new List<Period>

    {

    new Period { Text = "2022-Q3", Id = new DateTime(2022,9,30)},

    new Period { Text = "2022-Q4", Id = new DateTime(2022,12,30) }

    };

    public List<BoardSelector> boards = new List<BoardSelector>

    {

    new BoardSelector { Text = "AB", Id = "AB" },

    new BoardSelector { Text = "SCB", Id = "SCB" }

    };

    public class Instrument

    {

        public int Id { get; set; }

        public string? CoreDisplay { get; set; }

        public int? ICE { get; set; }

        public int? Bloomberg { get; set; }

        public int? PricingDirect { get; set; }

        public int? Refinitiv { get; set; }

        public int? Markit { get; set; }

        public int? AB { get; set; }

        public int? Total { get; set; }

        public int? ParentId { get; set; }

    }

    protected override async Task OnInitializedAsync(){

     await LoadTreeGridAsync();

    }

    protected async Task LoadTreeGridAsync(){

        //go to the database and get data

     prices = await _pricedb.GetSecurityPrices(SelectedPeriod, SelectedBoard);

        //populate the datasource for TreeGrid

        foreach (SecurityPriceModel model in prices){

         //some logic omitted

         TreeData.add(model);

        }

   }

   private async Task onLoadClickAsync(Microsoft.AspNetCore.Components.Web.MouseEventArgs args){

       //re-populate the datasource TreeGrid based on what was selected in the 2 dropdowns

   SelectedPeriod = PeriodDropdown.Value;

   SelectedBoard = BoardDropdown.Value;

//get new data based on user selection

   prices = await _pricedb.GetSecurityPrices(SelectedPeriod, SelectedBoard);

    //is clear necessary?

        TreeData.Clear();

        foreach (SecurityPriceModel model in prices){

//some logic omitted

TreeData.add(model);

        }

        //is statehaschanged necessary?

        StateHasChanged();

        //nothing happens after this, the TreeGrid is still showing the old data

}

Can you please point me to what I am missing?

Thank you,

Yoshiro

[Farveen Sulthana Thameeztheen Basha]

Hi Yoshiro,

Greetings from syncfusion Support.

We are able to replicate the problem from your provided details. While changing the data source we need to assign the new/updated data source to the tree grid dataSource property. It is not necessary to call the StateHasChanged method.

Refer to the below code:-

foreach (SecurityPriceModel model in prices){

 

          //create new set of list and assign it to Datasource variable

 

        newSet.add(model);     

 

   }

TreeData = newSet.ToList();

We have already discussed about how to change the dataSource dynamically on button Click in our UG documentation. Refer to the below link:-

https://blazor.syncfusion.com/documentation/treegrid/how-to/change-data-source-dynamically

Modified Sample link:-  https://www.syncfusion.com/downloads/support/directtrac/general/ze/TreeGrid1139180169.zip

Please get back to us if you need any further assistance.

Regards,
Farveen sulthana T