Customize RadPagginationControl

[Deana]

Hey guys,

kind of stuck with this pagination navigation control.

In my UWP app I have binded List of objects to a GridView. Trying to access some sort of pagination item count, page size or set similar property if exists. So far, pagination selects one item (row) from the list and shows it in a first page (index label 1) which does not work for me (1item per control click.) I need 10 items from a list to be shown in first page. Is there a solution for this?

 

Thanks

[Nasko]

Hi Deana,

We are not exactly sure that we completely understand the described by you scenario. Could you please, provide us a sample project that demonstrates it? Thus we will be able to continue our investigation and to provide you with a prompt solution.

We are looking forward to hearing from you.

Regards,
Nasko
Progress Telerik

[Deana]

Hey, thanks for answering.

Basically I need to group somehow 10 items in the list to be presented on the first pagging index. Right now I have 1 item in the list presented by clicking first pagging index btn. That is why i asked if some item size property sort of exists or page size to ensure i get 10 items instead of one, clicking the first arrow or first index in pagging control. All my list items are shown in the current frame, while going through pagging control, it "reads" one by one item. I would like to have 10 items read instead. Here is XAML sample of the grid containing binded list. 

 <Grid Grid.Row="4">
                        <GridView ItemsSource="{x:Bind VoluntaryReportList}" ItemsPanel="{StaticResource MyItemsPanelTemplate}" HorizontalAlignment="Stretch" HorizontalContentAlignment="Stretch" x:Name="listForPaggination" x:FieldModifier="public">
                            <GridView.ItemTemplate>
                                <DataTemplate x:DataType="data:VoluntaryReport">
                                    <Grid>
                                        <Grid.ColumnDefinitions>
                                            <ColumnDefinition></ColumnDefinition>
                                            <ColumnDefinition></ColumnDefinition>
                                            <ColumnDefinition></ColumnDefinition>
                                            <ColumnDefinition></ColumnDefinition>
                                            <ColumnDefinition></ColumnDefinition>
                                            <ColumnDefinition Width="90"></ColumnDefinition>
                                        </Grid.ColumnDefinitions>
                                        <TextBlock Text="{x:Bind Id}" Grid.Column="0"/>
                                        <TextBlock Text="{x:Bind Date}"  TextAlignment="Left" Margin="10" Grid.Column="1"/>
                                        <TextBlock Text="{x:Bind Headline}"  TextAlignment="Left" Margin="10" Grid.Column="2"/>
                                        <TextBlock Text="{x:Bind ReportedBy}"  TextAlignment="Left" Margin="10" Grid.Column="3"/>
                                        <TextBlock Text="{x:Bind FlightNo}" TextAlignment="Left" Margin="10" Grid.Column="4"/>
                                        <AppBarButton FocusVisualPrimaryBrush="#FFFF9E31" x:Name="viewDetailsButton" Foreground="#FFFF9E31" ToolTipService.ToolTip="View Report Details" Height="40" Click="VoluntaryReportDetails_Click" Tag="{x:Bind Id}" Grid.Column="5">
                                            <AppBarButton.Icon>
                                                <FontIcon Glyph="&#xE155;" FontFamily="Segoe MDL2 Assets"></FontIcon>
                                            </AppBarButton.Icon>
                                        </AppBarButton>
                                    </Grid>
                                </DataTemplate>
                            </GridView.ItemTemplate>

                            <GridView.ItemContainerStyle>
                                <Style TargetType="GridViewItem">
                                    <Setter Property="HorizontalAlignment" Value="Stretch" />
                                    <Setter Property="HorizontalContentAlignment" Value="Stretch" />
                                </Style>
                            </GridView.ItemContainerStyle>
                        </GridView>
                    </Grid>
                </Grid>
            </StackPanel>
            <telerik:RadPaginationControl PageProvider="{Binding ElementName=listForPaggination}" Name="telerikPagination"></telerik:RadPaginationControl>

 

Thanks for your time

[Nasko]

Hello Deana,

From the provided description it seems you are trying to implement a paging functionality for the DataGrid control that is not provided out of the box by the control. I will try to create a sample project that demonstrates hot to achieve this if it is possible and how to create the desired customization for the Pagination control.

As soon as I have some more info I will let you know.

Regards,
Nasko
Progress Telerik

[Deana]

Awesome!

As far as I know, there’s no build-in DataGrid control in UWP, thats why I used GridView and its ItemTemplate to make it look like a DataGrid.

Thanks :)

[Nasko]

Hello Deana,

Telerik UI for UWP provides a fully featured RadDataGrid control. Some more detailed information about the control and the features it provides you can find on the following link:
http://docs.telerik.com/devtools/universal-windows-platform/controls/raddatagrid/overview

Unfortunately, using it with the pagination control in order to achieve the desired paging is not an easy task. Because of that I created a sample project that demonstrates how using some custom logic you can implement the desired paging using the DataGrid control and Buttons - please, check the attached sample. Please, notice that this is a sample project and the purpose of it is to illustrate a possible approach how to achieve the desired. It has not been tested for a production environment and is not an official feature of the DataGrid. You  will find severe limitations using this approach instead. For example, it will not work with grouping/sorting/filtering as the DataGrid only performs those actions on the bound collection (the current page). However, I believe it could work for you concrete scenario where items only need to be visualized in portions.

I hope this will help you.

Regards,
Nasko
Progress Telerik

[Deana]

Thanks for your time!