[CLOSED] Add checkbox to checkboxgroup during runtime

**dnguyen** · Jan 06, 2011, 4:57 PM

Hi Daniil,

We're currently using version 0.8.2 and hopefully will be upgrading to version 1.0 after the January release. Thus, I'm not sure if it has <ext:TabPanel> in the version 0.8.2. I'm using <ext:Tab> which does not have the DeferredRender attribute. By the way, I'm in the process of sending you the simplified aspx page for you to reproduce the problem.

Thanks,
Dan

**Daniil** · Jan 06, 2011, 5:03 PM

Originally Posted by dnguyen

Hi Daniil,
We're currently using version 0.8.2 and hopefully will be upgrading to version 1.0 after the January release. Thus, I'm not sure if it has <ext:TabPanel> in the version 0.8.2. I'm using <ext:Tab> which does not have the DeferredRender attribute.

Well, there is <ext:TabPanel> in Coolite 0.8.2 and I see this control in your code:

<ext:FitLayout ID="FitLayout1" runat="server">
    <ext:TabPanel ID="TabPanel1" runat="server" ActiveTabIndex="0" Border="false">

P.S. It seems you are a little bit tired and need a cup of coffee:)

**dnguyen** · Jan 06, 2011, 6:49 PM

Hi Daniil,

Yes, you're correct! I'm tired and in need of coffee badly :-). By the way, the page layout and methodology is almost the same with the sample demo on your web site https://examples1.ext.net/#/GridPane...etails_Window/
I can see you my simplified page, but not sure I can send the rest of other stuffs like database file, etc.

Is it possible that you can use the existing example from the link above, add an additional tab with checkboxgroup and populate it with the checkboxes whenever you select the Details column? If you can do this, I think I can manage using your example and retrofit into my page.
Many thanks for your patience and support.

Dan

**dnguyen** · Jan 06, 2011, 7:18 PM

Daniil,

Just in case you still need the actual aspx page to troubleshoot the problem, I'm attaching the aspx files and the window control files. Please notice that I've only included the part where I think the problem is. Also please ignore the included namespaces and the references to the DAO layer. Please let me know. Thanks.

Markup page of main page

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="BadgerMail.aspx.cs" Inherits="CooliteTestApp.BadgerMail" %>
<%@ 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>Badgermail Setup</title>
    <script type="text/javascript">
        // this "setGroupStyle" function is called when the GroupingView is refreshed.     
        var setGroupStyle = function(view) {
            // get an instance of the Groups
            var groups = view.getGroups();

            for (var i = 0; i < groups.length; i++) {
                // Loop through the Groups, the do a query to find the <span> with our ColorCode
                // Get the "id" from the <span> and split on the "-", the second array item should be our ColorCode
                var color = "#" + Ext.query("span", groups[i])[0].id.split("-")[1];

                // Set the "background-color" of the original Group node.
                Ext.get(groups[i]).setStyle("background-color", color);
            }
        }

        var cellClick = function(grid, rowIndex, columnIndex, e) {
            var t = e.getTarget();
            var record = grid.getStore().getAt(rowIndex);  // Get the Record
            var columnId = grid.getColumnModel().getColumnId(columnIndex); // Get column id

            if (t.className == 'imgEdit' && columnId == 'Details') {
                openBadgermailTypeDetails(record, t);
            }
        }

        var badgermailDetailsRender = function() {
            return '<img class="imgEdit" ext:qtip="Click to view additional details" style="cursor:pointer;" src="../images/details.jpg" />';
        }      
    </script>
    
</head>

    <ext:ScriptManager ID="ScriptManager1" runat="server" /> 
    <ext:Store ID="Facility_Store" runat="server">
        <Reader>
            <ext:ArrayReader>
                <Fields>
                    <ext:RecordField Name="id"></ext:RecordField>
                </Fields>
            </ext:ArrayReader>
        </Reader>
    </ext:Store>
    
    <ext:Store runat="server" ID="Store1" AutoLoad="true" GroupField="KMSModule">
        <Reader>
            <ext:ArrayReader>
                <Fields>
                    <ext:RecordField Name="BadgermailTypeID"></ext:RecordField>
                    <ext:RecordField Name="TreeParentID"></ext:RecordField>
                    <ext:RecordField Name="TypeName"></ext:RecordField>
                    <ext:RecordField Name="Active"></ext:RecordField>
                    <ext:RecordField Name="EmailText"></ext:RecordField>
                    <ext:RecordField Name="SubjectText"></ext:RecordField>
                    <ext:RecordField Name="BeforeDays"></ext:RecordField>
                    <ext:RecordField Name="BeforeNotifyFreq"></ext:RecordField>
                    <ext:RecordField Name="PastdueAfterDays"></ext:RecordField>
                    <ext:RecordField Name="PastdueNotifyFreq"></ext:RecordField>
                    <ext:RecordField Name="PastdueMaxNotify"></ext:RecordField>
                    <ext:RecordField Name="KMSModule"></ext:RecordField>
                    <ext:RecordField Name="Outline"></ext:RecordField>
                    <ext:RecordField Name="StatusTableName"></ext:RecordField>
                    <ext:RecordField Name="ViewName"></ext:RecordField>
                    <ext:RecordField Name="ViewSyntax"></ext:RecordField>  
                    <%--<ext:RecordField Name="MailHtmlFormatID"></ext:RecordField>--%>
                    <ext:RecordField Name="ScheduleTask"></ext:RecordField>
                    <ext:RecordField Name="ScheduleStartDate"></ext:RecordField>
                    <ext:RecordField Name="ScheduleStartTime"></ext:RecordField>   
                    <ext:RecordField Name="ScheduleNextRunTime"></ext:RecordField>
                    <ext:RecordField Name="PersonEmailTo"></ext:RecordField>
                    <ext:RecordField Name="DateCompareTo"></ext:RecordField>
                    <ext:RecordField Name="InitialNotify"></ext:RecordField>
                    <ext:RecordField Name="TableKeyColumns"></ext:RecordField>   
                    <ext:RecordField Name="FacilityID"></ext:RecordField>                                                                                                                                                                                                                                                                                                                                                                                                      
                </Fields>
            </ext:ArrayReader>
        </Reader>
        <SortInfo Field="TypeName" Direction="ASC" />
    </ext:Store>     
