Menu ITemplate client click event

7 posts, 0 answers
  1. Rhyss
    Rhyss avatar
    60 posts
    Member since:
    Jan 2007

    Posted 14 Dec 2009 Link to this post

    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
  2. Rhyss
    Rhyss avatar
    60 posts
    Member since:
    Jan 2007

    Posted 15 Dec 2009 Link to this post

    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.
  3. Rhyss
    Rhyss avatar
    60 posts
    Member since:
    Jan 2007

    Posted 16 Dec 2009 Link to this post

    Anyone?
  4. Yana
    Admin
    Yana avatar
    4841 posts

    Posted 17 Dec 2009 Link to this post

    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.
  5. Rhyss
    Rhyss avatar
    60 posts
    Member since:
    Jan 2007

    Posted 17 Dec 2009 Link to this post

    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
  6. Rhyss
    Rhyss avatar
    60 posts
    Member since:
    Jan 2007

    Posted 20 Dec 2009 Link to this post

    Anybody?
  7. Yana
    Admin
    Yana avatar
    4841 posts

    Posted 22 Dec 2009 Link to this post

    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.
Back to Top