toolbar dropdown with a a treeview as itemtemplate

2 posts, 0 answers
  1. jean-marc
    jean-marc avatar
    3 posts
    Member since:
    Mar 2009

    Posted 29 Sep 2010 Link to this post

    Hello,

    I'm working on a toolbar with a custom dropdown. I want to place a treeview instead of a list of items for selection. I'm able to fill and to use the treeview but I have two problems :
     
    1/ How to disable standard animation behind my treeview (selected colors appears behind like if toolbarbuttons where there) ?

    2/ How to post a postback event "RadToolBar.ButtonClick" each time I change my selection ?

    Best regards

    PS : my code

    <script type="text/jscript" >
        function OnClientNodeClickingHandler(sender, e) {
            var r = $find("<%= rtoolbar.ClientID %>")
            var c = r.get_items().getItem(1);
            r.trackChanges();
            c.set_text(e.get_node().get_text());
            r.commitChanges();
        }
    </script>
    <telerik:RadAjaxManagerProxy ID="RadAjaxManagerProxy1" runat="server">
        <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="rtoolbar">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="rsPlanning" />
                </UpdatedControls>
            </telerik:AjaxSetting>
        </AjaxSettings>
    </telerik:RadAjaxManagerProxy>
    <telerik:RadToolBar runat="server" Width="100%" ID="rtoolbar">
        <Items>
            <telerik:RadToolBarButton>
                <ItemTemplate>
                    <asp:Label ID="Label1" runat="server" Text="Label">Groupe de moyens :</asp:Label>
                </ItemTemplate>
            </telerik:RadToolBarButton>
            <telerik:RadToolBarDropDown ID="rSelectProdLineGroup" runat="server" Text="Sélectionnez un groupe..." 
                DropDownWidth="250px" >
                <Buttons>
                    <telerik:RadToolBarButton runat="server" >
                        <ItemTemplate>
                            <telerik:RadTreeView ID="rtvInProdLineGroups" Runat="server" Width="100%" Height="100%" OnClientNodeClicking="OnClientNodeClickingHandler">
                            </telerik:RadTreeView>
                        </ItemTemplate>
                    </telerik:RadToolBarButton>
                </Buttons>
            </telerik:RadToolBarDropDown>
  2. Yana
    Admin
    Yana avatar
    4600 posts

    Posted 05 Oct 2010 Link to this post

    Hello jean-marc,

    Straight to your questions:

    Please set CssClass and Value properties to the button which holds the menu:

    <telerik:RadToolBarButton runat="server" CssClass="treeButton" Value="treeButton">
        <ItemTemplate>
            <telerik:RadTreeView ID="rtvInProdLineGroups" Runat="server" Width="100%" Height="100%" OnClientNodeClicking="OnClientNodeClickingHandler">
    ...

    1.  add the following css styles to your page:

    .treeButton {
     background-image: none !important;
    }

    2. use the following javascript code to click the button and fire ButtonClick event of the toolbar:

    function OnClientNodeClickingHandler(sender, e) {
        var r = $find("<%= rtoolbar.ClientID %>")
        var c = r.get_items().getItem(1);
        r.trackChanges();
        c.set_text(e.get_node().get_text());
        r.commitChanges();
        r.findItemByValue("treeButton").click();
    }


    Best wishes,
    Yana
    the Telerik team
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
Back to Top