Dual functionality on PanelBar

4 posts, 0 answers
  1. Mark
    Mark avatar
    20 posts
    Member since:
    Nov 2006

    Posted 13 Jul 2011 Link to this post

    Hi,

    I'm hoping this is a simple one, but I can't find an answer by searching.

    I have a PanelBar with multiple items. However, instead of them all being URL links (RadPanelItem.NavigateURL), I want a few of them to handle OnClick events (each one of this type with it's own method) instead.

    Is this possible? I know there's an ItemClick event on the RadPanelBar itself, but there doesn't seem to be one on the RadPanelItems.

    Many thanks for any help that can be offered.
  2. Ivan Zhekov
    Admin
    Ivan Zhekov avatar
    539 posts

    Posted 14 Jul 2011 Link to this post

    Hi Mark,

    It's quite possible to do it. Examine the following snippet:

    <script type="text/javascript">
    function OnClientItemClicking(sender, args) {
        var item = args.get_item(),
            anchor = item.get_linkElement().href;
     
        if (anchor == "#") {
            // not a link
            // do stuff programmatically
     
        }
    }
     
    function someAction() {
        alert("I am action");
    }
    </script>
     
     
    <telerik:RadPanelBar runat="server" OnClientItemClicking="OnClientItemClicking">
        <Items>
            <telerik:RadPanelItem Text="Label" Expanded="True">
                <Items>
                    <telerik:RadPanelItem Text="Other Label" NavigateUrl="http://google.com" />
                    <telerik:RadPanelItem Text="Some Other Label" NavigateUrl="javascript:someAction()" />
                    ...
                </Items>
            </telerik:RadPanelItem>
        </Items>
    </telerik:RadPanelBar>

    Each time an item is clicked, the OnClientItemClicking event is fired; the IF checks if it has an action associated or not. In this particular example, if there was a handler in the IF statement, it would fire only on the first root item (Label item), as the rest have hrefs. In that IF we could grammatically determine on which item which action corresponds, or attach a one for all items handler.

    Then the NavigateUrl item would navigate to where ever.

    And finally, using the pseudo "javascript:" protocol, we could attach individual handlers to specific items.

    Is this the type of solution you were looking for?

    Best wishes,
    Ivan Zhekov
    the Telerik team

    Register for the Q2 2011 What's New Webinar Week. Mark your calendar for the week starting July 18th and book your seat for a walk through of all the exciting stuff we will ship with the new release!

  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Mark
    Mark avatar
    20 posts
    Member since:
    Nov 2006

    Posted 14 Jul 2011 Link to this post

    Hi,

    Thanks for your reply, however I don't think it's quite what I'm looking for. I should have been clearer, but it's server side methods I need to call when the item is clicked, not client side Javascript.

    Is this possible?
  5. Ivan Zhekov
    Admin
    Ivan Zhekov avatar
    539 posts

    Posted 26 Jul 2011 Link to this post

    Hi Mark,

    Bellow you will find attached a possible solution. The solution is not elegant at all and is a sort of rewrite of the JS version.

    Basically, on click, if there is NavigateURL that's valid (a link or js pseudo protocol) the server side will not fire; in the rest of the cases, the event goes to a switch and checks for exact names to perform an action based on that name.

    Best wishes, Ivan Zhekov
    the Telerik team

    Register for the Q2 2011 What's New Webinar Week. Mark your calendar for the week starting July 18th and book your seat for a walk through of all the exciting stuff we will ship with the new release!

Back to Top