Varying ContextMenu's

[Kurt Kluth]

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>

[Kurt Kluth]

Is this possible to do?

[Boyan Dimitrov]

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

 

 

[Kurt Kluth]

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)

[Boyan Dimitrov]

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

 

 

[Kurt Kluth]

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. 

[Kurt Kluth]

Are there any additional thoughts on this one?

[Boyan Dimitrov]

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

 

 

[Kurt Kluth]

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;
    }

}

[Kurt Kluth]

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;
    }

}