What's New?

[CLOSED] how to hide panel header

  1. #1
    Jan 03, 2011, 4:48 PM

    [CLOSED] how to hide panel header

    Hi, I want to hide panel header. But, it doesn't work. Below is the code.


    namespace WebApplication9
{
    public partial class WebForm2 : System.Web.UI.Page
    {
        private void ChangeMode(string mode)
        {
            foreach (Ext.Net.Cell item in TableLayout1.Cells)
            {
                Ext.Net.Panel pnl = item.Items[0] as Ext.Net.Panel;

                if (mode == "DesignMode")
                {
                    pnl.Header = true;
                    pnl.Border = true;
                }
                else if (mode == "ViewMode")
                {
                    pnl.Header = false;
                    pnl.Border = false;
                }
            }
        }

        [DirectMethod]
        public void Button_DesignMode_Click()
        {
            ChangeMode("DesignMode");
        }

        [DirectMethod]
        public void Button_ViewMode_Click()
        {
            ChangeMode("ViewMode");
        }

        protected void Page_Load(object sender, EventArgs e)
        {

        }
    }
}

------------------------------------------------------------------------------------------------------------------------------------------------




<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm2.aspx.cs" Inherits="WebApplication9.WebForm2" %>

<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>

<!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>
    <ext:ResourcePlaceHolder ID="ResourcePlaceHolder1" runat="server">
    <script type="text/javascript">
        function Button_DesignMode_Click() {
            Ext.net.DirectMethods.Button_DesignMode_Click();
        }

        function Button_ViewMode_Click() {
            Ext.net.DirectMethods.Button_ViewMode_Click();
        }
    </script>
    </ext:ResourcePlaceHolder>
</head>
<body>
    <form id="form1" runat="server">
    <ext:ResourceManager ID="ResourceManager1" runat="server">
    </ext:ResourceManager>
    <ext:Viewport ID="Viewport1" runat="server" Layout="border">
        <Items>
            <ext:Panel ID="Panel1" runat="server" Height="50" Region="North" Header="false" Border="false">
                <Items>
                    <ext:Button ID="Button_DesignMode" runat="server" Text="Design Mode">
                        <Listeners>
                            <Click Handler="Button_DesignMode_Click();" />
                        </Listeners>
                    </ext:Button>
                    <ext:Button ID="Button_ViewMode" runat="server" Text="View Mode">
                        <Listeners>
                            <Click Handler="Button_ViewMode_Click();" />
                        </Listeners>
                    </ext:Button>
                </Items>
            </ext:Panel>
            <ext:Panel ID="Panel9" runat="server" Layout="Fit" Region="Center" Title="Center">
                <Items>
                    <ext:TableLayout ID="TableLayout1" runat="server" Columns="2">
                        <Cells>
                            <ext:Cell>
                                <ext:Panel runat="server" Frame="false" Height="200" StyleSpec="padding: 5px;" Title="Panel 1"
                                    Width="200">
                                </ext:Panel>
                            </ext:Cell>
                            <ext:Cell>
                                <ext:Panel runat="server" Frame="false" Height="200" StyleSpec="padding: 5px 0;" Title="Panel 2"
                                    Width="200">
                                </ext:Panel>
                            </ext:Cell>
                            <ext:Cell ColSpan="2">
                                <ext:Panel runat="server" Frame="false" Height="200" StyleSpec="padding: 0 0 5px 5px"
                                    Title="Panel 3" Width="400">
                                </ext:Panel>
                            </ext:Cell>
                        </Cells>
                    </ext:TableLayout>
                </Items>
            </ext:Panel>
        </Items>
    </ext:Viewport>
    </form>
</body>
</html>
    Last edited by Daniil; Jan 05, 2011 at 8:45 AM. Reason: Please use [CODE] tags, [CLOSED]
  2. #2
    Jan 03, 2011, 4:59 PM
    Hi,

    Please wrap your code samples in [CODE] tags.

    The forum guidelines are available at the following location and include suggestions for ensuring your questions are answered as quickly as possible, see

    http://forums.ext.net/showthread.php...ing-New-Topics
    Geoffrey McGill
    Founder
    Ext.NETASP.NET UI Component framework
    RetypeDocumentation website generator
    MojeeLightning fast Emoji library for .NET
    Ext.NET Examples|Ext.NET API Docs|ExtJS API Docs|Twitter
  3. #3
    Jan 03, 2011, 5:15 PM
    Sorry, I didn't know. I hope this time is OK.

    namespace WebApplication9
{
public partial class WebForm2 : System.Web.UI.Page
{
private void ChangeMode(string mode)
{
foreach (Ext.Net.Cell item in TableLayout1.Cells)
{
Ext.Net.Panel pnl = item.Items[0] as Ext.Net.Panel;

if (mode == "DesignMode")
{
pnl.Header = true;
pnl.Border = true;
}
else if (mode == "ViewMode")
{
pnl.Header = false;
pnl.Border = false;
}
}
}

[DirectMethod]
public void Button_DesignMode_Click()
{
ChangeMode("DesignMode");
}

[DirectMethod]
public void Button_ViewMode_Click()
{
ChangeMode("ViewMode");
}

protected void Page_Load(object sender, EventArgs e)
{

}
}
}

