[CLOSED] Dynamic Checkboxes - Hide/Show user option

  1. #1

    [CLOSED] Dynamic Checkboxes - Hide/Show user option

    I have checkboxes that I dynamically add to a checkbox group via a list that I retrieve from the database (hardcoded in the example). One of the database attributes is DisabledDt. If there is a disabled date I assign the DisabledCls so that it is red, set the checkbox disabled.

    I would like the user to be able to show/hide disabled checkboxes, but I am having issues because the checkboxes are created dynamically. Any assistance/suggestions would be helpful.

    The user option is currently set to false. You can change it to see what the group would look like when viewing disabled fields.
                            <ext:Checkbox ID="DisplayDisabledFields" runat="server" BoxLabel="Display Disabled Fields" Checked="false" />
    A full example is provided:
    <%@ Page Language="C#" %>
    
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    <!DOCTYPE html>
    <html>
    <script runat="server">
        public class Field
        {
            public int Id
            {
                get;
                set;
            }
    
            public string Name
            {
                get;
                set;
            }
    
            public bool Selected
            {
                get;
                set;
            }
    
            public DateTime? DisabledDt
            {
                get;
                set;
            }
    
            public string Comment
            {
                get;
                set;
            }
        }
    
        protected void Page_Load(object sender, EventArgs e)
        {
            // Recreate Dynamic Checkboxes for object
            List<Field> fields = retrieveFields();
    
            foreach (Field field in fields)
            {
                Checkbox cbo = new Checkbox();
                cbo.BoxLabel = field.Name;
                cbo.InputValue = field.Id.ToString();
    
                if (field.DisabledDt != null)
                {
                    cbo.BoxLabel = field.Name + " (" + field.DisabledDt.Value.ToShortDateString() + ")";
                    cbo.Disabled = true;
                    cbo.DisabledCls = "fieldDisabled";
                }
                if (!String.IsNullOrEmpty(field.Comment))
                {
                    cbo.NoteAlign = NoteAlign.Down;
                    cbo.Note = field.Comment;
                    cbo.NoteCls = "fieldNote";
                }
                cbo.Hidden = !((field.DisabledDt == null) || (DisplayDisabledFields.Checked && field.DisabledDt != null));
    
                DynamicCbGroupObj.Items.Add(cbo);
    
                // Only assign check if not a postback
                if (!X.IsAjaxRequest)
                { if (field.Selected) cbo.Checked = true; }
            }
        }
    
        private List<Field> retrieveFields()
        {
            List<Field> fields = new List<Field>();
    
            fields.Add(new Field { Id = 1, Name = "AAD", Selected = false });
            fields.Add(new Field { Id = 2, Name = "Admin & Log", Selected = false });
            fields.Add(new Field { Id = 3, Name = "AO Commands", Selected = true });
            fields.Add(new Field { Id = 4, Name = "Assigned Force", Selected = true });
            fields.Add(new Field { Id = 5, Name = "Attachment Y/N", Selected = false });
            fields.Add(new Field { Id = 6, Name = "Capabilities", Selected = true });
            fields.Add(new Field { Id = 7, Name = "CCMRF", Selected = false });
            fields.Add(new Field { Id = 8, Name = "Junk1", Selected = false, DisabledDt = new DateTime(2013, 02, 23) });
            fields.Add(new Field { Id = 9, Name = "Coalition", Selected = true });
            fields.Add(new Field { Id = 10, Name = "COCOM DEPORD", Selected = false });
            fields.Add(new Field { Id = 11, Name = "Combatant Cmnd", Selected = true });
            fields.Add(new Field { Id = 12, Name = "Command Relationship", Selected = true });
            fields.Add(new Field { Id = 13, Name = "Communication Support", Selected = false, Comment = "Replaced Comm Spt" });
    
            return fields;
        }
    
        protected void SelectedFields(object sender, DirectEventArgs e)
        {
            StringBuilder sb = new StringBuilder(255);
    
            sb.Append("<h1>Checked Items</h1>");
            sb.Append("<h2>CheckboxGroups</h2>");
            sb.Append("<blockquote>");
    
            List<CheckboxGroup> cbGroups = Ext.Net.Utilities.ControlUtils.FindChildControls<CheckboxGroup>(this.Page.Form);
    
            cbGroups.ForEach(delegate(CheckboxGroup cbGroup)
            {
                int count = 0;
    
                cbGroup.CheckedItems.ForEach(delegate(Checkbox checkbox)
                {
                    if (count == 0)
                    {
                        sb.AppendFormat("<h3>{0}</h3>", cbGroup.FieldLabel);
                        sb.Append("<blockquote>");
                    }
                    sb.AppendFormat("[{0}] {1}<br />", checkbox.InputValue, checkbox.BoxLabel);
                    count++;
                });
    
                if (count > 0)
                {
                    sb.Append("</blockquote>");
                }
            });
    
            sb.Append("</blockquote>");
    
            this.Output.Html = sb.ToString();
        }
    </script>
    <head runat="server">
        <title></title>
        <style type="text/css">
            .fieldDisabled {
                color: red;
                opacity: .3;
            }
    
            .fieldNote {
                color: blue;
                font-size: 10px;
                margin: -4px 15px 6px 18px;
            }
        </style>
        <script type="text/javascript">
        </script>
    </head>
    <%-- http://forums.ext.net/showthread.php?18504
    
         Owner:  gs_user
         Opened: Apr 18, 2012
         Closed: Apr 23, 2012
    
         Shows an example of creating Dynamic Checkboxes.
            1) One way of doing this is to recreate the checkboxes during a direct event via the Page_Load.
            2) An alternate way for dynamic controls is http://forums.ext.net/showthread.php?18541, but I don't
               believe it is appropriate for our checkbox example.
    --%>
    <body>
        <form runat="server">
            <ext:ResourceManager runat="server" />
            <ext:FormPanel runat="server" Title="Checkboxes" Frame="true" Width="700" BodyPadding="10">
                <FieldDefaults LabelWidth="110" LabelStyle="color:green;padding-left:4px;" />
                <Buttons>
                    <ext:Button ID="SelectedFieldsBtn" runat="server" Text="Selected" Icon="Disk">
                        <DirectEvents>
                            <Click OnEvent="SelectedFields" Before="return this.up('form').isValid();" />
                        </DirectEvents>
                    </ext:Button>
    
                    <ext:Button runat="server" Text="Reset" OnClientClick="this.up('form').reset();" />
                </Buttons>
                <Items>
                    <ext:FieldSet runat="server" Title="Dynamic Checkboxes (From Objects)" Layout="AnchorLayout" Collapsible="true" Collapsed="false" DefaultAnchor="100%">
                        <Items>
                            <ext:CheckboxGroup ID="DynamicCbGroupObj" runat="server" FieldLabel="Dynamic Objects" ColumnsNumber="3"
                                Vertical="true" HideLabel="true" />
                            <ext:Container runat="server">
                                <Content>
                                    <hr />
                                </Content>
                            </ext:Container>
                            <ext:Checkbox ID="DisplayDisabledFields" runat="server" BoxLabel="Display Disabled Fields" Checked="false" />
                        </Items>
                    </ext:FieldSet>
                </Items>
            </ext:FormPanel>
    
            <ext:Label ID="Output" runat="server" />
        </form>
    </body>
    </html>
    Last edited by Daniil; Jul 16, 2014 at 2:17 PM. Reason: [CLOSED]
  2. #2
    Hi Chris,

    I think it should be done via JavaScript. On toggling of the Checkbox you could do:
    App.DynamicCbGroupObj.items.each(function(item) {
        if (item.disabled) {
            item.setVisible(checked); // where "checked" is the Checkbox's checked state
        }
    })
  3. #3
    Perfect. Please close the thread.

Similar Threads

  1. Replies: 1
    Last Post: Nov 12, 2012, 1:21 PM
  2. Replies: 4
    Last Post: Nov 02, 2012, 7:46 AM
  3. Replies: 2
    Last Post: Jul 21, 2011, 3:02 PM
  4. [CLOSED] [1.0] Checkboxes in user control not updating (incorrect ID)
    By chrisbranson in forum 1.x Legacy Premium Help
    Replies: 4
    Last Post: May 05, 2010, 6:18 AM
  5. TabPanel + Dynamic tab show/hide
    By reinaldo.designerdigital in forum 1.x Help
    Replies: 3
    Last Post: Feb 06, 2009, 12:26 PM

Tags for this Thread

Posting Permissions