Question:
Is is possible to set a fixed number of buttons shown when a pageview is loaded?
Eg. We have 7 pageviewpages. We want only show 3 buttons when the pageview is loaded and later we can do adjustment by using showing more buttons or showing fewer buttons.
See attached sampled image. We want to have sample_2 instead of sample_1 when a pageview is loaded.
25 Answers, 1 is accepted

you can achieve your requirement in the following way.
private
void
Form1_Load(
object
sender, EventArgs e)
{
this
.radPageView1.SelectedPage =
this
.radPageViewPage1;
RadPageViewOutlookElement outlookElement =
this
.radPageView1.ViewElement
as
RadPageViewOutlookElement;
outlookElement.DragGripDown();
outlookElement.DragGripDown();
outlookElement.DragGripDown();
}
You can find out more in the documentation here
Hope that helps
Richard

But can we get a little more.
Can we make the buttons at botton (yellow buttons) and only show the arrow button to add or reduce the page buttons as too many yellow buttons at the bottom make the arrow button invisible if the pageviewer's width is small. ( see attached)

You can force more tabs onto the bottom tab by re-calling DragGripDown()
You can also hide the ShowFewer and ShowMore buttons in the overflow area in the following way
this
.radPageView1.SelectedPage =
this
.radPageViewPage1;
RadPageViewOutlookElement outlookElement =
this
.radPageView1.ViewElement
as
RadPageViewOutlookElement;
outlookElement.DragGripDown();
outlookElement.DragGripDown();
outlookElement.DragGripDown();
outlookElement.DragGripDown();
outlookElement.DragGripDown();
outlookElement.OverflowItemsContainer.ShowFewerButtonsItem.Visibility = Telerik.WinControls.ElementVisibility.Collapsed;
outlookElement.OverflowItemsContainer.ShowMoreButtonsItem.Visibility = Telerik.WinControls.ElementVisibility.Collapsed;
hope that helps
Richard

Thanks for the quick response.
Actually we want to make showfewer button and showmorebuttons visible.
But we want to make tabs ( the yellow ones) on the bottom tab invisible.
So it would be this:
There is only the arrow at the right side of the bottom tab but no yellow tabs even if there are a lot of viewpages in the pageviewer.pages. We can use arrow button on the botton tab to adujst number of view pages by using showfewerbutton or showmorebutton.
Is this possible?

This will hide the yellow tab buttons and show the overflow buttons that you need
private
void
Form1_Load(
object
sender, EventArgs e)
{
RadControlSpyForm form =
new
RadControlSpyForm();
form.Show();
this
.radPageView1.SelectedPage =
this
.radPageViewPage1;
RadPageViewOutlookElement outlookElement =
this
.radPageView1.ViewElement
as
RadPageViewOutlookElement;
outlookElement.ItemCollapsed +=
new
OutlookViewItemEventHandler(outlookElement_ItemCollapsed);
outlookElement.DragGripDown();
outlookElement.DragGripDown();
outlookElement.DragGripDown();
outlookElement.DragGripDown();
outlookElement.DragGripDown();
outlookElement.OverflowItemsContainer.AddRemoveButtonsItem.Visibility = Telerik.WinControls.ElementVisibility.Collapsed;
}
void
outlookElement_ItemCollapsed(
object
sender, OutlookViewItemEventArgs args)
{
RadPageViewOutlookElement outlookElement =
this
.radPageView1.ViewElement
as
RadPageViewOutlookElement;
foreach
(RadItem button
in
outlookElement.OverflowItemsContainer.Children[0].Children)
{
if
(button
is
RadPageViewOutlookAssociatedButton)
{
button.AutoSize =
false
;
button.Size =
new
Size(0, 0);
}
}
}
Hope that helps but let me know if you need more information
Richard