------------------------------------------------------------------------------------------------------------------------------------------------




<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm2.aspx.cs" Inherits="WebApplication9.WebForm2" %>

<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>

<!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>
<ext:ResourcePlaceHolder ID="ResourcePlaceHolder1" runat="server">
<script type="text/javascript">
function Button_DesignMode_Click() {
Ext.net.DirectMethods.Button_DesignMode_Click();
}

function Button_ViewMode_Click() {
Ext.net.DirectMethods.Button_ViewMode_Click();
}
</script>
</ext:ResourcePlaceHolder>
</head>
<body>
<form id="form1" runat="server">
<ext:ResourceManager ID="ResourceManager1" runat="server">
</ext:ResourceManager>
<ext:Viewport ID="Viewport1" runat="server" Layout="border">
<Items>
<ext:Panel ID="Panel1" runat="server" Height="50" Region="North" Header="false" Border="false">
<Items>
<ext:Button ID="Button_DesignMode" runat="server" Text="Design Mode">
<Listeners>
<Click Handler="Button_DesignMode_Click();" />
</Listeners>
</ext:Button>
<ext:Button ID="Button_ViewMode" runat="server" Text="View Mode">
<Listeners>
<Click Handler="Button_ViewMode_Click();" />
</Listeners>
</ext:Button>
</Items>
</ext:Panel>
<ext:Panel ID="Panel9" runat="server" Layout="Fit" Region="Center" Title="Center">
<Items>
<ext:TableLayout ID="TableLayout1" runat="server" Columns="2">
<Cells>
<ext:Cell>
<ext:Panel runat="server" Frame="false" Height="200" StyleSpec="padding: 5px;" Title="Panel 1"
Width="200">
</ext:Panel>
</ext:Cell>
<ext:Cell>
<ext:Panel runat="server" Frame="false" Height="200" StyleSpec="padding: 5px 0;" Title="Panel 2"
Width="200">
</ext:Panel>
</ext:Cell>
<ext:Cell ColSpan="2">
<ext:Panel runat="server" Frame="false" Height="200" StyleSpec="padding: 0 0 5px 5px"
Title="Panel 3" Width="400">
</ext:Panel>
</ext:Cell>
</Cells>
</ext:TableLayout>
</Items>
</ext:Panel>
</Items>
</ext:Viewport>
</form>
</body>
</html>
  4. #4
    Jan 03, 2011, 5:49 PM
    Hi,

    Now it looks almost fine. It can look better with respective indentations, see code sample below.

    Also please note that you can avoid to post new code because you could edit your initial post ("Edit" button). I will edit your initial post wrapping code in [CODE ] tags.

    Regarding the question

    Well, .Header and .Border properties make sense during rendering only. So, to apply these properties it needs to re-render panels.

    I would suggest you to avoid using .Render() and DirectMethods. You could achieve your requirement via JavaScript on client side.

    But if you really need to make these actions on server side it can be implemented something like this.
    <%@ Page Language="C#" %>

<script runat="server">
    private void ChangeMode(string mode)
    {
        foreach (Ext.Net.Cell item in TableLayout1.Cells)
        {
            Ext.Net.Panel pnl = item.Items[0] as Ext.Net.Panel;

            if (mode == "DesignMode")
            {
                pnl.AddScript(pnl.ClientID + ".header.show();");
                pnl.AddScript(pnl.ClientID + ".removeClass('no-border');");
            }
            else if (mode == "ViewMode")
            {
                pnl.AddScript(pnl.ClientID + ".header.hide();");
                pnl.AddScript(pnl.ClientID + ".addClass('no-border');");
            }
        }
    }

    [DirectMethod]
    public void Button_DesignMode_Click()
    {
        ChangeMode("DesignMode");
    }

    [DirectMethod]
    public void Button_ViewMode_Click()
    {
        ChangeMode("ViewMode");
    }
