[CLOSED] Checkbox Selection Model in GridPanel

  1. #1

    [CLOSED] Checkbox Selection Model in GridPanel

    Hello,

    I would like to set a datfield with the current date on a Gridpanel with Checkbox Selection model.
    I have been trying this on the server-side by using the "SelectionChange" AjaxEvent.
    Any ideas how to accomplish this?

    Html Code

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="ProjectCheckList.aspx.cs"
        Inherits="WebClientTrackerII.App.Projects.ProjectCheckList" %>
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <%@ Register Assembly="Coolite.Ext.Web" Namespace="Coolite.Ext.Web" TagPrefix="ext" %>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
        <link href="/Styles/Stylesheet1.css" rel="stylesheet" type="text/css" />
        <script src="/Scripts/TrackerII.js" type="text/javascript"></script>
    </head>
    <body>
        <form id="form1" runat="server">
        <ext:ScriptManager ID="scrptMgrProjectCheckList" runat="server" CleanResourceUrl="false"
            Theme="Gray" />
        <asp:SqlDataSource ID="SqlDataSourcePOChkList" runat="server" ConnectionString="<%$ ConnectionStrings:DBConnectionString %>"
            ProviderName="<%$ ConnectionStrings:DBConnectionString.ProviderName %>"
            SelectCommand="  SELECT   (SELECT   PRJCT_CL_ITEM_COMPLETED_DT
                  FROM   TRACKER2.PRJCT_CL_ITEM
                 WHERE   PRJCT_CL_ITEM.PRJCT_CL_ITEM_CHKLST_ITEM_ID =
                            CI.CHKLST_ITEM_ID
                         AND PRJCT_CL_ITEM.PRJCT_CL_ITEM_PRJCT_CHKLST_ID =
                               PCHCK.PRJCT_CHKLST_ID)
                  AS Completed_Date,
               CI.CHKLST_ITEM_CHKLST_ITEM_NM AS Item_Name,
               (SELECT   PC.PRJCT_CHKLST_PRJCT_ID
                  FROM   TRACKER2.PRJCT_CHKLST PC, TRACKER2.PRJCT_CL_ITEM PCI
                 WHERE       PCI.PRJCT_CL_ITEM_PRJCT_CHKLST_ID = PC.PRJCT_CHKLST_ID
                         AND PCI.PRJCT_CL_ITEM_CHKLST_ITEM_ID = CI.CHKLST_ITEM_ID
                         AND PC.PRJCT_CHKLST_PRJCT_ID = PCHCK.PRJCT_CHKLST_PRJCT_ID)
                  AS Project_Id,
               CT.CHKLST_TYPE_ID AS CheckList_Type_Id,
               CI.CHKLST_ITEM_ID AS CheckList_Item_Id
        FROM   TRACKER2.CHKLST_TYPE CT,
               TRACKER2.CHKLST_ITEM CI,
               TRACKER2.PRJCT_CHKLST PCHCK
       WHERE       CT.CHKLST_TYPE_CD = 'POCl'
               AND CI.CHKLST_ITEM_CHKLST_TYPE_ID = CT.CHKLST_TYPE_ID
               AND CT.CHKLST_TYPE_ID = PCHCK.PRJCT_CHKLST_CHKLST_TYPE_ID(+)
               AND PCHCK.PRJCT_CHKLST_PRJCT_ID(+) = :PRJCT_CHKLST_PRJCT_ID
    ORDER BY   CI.CHKLST_ITEM_SORT_ORDER_NUM ASC ">
            <SelectParameters>
                <asp:SessionParameter Name="PRJCT_CHKLST_PRJCT_ID" SessionField="ProjectIDSess" Type="String" />
            </SelectParameters>
        </asp:SqlDataSource>
        <asp:SqlDataSource ID="SqlDataSourcePCChkList" runat="server" ConnectionString="<%$ ConnectionStrings:DBConnectionString %>"
            ProviderName="<%$ ConnectionStrings:DBConnectionString.ProviderName %>"
            SelectCommand="SELECT   (SELECT   PRJCT_CL_ITEM_COMPLETED_DT
                  FROM   TRACKER2.PRJCT_CL_ITEM
                 WHERE   PRJCT_CL_ITEM.PRJCT_CL_ITEM_CHKLST_ITEM_ID =
                            CI.CHKLST_ITEM_ID
                         AND PRJCT_CL_ITEM.PRJCT_CL_ITEM_PRJCT_CHKLST_ID =
                               PCHCK.PRJCT_CHKLST_ID)
                  AS Completed_Date,
               CI.CHKLST_ITEM_CHKLST_ITEM_NM AS Item_Name,
               (SELECT   PC.PRJCT_CHKLST_PRJCT_ID
                  FROM   TRACKER2.PRJCT_CHKLST PC, TRACKER2.PRJCT_CL_ITEM PCI
                 WHERE       PCI.PRJCT_CL_ITEM_PRJCT_CHKLST_ID = PC.PRJCT_CHKLST_ID
                         AND PCI.PRJCT_CL_ITEM_CHKLST_ITEM_ID = CI.CHKLST_ITEM_ID
                         AND PC.PRJCT_CHKLST_PRJCT_ID = PCHCK.PRJCT_CHKLST_PRJCT_ID)
                  AS Project_Id,
             CT.CHKLST_TYPE_ID AS CheckList_Type_Id,
             CI.CHKLST_ITEM_ID AS CheckList_Item_Id
      FROM   TRACKER2.CHKLST_TYPE CT,
             TRACKER2.CHKLST_ITEM CI,
             TRACKER2.PRJCT_CHKLST PCHCK
     WHERE       CT.CHKLST_TYPE_CD = 'PCCL'
             AND CI.CHKLST_ITEM_CHKLST_TYPE_ID = CT.CHKLST_TYPE_ID
             AND CT.CHKLST_TYPE_ID = PCHCK.PRJCT_CHKLST_CHKLST_TYPE_ID(+)
             AND PCHCK.PRJCT_CHKLST_PRJCT_ID(+) = :PRJCT_CHKLST_PRJCT_ID
             ORDER BY CI.CHKLST_ITEM_SORT_ORDER_NUM ASC ">
            <SelectParameters>
                <asp:SessionParameter Name="PRJCT_CHKLST_PRJCT_ID" SessionField="ProjectIDSess" Type="String" />
            </SelectParameters>
        </asp:SqlDataSource>
        <ext:Store ID="storePOChkList" runat="server" DataSourceID="SqlDataSourcePOChkList"
            AutoLoad="true">
            <Reader>
                <ext:JsonReader ReaderID="CHECKLIST_ITEM_ID">
                    <Fields>
                        <ext:RecordField Name="COMPLETED_DATE" Type="Date" />
                        <ext:RecordField Name="ITEM_NAME" />
                        <ext:RecordField Name="PROJECT_ID" />
                        <ext:RecordField Name="CHECKLIST_TYPE_ID" />
                    </Fields>
                </ext:JsonReader>
            </Reader>
        </ext:Store>
        <ext:Store ID="storePCChkList" runat="server" DataSourceID="SqlDataSourcePCChkList"
            AutoLoad="true">
            <Reader>
                <ext:JsonReader ReaderID="CHECKLIST_ITEM_ID">
                    <Fields>
                        <ext:RecordField Name="COMPLETED_DATE" Type="Date" />
                        <ext:RecordField Name="ITEM_NAME" />
                        <ext:RecordField Name="PROJECT_ID" />
                        <ext:RecordField Name="CHECKLIST_TYPE_ID" />
                    </Fields>
                </ext:JsonReader>
            </Reader>
        </ext:Store>
        <ext:ViewPort ID="viewportProjectContact" runat="server">
            <Body>
                <ext:ColumnLayout ID="ColumnLayout1" runat="server" Split="false" FitHeight="true"
                    Cls="ColumnLayoutCss">
                    <Columns>
                        <ext:LayoutColumn ColumnWidth=".50">
                            <ext:Panel ID="Panel1" runat="server" Title="" Cls="PanelBar"
                                BodyStyle="padding:5px; background-color:#DEDEDE" Width="370" AutoScroll="true"
                                c>
                                <TopBar>
                                    <ext:Toolbar ID="POChckLstTlbr" runat="server" Height="25">
                                        <Items>
                                        <ext:ToolbarSpacer Width="5" ID="tlbrspacer" runat="server"></ext:ToolbarSpacer>
                                            <ext:Label ID="POTitleLbl" runat="server" Text="Program Officer Checklist" StyleSpec="font-weight:bold;font-size:18;" Cls="PanelBar" />
                                            <ext:ToolbarSpacer Width="10" ID="ToolbarSpacer1" runat="server"></ext:ToolbarSpacer>
                                            <ext:Label ID="Label1" runat="server" Text="Letters: " StyleSpec="font-weight:bold;font-size:18;" Cls="PanelBar" />
                                            <ext:ToolbarSpacer Width="2" ID="ToolbarSpacer2" runat="server"></ext:ToolbarSpacer>
                                              <ext:ComboBox ID="cmbxFY" runat="server" Width="140" >
                                            </ext:ComboBox>
                                            <ext:ToolbarSpacer Width="4" ID="ToolbarSpacer3" runat="server"></ext:ToolbarSpacer>
                                            <ext:ToolbarButton ID="tlbrBtnCreate" runat="server" Text="Create" Icon="DoorOut" StandOut="true">
                                          
                                            </ext:ToolbarButton>
                                        </Items>
                                    </ext:Toolbar>
                                </TopBar>
                                <Body>
                                    <ext:FitLayout runat="server" ID="projectCheckListFitLayout">
                                        <ext:GridPanel ID="grdpnlProjectCheckList" runat="server" StoreID="storePOChkList"
                                            StripeRows="true" Title="" Header="false" Border="false" ClicksToEdit="1" AutoExpandColumn="ITEM_NAME">
                                            <ColumnModel ID="ProjectsCheckListModel" runat="server">
                                                <Columns>
                                                    <ext:Column Header="" DataIndex="COMPLETED_DATE" Width="100" Sortable="false" Hideable="false"
                                                        MenuDisabled="true">
                                                        <Renderer Fn="Ext.util.Format.dateRenderer('m/d/Y')" />
                                                    </ext:Column>
                                                    <ext:Column Header="" DataIndex="ITEM_NAME" Width="220" Sortable="false" Hideable="false"
                                                        MenuDisabled="true">
                                                    </ext:Column>
                                                </Columns>
                                            </ColumnModel>
                                            <SelectionModel>
                                                <ext:CheckboxSelectionModel ID="CheckboxSelectionModel1" runat="server" HideCheckAll="true">
                                                    <AjaxEvents>
                                                        <SelectionChange OnEvent="listPOCL_Select" >
                                                            <ExtraParams>
                                                                  <ext:Parameter Name="gridData" Value="Ext.encode(#{grdpnlProjectCheckList}.getRowsValues(true))"
                                                                                    Mode="Raw" />
                                                            </ExtraParams>
                                                        </SelectionChange>
                                                    </AjaxEvents>
                                                </ext:CheckboxSelectionModel>
                                            </SelectionModel>
                                            <LoadMask ShowMask="true" />
                                            <%--
                                        <Listeners>
                                            <CellClick Fn="cellClick" />
                                        </Listeners>
                                        --%>
                                        </ext:GridPanel>
                                    </ext:FitLayout>
                                </Body>
                                <BottomBar>
                                    <ext:Toolbar ID="POChklistToolbar1" runat="server">
                                        <Items>
                                            <ext:Button ID="savePOChklist" runat="server" Icon="Disk" Text="Save PO Checklist">
                                            </ext:Button>
                                        </Items>
                                    </ext:Toolbar>
                                </BottomBar>
                            </ext:Panel>
                        </ext:LayoutColumn>
                        <ext:LayoutColumn ColumnWidth=".50">
                            <ext:Panel ID="Panel2" runat="server" Title="" Cls="PanelBar"
                                BodyStyle="padding:5px; background-color:#DEDEDE" Width="370" AutoScroll="true">
                                            <TopBar>
                                    <ext:Toolbar ID="Toolbar1" runat="server" Height="25">
                                        <Items>
                                            <ext:ToolbarSpacer Width="5" ID="ToolbarSpacer4" runat="server"></ext:ToolbarSpacer>
                                            <ext:Label ID="Label2" runat="server" Text="Program Coordinator CheckList" StyleSpec="font-weight:bold;font-size:18;" Cls="PanelBar" />
                                        </Items>
                                    </ext:Toolbar>
                                </TopBar>
                                <Body>
                                    <ext:FitLayout runat="server" ID="FitLayout1">
                                        <ext:GridPanel ID="grdpnlProjectPCChkList" runat="server" StoreID="storePCChkList"
                                            StripeRows="true" Title="" Header="false" Border="false" ClicksToEdit="1" AutoExpandColumn="ITEM_NAME">
                                            <ColumnModel ID="ColumnModel1" runat="server">
                                                <Columns>
                                                    <ext:Column Header="" DataIndex="COMPLETED_DATE" Width="100" Sortable="false" Hideable="false"
                                                        MenuDisabled="true">
                                                        <Renderer Fn="Ext.util.Format.dateRenderer('m/d/Y')" />
                                                    </ext:Column>
                                                    <ext:Column Header="" DataIndex="ITEM_NAME" Width="220" Sortable="false" Hideable="false"
                                                        MenuDisabled="true">
                                                    </ext:Column>
                                                </Columns>
                                            </ColumnModel>
                                            <SelectionModel>
                                                <ext:CheckboxSelectionModel ID="CheckboxSelectionModel2" runat="server" HideCheckAll="true">
                                                    <AjaxEvents>
                                                        <SelectionChange OnEvent="listPOCL_Select" />
                                                    </AjaxEvents>
                                                </ext:CheckboxSelectionModel>
                                            </SelectionModel>
                                            <LoadMask ShowMask="true" />
                                            <%--
                                        <Listeners>
                                            <CellClick Fn="cellClick" />
                                        </Listeners>
                                        --%>
                                        </ext:GridPanel>
                                    </ext:FitLayout>
                                </Body>
                                <BottomBar>
                                    <ext:Toolbar ID="PCchkListToolbar1" runat="server">
                                        <Items>
                                            <ext:Button ID="saveBtn" runat="server" Icon="Disk" Text="Save PC Checklist">
                                            </ext:Button>
                                        </Items>
                                    </ext:Toolbar>
                                </BottomBar>
                            </ext:Panel>
                        </ext:LayoutColumn>
                    </Columns>
                </ext:ColumnLayout>
            </Body>
        </ext:ViewPort>
        </form>
    </body>
    </html>
    Server Side

    using System;
    using System.Collections.Generic;
    using System.Web;
    using System.Web.UI;
    using System.Web.UI.WebControls;
    using Coolite.Ext.Web;
    using DataAccessLayer.Projects;
    using System.Text;
    
    namespace WebClientTrackerII.App.Projects
    {
        public partial class ProjectCheckList : WebClientTrackerII.App.Projects.ProjectController
        {
            #region Properties
            protected string _userID = String.Empty;
            protected const string _ApplicationName = "TRACKER";
            private const string _ClassName = "Check List";
            #endregion
            protected void Page_Load(object sender, EventArgs e)
            {
                if (!IsPostBack)
                {
                    Core1.SingletonUtility global = Core1.SingletonUtility.GetCurrentSingleton();
                    _userID = global.UserName;
    
    
                    string trackerNumber = Request.QueryString["trackerNumber"];
                    string userMessage = String.Empty;
    
    
                    try
                    {
                        // Load Data
                        this.LoadData(trackerNumber);
                    }
                    catch (Exception ex)
                    {
                        userMessage = ex.Message;
                        new SystemError().RecordError(ex, _userID, _ApplicationName);
                    }
    
    
                    if (!String.IsNullOrEmpty(userMessage))
                    {
                        Ext.Msg.Alert(_ClassName, userMessage).Show();
                    }
                }
            }
    
    
            #region Methods
            protected void LoadData(string trackerNumber)
            {
                ProjectsDAL prjctDAL = new ProjectsDAL();
    
    
                Session["ProjectIDSess"] = prjctDAL.GetProjectID(Convert.ToInt32(trackerNumber));
    
    
                storePOChkList.DataBind();
            }
            #endregion
    
    
            #region Events
    
    
            #endregion
    
    
            #region Ajax Events
            protected void listPOCL_Select(object sender, AjaxEventArgs e)
            {
                string gridData = e.ExtraParams["gridData"];
    
    
                Dictionary<string, string>[] grid1Data = JSON.Deserialize<Dictionary<string, string>[]>(gridData);
    
    
                foreach (IDictionary<string, string> properties in grid1Data)
                {
                    string test = "test";
                    //this.TrackerNumber = Convert.ToInt32(properties["FNDG_DOCMT_TRACKER_NUM"].ToString());
                }
            }
            #endregion
    
        }
    }
  2. #2

    RE: [CLOSED] Checkbox Selection Model in GridPanel

    Just want to clearify that I would like to set a date once the user clicks on the checkbox.

    Thank you,
  3. #3

    RE: [CLOSED] Checkbox Selection Model in GridPanel

    Hi,

    Please see the following sample
    <%@ Page Language="C#" %>
    <%@ Import Namespace="System.Collections.Generic" %>
    
    <%@ 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">
    
    <script runat="server">
        protected void Page_Load(object sender, EventArgs e)
         {
             if (!Ext.IsAjaxRequest)
             {
                 this.Store1.DataSource = new List<Company> 
                 { 
                     new Company(0, "3m Co", 71.72, 0.02, DateTime.Now.AddDays(-1)),
                     new Company(1, "Alcoa Inc", 29.01, 0.42, DateTime.Now.AddDays(-1)),
                     new Company(2, "Altria Group Inc", 83.81, 0.28, DateTime.Now.AddDays(-1))
                 };
    
                 this.Store1.DataBind();
             }
        }
    
        protected void RowSelect(object sender, AjaxEventArgs e)
        {
            string recordId = e.ExtraParams["RecordId"];
            
            // update CurDate in DB
    
            Store1.AddScript("{0}.getById({1}).set('CurDate', {2});", Store1.ClientID, recordId, Coolite.Utilities.DateTimeUtils.DateNetToJs(DateTime.Now));
            
            //if you want to avoid red triangle dirty marker
            Store1.AddScript("{0}.getById({1}).commit();", Store1.ClientID, recordId);
        }
    
        public class Company
        {
            public Company(int id, string name, double price, double change, DateTime cureDate)
            {
                this.ID = id;
                this.Name = name;
                this.Price = price;
                this.Change = change;
                this.CurDate = cureDate;
            }
    
            public int ID { get; set; }
            public string Name { get; set; }
            public double Price { get;set; }
            public double Change { get;set; }
            public DateTime CurDate { get; set; }
        }
    </script>
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head id="Head1" runat="server">
        <title></title>
    </head>
    <body>
    
        <form id="form1" runat="server">
            <ext:ScriptManager ID="ScriptManager1" runat="server" />
            
            <ext:Store ID="Store1" runat="server">
                <Reader>
                    <ext:JsonReader ReaderID="ID">
                        <Fields>
                            <ext:RecordField Name="ID" />
                            <ext:RecordField Name="Name" />
                            <ext:RecordField Name="Price" />
                            <ext:RecordField Name="Change" />
                            <ext:RecordField Name="CurDate" Type="Date" />
                        </Fields>
                    </ext:JsonReader>
                </Reader>
            </ext:Store>
            
            <ext:GridPanel 
                ID="GridPanel1" 
                runat="server" 
                StoreID="Store1"
                StripeRows="true"
                Title="Company List"
                AutoExpandColumn="Company" 
                Collapsible="true"
                Width="600"
                Height="350">
                <ColumnModel ID="ColumnModel1" runat="server">
                    <Columns>
                        <ext:Column 
                            ColumnId="Company" 
                            Header="Company" 
                            Width="160" 
                            Sortable="true" 
                            DataIndex="Name" 
                            >                       
                        </ext:Column>
                        <ext:Column Header="Price" Width="75" Sortable="true" DataIndex="Price">
                            <Renderer Format="UsMoney" />
                        </ext:Column>
                        <ext:Column Header="Change" Width="75" Sortable="true" DataIndex="Change">
                        </ext:Column>
                        <ext:Column Header="Change" Width="175" Sortable="true" DataIndex="CurDate">
                            <Renderer Fn="Ext.util.Format.dateRenderer('m/d/Y')" />
                        </ext:Column>
                    </Columns>
                </ColumnModel>
                <SelectionModel>
                    <ext:CheckboxSelectionModel runat="server">
                        <AjaxEvents>
                            <RowSelect OnEvent="RowSelect">
                                <ExtraParams>
                                    <ext:Parameter Name="RecordId" Value="record.id" Mode="Raw" />
                                </ExtraParams>
                            </RowSelect>
                        </AjaxEvents>
                    </ext:CheckboxSelectionModel>
                </SelectionModel>
            </ext:GridPanel>
        </form>
      </body>
    </html>

Similar Threads

  1. Replies: 8
    Last Post: Dec 18, 2014, 6:35 AM
  2. Question about Checkbox Selection Model in GridPanel
    By slonati_adv in forum 2.x Help
    Replies: 0
    Last Post: Jul 12, 2012, 2:19 PM
  3. [CLOSED] GridPanel with Checkbox Selection Model
    By rnfigueira in forum 1.x Legacy Premium Help
    Replies: 5
    Last Post: May 07, 2012, 2:37 PM
  4. Replies: 2
    Last Post: Dec 07, 2011, 7:00 PM
  5. Replies: 4
    Last Post: Oct 06, 2010, 9:08 AM

Posting Permissions