Chart not refresh according to filter.

1 Answer 99 Views
Button Chart DatePicker TimePicker
Daniel
Top achievements
Rank 1
Silver
Bronze
Daniel asked on 13 Mar 2022, 02:21 PM | edited on 13 Mar 2022, 02:26 PM

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

Sort by
0
Lance | Manager Technical Support
Telerik team
answered on 16 Mar 2022, 04:41 PM

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

Tags
Button Chart DatePicker TimePicker
Asked by
Daniel
Top achievements
Rank 1
Silver
Bronze
Answers by
Lance | Manager Technical Support
Telerik team
Share this question
or