[CLOSED] CheckboxGroup Returns No CheckedItems

  1. #1

    [CLOSED] CheckboxGroup Returns No CheckedItems

    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(records, 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?
    Last edited by Daniil; Sep 26, 2013 at 6:12 AM. Reason: [CLOSED]
  2. #2
    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.
  3. #3
    Quote Originally Posted by Daniil View Post
    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?
  4. #4
    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
  5. #5
    Right, I understand. This is the step I'm not clear about:

    Quote Originally Posted by Daniil View Post
    1. Iterate a CheckboxGroup's items putting required fields into an object.
  6. #6
    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>
  7. #7
    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;
    }
  8. #8
    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>
    Last edited by Daniil; Sep 25, 2013 at 3:15 PM.
  9. #9
    Quote Originally Posted by elisa View Post
    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!

Similar Threads

  1. [CLOSED] Checkboxgroup CheckedItems always null
    By gs_user in forum 2.x Legacy Premium Help
    Replies: 2
    Last Post: Nov 08, 2012, 1:03 PM
  2. [CLOSED] Why i get checkboxgroup.CheckedItems.Count Always 0 ?
    By gs_user in forum 2.x Legacy Premium Help
    Replies: 2
    Last Post: Apr 23, 2012, 9:42 AM
  3. Replies: 1
    Last Post: Apr 06, 2012, 10:09 AM
  4. How to Get the RadioGroup.CheckedItems?
    By sk2276699 in forum 1.x Help
    Replies: 1
    Last Post: Jun 28, 2011, 3:22 AM
  5. Replies: 9
    Last Post: Jun 15, 2011, 7:01 AM

Tags for this Thread

Posting Permissions