[Solved] spotlight like search for menu

[Aarsh]

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 !

[Princy]

Hi Aarsh,

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.

[Aarsh]

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

 

[Aarsh]

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

[Aarsh]

any thoughts ... ?

[Aarsh]

bump  !