[CLOSED] Add checkbox to checkboxgroup during runtime

Page 3 of 5 FirstFirst 12345 LastLast
  1. #21
    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
  2. #22
    Quote Originally Posted by dnguyen View Post
    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:)
  3. #23
    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 http://examples1.ext.net/#/GridPanel...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
  4. #24
    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;
                }
            }
    
    
        }
    }
  5. #25
    Quote Originally Posted by dnguyen View Post
    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 http://examples1.ext.net/#/GridPanel...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>
  6. #26
    Quote Originally Posted by dnguyen View Post
    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>
    Last edited by Daniil; Jan 07, 2011 at 4:52 PM. Reason: Editted example
  7. #27
    Quote Originally Posted by Daniil View Post
    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
  8. #28
    Quote Originally Posted by dnguyen View Post
    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...
  9. #29
    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
  10. #30
    That I posted.
Page 3 of 5 FirstFirst 12345 LastLast

Similar Threads

  1. [CLOSED] Checkboxgroup not retaining checkbox items
    By Edward in forum 1.x 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 Premium Help
    Replies: 5
    Last Post: May 11, 2010, 4:22 PM

Posting Permissions