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
    4554 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
  3. UI for ASP.NET Ajax is Ready for VS 2017
Back to Top