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

PanelBar Hover

5 Answers 74 Views
This is a migrated thread and some comments may be shown as answers.
Jols
Top achievements
Rank 2
Jols asked on 22 Apr 2009, 09:34 AM
hi to all expert on Telerik
                      Good Day!
                                       I would like to ask help from you guys who knows very well on this control coz i'm using a panelbar, now here's my question. when the user hover the mouse on the item on the panelbar the subitem will automatically drop. coz i have only a panelbar that will execute only on the click event, all i wanted is when user hover the mouse on the main item then automatically it will drop the subitem..like for example,

Car -- is the main item
    ford     -- this are the subitem
    honda
    bmw

Please help..

sample/codes is highly appreciated

Thanks
   
    

5 Answers, 1 is accepted

Sort by
0
Shinu
Top achievements
Rank 1
answered on 22 Apr 2009, 10:05 AM
Hi Jols,

I tried following client side code for accomplishing this functionality. Give a try with this code and see whether it matches your need.

[ASPX]
 
<telerik:RadPanelBar ID="RadPanelBar1" runat="server" Skin="Vista" OnClientMouseOut="CollapseItem" OnClientMouseOver="ExpandItem"
    <Items> 
        <telerik:RadPanelItem runat="server" Text="Cars"
            <Items> 
                <telerik:RadPanelItem runat="server" Text="Ford"
                </telerik:RadPanelItem> 
                <telerik:RadPanelItem runat="server" Text="Honda"
                </telerik:RadPanelItem> 
                <telerik:RadPanelItem runat="server" Text="BMW"
                </telerik:RadPanelItem>                         
            </Items> 
        </telerik:RadPanelItem>            
    </Items> 
</telerik:RadPanelBar> 

[JavaScript]
 
<script type="text/javascript"
function ExpandItem(panelbar, args) 
{   
    args.get_item().set_expanded(true); 
function CollapseItem(panelbar, args) 
    args.get_item().set_expanded(false); 
</script> 

You can also refer following link to documentation which shows how RadPanelItems can be expanded/collapsed when hover over them. Hope this helps.
Expand RadPanelItems on hover

Thanks,
Shinu.
0
Jols
Top achievements
Rank 2
answered on 22 Apr 2009, 10:24 AM
sir how about if i have a datasource coz i tried to paste the javascript but nothing happen kindly see may codes and check if ever i missed something there..

<telerik:RadPanelBar ID="RadPanelBar1" runat="server" DataFieldID="Url"
                            DataFieldParentID="Url"
                            DataNavigateUrlField="Url" DataSourceID="SiteMapDataSource1" DataTextField="Title"
                            DataValueField="Url" ExpandMode="SingleExpandedItem"
                            Skin="WebBlue" Width="100%" OnClientMouseOver="ExpandItem();" OnClientMouseOut ="CollapseItem" >
                            <CollapseAnimation Duration="100" Type="None" />
                            <ExpandAnimation Duration="100" Type="None" />
                        </telerik:RadPanelBar>
0
Shinu
Top achievements
Rank 1
answered on 23 Apr 2009, 07:27 AM
Hello Jols,

Try OnClientMouseOver="ExpandItem" (without the brackets and semicolon) and see whether it helps. You can also refer following documentation which describes how to bind the SiteMapDataSource to Telerik RadPanelBar.
Binding to Hierarchical DataSource Components

Thanks,
Shinu.
0
Jols
Top achievements
Rank 2
answered on 23 Apr 2009, 08:33 AM
sir still not working i followed your instruction but still no expanding..sir is there any option to mousehover please help..

here's the codes again

<script type="text/javascript"
function ExpandItem(panelbar, args) 
{   
    args.get_item().set_expanded(true); 
function CollapseItem(panelbar, args) 
    args.get_item().set_expanded(false); 
</script> 

                     <telerik:RadPanelBar ID="RadPanelBar1" runat="server" DataFieldID="Url"
                            DataFieldParentID="Url"
                            DataNavigateUrlField="Url" DataSourceID="SiteMapDataSource1" DataTextField="Title"
                            DataValueField="Url" ExpandMode="SingleExpandedItem"
                            Skin="WebBlue" Width="100%" OnClientMouseOver="ExpandItem" OnClientMouseOut ="CollapseItem" >
                            <CollapseAnimation Duration="100" Type="None" />
                            <ExpandAnimation Duration="100" Type="None" />
                        </telerik:RadPanelBar>

sample/codes is higly appreciated
thanks

0
Kori
Top achievements
Rank 2
answered on 16 Feb 2010, 03:49 PM
I also can't get this to work. I keep getting the error:

Error: Sys.ArgumentUndefinedException: Value cannot be undefined.
Parameter name: handler

which points to here:
var $removeHandler = Sys.UI.DomEvent.removeHandler = function Sys$UI$DomEvent$removeHandler(element, eventName, handler) { 
    /// <summary locid="M:J#Sys.UI.DomEvent.removeHandler" /> 
    /// <param name="element"></param> 
    /// <param name="eventName" type="String"></param> 
    /// <param name="handler" type="Function"></param> 
    var e = Function._validateParams(arguments, [ 
        {name: "element"}, 
        {name: "eventName", type: String}, 
        {name: "handler", type: Function} 
    ]); 
 


Thanks,
Kori
Asked by
Jols
Top achievements
Rank 2
Answers by
Shinu
Top achievements
Rank 1
Jols
Top achievements
Rank 2
Kori
Top achievements
Rank 2
Share this question
or