RadDataPager ItemCount Property Binding

[Kim]

Hello.

 

I have the same situation as https://www.telerik.com/forums/virtual-page-count.
Since the database has over 100 million data, I don't want to bring all the data into memory.
When a user clicks on a specific page, I'm trying to get only the data in that range from the DBMS.

I also read about Unbound Mode (https://docs.telerik.com/devtools/wpf/controls/raddatapager/features/unbound-mode)
But this seems to use code-behind.
I don't want to write a code-behind because I use the MVVM pattern.
How can I do it?

 

The code below has been simplified.

 

1. DataView.xaml

<UserControl x:Class="MyProject.Views.MyDataView"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
             xmlns:local="clr-namespace:MyProject.Views"
             xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation"
             xmlns:behaviors="http://schemas.microsoft.com/xaml/behaviors"
             mc:Ignorable="d" 
             d:DesignHeight="550" d:DesignWidth="1920">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="26" />
            <RowDefinition Height="400"/>
            <RowDefinition Height="28" />
        </Grid.RowDefinitions>

        <Grid Grid.Row="0" HorizontalAlignment="Right">
            <StackPanel Orientation="Horizontal">
                <TextBlock Text="Page Size" Margin="2 8 12 2"  FontWeight="SemiBold"/>

                <telerik:RadComboBox 
                                 Height="22"
                                 Margin="0 0 10 0"
                                 FontFamily="Segoe UI"
                                 ClearSelectionButtonVisibility="Visible" 
                                 ClearSelectionButtonContent="Show all" 
                                 DisplayMemberPath="DisplaySize" 
                                 ItemsSource="{Binding MyDataPageSize}" 
                                 SelectedItem="{Binding SelectedMyDataPageSize}"
                                 AllowMultipleSelection="False"
                                 Command="{Binding RefreshMyDataCommand}"/>
            </StackPanel>
        </Grid>

        <telerik:RadGridView x:Name="MyDataGridView"
                             Grid.Row="1"
                             IsFilteringAllowed="False"
                             AutoGenerateColumns="False"
                             ShowGroupPanel="False"
                             CanUserFreezeColumns="False"
                             RowIndicatorVisibility="Collapsed"
                             SelectionMode="Extended"
                             TextBlock.TextAlignment="Center"
                             CanUserSortColumns="False"
                             IsReadOnly="True"
                             Margin="10 5 10 0"
                             ScrollMode="RealTime"
                             ItemsSource="{Binding DynamicGridViewItemSource}"
        </telerik:RadGridView>

        <telerik:RadDataPager Grid.Row="2"
				x:Name="MyDataPager"
                              Width="{Binding ElementName=MyDataGridView, Path=ActualWidth}"
							  PageSize="{Binding SelectedMyDataPageSize.Size}"
							  Source="{Binding Items, ElementName=MyDataGridView}"
							  ItemCount="{Binding TotalItemCount}"
                              BorderThickness="1,0,1,1"
							  DisplayMode="All"
                              AutoEllipsisMode="Both"
							  NumericButtonCount="10"
							  IsTotalItemCountFixed="False" >
            <behaviors:Interaction.Triggers>
                <behaviors:EventTrigger EventName="PageIndexChanged">
                    <behaviors:InvokeCommandAction Command="{Binding PageIndexChangedCommand}"
                                           CommandParameter="{Binding ElementName=MyDataPager, Path=PageIndex}" />

                </behaviors:EventTrigger>
            </behaviors:Interaction.Triggers>
        </telerik:RadDataPager>
    </Grid>
</UserControl>

 

2. DataViewModel.cs

namespace MyProject.ViewModels
{
    public class StageDTO
    {
        public string StartNumber { get; set; }
        public string EndNumber { get; set; }
    }

    public class MyDataViewModel : ViewModelBase
    {

// some code

        private int _totalItemCount;
        public int TotalItemCount
        {
            get
            {
                return _totalItemCount;
            }
            set
            {
                _totalItemCount = value;
                OnPropertyChanged(nameof(TotalItemCount));
            }
        }

        public MyDataViewModel(CyclerMode mode)
        {
            // do something
        }

        public void ShowMyDataOfSelectedStage(object parameter)
        {
           StageDTO dto = parameter as StageDTO;
 
            // do something

          // and i calculate TotalItemCount here
                TotalItemCount = Convert.ToInt32(dto.EndNumber) - Convert.ToInt32(dto.StartNumber);
           
        }
    }
}

 

There may have been a typo in the process of simplifying, but there is no problem when i actually run the program.

TotalItemCount = Convert.ToInt32(dto.EndNumber) - Convert.ToInt32(dto.StartNumber);

The data goes in correctly in the code above, but nothing changes.

I made the changes below, but it still doesn't work.

ItemCount="{Binding TotalItemCount, UpdateSourceTrigger=PropertyChanged}"

If I change it like below
ItemCount="{Binding TotalItemCount, Mode=TwoWay}"

I am getting an exception like below.
System.InvalidOperationException: 'Setting RadDataPager.ItemCount is allowed in Unbound Mode only.'

 

How do I get it to work like I want?

[Vladimir Stoyanov]

Hello Kim,

Thank you for the shared code snippet. 

If the Unbound Mode of the RadDataPager would work for you, note that you can set up the control in this mode in an mvvm manner.

I am attaching a small sample project, where I have demonstrated how you can setup the control like that. Can you check it out and let me know, if it helps?

Regards,
Vladimir Stoyanov
Progress Telerik

[Kim]

Hello Vladimir.
I looked at the sample project you posted and checked that it works the way I want it to. Your source code and mine are almost similar, so I compared the source code.
I deleted
  Source="{Binding Items, ElementName=DataGridView}"
this part in my xaml file and it works as I want!
Perhaps binding with Items that have actual sizes was the cause of the problem.

I had mixed up several sample projects and didn't know what was the problem. Thank you so much.