<body>
    <form id="BadgerMail_Blank" method="post" runat="server">
    <asp:TextBox ID="hidden_ViewName" runat="server" Visible="False" Height="9px"></asp:TextBox>
    <table cellspacing="0" cellpadding="0" width="100%" style="height: 100%">
        <tr valign="top">
            <td>
                <div id="Div1" style="position: absolute; left: 5px; right: 5px;">
                     <ext:GridPanel
                        ID="GridPanel1"
                        runat="server" 
                        Collapsible="false" 
                        AutoWidth="true"
                        Height="350" 
                        AutoExpandColumn="TypeName" 
                        Title="Badgermail Setup" 
                        Frame="true" 
                        StoreID="Store1">
                        <ColumnModel ID="ColumnModel1" runat="server">
                        <Columns>
                            <ext:Column ColumnID="KMSModule" Header="Badgermail" DataIndex="KMSModule" Width="130" Sortable="true" />
                            <ext:Column Header="Type Name" DataIndex="TypeName" Width="160" Sortable="true"/>
                            <ext:Column Header="Email To Person" DataIndex="PersonEmailTo" Sortable="true"></ext:Column>
                            <ext:Column Header="Subject" DataIndex="EmailText" Width="180" Sortable="true" />    
                            <ext:Column ColumnID="Details" Header="Details" Width="50" Align="Center" Fixed="true" MenuDisabled="true" Resizable="false">
                                <Renderer Fn="badgermailDetailsRender" />                    
                            </ext:Column>                                                    
                        </Columns>
                        </ColumnModel>                        
                        <SelectionModel>
                            <ext:RowSelectionModel ID="RowSelectionModel1" runat="server" />
                        </SelectionModel>
                        <View>
                            <ext:GroupingView  
                                ID="GroupingView1"
                                HideGroupedColumn="true"
                                runat="server" 
                                ForceFit="true"
                                StartCollapsed="true"
                                GroupTextTpl='<span id="ColorCode-{[values.rs[0].data.ColorCode]}"></span>{text} ({[values.rs.length]} {[values.rs.length > 1 ? "Types" : "Type"]})'
                                EnableRowBody="true">
                                <Listeners>
                                    <Refresh Fn="setGroupStyle" />
                                </Listeners>
                            </ext:GroupingView>
                        </View>
                        <Buttons>
                            <ext:Button 
                                ID="btnToggleGroups" 
                                runat="server" 
                                Text="Expand/Collapse Groups"
                                Icon="TableSort"
                                Style="margin-left: 6px;"
                                AutoPostBack="false">
                                <Listeners>
                                    <Click Handler="#{GridPanel1}.getView().toggleAllGroups();" />
                                </Listeners>
                            </ext:Button>
                        </Buttons>
                        <Listeners>
                            <CellClick Fn="cellClick" />
                        </Listeners>
                        <TopBar>
                            <ext:Toolbar runat="server">
                                <Items>
                                    <ext:Button ID="btnAddNewType" runat="server" Icon="Add" Text="Add New Badgermail Setup type"></ext:Button>
                                </Items>
                            </ext:Toolbar>
                        </TopBar>                        
                    </ext:GridPanel>
                    <uc1:WindowEditor ID="WindowEditor1" runat="server" />                      
                </div>                   
            </td>
        </tr>
    </table>  
    </form>
</body>
</html>

Code behind of main page

            if (!Page.IsPostBack || !Ext.IsAjaxRequest)
            {
                BadgerMailDAO dao = new BadgerMailDAO(this.GetDBAlias());
                KmsUser currentUser = KmsPageController.GetCurrentUser(Session);
                ArrayList bmDataList = dao.SelectAllExistingBM(currentUser.FacilityID.ToString());
                List<object> badgermailList = new List<object>(bmDataList.Count);
                foreach (NewBadgerMail bm in bmDataList)
                {
                    badgermailList.Add(new object[] { bm.TypeID, bm.ParentId, bm.TypeName, bm.ActiveYN, bm.EmailBody, bm.EmailSubject, 
                                                      bm.BeforeTargetDate, bm.BeforeNotifyFreq, bm.PastDue, bm.PastDueNotifyFreq, bm.PastDueNotifyMaxTime,
                                                      bm.Module, bm.Outline, bm.TableName, bm.ViewName, bm.ViewDef, bm.ScheduleTask,
                                                      bm.StartDate, bm.StartTime, bm.NextRunTime, bm.EmailSendTo, bm.DateCompareTo,
                                                      bm.InitialNotifyYN, bm.TableKeyColumns, bm.FacilityID });
                }

                this.Store1.DataSource = badgermailList;
                this.Store1.DataBind();
            }

