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

RadPageViewPage on mouseover event

5 Answers 124 Views
PageView
This is a migrated thread and some comments may be shown as answers.
nestodre
Top achievements
Rank 1
nestodre asked on 12 Mar 2015, 02:28 AM
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)

5 Answers, 1 is accepted

Sort by
0
Stefan
Telerik team
answered on 12 Mar 2015, 07:28 AM
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
 

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

 
0
Stefan
Telerik team
answered on 12 Mar 2015, 07:31 AM
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
 

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

 
0
nestodre
Top achievements
Rank 1
answered on 13 Mar 2015, 01:57 AM
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 :-)
0
Stefan
Telerik team
answered on 13 Mar 2015, 08:15 AM
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
 

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

 
0
nestodre
Top achievements
Rank 1
answered on 14 Mar 2015, 03:07 AM
Thank for your reply.
It's worked! :D
Have a nice weekend Stefan!
Tags
PageView
Asked by
nestodre
Top achievements
Rank 1
Answers by
Stefan
Telerik team
nestodre
Top achievements
Rank 1
Share this question
or