[Devexpress] Make Head button for Expend/Collapse for Navbar Control with ITemplate

 

 

@ASPX Page​

<ASPxNavBar ID="ASPxNavBar1" runat="server"  EnableClientSideAPI="true">

<NavBarGroup />
</ dx:ASPxNavBar>
                        

@ASPX Cs Page

Load : 

 ASPxNavBar1.GroupHeaderTemplate = new MyGroupHeaderTemplate("my button");
 ASPxNavBar1.ClientSideEvents.HeaderClick = "function(s,e){e.cancel=true;}";

 

@Class

public class MyGroupHeaderTemplate : ITemplate

{

     string caption;
        public MyGroupHeaderTemplate(string caption)
        {
            this.caption = caption;
        }

 

      #region ITemplate Members

        public void InstantiateIn(Control container)
        {
            NavBarGroupTemplateContainer tc = (NavBarGroupTemplateContainer)container;
            ASPxButton button = new ASPxButton();
            button.ID = "button";
            button.Text = string.Format("{0}:{1}", tc.Group.Text, caption);
            button.AutoPostBack = false;
            button.ClientSideEvents.Click = "function(s,e){var group = " + tc.Group.NavBar.ClientID + ".GetGroup(" + tc.Group.Index + "); group.SetExpanded(!group.GetExpanded()); }";
            tc.Controls.Add(button);
        }
        #endregion

}