PanelBar Hover

6 posts, 0 answers
  1. Jols
    Jols avatar
    69 posts
    Member since:
    Mar 2009

    Posted 22 Apr 2009 Link to this post

    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
       
        
  3. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 22 Apr 2009 Link to this post

    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.
  5. Jols
    Jols avatar
    69 posts
    Member since:
    Mar 2009

    Posted 22 Apr 2009 Link to this post

    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>
  7. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 23 Apr 2009 Link to this post

    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.
  8.
  9. Jols
    Jols avatar
    69 posts
    Member since:
    Mar 2009

    Posted 23 Apr 2009 Link to this post

    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

  11. Kori
    Kori avatar
    73 posts
    Member since:
    Dec 2008

    Posted 16 Feb 2010 Link to this post

    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
Back to Top