WindowEditor mockup page

            if (!Page.IsPostBack || !Ext.IsAjaxRequest)
            {
                BadgerMailDAO dao = new BadgerMailDAO(this.GetDBAlias());
                KmsUser currentUser = KmsPageController.GetCurrentUser(Session);
                ArrayList bmDataList = dao.SelectAllExistingBM(currentUser.FacilityID.ToString());
                List<object> badgermailList = new List<object>(bmDataList.Count);
                foreach (NewBadgerMail bm in bmDataList)
                {
                    badgermailList.Add(new object[] { bm.TypeID, bm.ParentId, bm.TypeName, bm.ActiveYN, bm.EmailBody, bm.EmailSubject, 
                                                      bm.BeforeTargetDate, bm.BeforeNotifyFreq, bm.PastDue, bm.PastDueNotifyFreq, bm.PastDueNotifyMaxTime,
                                                      bm.Module, bm.Outline, bm.TableName, bm.ViewName, bm.ViewDef, bm.ScheduleTask,
                                                      bm.StartDate, bm.StartTime, bm.NextRunTime, bm.EmailSendTo, bm.DateCompareTo,
                                                      bm.InitialNotifyYN, bm.TableKeyColumns, bm.FacilityID });
                }

                this.Store1.DataSource = badgermailList;
                this.Store1.DataBind();
            }

WindowEditor code behind

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data;
using Com.Dss.Kms.BadgerMail.BusinessLogic;
using Coolite.Ext.Web;
using Com.Dss.Kms.BadgerMail.DAO;
using Com.Dss.Kms.Common;
using Com.Dss.Kms.Common.DAO;
using System.Collections;

namespace Com.Dss.Kms.BadgerMail.Controls
{
    public partial class WindowEditor : System.Web.UI.UserControl
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!Page.IsPostBack)
            {
                this.LoadFacilityList();
            }

        }

        
        /// <summary>
        /// 
        /// </summary>
        private void LoadFacilityList()
        {
            //Load Facility Combo box
            CommonDAO cDAO = new CommonDAO((string)Session[SessionValues.DB_ALIAS]);
            ArrayList facilityList = cDAO.SelectFacilityList();
            List<object> cbFacilityList = new List<object>(facilityList.Count);
            foreach (System.Web.UI.WebControls.ListItem item in facilityList)
            {
                cbFacilityList.Add(new object[] { item.Value, item.Text });
            }
            FacilityStore.DataSource = cbFacilityList;
            FacilityStore.DataBind();
        }

        /// <summary>
        /// 
        /// </summary>
        /// <param name="sender"></param>
        /// <param name="e"></param>
        [AjaxMethod]        
        public void LoadFieldsByID(object sender, AjaxEventArgs e)
        {
            try
            {
                //populate Displayfields
                string nodeid = Session["BadgerMailID"].ToString();
                string facID = this.cbFacility.SelectedItem.Value;

                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)
                {
                    int loop_count = 0;
                    ArrayList checkboxIds = new ArrayList();
                    foreach (DataRowView drv in dv)
                    {
                        string column_name = drv["COLUMN_NAME"].ToString();
                        string Assign_YN = drv["ASSIGNED_YN"].ToString();
                        //cbgDisplayField.Items.Add(new Checkbox(false, column_name + loop_count.ToString()));
                        //cblDisplayFields.Items.Add(column_name);
                        //if (Assign_YN == "Y")
                        //{
                        //    cbgDisplayField.Items[loop_count].Checked = true;
                        //}
                        //else
                        //    cbgDisplayField.Items[loop_count].Checked = false;
                        checkboxIds.Add(column_name + loop_count.ToString());
                        loop_count++;

                        //Coolite.Ext.Web.ScriptManager.GetInstance(this.Context).AddScript("addCheckboxTo('{0}', '{1}');", "cbgDisplayFields.ClientID", column_name);
                    }
                    string jsonCheckboxIds = JSON.Serialize(checkboxIds);
                    Coolite.Ext.Web.ScriptManager.GetInstance(this.Context).AddScript("addCheckboxTo('{0}', '{1}');", "cbgDisplayFields.ClientID", jsonCheckboxIds);
                    return true;
                }
                else
                    return false;
            }
            catch (Exception ex)
            {
                throw ex;
            }
        }


    }
}

**Daniil** · Jan 06, 2011, 7:42 PM

Originally Posted by dnguyen

Hi Daniil,

Yes, you're correct! I'm tired and in need of coffee badly :-). By the way, the page layout and methodology is almost the same with the sample demo on your web site https://examples1.ext.net/#/GridPane...etails_Window/
I can see you my simplified page, but not sure I can send the rest of other stuffs like database file, etc.

Is it possible that you can use the existing example from the link above, add an additional tab with checkboxgroup and populate it with the checkboxes whenever you select the Details column? If you can do this, I think I can manage using your example and retrofit into my page.
Many thanks for your patience and support.

Dan

I prepared a simple example for you. Hope this helps.

Example Main Page

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

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