You are wonderful, Richard.
Here is anther thing which we want.
We want to put on the top of the list for every most recently selected viewpage tab:
eg: 1. the initial page view tab is this: page1, page2, page3, page4, page5, page6. The number of view select page tab is 3, so visible select page view tabs are page1, page2, page3
when we check page4 on hidden bottom tab, the visible select page tabs are page4, page1, page2
3. When we check the page6 in hidden bottom tab, the visible selectg page tabs are page6, page4, page1
So we want to arrange the order of the select page tab.
We notice that there are some events for RadPageViewOutlookElement such as
ItemChecked,
ItemShown
Maybe we can use those events to clear the pages and add the page to pages to achieve this by the order of adding pages.
Is there any more efficient way we can use to do this such as changing index ?
Thanks.

You don't have to remove the pages. You can just change the index of the selected page to be the first in the list.
private
void
radPageView1_SelectedPageChanged(
object
sender, EventArgs e)
{
this
.radPageView1.Pages.ChangeIndex(
this
.radPageView1.SelectedPage, 0);
}
I hope that helps. Please remember to mark all answers as answer and if you have further questions please let me know
Richard

We want also to make the most recently selected page on the popped-up list by add-remove button as the selectpage on the top of select page tab ( see attached)
we tried to use following:
void
outlookElement_ItemChecked(object sender, Telerik.WinControls.UI.OutlookViewItemEventArgs args)
{
// this.radPageView1.Pages.ChangeIndex(this.radPageView1.SelectedPage, 0);
this.radPageView1.SelectedPage = args.Item.Page;
this.radPageView1.Pages.ChangeIndex(this.radPageView1.SelectedPage, 0);
}
But it only move the checked - page -item to the top of popped-up list not on tab panel as following
private void radPageView1_SelectedPageChanged(object sender, EventArgs e)
{
this.radPageView1.Pages.ChangeIndex(this.radPageView1.SelectedPage, 0);
}
we want those two to achieve the same goal no matter where the page is selected or checked.

I thought that you wanted to not show the Add/remove buttons section?
If you do want to show the Add/Remove buttons, then please could you tell me what you wish to show in there.
Thanks
Richard

So far, we are right on the track.
1. We want to show add/remove button but not show yellow page tab. We already achieved this by our previous communication
2. We want the select page always to be the top of page list: namely make the selected page as
this
.radPageView1.Pages[0]. it seems that we achieve this only partially by following:
private void radPageView1_SelectedPageChanged(object sender, EventArgs e)
{
this.radPageView1.Pages.ChangeIndex(this.radPageView1.SelectedPage, 0);
}
3. but we want to do more: when add/remove button is clicked, a list of pages is popped up with a check box in front of each view page .
We want index of each vew page on this popped up list to match up with the index of each page in this.radPageView1.Pages so that the very most recently selected page is alway this.radPageView1.Pages[0]. we tried to use following:
void outlookElement_ItemChecked(object sender, Telerik.WinControls.UI.OutlookViewItemEventArgs args)
{
// this.radPageView1.Pages.ChangeIndex(this.radPageView1.SelectedPage, 0);
this.radPageView1.SelectedPage = args.Item.Page;
this.radPageView1.Pages.ChangeIndex(this.radPageView1.SelectedPage, 0);
}
but it seems that it only change the index of selected page in the popped up list not in this.radPageView1.Pages
hope that we present what we want clearly this time.
thanks.

May I ask what version you are using? For reference I am using the latest Q3 2010 SP1 version. From what you have said it is working correctly. I have produced a small video which you can view here to show what I mean.
If you are not using the latest version, I'd suggest upgrading. If I have mis-understood your request, please let me know
thanks
Richard

