This is a migrated thread and some comments may be shown as answers.

PageView in the viewmode of outlook and set number of showbuttons

25 Answers 304 Views

PageView

This is a migrated thread and some comments may be shown as answers.

Ming Zhao asked on 24 Feb 2011, 07:46 PM

sample-1.jpg

sample-2.jpg

When Pageview's viewmode is set as outlook, two buttons can be used to set number of buttons listed on the panel after a pageview is loaded.

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

answered on 28 Feb 2011, 05:26 PM

sample-4.jpg

sample-5.jpg

Yes, this is good.

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)

answered on 28 Feb 2011, 06:33 PM

Hello Ming,

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.OverflowItemsContainer.ShowFewerButtonsItem.Visibility = Telerik.WinControls.ElementVisibility.Collapsed;

outlookElement.OverflowItemsContainer.ShowMoreButtonsItem.Visibility = Telerik.WinControls.ElementVisibility.Collapsed;

hope that helps
Richard

answered on 01 Mar 2011, 10:44 AM

Hello Ming,

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

answered on 01 Mar 2011, 03:45 PM

yes, this is what we want .

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.

answered on 01 Mar 2011, 05:16 PM

sample-6.jpg

yes, that achieve some of our goal.

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.

answered on 01 Mar 2011, 05:49 PM

Hello, 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.

answered on 01 Mar 2011, 07:04 PM

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.

answered on 01 Mar 2011, 08:40 PM

Hello, Richard,

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.

answered on 01 Mar 2011, 09:16 PM

Well. New discovery. It seems that it works using

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?

answered on 01 Mar 2011, 09:29 PM

Hello,

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

answered on 01 Mar 2011, 10:06 PM

sample-8.jpg

since there is no clear documentation to define, we tentatively gave a label to these visual part to make our communication smooth. See the attached to get a visual explanation what we mean about Page View Tab List.

answered on 01 Mar 2011, 10:47 PM

Hello,

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

answered on 02 Mar 2011, 04:42 PM

Hello, 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);

}

answered on 03 Mar 2011, 07:34 PM

sample-6.jpg

sample-7.jpg

Hello, 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.

answered on 07 Mar 2011, 04:04 PM

Hi Ming,

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

Registration for Q1 2011 What’s New Webinar Week is now open. Mark your calendar for the week starting March 21st and book your seat for a walk through all the exciting stuff we ship with the new release!

Product Bundles

DevCraft

Web

Mobile

Document Management

Desktop

Reporting & Mocking

Automated Testing

CMS

UI/UX Tools

Debugging

Free Tools

Support and Learning

Productivity and Design Tools

PageView in the viewmode of outlook and set number of showbuttons

25 Answers, 1 is accepted