<%@ Register Src="~/WindowEditor.ascx" TagPrefix="uc" TagName="WindowEditor" %>

<script runat="server">
    protected void Page_Load(object sender, EventArgs e)
    {
        if (!Ext.IsAjaxRequest)
        {
            Store store = this.Store1;
            store.DataSource = new object[] 
            { 
                 new object[] { 1 },
                 new object[] { 2 },
                 new object[] { 3 }
                
            };
            store.DataBind();
        }
    }
</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>
</head>
<body>
    <form runat="server">
    <ext:ScriptManager runat="server" />
    <ext:Store ID="Store1" runat="server">
        <Reader>
            <ext:ArrayReader>
                <Fields>
                    <ext:RecordField Name="count" Type="Int" />
                </Fields>
            </ext:ArrayReader>
        </Reader>
    </ext:Store>
    <ext:GridPanel 
        ID="GridPanel1" 
        runat="server" 
        StoreID="Store1" 
        AutoHeight="true">
        <ColumnModel runat="server">
            <Columns>
                <ext:Column Header="Checkboxes count" DataIndex="count" Width="100"/>
                <ext:CommandColumn Width="50">
                    <Commands>
                        <ext:GridCommand CommandName="details" Icon="Information"/>
                    </Commands>
                </ext:CommandColumn>
            </Columns>
        </ColumnModel>
        <Listeners>
            <Command Handler="openDetailsWindow(record.get('count'));" />
        </Listeners>
    </ext:GridPanel>
    <uc:WindowEditor ID="WindowEditor1" runat="server" />
    </form>
</body>
</html>

Example WindowEditor.ascx

<%@ Control Language="C#" %>
<%@ Register Assembly="Coolite.Ext.Web" Namespace="Coolite.Ext.Web" TagPrefix="ext" %>

<script type="text/javascript">
    var openDetailsWindow = function(count) {
        var cfg = {
            id: "Group1",
            renderTo: TabGroup.body,
            itemCls: "x-form-cb-label-nowrap",
            items: [],
            columns: 1
        };
        for (var i = 1; i <= count; i++) {
            var id = "NewCheckbox" + i;
            cfg.items.push({
                id: id,
                xtype: "checkbox",
                inputValue: id,
                boxLabel: id
            });
        }
        var group = Ext.getCmp("Group1");
        if (group) {
            group.destroy();
        }

        WindowEditor1_Window1.show();
        new Ext.form.CheckboxGroup(cfg);

    }
</script>

<ext:Window 
    ID="Window1" 
    runat="server" 
    Title="Details" 
    Width="400" 
    Height="400" 
    ShowOnLoad="false">
    <Body>
        <ext:FitLayout runat="server">
            <ext:TabPanel runat="server" DeferredRender="false">
                <Tabs>
                    <ext:Tab runat="server" Title="Some title" Html="Some content" />
                    <ext:Tab 
                        ID="TabGroup" 
                        runat="server" 
                        Title="CheckboxGroup" 
                        IDMode="Explicit" />
                </Tabs>
            </ext:TabPanel>
        </ext:FitLayout>
    </Body>
</ext:Window>

**Daniil** · Jan 06, 2011, 8:18 PM

Originally Posted by dnguyen

Daniil,

Just in case you still need the actual aspx page to troubleshoot the problem, I'm attaching the aspx files and the window control files. Please notice that I've only included the part where I think the problem is. Also please ignore the included namespaces and the references to the DAO layer. Please let me know. Thanks.

Markup page of main page

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="BadgerMail.aspx.cs" Inherits="CooliteTestApp.BadgerMail" %>
<%@ 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>Badgermail Setup</title>
    <script type="text/javascript">
        // this "setGroupStyle" function is called when the GroupingView is refreshed.     
        var setGroupStyle = function(view) {
            // get an instance of the Groups
            var groups = view.getGroups();

            for (var i = 0; i < groups.length; i++) {
                // Loop through the Groups, the do a query to find the <span> with our ColorCode
                // Get the "id" from the <span> and split on the "-", the second array item should be our ColorCode
                var color = "#" + Ext.query("span", groups[i])[0].id.split("-")[1];

                // Set the "background-color" of the original Group node.
                Ext.get(groups[i]).setStyle("background-color", color);
            }
        }

        var cellClick = function(grid, rowIndex, columnIndex, e) {
            var t = e.getTarget();
            var record = grid.getStore().getAt(rowIndex);  // Get the Record
            var columnId = grid.getColumnModel().getColumnId(columnIndex); // Get column id

            if (t.className == 'imgEdit' && columnId == 'Details') {
                openBadgermailTypeDetails(record, t);
            }
        }

        var badgermailDetailsRender = function() {
            return '<img class="imgEdit" ext:qtip="Click to view additional details" style="cursor:pointer;" src="../images/details.jpg" />';
        }      
    </script>
    
