We help IT Professionals succeed at work.
Get Started

DataList control to call Modal Popup Extender

jknj72
jknj72 asked
on
669 Views
Last Modified: 2016-09-22
I have a Datalist that has a bunch of controls in it and one of the controls is an ImageButton that will come up if the DataSource field has a statusID =4. Otherwise I dont care. But if this StatusID is a 4 I show a certain image(which means that record has comments) and the user can click on that image and I want a Modal Popup Extender to popup and the fields be displayed. Now, for my modal popup I just have a table with a couple of rows inside a panel and it has 2 fields in it. The WeekID and the Comments for the Record which I have in Session.
I have tried multiple ways of getting my 2 values into these fields but I cannot seem to get this to work. I can even see the values being set but when the popup renders, it has nothing in the fields. I know it has something to do with the postback, or something like that, but I do not know how I can get this to work. I was able to add a button outside the DataList for testing and I was able to assign values to the controls in the Panel no problem but cannot do it with the DataList???....
I have been working on this for 2 days and Im going nuts, so if anyone has anything that would help me I would appreciate it. I am going to display my entire page markup so you can see everything in case I have forgotten to mention anything. The imgComments Image Button is where I would like to have the popup appear to show the comments and the weekid but I cannot seem to do it. I put a button outside of the DataList and was able to get it working with that but cannot get it to work with the image button????
PLEASE HELP!!!!!!
Also, if anyone has ANY questions related to this please just ask and I will get back ASAP!!!  THANK YOU!!!!

    <div id="addhours"> 

        <table style="width:100%">
                
            <tr>
                <td align="center">  
                    <asp:HiddenField id="hdnScrollPos" runat="server"/>                       
                </td>
            </tr>
  
            <tr>
                <td align="center">                                        
                    <asp:Button ID="btnAddWorkWeek" runat="server" Text="Create New Work Week" Height="30px" Width="200px" BackColor="#46A3FF" Font-Bold="True" Font-Size="Medium" ForeColor="White" />

                    <cc1:RoundedCornersExtender runat="server" BehaviorID="btnAddWorkWeek_RoundedCornersExtender" TargetControlID="btnAddWorkWeek" ID="btnAddWorkWeek_RoundedCornersExtender"></cc1:RoundedCornersExtender>
                </td>
            </tr>
        </table>

        <div id="SampleDataList">
        <asp:UpdatePanel ID="upDataList" runat="server" UpdateMode="Conditional">
            <contentTemplate>
                <asp:DataList ID="MyDataList" RepeatColumns="1" runat="server" CssSelectorClass="PrettyDataList" Width="100%" ShowFooter="False" BorderStyle="Solid" BorderWidth="2px" Height="95%" GridLines="Horizontal" DataKeyField="WeekID" OnSelectedIndexChanged="MyDataList_SelectedIndexChanged">
                    <HeaderTemplate>
                        <div>
                        <b>Time Sheets</b>
                        </div>
                    </HeaderTemplate>                    

                    <FooterTemplate>
                        &nbsp;
                    </FooterTemplate>

                    <ItemTemplate>
                        <div class="div_hover">
                            <div class="Sample-Contact">
                                <div class="Sample-Name">
                                    <asp:ImageButton ID="imgDeleteWeek" runat="server" CommandName="deleteweek" ImageAlign="left"  ImageUrl="~/images/cancel.ico" ToolTip="Delete Weekly Timesheet and all its contents" Visible='<%# IIf(DataBinder.Eval(Container.DataItem, "StatusID") = 1, "True", "False")%>'/> &nbsp&nbsp                

                                  THIS IS THE IMAGE BUTTON I AM SPEAKING OF......THE POPUP IS AT THE BOTTOM!!!!!!!
                                   <asp:ImageButton ID="imgComments" runat="server" CommandName="commentImage" OnClick="imgComments_Click" ImageAlign="left" ImageUrl="~/images/comments.png" ToolTip="Click icon to View Comments." Visible='<%# IIf(DataBinder.Eval(Container.DataItem, "StatusID") = 4, "True", "False")%>' /> &nbsp&nbsp
                                   <asp:HiddenField ID="hfComments" runat="server" Value='<%# DataBinder.Eval(Container.DataItem, "Comments")%>' />

                                    <asp:Image ID="imgCreated" runat="server" ImageAlign="right"  ImageUrl="~/images/report.png" ToolTip="Timesheet has been Created but has NOT been Submitted" Visible='<%# IIf(DataBinder.Eval(Container.DataItem, "StatusID") = 1, "True", "False")%>'/>
                                    <asp:Image ID="imgPending" runat="server" ImageAlign="right"  ImageUrl="~/images/hourglass.png" ToolTip="Timesheet has been Submitted and is Pending Approval." Visible='<%# IIf(DataBinder.Eval(Container.DataItem, "StatusID") = 2, "True", "False")%>'/>
                                    <asp:Image ID="imgApproval" runat="server" ImageAlign="right" ImageUrl="~/images/award_star_gold_2.png" ToolTip="Timesheet has been Approved." Visible='<%# IIf(DataBinder.Eval(Container.DataItem, "StatusID") = 3, "True", "False")%>'/>                                
                                    <asp:Image ID="imgRejected" runat="server" ImageAlign="right" ImageUrl="~/images/deleted.png" ToolTip="Timesheet has been Rejected. Please see comments for reason(s)." Visible='<%# IIf(DataBinder.Eval(Container.DataItem, "StatusID") = 4, "True", "False")%>'/> <br />
                                    
                                    <b>Week #:</b>                                    

                                    <b><asp:Label ID="lblWeekNumber" runat="server" Text='<%# DataBinder.Eval(Container.DataItem, "WeekID")%>'></asp:Label></b><br />

                                    <asp:Label ID="lblWeekRange" runat="server" Text='<%# DataBinder.Eval(Container.DataItem, "WeekRange")%>' ></asp:Label>                                                       
                                    <asp:HiddenField ID="hfWeekRange" runat="server" value='<%# DataBinder.Eval(Container.DataItem, "WeekRange")%>' />
                                </div>
                                <br />
                                <div class="Sample-Address">
                                    <b style="text-decoration: underline">Totals:</b>
                                    <br />
                                    Work Items: 
                                    <asp:Label ID="lblWorkCount" runat="server" Text='<%# DataBinder.Eval(Container.DataItem, "WorkCount")%>'></asp:Label><br />

                                    Travel Items:
                                    <asp:Label ID="lblTravelCount" runat="server" Text='<%# DataBinder.Eval(Container.DataItem, "TravelCount")%>'></asp:Label><br />

                                    Receipt Items: 
                                    <asp:Label ID="lblImageCount" runat="server" Text='<%# DataBinder.Eval(Container.DataItem, "ImageCount")%>'></asp:Label><br />

                                    <%--<asp:HiddenField ID="hfComments" runat="server" value='<%# DataBinder.Eval(Container.DataItem, "Comments")%>' />                                             --%>
                                    <asp:HiddenField ID="hfStartDay" runat="server" value='<%# DataBinder.Eval(Container.DataItem, "StartWorkDay")%>' />      
                                </div>
                                <br />
                                <div class="Sample-Link">
                                    <asp:LinkButton ID="lnkComments" runat="server" CommandName="showweek" Visible='<%# IIf(DataBinder.Eval(Container.DataItem, "StatusID") = 4, "True", "False")%>'>Click Above for Manager Comments</asp:LinkButton>  
                                    <asp:LinkButton ID="LinkButton1" runat="server" CommandName="showweek" OnClick="LinkButton1_Click" OnClientClick="SetLabel(lblWeekRange);" onblur="SetLabelValue()" Visible='<%# IIf(DataBinder.Eval(Container.DataItem, "StatusID") = 4, "False", "True")%>' >Show Week Details</asp:LinkButton>
                                </div>
                                 <br />
                                <div align="center">                                    
                                    <asp:LinkButton ID="btnSubmitApproval" runat="server" CommandArgument='<%# Eval("StatusID")%>' CommandName="setapproval" Text="Submit For Approval" Height="30px" Width="200px" BackColor="#46A3FF" Font-Bold="True" Font-Size="Medium" ForeColor="White" Font-Underline="false" Visible='<%# IIf(DataBinder.Eval(Container.DataItem, "StatusID") = 1, "True", "False")%>'></asp:LinkButton>
                                    <asp:Button ID="btnWaitingOnApproval" runat="server" CommandArgument='<%# Eval("StatusID")%>' CommandName="awaitingapproval" Text="Pending Approval" Height="30px" Width="200px" BackColor="Gray" Font-Bold="True" Font-Size="Medium" ForeColor="Maroon" Enabled="false" Visible='<%# IIf(DataBinder.Eval(Container.DataItem, "StatusID") = 2, "True", "False")%>' />                                                                      
                                </div>
                            </div>
                        </div>
                    </ItemTemplate>

                    <SelectedItemStyle BorderColor="Yellow" BorderStyle="Solid" />                   

                </asp:DataList>
            </contentTemplate>
            <Triggers>
                <asp:AsyncPostBackTrigger ControlID="btnAddWorkWeek" />
            </Triggers>
        </asp:UpdatePanel>
    </div>

    </div>

    <div id="timesheet">     
        <div id="radio">
            <asp:RadioButtonList ID="rbItems" runat="server" AutoPostBack="true" RepeatDirection="Horizontal" OnSelectedIndexChanged="rbItems_SelectedIndexChanged">
                <asp:ListItem Text="Work Items" Value="1" Selected="True" />
                <asp:ListItem Text="Travel Items" Value="2" />
                <asp:ListItem Text="Receipt Items" Value="3"/>
            </asp:RadioButtonList>
            
        </div>
        <br />
        <br />
        <br />
        <table>
            <tr align="left">   
                <td style="padding-left:10px;">
                    <asp:ImageButton ID="imgAddItem" runat="server" ImageUrl="~/images/ADD_UP.jpg" OnClick="imgAddItem_Click" ImageAlign="Left"  />
                   
                </td>
                <td align="center">&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp
                    <asp:Label ID="gvLabel" runat="server" text="Item Records for Week Range "></asp:Label>&nbsp&nbsp
                    <asp:label ID="lblWeekRangeGrid" runat="server" Width="220px" BorderWidth="0" onfocus="SetLabelValue()"></asp:label>
                </td>
            </tr>
            <br />
        </table>
        <br />
        <asp:UpdatePanel ID="upMain" runat="server" UpdateMode="Conditional" ChildrenAsTriggers="true">            
            <ContentTemplate>                                                 
                <uc1:myGridview ID="myGridview" runat="server" AllowPaging="true" AllowSorting="true" DataKeyNames="ItemDetailID"  
                    OnSorting="GridView_Sorting"   
                    OnRowDataBound="GridView_RowDataBound"
                    OnHeaderFormatting ="GridView_HeaderFormatting" />                                           
                      
            </ContentTemplate>
            <Triggers>
                <asp:AsyncPostBackTrigger ControlID="MyDataList" EventName="ItemCommand" />                
            </Triggers>
        </asp:UpdatePanel>


        <div style="float:right;padding-right:30px;">
            <asp:Button ID="btnExportWord" runat="server" Text="Export To Word" OnClick="btnExportWord_Click" BackColor="#46A3FF" Height="30px" Width="140px" CssClass="" Font-Bold="True" ForeColor="White" Font-Size="Medium"/>
            <cc1:RoundedCornersExtender runat="server" BehaviorID="btnExportWord_RoundedCornersExtender" TargetControlID="btnExportWord" ID="btnExportWord_RoundedCornersExtender"></cc1:RoundedCornersExtender>
        </div>  
        <asp:LinkButton ID="lnkDummy" runat="server"></asp:LinkButton>

        <%--Popup for creating work week items--%> 
        <asp:Button ID="btnPopup" runat="server" Text="PopUp" style = "display:none" />
        <cc1:modalpopupextender ID="mp1" runat="server" PopupControlID="Panl1" TargetControlID="btnPopup" BackgroundCssClass="Background">
        </cc1:modalpopupextender> 

        <asp:Panel ID="Panl1" runat="server" CssClass="Popup" align="center" visible="true" style="display:none;">
            <iframe id="irm1" src="Item_Create_popup.aspx" runat="server" style="text-align:center"></iframe>
            <%--<div class="popup_Buttons" style="display: block">
                <input id="btnOkay" type="button" value="Done"  />
                <input id="btnCancel" type="button" value="Cancel" onclick="" />
            </div>--%>
            <asp:Button ID="btnClose" runat="server" Text="Close" BackColor="#46A3FF" Height="30px" Width="140px" CssClass=""  Font-Bold="True" ForeColor="White" Font-Size="Medium" OnCommand="btnClose_Command" />
                    
        </asp:Panel> 

          
        <%--Popup for showing Calnedar and creating work week--%> 
        <cc1:modalpopupextender ID="mpCalendar" runat="server" PopupControlID="pnlCalendar" TargetControlID="btnAddWorkWeek" >
        </cc1:modalpopupextender>

    <asp:Panel ID="pnlCalendar" runat="server" CssClass="Popup" align="center" style="display:none; width: 365px; height: 460px;">
        <asp:UpdatePanel ID="upCalendar" runat="server">
            <ContentTemplate>
                <uc1:CalendarControl ID="CalendarControl" runat="server" />
            </ContentTemplate>
        </asp:UpdatePanel>
        <br />
        <asp:Button ID="btnCloseCalendar" runat="server" Text="Close" BackColor="#46A3FF" Height="30px" Width="100px" CssClass="" Font-Bold="True" ForeColor="White" Font-Size="Medium"  />
        <cc1:RoundedCornersExtender ID="btnCloseCalendar_RoundedCornersExtender" runat="server" BehaviorID="btnCloseCalendar_RoundedCornersExtender" TargetControlID="btnCloseCalendar" Corners="All" />

    </asp:Panel>

