Rank 1
Silver
Bronze
Hi,
I have two RadDateTimePicker from && two RadButton.
In the command button I filter the chart,
The data is ok but the chart is not refreshed.
The chart load OK on view loaded.
<ContentView.BindingContext>
<local:DashboardViewModel/>
</ContentView.BindingContext>
<VerticalStackLayout ><HorizontalStackLayout><Label Text="From:" HorizontalOptions="CenterAndExpand" VerticalOptions="CenterAndExpand" /><telerikInput:RadDateTimePicker x:Name="fromDateTimePicker" HorizontalOptions="CenterAndExpand" VerticalOptions="CenterAndExpand" Margin="5" HeightRequest="60" WidthRequest="150"
Date="{Binding FromDate, Mode=TwoWay}"/></HorizontalStackLayout><HorizontalStackLayout><Label Text="To:" HorizontalOptions="CenterAndExpand" VerticalOptions="CenterAndExpand" Margin="0,0,20,0"/><telerikInput:RadDateTimePicker x:Name="toDateTimePicker" HorizontalOptions="CenterAndExpand" VerticalOptions="CenterAndExpand" Margin="5" HeightRequest="60" WidthRequest="150"
Date="{Binding ToDate, Mode=TwoWay}"/></HorizontalStackLayout><telerik:RadButton AutomationId="button" Text="Search" HorizontalOptions="CenterAndExpand" VerticalOptions="Center" BackgroundColor="#1ABB9C" Margin="5" Command="{Binding OnDashBoardCommand}"/></VerticalStackLayout>
<telerikChart:RadCartesianChart Grid.Row="4" Grid.Column="0" x:Name="totalFilesDividedByRoutesChart">
<telerikChart:RadCartesianChart.BindingContext>
<local:DashboardViewModel />
</telerikChart:RadCartesianChart.BindingContext>
<telerikChart:RadCartesianChart.HorizontalAxis>
<telerikChart:CategoricalAxis PlotMode="OnTicks"/>
</telerikChart:RadCartesianChart.HorizontalAxis>
<telerikChart:RadCartesianChart.VerticalAxis>
<telerikChart:NumericalAxis LabelFitMode="MultiLine" />
</telerikChart:RadCartesianChart.VerticalAxis>
<telerikChart:RadCartesianChart.Series>
<telerikChart:BarSeries ValueBinding="Value"
CategoryBinding="RouteName"
ItemsSource="{Binding TotalFilesDividedByRoutesDataSource}" />
</telerikChart:RadCartesianChart.Series>
</telerikChart:RadCartesianChart>
public class DashboardViewModel: BaseViewModel
{
OnDashBoardCommand = new Command(execute: () =>
{
GetDataTotalFilesDividedByRoutesData();
},
canExecute: () => {
if (!(FromDate.HasValue && ToDate.HasValue))
{
return false;
}
return FromDate.Value <= ToDate.Value;
});
TotalFilesDividedByRoutesDataSource = new ObservableCollection<TotalFilesDividedByRoutesData>();
GetDataTotalFilesDividedByRoutesData();
}
public ObservableCollection<TotalFilesDividedByRoutesData> TotalFilesDividedByRoutesDataSource { get; private set; }
private void GetDataTotalFilesDividedByRoutesData()
{
if (!(FromDate.HasValue && ToDate.HasValue))
{
return ;
}
.....
TotalFilesDividedByRoutesDataSource.Clear();
TotalFilesDividedByRoutesDataSource = new ObservableCollection<TotalFilesDividedByRoutesData>(computedData.AsEnumerable());
}
1 Answer, 1 is accepted
Hello Daniel,
this is not a problem with the Telrik control, the issue is with the C# code itself. It doesn't implement INotifyPropertyChanged. So when you replace the instance of the ObservableCollection, the data binding is never updated.
This is a fundamental concept that you need to be aware of when using databinding. Please stop and put aside 15 minutes to learn more here INotifyPropertyChanged Interface In MVVM (c-sharpcorner.com) before writing any more view model code.
When you have completed that tutorial, you can then move forward with using MVVM in your app. Let me show you how to fix the existing view model implementation.
1. In the DashboardViewModel class, implement INotifyPropertyChanged
2. use a backing property for TotalFilesDividedByRoutesDataSource and then call OnPropertyChanged
private ObservableCollection<TotalFilesDividedByRoutesData> totalFilesDividedByRoutesDataSource;
public ObservableCollection<TotalFilesDividedByRoutesData> TotalFilesDividedByRoutesDataSource
{
get => totalFilesDividedByRoutesDataSource;
set
{
if(totalFilesDividedByRoutesDataSource == value)
return;
totalFilesDividedByRoutesDataSource = value;
OnPropertyChanged(nameof(TotalFilesDividedByRoutesDataSource));
}
}
Immediate Solution
Until you decide to implement INotifyPropertyChanged, you will need to use the features of the ObservableCollection and add items to it (instead of replacing the instance).
Here's an example where I fixed the code to use Add
private void GetDataTotalFilesDividedByRoutesData()
{
...
TotalFilesDividedByRoutesDataSource.Clear();
// DO NOT DO THIS unless you have INotifyPropertyChanged
// TotalFilesDividedByRoutesDataSource = new ObservableCollection<TotalFilesDividedByRoutesData>(computedData.AsEnumerable());
// Instead you'll need to add the items to the Observablecollection
var computedData = computedData.AsEnumerable();
foreach(var item in computedData)
{
TotalFilesDividedByRoutesDataSource.Add(item);
}
}
Regards,
Lance | Manager Technical Support
Progress Telerik
Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.