</script>

<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<!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>Ext.Net Example</title>

    <script type="text/javascript">
        var Button_DesignMode_Click = function() {
            Ext.net.DirectMethods.Button_DesignMode_Click();
        }

        var Button_ViewMode_Click = function() {
            Ext.net.DirectMethods.Button_ViewMode_Click();
        }
    </script>

    <style type="text/css">
        .no-border .x-panel-body {
            border: 0;
        }
    </style>
</head>
<body>
    <form runat="server">
    <ext:ResourceManager runat="server" />
    <ext:Viewport runat="server" Layout="border">
        <Items>
            <ext:Panel 
                runat="server" 
                Height="50" 
                Region="North" 
                Header="false" 
                Border="false">
                <Items>
                    <ext:Button runat="server" Text="Design Mode">
                        <Listeners>
                            <Click Handler="Button_DesignMode_Click();" />
                        </Listeners>
                    </ext:Button>
                    <ext:Button runat="server" Text="View Mode">
                        <Listeners>
                            <Click Handler="Button_ViewMode_Click();" />
                        </Listeners>
                    </ext:Button>
                </Items>
            </ext:Panel>
            <ext:Panel runat="server" Region="Center" Title="Center">
                <Items>
                    <ext:TableLayout ID="TableLayout1" runat="server" Columns="2">
                        <Cells>
                            <ext:Cell>
                                <ext:Panel 
                                    runat="server" 
                                    Height="200" 
                                    StyleSpec="padding: 5px;" 
                                    Title="Panel 1"
                                    Width="200" />
                            </ext:Cell>
                            <ext:Cell>
                                <ext:Panel 
                                    runat="server"
                                    Title="Panel 2"
                                    Height="200"
                                    Width="200"
                                    StyleSpec="padding: 5px 0;" />
                            </ext:Cell>
                            <ext:Cell ColSpan="2">
                                <ext:Panel 
                                    runat="server"
                                    Title="Panel 3" 
                                    Height="200"
                                    Width="400"
                                    StyleSpec="padding: 0 0 5px 5px" >
                                </ext:Panel>
                            </ext:Cell>
                        </Cells>
                    </ext:TableLayout>
                </Items>
            </ext:Panel>
        </Items>
    </ext:Viewport>
    </form>
</body>
</html>
    Last edited by Daniil; Jan 04, 2011 at 10:10 AM. Reason: Minor correction
  5. #5
    Jan 03, 2011, 6:06 PM
    Thank you very much. But, I have other scenario. if I want to just hide header, not border. What will I do?:)
  6. #6
    Jan 04, 2011, 6:07 AM
    Hi,

    Please see the following sample

    Example
    <%@ Page Language="C#" %>

<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>

<script runat="server">
    private void ChangeMode(string mode)
    {
        foreach (Ext.Net.Cell item in TableLayout1.Cells)
        {
            Ext.Net.Panel pnl = item.Items[0] as Ext.Net.Panel;
            bool header = true;
            bool border = true;

            if (mode == "DesignMode")
            {
                header = true;
                border = true;
            }
            else if (mode == "ViewMode")
            {
                header = false;
                border = false;
            }

            X.Js.Call("setBorder", new JRawValue(pnl.ClientID), header, border);
        }
    }

    [DirectMethod]
    public void Button_DesignMode_Click()
    {
        ChangeMode("DesignMode");
    }

    [DirectMethod]
    public void Button_ViewMode_Click()
    {
        ChangeMode("ViewMode");
    }
</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>Ext.Net Example</title>

    <script type="text/javascript">
        var Button_DesignMode_Click = function () {
            Ext.net.DirectMethods.Button_DesignMode_Click();
        }

        var Button_ViewMode_Click = function () {
            Ext.net.DirectMethods.Button_ViewMode_Click();
        }

        var setBorder = function (panel, useBorder, useHeader) {
            var method = useBorder ? "removeClass" : "addClass";
            panel.el[method](panel.baseCls + '-noborder');
            panel.body[method](panel.bodyCls + '-noborder');
            if (panel.header) {
                panel.header[method](panel.headerCls + '-noborder');
                panel.header[useHeader ? "removeClass" : "addClass"]("x-hide-display");
            }
            if (panel.footer) {
                panel.footer[method](panel.footerCls + '-noborder');
            }
            if (panel.tbar) {
                panel.tbar[method](panel.tbarCls + '-noborder');
            }
            if (panel.bbar) {
                panel.bbar[method](panel.bbarCls + '-noborder');
            }
        }
    </script>

