PDA

View Full Version : [CLOSED] Dynamic Checkboxes - Hide/Show user option



cwolcott
Jul 15, 2014, 11:05 PM
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>

Daniil
Jul 16, 2014, 1:21 PM
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
}
})

cwolcott
Jul 16, 2014, 2:09 PM
Perfect. Please close the thread.