</head>

    <ext:ScriptManager ID="ScriptManager1" runat="server" /> 
    <ext:Store ID="Facility_Store" runat="server">
        <Reader>
            <ext:ArrayReader>
                <Fields>
                    <ext:RecordField Name="id"></ext:RecordField>
                </Fields>
            </ext:ArrayReader>
        </Reader>
    </ext:Store>
    
    <ext:Store runat="server" ID="Store1" AutoLoad="true" GroupField="KMSModule">
        <Reader>
            <ext:ArrayReader>
                <Fields>
                    <ext:RecordField Name="BadgermailTypeID"></ext:RecordField>
                    <ext:RecordField Name="TreeParentID"></ext:RecordField>
                    <ext:RecordField Name="TypeName"></ext:RecordField>
                    <ext:RecordField Name="Active"></ext:RecordField>
                    <ext:RecordField Name="EmailText"></ext:RecordField>
                    <ext:RecordField Name="SubjectText"></ext:RecordField>
                    <ext:RecordField Name="BeforeDays"></ext:RecordField>
                    <ext:RecordField Name="BeforeNotifyFreq"></ext:RecordField>
                    <ext:RecordField Name="PastdueAfterDays"></ext:RecordField>
                    <ext:RecordField Name="PastdueNotifyFreq"></ext:RecordField>
                    <ext:RecordField Name="PastdueMaxNotify"></ext:RecordField>
                    <ext:RecordField Name="KMSModule"></ext:RecordField>
                    <ext:RecordField Name="Outline"></ext:RecordField>
                    <ext:RecordField Name="StatusTableName"></ext:RecordField>
                    <ext:RecordField Name="ViewName"></ext:RecordField>
                    <ext:RecordField Name="ViewSyntax"></ext:RecordField>  
                    <%--<ext:RecordField Name="MailHtmlFormatID"></ext:RecordField>--%>
                    <ext:RecordField Name="ScheduleTask"></ext:RecordField>
                    <ext:RecordField Name="ScheduleStartDate"></ext:RecordField>
                    <ext:RecordField Name="ScheduleStartTime"></ext:RecordField>   
                    <ext:RecordField Name="ScheduleNextRunTime"></ext:RecordField>
                    <ext:RecordField Name="PersonEmailTo"></ext:RecordField>
                    <ext:RecordField Name="DateCompareTo"></ext:RecordField>
                    <ext:RecordField Name="InitialNotify"></ext:RecordField>
                    <ext:RecordField Name="TableKeyColumns"></ext:RecordField>   
                    <ext:RecordField Name="FacilityID"></ext:RecordField>                                                                                                                                                                                                                                                                                                                                                                                                      
                </Fields>
            </ext:ArrayReader>
        </Reader>
        <SortInfo Field="TypeName" Direction="ASC" />
    </ext:Store>     
<body>
    <form id="BadgerMail_Blank" method="post" runat="server">
    <asp:TextBox ID="hidden_ViewName" runat="server" Visible="False" Height="9px"></asp:TextBox>
    <table cellspacing="0" cellpadding="0" width="100%" style="height: 100%">
        <tr valign="top">
            <td>
                <div id="Div1" style="position: absolute; left: 5px; right: 5px;">
                     <ext:GridPanel
                        ID="GridPanel1"
                        runat="server" 
                        Collapsible="false" 
                        AutoWidth="true"
                        Height="350" 
                        AutoExpandColumn="TypeName" 
                        Title="Badgermail Setup" 
                        Frame="true" 
                        StoreID="Store1">
                        <ColumnModel ID="ColumnModel1" runat="server">
                        <Columns>
                            <ext:Column ColumnID="KMSModule" Header="Badgermail" DataIndex="KMSModule" Width="130" Sortable="true" />
                            <ext:Column Header="Type Name" DataIndex="TypeName" Width="160" Sortable="true"/>
                            <ext:Column Header="Email To Person" DataIndex="PersonEmailTo" Sortable="true"></ext:Column>
                            <ext:Column Header="Subject" DataIndex="EmailText" Width="180" Sortable="true" />    
                            <ext:Column ColumnID="Details" Header="Details" Width="50" Align="Center" Fixed="true" MenuDisabled="true" Resizable="false">
                                <Renderer Fn="badgermailDetailsRender" />                    
                            </ext:Column>                                                    
                        </Columns>
                        </ColumnModel>                        
                        <SelectionModel>
                            <ext:RowSelectionModel ID="RowSelectionModel1" runat="server" />
                        </SelectionModel>
                        <View>
                            <ext:GroupingView  
                                ID="GroupingView1"
                                HideGroupedColumn="true"
                                runat="server" 
                                ForceFit="true"
                                StartCollapsed="true"
                                GroupTextTpl='<span id="ColorCode-{[values.rs[0].data.ColorCode]}"></span>{text} ({[values.rs.length]} {[values.rs.length > 1 ? "Types" : "Type"]})'
                                EnableRowBody="true">
                                <Listeners>
                                    <Refresh Fn="setGroupStyle" />
                                </Listeners>
                            </ext:GroupingView>
                        </View>
                        <Buttons>
                            <ext:Button 
                                ID="btnToggleGroups" 
                                runat="server" 
                                Text="Expand/Collapse Groups"
                                Icon="TableSort"
                                Style="margin-left: 6px;"
                                AutoPostBack="false">
                                <Listeners>
                                    <Click Handler="#{GridPanel1}.getView().toggleAllGroups();" />
                                </Listeners>
                            </ext:Button>
                        </Buttons>
                        <Listeners>
                            <CellClick Fn="cellClick" />
                        </Listeners>
                        <TopBar>
                            <ext:Toolbar runat="server">
                                <Items>
                                    <ext:Button ID="btnAddNewType" runat="server" Icon="Add" Text="Add New Badgermail Setup type"></ext:Button>
                                </Items>
                            </ext:Toolbar>
                        </TopBar>                        
                    </ext:GridPanel>
                    <uc1:WindowEditor ID="WindowEditor1" runat="server" />                      
                </div>                   
            </td>
        </tr>
    </table>  
    </form>