Hello, Richard,
The video is helpful.
We use Q2 2010 SP1, and it has no problem to do what is presented on video.
I .As it is presented on video, when the viewpage is selected on the page tab, it's index becomes 0 in
this
.radPageView1.Pages list and it alway changes index of pop up list and makes it on the top of the pop-up -list ( namely index = 0). This is good.
II. What we want is the reverse of the above: select a page on popup list ( check the checkbox in front of the view page) and make it on the top of the pop-up-list (namely index=0) and also make this checked view page on the pop-up-list as the selected view page on the page tab and make its index = 0 on this.radPageView1.Pages list.
Currently we can only do : check a view page on the pop-up-list and make it on the top of the pop-up-list ( namely index=0 on pop-up-list) and make it add to this.radPageView1.Pages list but its index on this.radPageView1.Pages list is not zero so it does not appear on the top of this.radPageView1.Pages list . In order to make it on the top of this.radPageView1.Pages list, we have to select it on the page tab ( repeat step I.) So there are two steps: 1) check the page on the pop-up-list, 2) locate it on the page tabs ( it may be invisible if it is at the bottom of page tabs) and select it so that it can be on the top of the page tabs. We want only one step: check the page: it is automatically on the top of pop-up-list and also becomes the selected page on this.radPageView1.Pages list and on the top of the page tab.

To follow up with the previous reply, we did a little test. We found out following;
We notice that the selected view page does get updated. This is what we want but not view page tab even though we call
this.radPageView1.Pages.ChangeIndex(this.radPageView1.SelectedPage, 0);
== this does not work (METHOD A) ===
void outlookElement_ItemChecked(object sender, Telerik.WinControls.UI.OutlookViewItemEventArgs args)
{
this.radPageView1.SelectedPage = args.Item.Page;
this.radPageView1.Pages.ChangeIndex(this.radPageView1.SelectedPage, 0);
}
But when we do following, the view page tab moves to the top:
=== this works (METHOD B)===
private void radPageView1_SelectedPageChanged(object sender, EventArgs e)
{
this.radPageView1.Pages.ChangeIndex(this.radPageView1.SelectedPage, 0);
}
Question: the same method call of ChangeIndex(this.radPageView1.SelectedPage, 0) , one works but another does not work. METHOD A does not work but METHOD B works.

void outlookElement_ItemChecked(object sender, Telerik.WinControls.UI.OutlookViewItemEventArgs args)
{
// this.radPageView1.Pages.ChangeIndex(this.radPageView1.SelectedPage, 0);
this.radPageView1.SelectedPage = args.Item.Page;
this.radPageView1.Pages.ChangeIndex(this.radPageView1.SelectedPage, 0);
}
But there is a little catch. The checked view page on pop-up-list has to on the list of view tab. It this is on the page view tab, it moves to the top of page view tab list if it is checked on pop-up-list and outlookElement_ItemChecked event is triggered.
Question: there are three lists which should be taken care of in order to move the view page on the top of the page view tab no matter where the checked item locates on the pop-up-list?
1. pop-up-list for checked page
2. view page list : this.radPageView1.pages
3. page view tab list.
How to take care of page view tab list so that a checked item on the pop-up-list can appear on the top of page view tab list?

I've just been catching up with your posts. I think this is trying to use the RadPageView in a way it wasn't designed for. The Add/Remove buttons section is there to add and remove the yellow buttons from the strip at the bottom, so I'm a bit unsure as to what you wish to do with it.
Please could you format any code that you add with the Format Code block as it makes it quite unreadable if the code is just pasted into the page.
It seems as though you have it working now though, but I don't know what you mean by the Page View Tab List.
Please could you mark helpful answers and if you need further help, do let me know, but if you can add supporting screenshots and add code using format code blocks, this will help me to assist you.
Thanks
Richard


