Varying ContextMenu's

10 posts, 1 answers
  1. Kurt Kluth
    Kurt Kluth avatar
    144 posts
    Member since:
    Oct 2009

    Posted 06 Nov 2014 Link to this post

    We have a PanelBar that we would like to add a context menu only to the children (RadPanelItem's) that would allow users to add the link to their favorites (within site).  And if they are within the Favorites Panel item and they right click it would be "Remove link"

    The user couldn't click on "Home" to "Add to Favorites" but they could click on "Organization Chart".  Once they linked "Organization Chart" as a favorite, if they right click again it would be "Remove Favorite", as well as if they were under the "Favorites" panel and right clicked. 

    Is it possible?
    <telerik:RadPanelBar runat="server" ID="RadPanelBar1"
                                ExpandMode="FullExpandedItem"
                                Width="300" PersistStateInCookie="True" Height="100%"
                                OnClientItemExpand="OnClientItemExpand">
                                <Items>
                                    <telerik:RadPanelItem Text="HOME" Expanded="True" ImageUrl="images/Menu/Home.png" Visible="true" Font-Bold="true">
                                        <Items>
                                            <telerik:RadPanelItem ImageUrl="images/Menu/Home_OrgChart.png" NavigateUrl="/pdf/OrgChart.pdf" Target="_blank" Text="Organizational Chart"></telerik:RadPanelItem>
                                            <telerik:RadPanelItem ImageUrl="images/Menu/Home_PersonalPolicy.png" NavigateUrl="/pdf/OrgChart.pdf" Target="_blank" Text="Personnel Policy"></telerik:RadPanelItem>
                                            <telerik:RadPanelItem ImageUrl="images/Menu/Home_Phone-16.png" NavigateUrl="/pdf/VoiceMail.pdf" Target="_blank" Text="Voice Mail Reference Sheet"></telerik:RadPanelItem>
                                            </telerik:RadPanelItem>
                                        </Items>
                                    </telerik:RadPanelItem>
                                    <telerik:RadPanelItem Text="FAVORITES" Expanded="True" ImageUrl="images/Menu/Favorites.png" Visible="false" Font-Bold="true">
     
                                    </telerik:RadPanelItem>
                                </Items>
                                <ExpandAnimation Type="OutQuart" />
                                <CollapseAnimation Type="OutQuart" />
                            </telerik:RadPanelBar>
  2. Kurt Kluth
    Kurt Kluth avatar
    144 posts
    Member since:
    Oct 2009

    Posted 10 Nov 2014 Link to this post

    Is this possible to do?
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Boyan Dimitrov
    Admin
    Boyan Dimitrov avatar
    1746 posts

    Posted 11 Nov 2014 Link to this post

    Hello,

    Please find below a sample code snippet below that will help you to achieve the desired functionality.
    //code snippet
    <script type="text/javascript">
        function OnClientItemExpand(sender, args) {
             
        }
        function OnClientShowing(sender, args) {
            var item = $telerik.$(args._targetElement).parents("li")[0]._item;
            if (item.get_level() == 0) {
                args.set_cancel(true);
            }
            var isFavorite = item.get_attributes().getAttribute("isFavorite");
            if (isFavorite) {
                sender.get_items().getItem(0).hide();
                sender.get_items().getItem(1).show();
            }
            else {
                sender.get_items().getItem(1).hide();
                sender.get_items().getItem(0).show();
            }
             
        }
    </script>
     
    <telerik:RadPanelBar runat="server" ID="RadPanelBar1"
        ExpandMode="FullExpandedItem"
        Width="300" PersistStateInCookie="True" Height="100%"
        OnClientItemExpand="OnClientItemExpand">
        <Items>
            <telerik:RadPanelItem Text="HOME" Expanded="True" ImageUrl="images/Menu/Home.png" Visible="true" Font-Bold="true">
                <Items>
                    <telerik:RadPanelItem isFavorite="true" ImageUrl="images/Menu/Home_OrgChart.png" NavigateUrl="/pdf/OrgChart.pdf" Target="_blank" Text="Organizational Chart"></telerik:RadPanelItem>
                    <telerik:RadPanelItem ImageUrl="images/Menu/Home_PersonalPolicy.png" NavigateUrl="/pdf/OrgChart.pdf" Target="_blank" Text="Personnel Policy"></telerik:RadPanelItem>
                    <telerik:RadPanelItem ImageUrl="images/Menu/Home_Phone-16.png" NavigateUrl="/pdf/VoiceMail.pdf" Target="_blank" Text="Voice Mail Reference Sheet"></telerik:RadPanelItem>
                </Items>
            </telerik:RadPanelItem>
            <telerik:RadPanelItem Text="FAVORITES" Expanded="True" ImageUrl="images/Menu/Favorites.png" Visible="false" Font-Bold="true">
            </telerik:RadPanelItem>
        </Items>
        <ExpandAnimation Type="OutQuart" />
        <CollapseAnimation Type="OutQuart" />
    </telerik:RadPanelBar>
     
    <telerik:RadContextMenu ID="RadContextMenu1" runat="server" OnClientShowing="OnClientShowing">
        <Targets>
            <telerik:ContextMenuControlTarget ControlID="RadPanelBar1" />
        </Targets>
        <Items>
            <telerik:RadMenuItem Text="Add"></telerik:RadMenuItem>
            <telerik:RadMenuItem Text="Remove"></telerik:RadMenuItem>
        </Items>
    </telerik:RadContextMenu>

    If the RadPanelBar item is root item the context menu will not be shown. Based on the item attribute "isFavorite" the item "Add" or "Remove" will be shown. For sample purpose the org chart item does have isFavorite attribute value "true".

    Regards,
    Boyan Dimitrov
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  5. Kurt Kluth
    Kurt Kluth avatar
    144 posts
    Member since:
    Oct 2009

    Posted 11 Nov 2014 in reply to Boyan Dimitrov Link to this post

    Thank you this is going to work quite nicely.  My question is for the favorites section we add those links via code-behind and how can we set the "isfavorite=true" for those items considering they are generated dynamically.
    Dim item3 As New RadPanelItem()
    item3.Text = reader("name")
    item3.NavigateUrl = reader("url")
     
    item.Items.Add(item3)
  6. Boyan Dimitrov
    Admin
    Boyan Dimitrov avatar
    1746 posts

    Posted 13 Nov 2014 Link to this post

    Hello,

    The RadPanelItem object does have attributes collection (item3.Attributes). The collection provides method Add that accepts two parameters - the attribute name and value. 


    Regards,
    Boyan Dimitrov
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  7. Kurt Kluth
    Kurt Kluth avatar
    144 posts
    Member since:
    Oct 2009

    Posted 13 Nov 2014 in reply to Boyan Dimitrov Link to this post

    Are you saying that it is not possible for us to set the isFavorite=true via code-behind? 

    The solution you provided will work as long as I can set the isFavorite. 
  8. Kurt Kluth
    Kurt Kluth avatar
    144 posts
    Member since:
    Oct 2009

    Posted 17 Nov 2014 Link to this post

    Are there any additional thoughts on this one?
  9. Answer
    Boyan Dimitrov
    Admin
    Boyan Dimitrov avatar
    1746 posts

    Posted 18 Nov 2014 Link to this post

    Hello,

    It is possible to add an attribute from the code behind. As I mentioned you can use the RadPanelBar item attributes collection. Specifically you can use the add method to add an attribute as shown below:
    Dim item3 As New RadPanelItem()
    item3.Text = reader("name")
    item3.NavigateUrl = reader("url")
    item3.Attributes.Add("isFavorite", "true")
      
    item.Items.Add(item3)

    You are able to set the the "isFavorite" value based on a value stored in the data base ( reader("isFavorite")) if exists.

    Regards,
    Boyan Dimitrov
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  10. Kurt Kluth
    Kurt Kluth avatar
    144 posts
    Member since:
    Oct 2009

    Posted 18 Nov 2014 in reply to Boyan Dimitrov Link to this post

    Boyan,

    Your help is greatly appreciated and that works.  How do I go about getting the URL of the item they wish to add/delete.  I have searched the various forum threads trying to find a solution.

    Here is what I am attempting to use but it returns "undefined" for URL.
    function addFavoriteFromContextMenu(sender, args) {
     
        var clickedItemValue = args.get_item().get_text();
         
        switch (clickedItemValue) {
            case "Add link as favorite":
                var targetElement = args.get_targetElement();
                document.getElementById('<%= _hdnLinkUrl.ClientID%>').value = targetElement.href;
                args.item.
                //TODO: Find way to have a default name for link
                $find('<%=_txtLinkName.ClientID%>').set_value(targetElement.innerHTML);
                toggleFavoritePopup();
            case "Remove link as favorite":
                var targetElement = args.get_targetElement();
                document.getElementById('<%= _ContextURL.ClientID%>').value = targetElement.href;
                $find('<%= RadContextMenu1.ClientID%>').ItemClick;
        }
     
    }
  11. Kurt Kluth
    Kurt Kluth avatar
    144 posts
    Member since:
    Oct 2009

    Posted 18 Nov 2014 Link to this post

    Came up with a solution.
    function addFavoriteFromContextMenu(sender, args) {
        var targetElement = args.get_targetElement();
     
        var clickedItemValue = args.get_item().get_text();
     
        var panelBar = $find("<%= RadPanelBar1.ClientID %>");
        var panelItem = panelBar.findItemByText(targetElement.innerHTML);
     
        switch (clickedItemValue) {
            case "Add link as favorite":
                document.getElementById('<%= _hdnLinkUrl.ClientID%>').value = panelItem.get_navigateUrl();
                //TODO: Find way to have a default name for link
                $find('<%=_txtLinkName.ClientID%>').set_value(targetElement.innerHTML);
                toggleFavoritePopup();
            case "Remove link as favorite":
                document.getElementById('<%= _hdnLinkUrl.ClientID%>').value = panelItem.get_navigateUrl();
                $find('<%= RadContextMenu1.ClientID%>').ItemClick;
        }
     
    }
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017