</body>
</html>

Code behind of main page

            if (!Page.IsPostBack || !Ext.IsAjaxRequest)
            {
                BadgerMailDAO dao = new BadgerMailDAO(this.GetDBAlias());
                KmsUser currentUser = KmsPageController.GetCurrentUser(Session);
                ArrayList bmDataList = dao.SelectAllExistingBM(currentUser.FacilityID.ToString());
                List<object> badgermailList = new List<object>(bmDataList.Count);
                foreach (NewBadgerMail bm in bmDataList)
                {
                    badgermailList.Add(new object[] { bm.TypeID, bm.ParentId, bm.TypeName, bm.ActiveYN, bm.EmailBody, bm.EmailSubject, 
                                                      bm.BeforeTargetDate, bm.BeforeNotifyFreq, bm.PastDue, bm.PastDueNotifyFreq, bm.PastDueNotifyMaxTime,
                                                      bm.Module, bm.Outline, bm.TableName, bm.ViewName, bm.ViewDef, bm.ScheduleTask,
                                                      bm.StartDate, bm.StartTime, bm.NextRunTime, bm.EmailSendTo, bm.DateCompareTo,
                                                      bm.InitialNotifyYN, bm.TableKeyColumns, bm.FacilityID });
                }

                this.Store1.DataSource = badgermailList;
                this.Store1.DataBind();
            }

WindowEditor mockup page

            if (!Page.IsPostBack || !Ext.IsAjaxRequest)
            {
                BadgerMailDAO dao = new BadgerMailDAO(this.GetDBAlias());
                KmsUser currentUser = KmsPageController.GetCurrentUser(Session);
                ArrayList bmDataList = dao.SelectAllExistingBM(currentUser.FacilityID.ToString());
                List<object> badgermailList = new List<object>(bmDataList.Count);
                foreach (NewBadgerMail bm in bmDataList)
                {
                    badgermailList.Add(new object[] { bm.TypeID, bm.ParentId, bm.TypeName, bm.ActiveYN, bm.EmailBody, bm.EmailSubject, 
                                                      bm.BeforeTargetDate, bm.BeforeNotifyFreq, bm.PastDue, bm.PastDueNotifyFreq, bm.PastDueNotifyMaxTime,
                                                      bm.Module, bm.Outline, bm.TableName, bm.ViewName, bm.ViewDef, bm.ScheduleTask,
                                                      bm.StartDate, bm.StartTime, bm.NextRunTime, bm.EmailSendTo, bm.DateCompareTo,
                                                      bm.InitialNotifyYN, bm.TableKeyColumns, bm.FacilityID });
                }

                this.Store1.DataSource = badgermailList;
                this.Store1.DataBind();
            }

WindowEditor code behind

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data;
using Com.Dss.Kms.BadgerMail.BusinessLogic;
using Coolite.Ext.Web;
using Com.Dss.Kms.BadgerMail.DAO;
using Com.Dss.Kms.Common;
using Com.Dss.Kms.Common.DAO;
using System.Collections;

namespace Com.Dss.Kms.BadgerMail.Controls
{
    public partial class WindowEditor : System.Web.UI.UserControl
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!Page.IsPostBack)
            {
                this.LoadFacilityList();
            }

        }

        
        /// <summary>
        /// 
        /// </summary>
        private void LoadFacilityList()
        {
            //Load Facility Combo box
            CommonDAO cDAO = new CommonDAO((string)Session[SessionValues.DB_ALIAS]);
            ArrayList facilityList = cDAO.SelectFacilityList();
            List<object> cbFacilityList = new List<object>(facilityList.Count);
            foreach (System.Web.UI.WebControls.ListItem item in facilityList)
            {
                cbFacilityList.Add(new object[] { item.Value, item.Text });
            }
            FacilityStore.DataSource = cbFacilityList;
            FacilityStore.DataBind();
        }

        /// <summary>
        /// 
        /// </summary>
        /// <param name="sender"></param>
        /// <param name="e"></param>
        [AjaxMethod]        
        public void LoadFieldsByID(object sender, AjaxEventArgs e)
        {
            try
            {
                //populate Displayfields
                string nodeid = Session["BadgerMailID"].ToString();
                string facID = this.cbFacility.SelectedItem.Value;

                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)
                {
                    int loop_count = 0;
                    ArrayList checkboxIds = new ArrayList();
                    foreach (DataRowView drv in dv)
                    {
                        string column_name = drv["COLUMN_NAME"].ToString();
                        string Assign_YN = drv["ASSIGNED_YN"].ToString();
                        //cbgDisplayField.Items.Add(new Checkbox(false, column_name + loop_count.ToString()));
                        //cblDisplayFields.Items.Add(column_name);
                        //if (Assign_YN == "Y")
                        //{
                        //    cbgDisplayField.Items[loop_count].Checked = true;
                        //}
                        //else
                        //    cbgDisplayField.Items[loop_count].Checked = false;
                        checkboxIds.Add(column_name + loop_count.ToString());
                        loop_count++;

                        //Coolite.Ext.Web.ScriptManager.GetInstance(this.Context).AddScript("addCheckboxTo('{0}', '{1}');", "cbgDisplayFields.ClientID", column_name);
                    }
                    string jsonCheckboxIds = JSON.Serialize(checkboxIds);
                    Coolite.Ext.Web.ScriptManager.GetInstance(this.Context).AddScript("addCheckboxTo('{0}', '{1}');", "cbgDisplayFields.ClientID", jsonCheckboxIds);
                    return true;
                }
                else
                    return false;
            }
            catch (Exception ex)
            {
                throw ex;
            }
        }


    }
}