Ok, I am including here my working code that I have been using to assist you with. As I said before, I am unsure what you want to do with the popup list of available pages. This is usually used to add and remove the page (yellow) buttons and add and remove pages from the list of pages available.
Designer File
namespace
RadPageView_CS
{
partial
class
Form1
{
/// <summary>
/// Required designer variable.
/// </summary>
private
System.ComponentModel.IContainer components;
/// <summary>
/// Clean up any resources being used.
/// </summary>
/// <param name="disposing">true if managed resources should be disposed; otherwise, false.</param>
protected
override
void
Dispose(
bool
disposing)
{
if
(disposing && (components !=
null
))
{
components.Dispose();
}
base
.Dispose(disposing);
}
#region Windows Form Designer generated code
/// <summary>
/// Required method for Designer support - do not modify
/// the contents of this method with the code editor.
/// </summary>
private
void
InitializeComponent()
{
this
.radPageView1 =
new
Telerik.WinControls.UI.RadPageView();
this
.radPageViewPage1 =
new
Telerik.WinControls.UI.RadPageViewPage();
this
.radPageViewPage2 =
new
Telerik.WinControls.UI.RadPageViewPage();
this
.radPageViewPage3 =
new
Telerik.WinControls.UI.RadPageViewPage();
this
.radPageViewPage4 =
new
Telerik.WinControls.UI.RadPageViewPage();
this
.radPageViewPage5 =
new
Telerik.WinControls.UI.RadPageViewPage();
this
.radPageViewPage6 =
new
Telerik.WinControls.UI.RadPageViewPage();
this
.radPageViewPage7 =
new
Telerik.WinControls.UI.RadPageViewPage();
((System.ComponentModel.ISupportInitialize)(
this
.radPageView1)).BeginInit();
this
.radPageView1.SuspendLayout();
this
.SuspendLayout();
//
// radPageView1
//
this
.radPageView1.Controls.Add(
this
.radPageViewPage1);
this
.radPageView1.Controls.Add(
this
.radPageViewPage2);
this
.radPageView1.Controls.Add(
this
.radPageViewPage3);
this
.radPageView1.Controls.Add(
this
.radPageViewPage4);
this
.radPageView1.Controls.Add(
this
.radPageViewPage5);
this
.radPageView1.Controls.Add(
this
.radPageViewPage6);
this
.radPageView1.Controls.Add(
this
.radPageViewPage7);
this
.radPageView1.Location =
new
System.Drawing.Point(0, 0);
this
.radPageView1.Name =
"radPageView1"
;
this
.radPageView1.SelectedPage =
this
.radPageViewPage1;
this
.radPageView1.Size =
new
System.Drawing.Size(261, 573);
this
.radPageView1.TabIndex = 0;
this
.radPageView1.Text =
"radPageView1"
;
this
.radPageView1.ViewMode = Telerik.WinControls.UI.PageViewMode.Outlook;
//
// radPageViewPage1
//
this
.radPageViewPage1.Location =
new
System.Drawing.Point(5, 31);
this
.radPageViewPage1.Name =
"radPageViewPage1"
;
this
.radPageViewPage1.Size =
new
System.Drawing.Size(251, 276);
this
.radPageViewPage1.Text =
"radPageViewPage1"
;
//
// radPageViewPage2
//
this
.radPageViewPage2.Location =
new
System.Drawing.Point(5, 31);
this
.radPageViewPage2.Name =
"radPageViewPage2"
;
this
.radPageViewPage2.Size =
new
System.Drawing.Size(251, 121);
this
.radPageViewPage2.Text =
"radPageViewPage2"
;
//
// radPageViewPage3
//
this
.radPageViewPage3.Location =
new
System.Drawing.Point(5, 31);
this
.radPageViewPage3.Name =
"radPageViewPage3"
;
this
.radPageViewPage3.Size =
new
System.Drawing.Size(251, 121);
this
.radPageViewPage3.Text =
"radPageViewPage3"
;
//
// radPageViewPage4
//
this
.radPageViewPage4.Location =
new
System.Drawing.Point(5, 31);
this
.radPageViewPage4.Name =
"radPageViewPage4"
;
this
.radPageViewPage4.Size =
new
System.Drawing.Size(251, 121);
this
.radPageViewPage4.Text =
"radPageViewPage4"
;
//
// radPageViewPage5
//
this
.radPageViewPage5.Location =
new
System.Drawing.Point(5, 31);
this
.radPageViewPage5.Name =
"radPageViewPage5"
;
this
.radPageViewPage5.Size =
new
System.Drawing.Size(251, 121);
this
.radPageViewPage5.Text =
"radPageViewPage5"
;
//
// radPageViewPage6
//
this
.radPageViewPage6.Location =
new
System.Drawing.Point(5, 31);
this
.radPageViewPage6.Name =
"radPageViewPage6"
;
this
.radPageViewPage6.Size =
new
System.Drawing.Size(251, 121);
this
.radPageViewPage6.Text =
"radPageViewPage6"
;
//
// radPageViewPage7
//
this
.radPageViewPage7.Location =
new
System.Drawing.Point(5, 31);
this
.radPageViewPage7.Name =
"radPageViewPage7"
;
this
.radPageViewPage7.Size =
new
System.Drawing.Size(251, 121);
this
.radPageViewPage7.Text =
"radPageViewPage7"
;
//
// Form1
//
this
.AutoScaleDimensions =
new
System.Drawing.SizeF(6F, 13F);
this
.AutoScaleMode = System.Windows.Forms.AutoScaleMode.Font;
this
.ClientSize =
new
System.Drawing.Size(264, 576);
this
.Controls.Add(
this
.radPageView1);
this
.Name =
"Form1"
;
this
.Text =
"Form1"
;
this
.Load +=
new
System.EventHandler(
this
.Form1_Load);
((System.ComponentModel.ISupportInitialize)(
this
.radPageView1)).EndInit();
this
.radPageView1.ResumeLayout(
false
);
this
.ResumeLayout(
false
);
}
#endregion
private
Telerik.WinControls.UI.RadPageView radPageView1;
private
Telerik.WinControls.UI.RadPageViewPage radPageViewPage1;
private
Telerik.WinControls.UI.RadPageViewPage radPageViewPage2;
private
Telerik.WinControls.UI.RadPageViewPage radPageViewPage3;
private
Telerik.WinControls.UI.RadPageViewPage radPageViewPage4;
private
Telerik.WinControls.UI.RadPageViewPage radPageViewPage5;
private
Telerik.WinControls.UI.RadPageViewPage radPageViewPage6;
private
Telerik.WinControls.UI.RadPageViewPage radPageViewPage7;
}
}
Form1.cs
using
System;
using
System.Collections.Generic;
using
System.ComponentModel;
using
System.Data;
using
System.Drawing;
using
System.Linq;
using
System.Text;
using
System.Windows.Forms;
using
Telerik.WinControls.UI;
using
Telerik.WinControls;
//using Telerik.WinControls.RadControlSpy;
namespace
RadPageView_CS
{
public
partial
class
Form1 : Form
{
public
Form1()
{
InitializeComponent();
}
private
void
Form1_Load(
object
sender, EventArgs e)
{
//RadControlSpyForm form = new RadControlSpyForm();
//form.Show();
this
.radPageView1.SelectedPage =
this
.radPageViewPage1;
RadPageViewOutlookElement outlookElement =
this
.radPageView1.ViewElement
as
RadPageViewOutlookElement;
outlookElement.ItemCollapsed +=
new
OutlookViewItemEventHandler(outlookElement_ItemCollapsed);
outlookElement.DragGripDown();
outlookElement.DragGripDown();
outlookElement.DragGripDown();
outlookElement.DragGripDown();
outlookElement.DragGripDown();
//outlookElement.OverflowItemsContainer.AddRemoveButtonsItem.Visibility = Telerik.WinControls.ElementVisibility.Collapsed;
this
.radPageView1.SelectedPageChanged +=
new
System.EventHandler(
this
.radPageView1_SelectedPageChanged);
}
void
outlookElement_ItemCollapsed(
object
sender, OutlookViewItemEventArgs args)
{
RadPageViewOutlookElement outlookElement =
this
.radPageView1.ViewElement
as
RadPageViewOutlookElement;
foreach
(RadItem button
in
outlookElement.OverflowItemsContainer.Children[0].Children)
{
if
(button
is
RadPageViewOutlookAssociatedButton)
{
button.AutoSize =
false
;
button.Size =
new
Size(0, 0);
}
}
}
private
void
radPageView1_SelectedPageChanged(
object
sender, EventArgs e)
{
this
.radPageView1.Pages.ChangeIndex(
this
.radPageView1.SelectedPage, 0);
}
}
}
You've also said there are 3 lists to be dealt with. I am only seeing 2, unless I have missed something obvious.
regards,
Richard

