[CLOSED] How do I render a button in an hboxlayout?

[fpw2377]

I am using an HBoxLayout and toolbars to allow master pages in my design (see thread http://forums.ext.net/showthread.php...ent-Page-setup) and I am running into a problem with hiding/showing buttons during a direct event. I can update menus by making changes to the menu and then calling Render() but when I do the same with buttons the whole toolbar disappears.

Thanks,

Frank

[geoffrey.mcgill]

http://forums.ext.net/showthread.php...ing-New-Topics

http://forums.ext.net/showthread.php...ation-Required

[fpw2377]

My master page has this markup

<ext:Panel ID="panTopMenu" runat="server" Margins="5" Height="50" Border="false"
                        Header="false" Region="North">
                        <TopBar>
                            <ext:Toolbar runat="server">
                                <Content>
                                    <asp:ContentPlaceHolder ID="topMenuBarContent" runat="server">
                                    </asp:ContentPlaceHolder>
                                </Content>
                                <Items>
                                </Items>
                            </ext:Toolbar>
                        </TopBar>
</ext:Panel>

my page has this markup in a content place holder because my toolbar control resides on a master page, see above.

<asp:Content ID="Content2" ContentPlaceHolderID="topMenuBarContent" runat="server">
<ext:HBoxLayout ID="HBoxLayout1" runat="server" Align="Middle">
        <BoxItems>
            <ext:BoxItem>
                <ext:Button ID="cmdListMedications" runat="server" Icon="Pill" Text="List Medications">
                </ext:Button>
            </ext:BoxItem>
            <ext:BoxItem>
                <ext:SplitButton ID="cmdAddMedication" runat="server" Icon="PillAdd" Text="Add Medication">
                    <Menu>
                        <ext:Menu runat="server" ID="mnuAddMedication">
                            <Items>
                                <ext:MenuItem ID="cmdAddCustomMedication" runat="server" Icon="PillAdd" Text="Add Custom Medication">
                                </ext:MenuItem>
                            </Items>
                        </ext:Menu>
                    </Menu>
                </ext:SplitButton>
            </ext:BoxItem>
        </BoxItems>
    </ext:HBoxLayout>
</asp:Content>

I have a method in my code behind like this to change the button state

protected void SetButtonState(ButtonBase button, bool disabled)
        {
            button.Disabled= disabled;


            if (disabled)
            {
                button.ToolTip = "Not available at this time";
            }
            else
            {
                button.ToolTip = string.Empty;
            }


            if (X.IsAjaxRequest)
            {
                if (disabled)
                {
                    button.SetTooltip(new QTipCfg() { Text = "Not available at this time" });
                }
                else
                {
                    button.ToolTips.Clear();
                }
                button.Render();
            }
        }

if the user is allowed to edit the medication profile the add medication button should be enabled otherwise disable it. I would also be happy if I could hide the button entirely instead of disabling it and adding a tool tip.

This method is call during initial page load and is passed the cmdAddMedication control and works fine. At some point a user can update the medication profile and no longer be allowed to add medications. Once this happens I call this same method during a direct event and the whole toolbar disappears instead of just disabling the button and adding a tool tip. How do I correctly call the render method when the item I am rendering is inside an HBoxLayout?

[Daniil]

Hi @fpw2377,

I can't see where you hide/show any Button in the code sample that you were talking about in the initial post.

Please clarify the requirement. Do you just need to enable/disable a Button and its ToolTip?

[fpw2377]

Sorry for all the confusion, here is a full working sample of my problem. When the button is set to hidden on page load it works fine. When the button is set to hidden in a direct method, the whole toolbar disappears. I tried various button.render calls but they all seem to have the same effect.

<%@ Page Language="C#" AutoEventWireup="true"  %>


<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<script runat="server" type="text/C#">


    protected override void OnLoad(EventArgs e)
    {
        if (!this.IsPostBack)
        {
            SetButtonState(this.cmdAddMedication, false);
        }
    }


    [DirectMethod]
    public void RefreshMenu()
    {
        this.SetButtonState(this.cmdAddMedication, true);
    }


    protected void SetButtonState(ButtonBase button, bool disabled)
    {
        button.Hidden = disabled;
    } 


        
</script>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <ext:ResourceManager runat="server" RenderScripts="Embedded" RenderStyles="Embedded">
        </ext:ResourceManager>
        <ext:Panel ID="panTopMenu" runat="server" Margins="5" Height="500" Width="400" Title="Button Demo">
            <TopBar>
                <ext:Toolbar ID="Toolbar1" runat="server">
                    <Content>
                        <ext:HBoxLayout ID="HBoxLayout1" runat="server" Align="Middle">
                            <BoxItems>
                                <ext:BoxItem>
                                    <ext:Button ID="cmdListMedications" runat="server" Icon="Pill" Text="List Medications">
                                    </ext:Button>
                                </ext:BoxItem>
                                <ext:BoxItem>
                                    <ext:SplitButton ID="cmdAddMedication" runat="server" Icon="PillAdd" Text="Add Medication">
                                        <Menu>
                                            <ext:Menu runat="server" ID="mnuAddMedication">
                                                <Items>
                                                    <ext:MenuItem ID="cmdAddCustomMedication" runat="server" Icon="PillAdd" Text="Add Custom Medication">
                                                    </ext:MenuItem>
                                                </Items>
                                            </ext:Menu>
                                        </Menu>
                                    </ext:SplitButton>
                                </ext:BoxItem>
                            </BoxItems>
                        </ext:HBoxLayout>
                    </Content>
                    <Items>
                    </Items>
                </ext:Toolbar>
            </TopBar>
            <Content>
                here is some content!
            </Content>
            <Buttons>
                <ext:Button runat="server" Text="Finish Profile" Icon="Accept">
                    <Listeners>
                        <Click Handler="Ext.net.DirectMethods.RefreshMenu()" />
                    </Listeners>
                </ext:Button>
            </Buttons>
        </ext:Panel>


    </div>
    </form>
</body>
</html>

[Daniil]

Thank you for the sample.

Confirm, HBoxLayout doesn't work well with hidden items in Ext.NET v1, it is a known issue.

I would suggest you to avoid it if possible. Please clarify do you really need an HBoxLayout here? Won't a default ToolBar's layout suite your needs?