I can suggest you to use AjaxMethod.

Example Main Page

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

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

<%@ Register Src="~/WindowEditor.ascx" TagPrefix="uc" TagName="WindowEditor" %>

<script runat="server">
    protected void Page_Load(object sender, EventArgs e)
    {
        if (!Ext.IsAjaxRequest)
        {
            Store store = this.Store1;
            store.DataSource = new object[] 
            { 
                 new object[] { 3 },
                 new object[] { 4 },
                 new object[] { 5 }
                
            };
            store.DataBind();
        }
    }
</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>
</head>
<body>
    <form runat="server">
    <ext:ScriptManager runat="server" AjaxMethodNamespace="X" />
    <ext:Store ID="Store1" runat="server">
        <Reader>
            <ext:ArrayReader>
                <Fields>
                    <ext:RecordField Name="count" Type="Int" />
                </Fields>
            </ext:ArrayReader>
        </Reader>
    </ext:Store>
    <ext:GridPanel 
        ID="GridPanel1" 
        runat="server" 
        StoreID="Store1" 
        AutoHeight="true">
        <ColumnModel runat="server">
            <Columns>
                <ext:Column Header="Checkboxes count" DataIndex="count" Width="100"/>
                <ext:CommandColumn Width="50">
                    <Commands>
                        <ext:GridCommand CommandName="details" Icon="Information"/>
                    </Commands>
                </ext:CommandColumn>
            </Columns>
        </ColumnModel>
        <Listeners>
            <Command Handler="X.WindowEditor1.OpenWindow(record.get('count'));" />
        </Listeners>
    </ext:GridPanel>
    <uc:WindowEditor ID="WindowEditor1" runat="server" />
    </form>
</body>
</html>

Example WindowEditor.ascx

<%@ Control Language="C#" %>
<%@ Register Assembly="Coolite.Ext.Web" Namespace="Coolite.Ext.Web" TagPrefix="ext" %>

<script runat="server">
    [AjaxMethod]
    public void OpenWindow(int count)
    {
        string[] checkboxIds = new string[count];
        bool[] checkeds = new bool[count];
        for (int i = 0; i < count; i++)
        {
            checkboxIds[i] = "NewCheckbox" + (i + 1);
            checkeds[i] = (i % 2) == 0;
        }
        string jsonCheckboxIds = JSON.Serialize(checkboxIds);
        string jsonCheckeds = JSON.Serialize(checkeds);
        ScriptManager.GetInstance(this.Context).AddScript("openDetailsWindow({0}, {1})", jsonCheckboxIds, jsonCheckeds);
    }
</script>

<script type="text/javascript">
    var openDetailsWindow = function(checkboxIds, checkeds) {
        var cfg = {
            id: "Group1",
            renderTo: TabGroup.body,
            itemCls: "x-form-cb-label-nowrap",
            items: [],
            columns: 1
        };
        for (var i = 0; i < checkboxIds.length; i++) {
            var id = checkboxIds[i],
                checked = checkeds[i];
            cfg.items.push({
                id: id,
                xtype: "checkbox",
                inputValue: id,
                boxLabel: id,
                checked: checked
            });
        }
        var group = Ext.getCmp("Group1");
        if (group) {
            group.destroy();
        }

        WindowEditor1_Window1.show();
        new Ext.form.CheckboxGroup(cfg);

    }
</script>

<ext:Window 
    ID="Window1" 
    runat="server" 
    Title="Details" 
    Width="400" 
    Height="400"
    ShowOnLoad="false">
    <Body>
        <ext:FitLayout runat="server">
            <ext:TabPanel runat="server" DeferredRender="false">
                <Tabs>
                    <ext:Tab runat="server" Title="Some title" Html="Some content" />
                    <ext:Tab 
                        ID="TabGroup" 
                        runat="server" 
                        Title="CheckboxGroup" 
                        IDMode="Explicit" />
                </Tabs>
            </ext:TabPanel>
        </ext:FitLayout>
    </Body>
</ext:Window>

**dnguyen** · Jan 07, 2011, 11:33 AM

Originally Posted by Daniil

I prepared a simple example for you. Hope this helps.

Example Main Page

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

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

<%@ Register Src="~/WindowEditor.ascx" TagPrefix="uc" TagName="WindowEditor" %>

<script runat="server">
    protected void Page_Load(object sender, EventArgs e)
    {
        if (!Ext.IsAjaxRequest)
        {
            Store store = this.Store1;
            store.DataSource = new object[] 
            { 
                 new object[] { 1 },
                 new object[] { 2 },
                 new object[] { 3 }
                
            };
            store.DataBind();
        }
    }