In addition to the above, please be aware that we are working with different versions of the RadControls. I'd strongly advise to upgrade as not only will you have the latest version of the RadPageView, but there are also many other enhancements and fixes that you are sure to find of use
Richard

One more question:
RadPageViewOutlookElement has a method DragGripUp() which is to drag the overflow grip up to show the first possible hidden item.
This is the reverse of DragGripDown in our early discussion.
Is there a way to DragGripUp an item we specifies. Say that there are five or six hidden items We want to drag number six or number three hidden item up first. Or to make number six or number three hidden item as the first possible hidden item, then DragGripUp

As far as I know, no. As per my code sample, you'd need to DragUp or DragDown the number of times for the number of pages you drag the bar over. For this reason, my first sample had 5 DragDown methods to bring the drag bar doen to hide the first 5 items.
Hope this helps. Please ask if you need anything further
Richard

Please remember to mark helpful posts as answer and if you need anything further, do let me know
Thanks
Richard

It seems that we have what we want. It's a little bit clumsy but it works. Maybe there is a better way but the Stack Data Structure and most of protected methods present some challenges. It seems that performance is still ok.
void
outlookElement_ItemChecked(
object
sender, Telerik.WinControls.UI.OutlookViewItemEventArgs args)
{
this
.radPageView1.SelectedPage = args.Item.Page;
this
.radPageView1.Pages.ChangeIndex(
this
.radPageView1.SelectedPage, 0);
Telerik.WinControls.UI.RadPageViewOutlookElement outlookElement =
this
.radPageView1.ViewElement
as
Telerik.WinControls.UI.RadPageViewOutlookElement;
Telerik.WinControls.UI.RadPageViewOutlookItem[] hiddenEl = outlookElement.GetHiddenItems();
hiddenCount = hiddenEl.Length;
hiddenCount += 1;
changeOverFlowGrip(outlookElement);
}
==============================================================
private
void
changeOverFlowGrip(Telerik.WinControls.UI.RadPageViewOutlookElement outlookElement )
{
outlookElement.ShowItems(outlookElement.Items.Count);
outlookElement.HideItems(hiddenCount);
}

