[Solved] Menu ITemplate client click event

[Rhyss]

Hi all,
i am playing around with the Menu control and ITemplates and am trying to figure out how to control the events fired within the ITemplate class and having it effect the Menu Item that it is in client side.

What i have is a Menu control with two items using my custom ITemplate.  In essence it is a Panel with a small panel within it that i want to be able to click on and have it close the menu item it is in.  It will end up being a menu item that can remove itself from the menu.

class CaseMenuTemplate : ITemplate
    {
        public void InstantiateIn(Control container)
        {
            Panel pBase = new Panel();
            Panel pHeader = new Panel();
            Panel pContent = new Panel();

            pBase.CssClass = "MenuPanelBase";
            pHeader.CssClass = "MenuPanelHeader";
            pContent.CssClass = "MenuPanelContent";

            Label lblCase = new Label();
            lblCase.ID = "lblCase";
            lblCase.Text = "Case:";
            lblCase.CssClass = "MenuLabelCase";
            pHeader.Controls.Add(lblCase);

            Label lblCaseNumber = new Label();
            lblCaseNumber.ID = "lblCaseNumber";
            lblCaseNumber.Text = "1234567890";
            lblCaseNumber.CssClass = "MenuLabelCaseNumber";
            pHeader.Controls.Add(lblCaseNumber);

            Button pClose = new Button();
            pClose.CssClass = "MenuCloseButton";

            pHeader.Controls.Add(pClose);

            pBase.Attributes.Add("onmouseover", "this.className = 'MenuPanelBaseHover';");
            pBase.Attributes.Add("onmouseout", "this.className = 'MenuPanelBase';");
            pClose.Attributes.Add("onmouseover", "this.className = 'MenuCloseButtonHover';");
            pClose.Attributes.Add("onmouseout", "this.className = 'MenuCloseButton';");
            pClose.Attributes.Add("onclick", "deleteItem(this);return false;");

            container.Controls.Add(pBase);
            pBase.Controls.Add(pHeader);
            pBase.Controls.Add(pContent);

        }

I have the ITemplate control loading as expected, but i cannot find out how to, on the onclick event of the panel, have the menu remove the parent item from iteself.

suggestions?
Jordan

[Rhyss]

I have also noticed that when i click on the item created with the template i don't get the menu's onclientclick event firing.

[Rhyss]

Anyone?

[Yana]

Hi Jordan,

Please find attached a simple page based on your code which demonstrates how to remove items.

Regarding the ItemClick event for templated items - this is a known issue which will is already logged and will be fixed.

Best wishes,
Yana
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

[Rhyss]

When i run your sample i get a javascript error when i delete the last item.  It's in the onitemmouseout event.

Also, for the itemclick fix, is there an ETA of this?
thanks
Jordan

[Rhyss]

Anybody?

[Yana]

Hello Jordan,

You are right, I'm sorry for missing this error, please try it like this:

function deleteItem(item) {

    var menu = $find("<%=RadMenu1.ClientID %>");
    var itemToRemove = menu.findItemByText(item.attributes["menuText"].value);
    menu.trackChanges();
    if (menu.get_items().get_count() > 1)
        menu.get_items().remove(itemToRemove);
    else
        menu.get_items().clear();
    menu.get_items().remove(itemToRemove);
    menu.commitChanges();
}

All the best,
Yana
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.