![](/forums/images/avatarimages/default.gif)
Kurt Kluth
Top achievements
Rank 1
Kurt Kluth
asked on 06 Nov 2014, 08:21 PM
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?
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
>
9 Answers, 1 is accepted
0
![](/forums/images/avatarimages/default.gif)
Kurt Kluth
Top achievements
Rank 1
answered on 10 Nov 2014, 02:01 PM
Is this possible to do?
0
Hello,
Please find below a sample code snippet below that will help you to achieve the desired functionality.
//code snippet
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
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.
0
![](/forums/images/avatarimages/default.gif)
Kurt Kluth
Top achievements
Rank 1
answered on 11 Nov 2014, 03:02 PM
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)
0
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
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.
0
![](/forums/images/avatarimages/default.gif)
Kurt Kluth
Top achievements
Rank 1
answered on 13 Nov 2014, 01:11 PM
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.
The solution you provided will work as long as I can set the isFavorite.
0
![](/forums/images/avatarimages/default.gif)
Kurt Kluth
Top achievements
Rank 1
answered on 17 Nov 2014, 01:57 PM
Are there any additional thoughts on this one?
0
Accepted
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:
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
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.
0
![](/forums/images/avatarimages/default.gif)
Kurt Kluth
Top achievements
Rank 1
answered on 18 Nov 2014, 05:54 PM
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.
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;
}
}
0
![](/forums/images/avatarimages/default.gif)
Kurt Kluth
Top achievements
Rank 1
answered on 18 Nov 2014, 07:25 PM
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;
}
}