Regards,
Richard

We have another thing we may need for the PageView.
There is a menu button with a small down arrow image at the lower right corner of PageView to pop up show more or fewer button menu. (see sample_6)
Can we do following ( see sample-7):
1. add a text which is aligned to the middle left of the button
2. use our own image instead of the default small down arrow and make it align to the middle right of the button.
We try the following codes but it is not quite what we want. It seems that those codes do not do alignment as what we want.
Telerik.WinControls.UI.RadPageViewOutlookElement outlookElement = this.radPageView1.ViewElement as Telerik.WinControls.UI.RadPageViewOutlookElement;
outlookElement.OverflowItemsContainer.OverflowButtonElement.ImageAlignment = ContentAlignment.MiddleRight;
outlookElement.OverflowItemsContainer.OverflowButtonElement.TextAlignment = ContentAlignment.MiddleLeft;
outlookElement.OverflowItemsContainer.OverflowButtonElement.Text = "Sample Text";
Any suggestion to help us to get what we want here?
Well, ignore this request. we think that we figure out the solution for this:
outlookElement.OverflowItemsContainer.OverflowButtonElement.TextImageRelation =
TextImageRelation.TextBeforeImage;
Thanks.
Thank you for writing.
I am glad to hear that you found the solution regarding the alignment question. As to the image itself, you can set it as shown below:
outlookElement.OverflowItemsContainer.OverflowButtonElement.Image = WindowsFormsApplication32.Properties.Resources.backimage;
A bit off topic, I would kindly ask you to try to keep discussing only one subject per thread. If you have additional questions, please open a new thread giving it a descriptive name. This will allow our users to find the necessary answers in our forums more easily.
Thank you for your cooperation.
Greetings,
Nikolay
the Telerik team