Hello, I am curious if something like spot light cam be implemented with some client side code. I am okay if I have to make it a separate menu item. May be some text box where I can get items below my textbox as I type ?
The way I am currently populating my drop down is I have hard coded and then I mange the visibility of these items when page loads depending on user rights/roles.
Thanks !
The way I am currently populating my drop down is I have hard coded and then I mange the visibility of these items when page loads depending on user rights/roles.
Thanks !
5 Answers, 1 is accepted
0
Princy
Top achievements
Rank 2
answered on 10 Feb 2014, 10:09 AM
Hi Aarsh,
Please have a look into the sample code snippet which works fine at my end.
ASPX:
JavaScript:
Thanks,
Princy.
Please have a look into the sample code snippet which works fine at my end.
ASPX:
<
telerik:RadTextBox
ID
=
"RadTextBox1"
runat
=
"server"
ClientEvents-OnValueChanged
=
"OnValueChanged"
>
</
telerik:RadTextBox
>
<
telerik:RadMenu
ID
=
"RadMenu1"
runat
=
"server"
>
<
Items
>
<
telerik:RadMenuItem
Text
=
"File"
>
<
Items
>
<
telerik:RadMenuItem
Text
=
"New"
>
<
Items
>
<
telerik:RadMenuItem
Text
=
"Project"
>
</
telerik:RadMenuItem
>
<
telerik:RadMenuItem
Text
=
"Website"
>
</
telerik:RadMenuItem
>
</
Items
>
</
telerik:RadMenuItem
>
<
telerik:RadMenuItem
Text
=
"Open"
>
<
Items
>
<
telerik:RadMenuItem
Text
=
"Project"
>
</
telerik:RadMenuItem
>
<
telerik:RadMenuItem
Text
=
"Website"
>
</
telerik:RadMenuItem
>
</
Items
>
</
telerik:RadMenuItem
>
</
Items
>
</
telerik:RadMenuItem
>
</
Items
>
</
telerik:RadMenu
>
JavaScript:
<script type=
"text/javascript"
>
function
OnValueChanged(sender, args) {
var
menu = $find(
"<%=RadMenu1.ClientID %>"
);
for
(
var
i = 0; i < menu.get_allItems().length; i++) {
if
(menu.get_allItems()[i].get_text() == args.get_newValue()) {
menu.get_allItems()[i].open();
}
}
}
</script>
Thanks,
Princy.
0
Aarsh
Top achievements
Rank 1
answered on 10 Feb 2014, 02:46 PM
Thanks Princy !
First off we might not need RadTextBox, and html inpu will do :-) The code snippet works & I do see sense for exact comparison here. But I see few other things here :
This only works if a menut has child items ( ? )
we might want to make it recursive.
e.g. Project, Website, Child 1 didn't work but New, Open, Child 4 did.
<
telerik:RadMenu
ID
=
"RadMenu1"
runat
=
"server"
Flow
=
"Horizontal"
>
<
Items
>
<
telerik:RadMenuItem
Text
=
"File"
>
<
Items
>
<
telerik:RadMenuItem
Text
=
"New"
>
<
Items
>
<
telerik:RadMenuItem
Text
=
"Project"
>
</
telerik:RadMenuItem
>
<
telerik:RadMenuItem
Text
=
"Website"
>
</
telerik:RadMenuItem
>
</
Items
>
</
telerik:RadMenuItem
>
<
telerik:RadMenuItem
Text
=
"Open"
>
<
Items
>
<
telerik:RadMenuItem
Text
=
"Project"
>
</
telerik:RadMenuItem
>
<
telerik:RadMenuItem
Text
=
"Website"
>
</
telerik:RadMenuItem
>
</
Items
>
</
telerik:RadMenuItem
>
</
Items
>
</
telerik:RadMenuItem
>
<
telerik:RadMenuItem
Text
=
"Parent 2"
>
<
Items
>
<
telerik:RadMenuItem
Text
=
"Child 1"
></
telerik:RadMenuItem
>
<
telerik:RadMenuItem
Text
=
"Child 2"
></
telerik:RadMenuItem
>
<
telerik:RadMenuItem
Text
=
"Child 3"
></
telerik:RadMenuItem
>
<
telerik:RadMenuItem
Text
=
"Child 4"
>
<
Items
>
<
telerik:RadMenuItem
Text
=
"Grand Child 1"
></
telerik:RadMenuItem
>
<
telerik:RadMenuItem
Text
=
"Grand Child 2"
></
telerik:RadMenuItem
>
</
Items
>
</
telerik:RadMenuItem
>
<
telerik:RadMenuItem
Text
=
"Child 5"
></
telerik:RadMenuItem
>
</
Items
>
</
telerik:RadMenuItem
>
</
Items
>
</
telerik:RadMenu
>
function
Text1_onkeyup(sender) {
var
menu = $find(
'<%=RadMenu1.ClientID %>'
);
for
(
var
i = 0; i < menu.get_allItems().length; i++) {
var
v = menu.get_allItems()[i].get_text();
if
(menu.get_allItems()[i].get_text().toLowerCase() == sender.value.toLowerCase()) {
menu.get_allItems()[i].open();
menu.get_allItems()[i].get_parent().open();
menu.get_allItems()[i].set_selected(
true
);
}
else
menu.get_allItems()[i].close();
}
}
0
Aarsh
Top achievements
Rank 1
answered on 27 Feb 2014, 02:54 PM
Hey is there a way where I can actually take items that I am getting from loop above and then can add to another root item ? I'd prefer to get this root item being added and removed dynamically. Below is what I have so far :
function
tbSpotLight_onkeyup(sender) {
var
menu = $find(
'<%=RadMenu1.ClientID %>'
);
// clear
var
menuItem = menu.findItemByText(
"Spot Light"
);
if
(menuItem) {
var
parentItem = menuItem.get_parent();
menu.trackChanges();
parentItem.get_items().remove(menuItem);
menu.commitChanges();
}
if
(sender.value ===
""
) {
return
;
}
var
rootItem =
new
Telerik.Web.UI.RadMenuItem();
rootItem.set_text(
"Spot Light"
);
var
menuItems = menu.get_allItems();
for
(
var
i = 0; i < menuItems.length; i++) {
if
(menuItems[i].get_text().toLowerCase() === sender.value.toLowerCase()) {
// menuItems[i].open();
// menuItems[i].get_parent().open();
// menuItems[i].set_selected(true);
var
childItem =
new
Telerik.Web.UI.RadMenuItem();
childItem = menuItems[i];
rootItem.get_items().add(childItem);
}
//else
//{ }
}
menu.trackChanges();
menu.get_items().add(rootItem);
menu.commitChanges();
rootItem.open();
}
0
Aarsh
Top achievements
Rank 1
answered on 04 Mar 2014, 12:30 PM
any thoughts ... ?
0
Aarsh
Top achievements
Rank 1
answered on 05 Mar 2014, 02:03 PM
bump !