What's New?

[ADDED] [V0.6] Hide Property

  1. #1
    Sep 01, 2008, 12:18 PM

    [ADDED] [V0.6] Hide Property

    Hello,

    Would it be possible to get a Hide property on the base controls like Panel, GridPanel, Button, etc ...

    This would be extremely helpful when we need to initially render a control hidden to be updated by Ajax to show.

    Also, side note Visible property on most controls seems useless since it will not render the control thus calling it from an ExtJS routine renders a JavaScript error.

    Cheers,
    Timothy
  2. #2
    Sep 01, 2008, 2:35 PM

    RE: [ADDED] [V0.6] Hide Property

    I've added the .Hidden property to Component.cs and is now available to set/get on all controls.

    Example

    <ext:Panel 
    ID="Panel1" 
    runat="server" 
    Height="300"
    Width="600"
    Title="Iam Hidden!"
    Hidden="true"
    />
    When a control is "hidden" it's still fully scriptable and exists on the Page as if it was not "hidden", but is just not shown.

    On both the client &amp; server you can programatically show/hide the Component by calling the .Show() or .Hide() Method (or .show() &amp; .hide() on client).

    The follow sample demonstrates a Panel which was initially rendered as hidden and collapsed, then expanded and shown using a small script within the <Click> Listener on the <ext:Button>.

    Example

    <ext:Button ID="Button1" runat="server" Text="Submit" AutoPostBack="false">
    <Listeners>
        <Click Handler="#{Panel1}.expand().show();" />
    </Listeners>
</ext:Button>

<ext:Panel 
    ID="Panel1" 
    runat="server" 
    Height="300"
    Width="600"
    Title="Iam Hidden!"
    Hidden="true"
    Collapsible="true"
    Collapsed="true"
    />
    The "#{Panel1}" syntax above is the new TokenID specifier syntax. The token "#{Panel1}" will be replaced with the .ClientID of the <ext:Panel> when rendered to the Page. The .ClientID may be different than the .ID and the controls are instantiated in the browser using their .ClientID.

    RE: your comments about the .Visible property... we follow the standard ASP.NET convention of rendering nothing to the Page when Visible="false". Because nothing is rendered to the Page, the control does not exist in the Page DOM. Any JavaScript run against a control when Visible="false" will probably throw a JavaScript error (as you experienced).

    When Visible="false", the control is still available server-side to be programmed against using code-behind.

    Now using .Hidden (instead of .Visible) will render the control to the Page/DOM, but it'll be "hidden" (ie. not visible, not shown).

    The new .Hidden property has been committed to SVN and will be available with the v0.6 Preview release.

    Hope this helps.

    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
    Sep 01, 2008, 2:40 PM

    RE: [ADDED] [V0.6] Hide Property

    Cheers Geoffrey, I've confirmed the .Hidden field works.

    Timothy
  4. #4
    Sep 01, 2008, 4:51 PM

    RE: [ADDED] [V0.6] Hide Property

    Geoffrey,

    Example below:

    <%@ Page Language="C#" %>
<%@ Register Assembly="Coolite.Ext.Web" Namespace="Coolite.Ext.Web" TagPrefix="ext" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script runat="server">

</script>

<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">
    <title>Untitled Page</title>
</head>
<body>
    <form id="form1" runat="server">
        <ext:ScriptManager runat="server" ScriptMode="Debug" />
        <ext:Panel ID="Panel1" runat="server" Hidden="True">
            <Content>
                Word
            </Content>
        </ext:Panel>
        <ext:Panel ID="Panel2" runat="server" Hidden="True">
            <Content>
                Word
            </Content>
        </ext:Panel>
        <ext:Panel ID="Panel3" runat="server" Hidden="True">
            <Content>
                Word
            </Content>
        </ext:Panel>
        <ext:Panel ID="Panel4" runat="server" Hidden="True">
            <Content>
                Word
            </Content>
        </ext:Panel>
        <ext:Panel ID="Panel5" runat="server" Hidden="True">
            <Content>
                Word
            </Content>
        </ext:Panel>
        <ext:Panel ID="Panel6" runat="server">
            <Content>
                Word
            </Content>
        </ext:Panel>
    </form>
</body>
</html>
    All of the Panel controls from 1-5 are hidden and still take up the same amount of white-space as if they were being shown?

    Apologies, happens in IE6 and not FF3.0

    Cheers,
    Timothy
  5. #5
    Sep 01, 2008, 6:09 PM

    RE: [ADDED] [V0.6] Hide Property

    Timothy,

    Try to set HideMode="Offsets" for Panels


  6. #6
    Sep 01, 2008, 6:33 PM

    RE: [ADDED] [V0.6] Hide Property

    Great, thanks vlad ;)

    Timothy
  7. #7
    Sep 01, 2008, 7:15 PM

    RE: [ADDED] [V0.6] Hide Property

    I don't think HideMode="Offsets" will work.

    I'm trying to narrow down the problem, and the solution to remove that white-space in IE might not be as clean as I was hoping.
    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

Similar Threads

  1. 2.0 BETA ExtraParam added in codebehind not being added to service call
    By craigymcm in forum 2.x Help
    Replies: 12
    Last Post: Jun 04, 2012, 11:18 AM
  2. [CLOSED] By modifying the value of property 'FieldLabel' content is not held property 'LabelSeparator'
    By mmmartins in forum 1.x Legacy Premium Help
    Replies: 3
    Last Post: Dec 15, 2011, 12:18 PM
  3. [CLOSED] How to: hide combo box items an show them in a grid list based an entity property
    By digitek in forum 1.x Legacy Premium Help
    Replies: 8
    Last Post: Nov 28, 2011, 9:25 AM
  4. [CLOSED] Icon does not hide on item hide
    By amitpareek in forum 1.x Legacy Premium Help
    Replies: 7
    Last Post: Nov 09, 2011, 7:13 PM
  5. [CLOSED] label.Hide() does not hide FieldLabel
    By alexp in forum 1.x Legacy Premium Help
    Replies: 4
    Last Post: Aug 12, 2010, 9:05 PM

Posting Permissions