[CLOSED] Add checkbox to checkboxgroup during runtime

Page 1 of 5 123 ... LastLast
  1. #1

    [CLOSED] Add checkbox to checkboxgroup during runtime

    Hi,

    I'm having a problem adding checkboxes to checkboxgroup during rutime. It seems that the checkboxes will get add properly during page_load event, but not other methods, i.e. button_click, etc. I found the following thread, but looked like the solution is for version 1.0.

    http://forums.ext.net/showthread.php?8487

    Do you any example for version 0.8.x? Thank you in advance for your help.

    Dan
    Last edited by Daniil; Jan 14, 2011 at 8:46 PM. Reason: [CLOSED]
  2. #2
    Hi,

    There are no CheckboxGroups's methods .Render, .AddTo, etc., so I would suggest you to achieve your requirement via JavaScript.

    Example
    <%@ 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">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title>Coolite 0.8.X Example</title>
    
        <script type="text/javascript">
            var counter = 1;
    
            var addCheckboxTo = function (groupId, checkBoxId) {
                var group = Ext.getCmp(groupId),
                    cfg = group.initialConfig;
                cfg.items.push({
                    id: checkBoxId,
                    xtype: "checkbox",
                    inputValue: checkBoxId,
                    boxLabel: checkBoxId
                });
                group.destroy();
                new Ext.form.CheckboxGroup(cfg);
            }
        </script>
    
    </head>
    <body>
        <form runat="server">
        <ext:ScriptManager runat="server" />
        <ext:CheckboxGroup ID="Group1" runat="server" ColumnsNumber="1">
            <Items>
                <ext:Checkbox runat="server" BoxLabel="Checkbox 1" />
                <ext:Checkbox runat="server" BoxLabel="Checkbox 2" />
                <ext:Checkbox runat="server" BoxLabel="Checkbox 3" />
            </Items>
        </ext:CheckboxGroup>
        <ext:Button runat="server" Text="Add checkbox">
            <Listeners>
                <Click Handler="addCheckboxTo('Group1', 'NewCheckbox' + counter++)" />
            </Listeners>
        </ext:Button>
        </form>
    </body>
    </html>
  3. #3
    Hi Daniil,

    Thank you for the quick reply and the solution. I have another quick question. Adding to checkboxes during a postback is part of a combined processes, which is being done via server side code. So can I call the javascript function you provided from server code? If yes, can you please provide an example of how to do it?

    Thanks,
    Dan
  4. #4
    Well, it can look something like this:

    Example
    <%@ Page Language="C#" %>
    
    <%@ Register Assembly="Coolite.Ext.Web" Namespace="Coolite.Ext.Web" TagPrefix="ext" %>
    
    <script runat="server">
        private static int counter = 1;
        
        protected void AddCheckbox(object sender, AjaxEventArgs e)
        {
            ScriptManager.GetInstance(this.Context).AddScript("addCheckboxTo('{0}', '{1}')", "Group1", "NewCheckbox" + counter++);
        }    
    </script>
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title>Coolite 0.8.X Example</title>
    
        <script type="text/javascript">
            var counter = 1;
    
            var addCheckboxTo = function(groupId, checkBoxId) {
                var group = Ext.getCmp(groupId),
                    cfg = group.initialConfig;
                cfg.items.push({
                    id: checkBoxId,
                    xtype: "checkbox",
                    inputValue: checkBoxId,
                    boxLabel: checkBoxId
                });
                group.destroy();
                new Ext.form.CheckboxGroup(cfg);
            }
        </script>
    
    </head>
    <body>
        <form runat="server">
        <ext:ScriptManager runat="server" />
        <ext:CheckboxGroup ID="Group1" runat="server" ColumnsNumber="1">
            <Items>
                <ext:Checkbox runat="server" BoxLabel="Checkbox 1" />
                <ext:Checkbox runat="server" BoxLabel="Checkbox 2" />
                <ext:Checkbox runat="server" BoxLabel="Checkbox 3" />
            </Items>
        </ext:CheckboxGroup>
        <ext:Button runat="server" Text="Add checkbox">
            <AjaxEvents>
                <Click OnEvent="AddCheckbox" />
            </AjaxEvents>
        </ext:Button>
        </form>
    </body>
    </html>
    By the way, why do you use Coolite 0.8.x? Why not Ext.Net 1.0?

    Many-many things are easy and possible with Ext.Net 1.0. It's not so difficult to migrate but be sure, the benefits are great, see
    http://forums.ext.net/showthread.php...to-Ext.Net-1.0
    http://forums.ext.net/showthread.php...0-step-by-step

    Most developers has already migrated to Ext.Net 1.0 and all of them is very glad.
  5. #5
    Hi Daniil,

    Thanks for the quick reply again. Regarding to upgrading to version 1.0, we're working on an initial release by the end of this month; thus, it's not the right time to switch over. I'm hoping we'll get the chance to upgrade once we've completed this release, but I appreciate the suggestion.

    By the way, I'm using the example you've provided, and getting the following error and couldn't figure out why. (Please see attachment). Not sure what may have cause it, but when I removed the example, the problem went away. Thank you in advance for your help once again.

    Dan
    Attached Thumbnails javascript error.gif  
  6. #6
    Quote Originally Posted by dnguyen View Post
    By the way, I'm using the example you've provided, and getting the following error and couldn't figure out why. (Please see attachment). Not sure what may have cause it, but when I removed the example, the problem went away.
    Please clarify what exactly toolkit's version do you use (0.8.1, 0.8.2, 0.8.3) ? Are you trying to run exactly the same code as in the sample that I posted? Or are you trying to apply this code in your application?
  7. #7
    Quote Originally Posted by Daniil View Post
    Please clarify what exactly toolkit's version do you use (0.8.1, 0.8.2, 0.8.3) ? Are you trying to run exactly the same code as in the sample that I posted? Or are you trying to apply this code in your application?
    Hi Daniil,

    I take that back. Your example works fine. The problem that I ran into is when implemented it in my code. I added the javascript and then on the server side code, instead of the button click event, I tried to implement the line into the foreach loop. Please see the code attachment.

    Thanks,
    Dan

            /// <summary>
            /// 
            /// </summary>
            /// <param name="nodeid"></param>
            /// <param name="facID"></param>
            /// <param name="cbx_DisplayField"></param>
            /// <returns></returns>
            private bool LoadDisplayFields(string nodeid, string facID, CheckboxGroup cbgDisplayField)
            {
                try
                {
                    BadgerMailDAO DAO = new BadgerMailDAO((string)Session[SessionValues.DB_ALIAS]);
                    DataTable dtable = DAO.SelectExistingDisplayFields(nodeid, facID);
                    System.Data.DataView dv = new System.Data.DataView(dtable);
                    if (dv.Count > 0)
                    {
                        cbgDisplayField.Items.Clear();
                        foreach (DataRowView drv in dv)
                        {
                            string column_name = drv["COLUMN_NAME"].ToString();
    
                            Coolite.Ext.Web.ScriptManager.GetInstance(this.Context).AddScript("addCheckboxTo('{0}', '{1}')", "cbgDisplayFields", column_name);
    
                        }
                        return true;
                    }
                    else
                        return false;
                }
                catch (Exception ex)
                {
                    throw ex;
                }
    
            }
  8. #8
    One more thing.... We're using version 0.8.2. Thanks.
  9. #9
    Well, I guess it needs to add ";" after calling of function:
    "addCheckboxTo('{0}', '{1}');"
  10. #10
    Hi Daniil,

    It worked! You da man! You can mark this as CLOSED. I however have a quick question relating to this. I notice usring Group1.Items.Clear() does not clear out the previous checkboxes. Do you have any recommendation on how to remove existing checkboxes from checboxgroup using either javascript or serverside code?

    Thanks,
    Dan
Page 1 of 5 123 ... LastLast

Similar Threads

  1. [CLOSED] Checkboxgroup not retaining checkbox items
    By Edward in forum 1.x Legacy Premium Help
    Replies: 13
    Last Post: Apr 21, 2015, 12:23 PM
  2. Replies: 7
    Last Post: Feb 13, 2012, 2:25 PM
  3. Replies: 2
    Last Post: Jan 12, 2012, 1:33 PM
  4. Runtime Checkbox value update issue.
    By ajviradia in forum 1.x Help
    Replies: 1
    Last Post: Apr 08, 2011, 5:23 PM
  5. [CLOSED] CheckBoxGroup DataIndex for each child checkbox
    By webclouder in forum 1.x Legacy Premium Help
    Replies: 5
    Last Post: May 11, 2010, 4:22 PM

Posting Permissions