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.
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
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
