PanelBar Hover

[Jols]

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
   
    

[Shinu]

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.

[Jols]

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>

[Shinu]

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.

[Jols]

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

[Kori]

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