</head>
<body>
    <form runat="server">
    <ext:ResourceManager runat="server" />
    <ext:Viewport runat="server" Layout="border">
        <Items>
            <ext:Panel 
                runat="server" 
                Height="50" 
                Region="North" 
                Border="false">
                <Items>
                    <ext:Button runat="server" Text="Design Mode">
                        <Listeners>
                            <Click Handler="Button_DesignMode_Click();" />
                        </Listeners>
                    </ext:Button>
                    <ext:Button runat="server" Text="View Mode">
                        <Listeners>
                            <Click Handler="Button_ViewMode_Click();" />
                        </Listeners>
                    </ext:Button>
                </Items>
            </ext:Panel>
            <ext:Panel runat="server" Region="Center" Title="Center">
                <Items>
                    <ext:TableLayout ID="TableLayout1" runat="server" Columns="2">
                        <Cells>
                            <ext:Cell>
                                <ext:Panel 
                                    runat="server" 
                                    Height="200" 
                                    Width="200" 
                                    StyleSpec="padding: 5;" 
                                    Title="Panel 1" />
                            </ext:Cell>
                            <ext:Cell>
                                <ext:Panel 
                                    runat="server" 
                                    Height="200" 
                                    Width="200" 
                                    StyleSpec="padding: 5 0;" 
                                    Title="Panel 2" />
                            </ext:Cell>
                            <ext:Cell ColSpan="2">
                                <ext:Panel 
                                    runat="server" 
                                    Height="200" 
                                    Width="400" 
                                    StyleSpec="padding: 0 0 5 5;"
                                    Title="Panel 3" />
                            </ext:Cell>
                        </Cells>
                    </ext:TableLayout>
                </Items>
            </ext:Panel>
        </Items>
    </ext:Viewport>
    </form>
</body>
</html>
    Last edited by Daniil; Jan 04, 2011 at 10:22 AM. Reason: Formatted code
  7. #7
    Jan 04, 2011, 8:41 PM
    I tried this code. But, again problem continues. When I want to just hide only header not border.It doesn't work. (left,bottom and right border lines are okey but top line doesn't exist.)
  8. #8
    Jan 05, 2011, 7:58 AM
    Hi,

    Please use the following modified function (see //added comment)

    Example
    var setBorder = function(panel, useBorder, useHeader) {
    var method = useBorder ? "removeClass" : "addClass";
    panel.el[method](panel.baseCls + '-noborder');
    panel.body[method](panel.bodyCls + '-noborder');
    if (panel.header) {
        panel.header[method](panel.headerCls + '-noborder');
        panel.header[useHeader ? "removeClass" : "addClass"]("x-hide-display");
        panel.body[useHeader ? "removeClass" : "addClass"](panel.bodyCls + '-noheader'); //added
    }
    if (panel.footer) {
        panel.footer[method](panel.footerCls + '-noborder');
    }
    if (panel.tbar) {
        panel.tbar[method](panel.tbarCls + '-noborder');
    }
    if (panel.bbar) {
        panel.bbar[method](panel.bbarCls + '-noborder');
    }
}
  9. #9
    Jan 05, 2011, 8:35 AM
    Thank you very much. Now problem is solved.

Similar Threads

  1. [CLOSED] Panel - Hide Header on Collapse
    By amitpareek in forum 2.x Legacy Premium Help
    Replies: 15
    Last Post: Oct 17, 2012, 10:47 AM
  2. [CLOSED] How to Hide Header row in gridview of GridPanel
    By legaldiscovery in forum 1.x Legacy Premium Help
    Replies: 3
    Last Post: Jul 06, 2012, 1:20 PM
  3. Hide GridPanel Header
    By ShivaKumar in forum 1.x Help
    Replies: 2
    Last Post: May 04, 2010, 11:25 AM
  4. [CLOSED] Gridpanel header checkbox hide
    By speedstepmem3 in forum 1.x Legacy Premium Help
    Replies: 5
    Last Post: Nov 19, 2008, 7:41 AM
  5. [CLOSED] GridPanel Hide Header?
    By Timothy in forum 1.x Legacy Premium Help
    Replies: 3
    Last Post: Sep 16, 2008, 6:43 PM

Posting Permissions