DetailsView inside a ModalPopupExtender

Question

I created a popup that has a detailsview inside; however, I need to be able to page through a couple of records without having to close the popup but I cannot seem to make it work. Any ideas on what I am missing would be greatly appreciated.

here is my code for the popup extender:

<asp:SqlDataSource ID="OtherJODS" runat="server" ConnectionString="<%$ ConnectionStrings:eventschedulerConnectionString %>" SelectCommand="SELECT * FROM jobordersscheduled LEFT OUTER JOIN joborders on jobordersscheduled.JobOrderNumber = joborders.JobOrderNumber WHERE GroupID = @GroupID">
    <SelectParameters>
        <asp:ControlParameter ControlID="tbgroupid" Name="GroupID" ConvertEmptyStringToNull="false" />
    </SelectParameters>
</asp:SqlDataSource>      

<ajaxToolkit:ModalPopupExtender ID="popupcontrollerdate" TargetControlID="datehiddenpopup" PopupControlID="datejopopup" CancelControlID="datebtn_Cancel"
        runat="server" PopupDragHandleControlID="popupheader" Drag="true" BackgroundCssClass="modalpopupbg">
</ajaxToolkit:ModalPopupExtender>

        <asp:Panel ID="datejopopup" runat="server">
        <asp:UpdatePanel ID="UpModal" runat="server">
        <ContentTemplate>
        <div class="popupbg">
            <div class="popupheader" id="datepopheader">Job Order Criteria</div>
            <br />
            <div>The job order you chose shares the calendar of appointments for this date with the following other job orders:</div>  
            <br /> 

            <asp:DetailsView ID="MultipleDetailGrid" runat="server" DataSourceID="OtherJODS" AutoGenerateRows="False" DataKeyNames="JobOrderNumber" GridLines="None" AllowPaging="true">

            <PagerStyle VerticalAlign="Top" />

            <PagerTemplate>
            <asp:Button ID="previousjo" runat="server" Text="<- Prev" CommandName="Page" CommandArgument="Prev" class="btn btn-primary" CausesValidation="false" />
            <asp:Button ID="nextjo" runat="server" Text="Next ->" CommandName="Page" CommandArgument="Next" class="btn btn-primary" CausesValidation="false" />
            </PagerTemplate>

                <Fields>
                    <asp:BoundField DataField="JobOrderNumber" HeaderText="Job Order:" />
                    <asp:BoundField DataField="Company" HeaderText="Company Name:" /> 
                    <asp:BoundField DataField="JobOrderPay" HeaderText="Salary Range:" />
                    <asp:BoundField DataField="JobOrderBenefitsPackage" HeaderText="Benefits Package:" />
                    <asp:BoundField DataField="MinEduReq" HeaderText="Education Required:" /> 
                    <asp:BoundField DataField="Experience" HeaderText="Experience:" />
                    <asp:BoundField DataField="HiringReq" HeaderText="Hiring Req:" />
                    <asp:BoundField DataField="LicenseReq" HeaderText="License Req:" /> 
                    <asp:BoundField DataField="JobOrderComments" HeaderText="Comments:" />                                                 
                </Fields>

            </asp:DetailsView>
            <br />
            <br />
            <div>Is this the date you wish to schedule an appointment for?</div>  
            <br />  
            <asp:Button ID="datecmdOK" runat="server" Text="OK" OnClick="datecmdOK_Click" class="btn btn-primary" CausesValidation="false" />
            <asp:Button ID="datebtn_Cancel" runat="server" Text="Cancel" class="btn btn-warning" CausesValidation="false" />
        </div>
        </ContentTemplate>
        </asp:UpdatePanel>
        </asp:Panel>

Answer 1

Use Below Code

`

<ajaxToolkit:ModalPopupExtender ID="popupcontrollerdate" TargetControlID="datehiddenpopup" PopupControlID="UpModal" CancelControlID="datebtn_Cancel"
        runat="server" PopupDragHandleControlID="popupheader" Drag="true" BackgroundCssClass="modalpopupbg">
</ajaxToolkit:ModalPopupExtender>

`

    <asp:UpdatePanel ID="UpModal" runat="server">
    <ContentTemplate>
    <asp:Panel ID="datejopopup" runat="server">
    <div class="popupbg">
        <div class="popupheader" id="datepopheader">Job Order Criteria</div>
        <br />
        <div>The job order you chose shares the calendar of appointments for this date with the following other job orders:</div>  
        <br /> 

        <asp:DetailsView ID="MultipleDetailGrid" runat="server" DataSourceID="OtherJODS" AutoGenerateRows="False" DataKeyNames="JobOrderNumber" GridLines="None" AllowPaging="true">

        <PagerStyle VerticalAlign="Top" />

        <PagerTemplate>
        <asp:Button ID="previousjo" runat="server" Text="<- Prev" CommandName="Page" CommandArgument="Prev" class="btn btn-primary" CausesValidation="false" />
        <asp:Button ID="nextjo" runat="server" Text="Next ->" CommandName="Page" CommandArgument="Next" class="btn btn-primary" CausesValidation="false" />
        </PagerTemplate>

            <Fields>
                <asp:BoundField DataField="JobOrderNumber" HeaderText="Job Order:" />
                <asp:BoundField DataField="Company" HeaderText="Company Name:" /> 
                <asp:BoundField DataField="JobOrderPay" HeaderText="Salary Range:" />
                <asp:BoundField DataField="JobOrderBenefitsPackage" HeaderText="Benefits Package:" />
                <asp:BoundField DataField="MinEduReq" HeaderText="Education Required:" /> 
                <asp:BoundField DataField="Experience" HeaderText="Experience:" />
                <asp:BoundField DataField="HiringReq" HeaderText="Hiring Req:" />
                <asp:BoundField DataField="LicenseReq" HeaderText="License Req:" /> 
                <asp:BoundField DataField="JobOrderComments" HeaderText="Comments:" />                                                 
            </Fields>

        </asp:DetailsView>
        <br />
        <br />
        <div>Is this the date you wish to schedule an appointment for?</div>  
        <br />  
        <asp:Button ID="datecmdOK" runat="server" Text="OK" OnClick="datecmdOK_Click" class="btn btn-primary" CausesValidation="false" />
        <asp:Button ID="datebtn_Cancel" runat="server" Text="Cancel" class="btn btn-warning" CausesValidation="false" />
    </div>
    </asp:Panel>
    </ContentTemplate>
    </asp:UpdatePanel>

• Just set PopupControlID to UpModal and put datejopoup inside the updatePanel