THIS IS THE POPUP I AM HAVING TROUBLE WITH!!!!!!!
[b]    <%--New Popup Control for Comments THIS IS THE PANEL I AM HAVING TROUBLE WITH --%>[/b]
    <asp:HiddenField ID="HiddenField1" runat="server" />
    <asp:Button ID="btnLaunchModal" runat="server" Text="Modal" OnClick="btnPopup_Click" />
    <cc1:ModalPopupExtender ID="PopupModal" runat="server" TargetControlID="HiddenField1"
                            CancelControlID="btnClosePopup" PopupControlID="Panel1" BackgroundCssClass="myModalCss">
    </cc1:ModalPopupExtender>

    <asp:Panel ID="Panel1" runat="server" BorderColor="Black" BorderStyle="Solid" 
                                          BorderWidth="1" Width="500px" Height="300px">
        <asp:TextBox ID="TextBox1" runat="server" Text="AAA" ></asp:TextBox><br /><br />  <%-- Visible="false" Width="0" Height="0"--%>
        <asp:Label ID="lblPopup" runat="server" Text="AAA"></asp:Label><br /><br />    <%--Visible="false"--%>

        <asp:Button ID="btnClosePopup" runat="server" OnClick="btnPopup_Click" Text="Back" />

         <table width="100%" style="border:3px Solid #7092BE; width:100%; height:100%" cellpadding="0" cellspacing="0">
        
            <tr style="background-color:#7092BE;padding:5px">
                <td colspan="2" style=" height:10%; color:White; font-weight:bold; font-size:larger" align="center">Timesheet Comments</td>
            </tr>

            <tr style="padding:5px;padding-top:10px;">
                <td align="right" style=" width:45%">
                    Week ID:
                </td>
                <td>
                    <asp:Label ID="lblWeekID" runat="server" Text=""></asp:Label>
                </td>
            </tr>

            <tr style="padding:5px;padding-top:10px;">
                <td align="right" style="vertical-align:top;">
                    Comments:
                </td>
                <td>
                    <asp:TextBox ID="txtCommentItem" runat="server" Text="" TextMode="MultiLine" Width="240px" Height="160px"/>
                </td>
            </tr>

            <tr>
                <td align="center">
                    <asp:Button ID="btnOk" runat="server" Text="Cancel" OnClick="btnOk_Click" Width="120px"/>
                </td>
            </tr>
        </table>

    </asp:Panel>


</div>

Open in new window

Comment
Watch Question
Lead Developer
Commented:
This problem has been solved!
Unlock 1 Answer and 10 Comments.
See Answer
Why Experts Exchange?

Experts Exchange always has the answer, or at the least points me in the correct direction! It is like having another employee that is extremely experienced.

Jim Murphy
Programmer at Smart IT Solutions

When asked, what has been your best career decision?

Deciding to stick with EE.

Mohamed Asif
Technical Department Head

Being involved with EE helped me to grow personally and professionally.

Carl Webster
CTP, Sr Infrastructure Consultant
Ask ANY Question

Connect with Certified Experts to gain insight and support on specific technology challenges including:

  • Troubleshooting
  • Research
  • Professional Opinions
Did You Know?

We've partnered with two important charities to provide clean water and computer science education to those who need it most. READ MORE