asked on

DataList control to call Modal Popup Extender

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

Ramkisan Jagtap

How are you tring to make popup visible on link button click?

try to put following code on your link button click event.

protected void LinkButton1_Click(object sender, EventArgs e)
{
PopupModal.Show();
}

jknj72

ASKER

In the Popup I have the following code

<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>

Open in new window

I have the HiddenField1 here assigned as the TargetControlID as a dummy field, Then in the click of the btnPopup, I assign the values to the controls and then do the Show in the popup. This is when I was testing the popup modal to make sure it would work from outside the DataLIst, and it does.. .
Here is that code

    Protected Sub btnPopup_Click(sender As Object, e As EventArgs)
        lblWeekID.Text = Session("WeekID")
        txtComments.Text = Session("Comments")
        PopupModal.Show()
    End Sub

Open in new window

My problem is that I do not want to use the button Popup button because it doesnt have anything to do with the app, I want to use the click of the image button. So while testing I wanted to make sure I can assign the Session vars in the imgComments click and I was able to do it, with the code below.
I probably should have put this piece of code in yesterday but here is the code for the image click event
And the Session vars have the correct values and if I check the .Text properties of the lblWeekID and txtComments when I step through the code, before I do the Show, the values are there. They just dont appear when the popup renders....

    Protected Sub imgComments_Click(sender As Object, e As ImageClickEventArgs)
        Dim imgBtn As ImageButton = TryCast(sender, ImageButton)
        Dim hfComments As HiddenField = DirectCast(imgBtn.NamingContainer.FindControl("hfComments"), HiddenField)
        Dim lWeekID As Label = DirectCast(imgBtn.NamingContainer.FindControl("lblWeekNumber"), Label)

        Session("Comments") = hfComments.Value
        Session("WeekID") = lWeekID.Text
       
        PopupModal.Show()
    End Sub

Open in new window

PS -
Just an FYI, I am writing a timesheet application. The employee submits the timesheet (status is set to 2=Submitted) and the manager will either Approve(Status=3) or the manager Rejects(Status=4) the timesheet and that is where I am at right now. The employee trying to view the Managers rejected comments.
I just want to click on the image for the comments and show the comments for the employee to view. I also have to show a popup on the Supervisor page so the values can be written to the db but I started on the Employee side of things first. Employee will have to read the comments when the manager has inserted them for a specific week.
Please help me with this I can really use the assistance!!

Ramkisan Jagtap

You have written really good description of your problem. But still not clear where you can see the comments and weekid is it on popup?

You want to show the values on the popup, right?
Try this one.

 Protected Sub imgComments_Click(sender As Object, e As ImageClickEventArgs)
        Dim imgBtn As ImageButton = TryCast(sender, ImageButton)
        Dim hfComments As HiddenField = DirectCast(imgBtn.NamingContainer.FindControl("hfComments"), HiddenField)
        Dim lWeekID As Label = DirectCast(imgBtn.NamingContainer.FindControl("lblWeekNumber"), Label)

        Session("Comments") = hfComments.Value
        Session("WeekID") = lWeekID.Text
       
         lblWeekID.Text = lWeekID.Text
        txtComments.Text = hfComments.Value

        PopupModal.Show()
    End Sub

Open in new window

jknj72

ASKER

I have tried this and it does not refresh the controls with the new vaues. I have attached a screenshot of the code that I have checked the values with and the Popup with no values...
I wish it was this easy but I have tried every variation of this. I believe that the problem has something to do with the Popup not posting back. Also, the problem has got to have something to do with the DataList because if I put a button on the form and in the Click event run the same code as in the pic, everything works fine. I believe, because Im relatively new to this, that the DataList is some type of container control and there is some type of heirarchy that is involved with it so Im not sure if that is messing me up or not. I do however find it weird that I cant click on a button in the DataList and have the values set but I can click on a button outside the datalist and everything run fine!!!!
Very depressing!!! Thanks for sticking with me though....

ASKER CERTIFIED SOLUTION

Ramkisan Jagtap

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

jknj72

ASKER

Hey sorry I didnt attach the pic that I had for you. Im gonna try your suggestion and will let you know...

jknj72

ASKER

I cant explain how happy I am because your suggestion worked on the first try. Also, Im pretty bummed out that I didnt try this already, but hey live and learn.

Thank you so much for your help. This was really holding me up and now I can move on....

THANKS AGAIN!!!
-JK

jknj72

ASKER

great job!!

Ramkisan Jagtap

hey nice to hear that it worked!!!

Reason was your button was inside the update panel and Modal papup was outside. so when you were clicking the button it was doing postback only for the update panel. So it wasn't updating it.

I was quite sure that its gonna work if we put the modalpopup markup inside the updatepanel.

jknj72

ASKER

looking back at it, it sure make complete sense. I tend to overlook the obvious sometimes. I knew getting someone elses eyes on it would get it figured out. Thanks again!!