PDA

View Full Version : [CLOSED] CheckboxGroup Returns No CheckedItems



elisa
Sep 25, 2013, 2:29 AM
I define a CheckboxGroup:


<ext:CheckboxGroup ID="Environments" runat="server" LabelCls="label-cls" FieldLabel="Environment" ColumnsNumber="1" Disabled="true" />


The Checkboxes themselves are populated from a Store like this:


<ext:Store ID="EnvironmentsStore" runat="server" AutoLoad="true">
<Proxy>
<ext:AjaxProxy Json="true" Url='<%#environmentsUrl%>' AutoDataBind="true">
<ActionMethods Read="POST" Create="POST" />
<Headers>
<ext:Parameter Name="Accept" Value="application/json" />
<ext:Parameter Name="Content-Type" Value="application/json" />
</Headers>
<Reader>
<ext:JsonReader Root="" />
</Reader>
<Writer>
<ext:JsonWriter Root="" Encode="true" />
</Writer>
</ext:AjaxProxy>
</Proxy>
<Model>
<ext:Model ID="EnvironmentsModel" runat="server">
<Fields>
<ext:ModelField Name="RECORD_ENVIRONMENT" Type="String" />
</Fields>
</ext:Model>
</Model>
<Listeners>
<Load Fn="loadEnvironments" />
</Listeners>
</ext:Store>


This is the listener javascript function:


var loadEnvironments = function (store, records) {
Ext.getCmp('Environments').removeAll();
Ext.getCmp('Environments').add(Ext.Array.map(recor ds, function (record) {
return {
id: record.get('RECORD_ENVIRONMENT').replace("/","") + "_CB",
boxLabel: record.get('RECORD_ENVIRONMENT'),
inputValue: record.get('RECORD_ENVIRONMENT')
};
}));
}


I need to be able to iterate through the checked boxes in code behind as follows:


foreach (Checkbox box in Environments.CheckedItems)
{
box.Checked = false;
}

or


string ENVIRONMENT_LIST = "";
foreach (Checkbox box in Environments.CheckedItems)
{
ENVIRONMENT_LIST += box.InputValue + ",";
}


But no matter what I can never get any CheckedItems. What am I missing?

Daniil
Sep 25, 2013, 4:31 AM
Hi @elisa,

A CheckboxGroup's CheckedItems can work only if that CheckboxGroup has Items. I mean it is not going to work in your scenario.

You can retrieve all the required info from a CheckboxGroup on client via JavaScript and send it to a server via a request's parameter.

elisa
Sep 25, 2013, 11:48 AM
You can retrieve all the required info from a CheckboxGroup on client via JavaScript and send it to a server via a request's parameter.

Do you have a code example of how this would work?

Daniil
Sep 25, 2013, 12:10 PM
Unfortunately, I don't have such an example.

There will be a few steps.

1. Iterate a CheckboxGroup's items putting required fields into an object.

2. Send it to a server as a parameter (via DirectEvent/DirectMethod).

3. Deserialize that parameter on server

elisa
Sep 25, 2013, 12:12 PM
Right, I understand. This is the step I'm not clear about:


1. Iterate a CheckboxGroup's items putting required fields into an object.

Daniil
Sep 25, 2013, 12:22 PM
Here is an example. It is with static items, but will work with dynamic ones as well.

Example

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

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

<!DOCTYPE html>
<html>
<head runat="server">
<title>Ext.NET v2 Example</title>

<script>
var getInfo = function () {
var group = App.CheckboxGroup1,
items = [];

group.items.each(function (item) {
items.push({
id : item.id,
checked : item.checked,
inputValue : item.inputValue
});
});

alert(Ext.encode(items));
};
</script>
</head>
<body>
<form runat="server">
<ext:ResourceManager runat="server" />

<ext:CheckboxGroup ID="CheckboxGroup1" runat="server">
<Items>
<ext:Checkbox ID="Checkbox1" runat="server" InputValue="1" />
<ext:Checkbox ID="Checkbox2" runat="server" InputValue="2" Checked="true" />
</Items>
</ext:CheckboxGroup>

<ext:Button runat="server" Text="Get info" Handler="getInfo" />
</form>
</body>
</html>

elisa
Sep 25, 2013, 1:12 PM
Ok so I can get it to work to access the currently checked items. But how would I be able to achieve this sort of functionality to uncheck all Checkboxes from code behind?


foreach (Checkbox box in Environments.CheckedItems)
{
box.Checked = false;
}

Daniil
Sep 25, 2013, 3:11 PM
You can do the following.

X.GetCmp<Checkbox>("Checkbox1").Checked = false;

Though, for just unchecking all the items I would prefer another approach.

Example

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

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

<script runat="server">
protected void UncheckAll(object sender, DirectEventArgs e)
{
this.CheckboxGroup1.Call("uncheckAll");
}
</script>

<!DOCTYPE html>
<html>
<head runat="server">
<title>Ext.NET v2 Example</title>

<script>
Ext.form.CheckboxGroup.override({
uncheckAll: function () {
this.items.each(function (item) {
item.setValue(false);
});
}
})
</script>
</head>
<body>
<form runat="server">
<ext:ResourceManager runat="server" />

<ext:CheckboxGroup ID="CheckboxGroup1" runat="server">
<Items>
<ext:Checkbox runat="server" Checked="true" />
<ext:Checkbox runat="server" Checked="true" />
</Items>
</ext:CheckboxGroup>

<ext:Button runat="server" Text="Uncheck all" OnDirectClick="UncheckAll" />
</form>
</body>
</html>

elisa
Sep 25, 2013, 3:17 PM
Ok so I can get it to work to access the currently checked items. But how would I be able to achieve this sort of functionality to uncheck all Checkboxes from code behind?


foreach (Checkbox box in Environments.CheckedItems)
{
box.Checked = false;
}


Nevermind, accomplished this using:


App.Environments.items.each(function (item) {
item.setValue(false);
});


Thanks for your help!