RadPageViewPage on mouseover event

[nestodre]

Hi guys,

I'm working with RadPageView and I want to catch MouseHover event of RadPageView.
In details, I want to focus and expand a PageViewPage when the mouse hover on the header.
For example, I have 1 RadPageView named "Page View", and it have 2 PageViewPage: "A" and "B". I want to expand the content of page "A" and page "B" when mouse is moving over them.

Can u give me some advise?

Thanks,
(Sorry for my bad English)

[Stefan]

Hello Nestodre,

Thank you for writing.

Can you please specify which ViewMode of RadPageView are you using - outlook, explorer bar, etc?

I am looking forward to your reply.

Regards,
Stefan
Telerik

 

 

[Stefan]

I have just noticed the other threads of yours, where you mention you use the ExplorerBar mode. Here is how to achieve this in it:

protected override void OnLoad(EventArgs e)
{
    base.OnLoad(e);

    AddPageView();
    radPageView1.ViewMode = PageViewMode.ExplorerBar;
    RadPageViewExplorerBarElement explorerBarElement = radPageView1.ViewElement as RadPageViewExplorerBarElement;
    foreach (var item in explorerBarElement.Items)
    {
        item.MouseHover += item_MouseHover;
    }
}

void item_MouseHover(object sender, EventArgs e)
{
    RadPageViewExplorerBarItem item = (RadPageViewExplorerBarItem)sender;
    item.IsExpanded = !item.IsExpanded;
}

I hope that you find this information useful. Should you have any other questions, do not hesitate to contact us.

Regards,
Stefan
Telerik

 

 

[nestodre]

Hi Stefan,
Thank for your support.
I have 2 more questions :D

- When I expand 1 item, I want to collapse all of the others. I tried to use "foreach" for all items in explorerBarElement.Items but it didn't work. I found that this 'item' is belong to RadPageViewItem, different from RadPageViewExplorerBarItem, so the property IsExpand is not available. How can I check which one is expanded?

I have tried this and it worked, but I think this way is not optimized:

// save the item that's explored
rivate RadPageViewExplorerBarItem exploredItem;

void item_MouseHover(object sender, EventArgs e)
        {
            if(this.exploredItem != null)
                this.exploredItem.IsExpanded = false;
            RadPageViewExplorerBarItem item = (RadPageViewExplorerBarItem)sender;
            item.IsExpanded = true;
            this.exploredItem = item;
        }

- And the other question is about the animation of expanding page, I used your advise and found that after I hover 1 element, it takes about 0.5 sec to expand it, it's not smooth. So can I define some animations for this action?

Thank you so much for your help :-)

[Stefan]

Hi Quan,

1. You can just cast the RadPageViewItem to RadPageViewExplorerBarItem. When you are in explorer bar view, this cast will pass and you will have access to the IsExpanded property:

void item_MouseHover(object sender, EventArgs e)
{
    RadPageViewExplorerBarItem item = (RadPageViewExplorerBarItem)sender;

    RadPageViewExplorerBarElement explorerBarElement = radPageView1.ViewElement as RadPageViewExplorerBarElement;
    foreach (RadPageViewExplorerBarItem i in explorerBarElement.Items)
    {
        i.IsExpanded = false;
    }

    item.IsExpanded = true;
}

2. In regards to the animation, RadPageView does not feature expand animation, however, you could use a timer and the PageLength property to achieve such. Here is an example:

protected override void OnLoad(EventArgs e)
{
    base.OnLoad(e);

    AddPageView();
    radPageView1.ViewMode = PageViewMode.ExplorerBar;

    RadPageViewExplorerBarElement explorerBarElement = radPageView1.ViewElement as RadPageViewExplorerBarElement;
    foreach (RadPageViewExplorerBarItem item in explorerBarElement.Items)
    {
        item.MouseHover += item_MouseHover;
        item.AssociatedContentAreaElement.RadPropertyChanging += AssociatedContentAreaElement_RadPropertyChanging;
    }

    timer = new System.Windows.Forms.Timer();
    timer.Interval =30;
    timer.Tick += timer_Tick;
    radPageView1.PageExpanded += radPageView1_PageExpanded;
}

void timer_Tick(object sender, EventArgs e)
{
    currentPage.PageLength += 20;
    if (currentPage.PageLength >= 300)
    {
        timer.Stop();
    }
}

System.Windows.Forms.Timer timer;
RadPageViewPage currentPage;
void radPageView1_PageExpanded(object sender, RadPageViewEventArgs e)
{
    timer.Stop();
    currentPage = e.Page;
    currentPage.PageLength = 0;
    timer.Start();
}

void AssociatedContentAreaElement_RadPropertyChanging(object sender, RadPropertyChangingEventArgs args)
{
    if (args.Property.Name == "Bounds")
    {
        //suspend layout when animating
        args.Cancel = timer.Enabled;
    }
}

void item_MouseHover(object sender, EventArgs e)
{
    RadPageViewExplorerBarItem item = (RadPageViewExplorerBarItem)sender;

    RadPageViewExplorerBarElement explorerBarElement = radPageView1.ViewElement as RadPageViewExplorerBarElement;
    foreach (RadPageViewExplorerBarItem i in explorerBarElement.Items)
    {
        i.IsExpanded = false;
    }

    item.IsExpanded = true;
}

I hope that you find this information useful.

Regards,
Stefan
Telerik

 

 

[nestodre]

Thank for your reply.
It's worked! :D
Have a nice weekend Stefan!