</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>
</head>
<body>
    <form runat="server">
    <ext:ScriptManager runat="server" />
    <ext:Store ID="Store1" runat="server">
        <Reader>
            <ext:ArrayReader>
                <Fields>
                    <ext:RecordField Name="count" Type="Int" />
                </Fields>
            </ext:ArrayReader>
        </Reader>
    </ext:Store>
    <ext:GridPanel 
        ID="GridPanel1" 
        runat="server" 
        StoreID="Store1" 
        AutoHeight="true">
        <ColumnModel runat="server">
            <Columns>
                <ext:Column Header="Checkboxes count" DataIndex="count" Width="100"/>
                <ext:CommandColumn Width="50">
                    <Commands>
                        <ext:GridCommand CommandName="details" Icon="Information"/>
                    </Commands>
                </ext:CommandColumn>
            </Columns>
        </ColumnModel>
        <Listeners>
            <Command Handler="openDetailsWindow(record.get('count'));" />
        </Listeners>
    </ext:GridPanel>
    <uc:WindowEditor ID="WindowEditor1" runat="server" />
    </form>
</body>
</html>

Example WindowEditor.ascx

<%@ Control Language="C#" %>
<%@ Register Assembly="Coolite.Ext.Web" Namespace="Coolite.Ext.Web" TagPrefix="ext" %>

<script type="text/javascript">
    var openDetailsWindow = function(count) {
        var cfg = {
            id: "Group1",
            renderTo: TabGroup.body,
            itemCls: "x-form-cb-label-nowrap",
            items: [],
            columns: 1
        };
        for (var i = 1; i <= count; i++) {
            var id = "NewCheckbox" + i;
            cfg.items.push({
                id: id,
                xtype: "checkbox",
                inputValue: id,
                boxLabel: id
            });
        }
        var group = Ext.getCmp("Group1");
        if (group) {
            group.destroy();
        }

        WindowEditor1_Window1.show();
        new Ext.form.CheckboxGroup(cfg);

    }
</script>

<ext:Window 
    ID="Window1" 
    runat="server" 
    Title="Details" 
    Width="400" 
    Height="400" 
    ShowOnLoad="false">
    <Body>
        <ext:FitLayout runat="server">
            <ext:TabPanel runat="server" DeferredRender="false">
                <Tabs>
                    <ext:Tab runat="server" Title="Some title" Html="Some content" />
                    <ext:Tab 
                        ID="TabGroup" 
                        runat="server" 
                        Title="CheckboxGroup" 
                        IDMode="Explicit" />
                </Tabs>
            </ext:TabPanel>
        </ext:FitLayout>
    </Body>
</ext:Window>

Hi Daniil,

The example above is very close to what I'm looking for. What I'm trying to achieve is when the user select a record, I will use the id of the selected record to pull information from the database and then populate the checkboxes among other thing in the popup window. So my question is, based on the example above

1- How do i make the call the database and get a returned string or string array during the Openwindow method? In the WindowEditor --> var openDetailsWindow = function(count){...} example, I was thinking of making the call to the database and get the returned string array or arraylist and use the for loop for (var i = 1; i <= returnedarraylist.length; i++) to populate the checkboxes. However I am not sure how to do this?

2- I also was thinking about making the call to the database when the user select the record, and then pass that information along with the current record to the openDetailsWindow function call. However, I'm also not sure how to achieve it. I tried several methods but it didn't work either.

I am almost there and I hope you can help. Thanks again for your help.

Dan

**Daniil** · Jan 07, 2011, 12:10 PM

Originally Posted by dnguyen

Hi Daniil,

The example above is very close to what I'm looking for. What I'm trying to achieve is when the user select a record, I will use the id of the selected record to pull information from the database and then populate the checkboxes among other thing in the popup window. So my question is, based on the example above

1- How do i make the call the database and get a returned string or string array during the Openwindow method? In the WindowEditor --> var openDetailsWindow = function(count){...} example, I was thinking of making the call to the database and get the returned string array or arraylist and use the for loop for (var i = 1; i <= returnedarraylist.length; i++) to populate the checkboxes. However I am not sure how to do this?

2- I also was thinking about making the call to the database when the user select the record, and then pass that information along with the current record to the openDetailsWindow function call. However, I'm also not sure how to achieve it. I tried several methods but it didn't work either.

I am almost there and I hope you can help. Thanks again for your help.

Dan

Did you investigate the example with AjaxMethod? It seems that this example is suit for your needs...

**dnguyen** · Jan 07, 2011, 1:34 PM

Hi Daniil,

Which AjaxMethod example are you referring to? Did you post it? Or is it one of the demo examples on the Ext.net web site?

Dan

**Daniil** · Jan 07, 2011, 2:35 PM

That I posted.

Thread: [CLOSED] Add checkbox to checkboxgroup during runtime

Thread Tools

Search Thread

Display

Similar Threads

[CLOSED] Checkboxgroup not retaining checkbox items

Help! Set the value in the direct method of checkbox after dynamic create checkboxgroup.

[CLOSED] How to add Checkbox dynamically within a CheckboxGroup at code behind

Runtime Checkbox value update issue.

[CLOSED] CheckBoxGroup DataIndex for each child checkbox

Posting Permissions

Sitemap

Downloads

Resources

Thread: [CLOSED] Add checkbox to checkboxgroup during runtime

Similar Threads

Posting Permissions

Sitemap

Downloads

Resources

Stay connected with us