modalpopupextender GridView подкачки не работает

Question

GridView подкачки в выпуске modalpopupextender : У меня есть GridView в modalpopupextender ... но дело в том, пейджинг не работает внутри ....

Мой HTML-код:

<asp:UpdatePanel ID="UpdatePanel2" runat="server"> 
<ContentTemplate> 
<asp:gridview runat="server" id="GridView2" showfooter="true" 
    autogeneratecolumns="false" GridLines="None" CssClass="table" 
    HeaderStyle-CssClass="th" RowStyle-CssClass="td" Width="100%" 
    OnRowCreated="GridView2_RowCreated" > 
    <columns> 

     <asp:TemplateField HeaderText="Date" > 
<ItemTemplate> 
<asp:LinkButton ID="Date" runat="server" CausesValidation="false" CommandName="Date_Select" Text='<%#Eval("Date","{0:yyyy-MM-dd}") %>' onclick="Date1_Click" EnableTheming="False"></asp:LinkButton> 


</ItemTemplate> 
<EditItemTemplate> 

</EditItemTemplate> 
</asp:TemplateField> 


     <asp:boundfield datafield="" headertext="Total" footerstyle-font-bold="true" 
      footertext="Grand Total:" > 
<FooterStyle Font-Bold="True"></FooterStyle> 
     </asp:boundfield> 

     <asp:boundfield datafield="MIns" headertext="Mins" 
      footerstyle-font-bold="true" > 
<FooterStyle Font-Bold="True"></FooterStyle> 
     </asp:boundfield> 
     <asp:boundfield datafield="Amount" headertext="Amount" footerstyle-font-bold="true" 
      > 
<FooterStyle Font-Bold="True"></FooterStyle> 
     </asp:boundfield> 

     <asp:boundfield datafield="Profit" headertext="Profit" 
      footerstyle-font-bold="true"> 
<FooterStyle Font-Bold="True"></FooterStyle> 
     </asp:boundfield> 

    </columns> 

<HeaderStyle BackColor="#CEFF99" ForeColor="Black" BorderColor="#C1FF80" BorderStyle="Solid" 
       BorderWidth="1px"></HeaderStyle> 

<RowStyle CssClass="td"></RowStyle> 
</asp:gridview> 


<asp:Button runat="server" ID="btnModalPopUp1" 
     style="display:none"/> 


<AjaxToolkit:ModalPopupExtender ID="modalPopUpExtender2" 
     runat="server" 
     TargetControlID="btnModalPopUp1" 
     PopupControlID="pnlPopUp1" 
     BackgroundCssClass="modalBackground" CancelControlID="btnCancel1" X="570" Y="10" 
     > 
</AjaxToolkit:ModalPopupExtender> 
      <asp:UpdateProgress ID="UpdateProgress2" runat="server" AssociatedUpdatePanelID="UpdatePanel2"> 
    <ProgressTemplate> 
     <div class="modal"> 
     <div class="center" align="center"> 
      This can take a while. Please be patient... 
      <img alt="" src="Images/loader.gif" /> 
     </div> 
     </div> 
     </ProgressTemplate> 
    </asp:UpdateProgress> 


<asp:Panel runat="Server" ID="pnlPopUp1" CssClass="modalPopup"> 
<asp:Button runat="server" ID="btnCancel1" 
     Text="Close"/> 
<asp:gridview runat="server" id="GridView18" showfooter="true" 
    autogeneratecolumns="false" GridLines="None" CssClass="table" 
    HeaderStyle-CssClass="th" RowStyle-CssClass="td" Width="100%" 
    AllowPaging="True" OnPageIndexChanging="OnPageIndexChanging" PageSize="10" 
    EnableSortingAndPagingCallbacks="True" > 
    <columns> 

     <asp:boundfield datafield="Customer" headertext="Customer" 
      footerstyle-font-bold="true" > 
    <FooterStyle Font-Bold="True"></FooterStyle> 
     </asp:boundfield> 


     <asp:boundfield datafield="MIns" headertext="Mins" footerstyle-font-bold="true" > 
<FooterStyle Font-Bold="True"></FooterStyle> 
     </asp:boundfield> 
     <asp:boundfield datafield="Amount" headertext="Amount" 
      footerstyle-font-bold="true" > 
<FooterStyle Font-Bold="True"></FooterStyle> 
     </asp:boundfield> 
     <asp:boundfield datafield="Profit" headertext="Profit" footerstyle-font-bold="true" 
      > 
<FooterStyle Font-Bold="True"></FooterStyle> 
     </asp:boundfield> 



    </columns> 

<HeaderStyle BackColor="#CEFF99" ForeColor="Black" BorderColor="#C1FF80" BorderStyle="Solid" 
       BorderWidth="1px"></HeaderStyle> 

    <RowStyle CssClass="td"></RowStyle> 
</asp:gridview> 
</asp:Panel> 



</ContentTemplate> 
<Triggers> 
<asp:AsyncPostBackTrigger ControlID = "GridView18" EventName="PageIndexChanging" /> 

    </Triggers> 
    </asp:UpdatePanel> 

Это мой код для пейджинга за:

protected void OnPageIndexChanging(object sender, GridViewPageEventArgs e) 
{ 
    GridView18.DataSource = ds; 
    GridView18.PageIndex = e.NewPageIndex; 
    GridView18.DataBind(); 
    modalPopUpExtender2.Show(); 

    } 

Любая помощь высоко ценится ... Спасибо заранее ...

Answer 1

Первое: если вы идете в MSDN concerning UpdatePanels и прокрутите вниз до раздела:

управления, которые Не совместим с элементами управления UpdatePanel

Вы найдете это:

• Элементы управления GridView и DetailsView, если для свойства EnableSortingAndPagingCallbacks установлено значение true.

Paging a Gridview требует обратной передачи. Обычно, когда вы используете какой-либо вид модального/всплывающего управления, он использует JS для активации. Но обратная передача устраняет всплывающее окно ... так что ...

Главное, что вам нужно иметь возможность поддерживать всплывающее состояние между postbacks. Есть несколько способов справиться с этим.

Проще всего исключить пейджинг и использовать прокрутку, если общее количество элементов является управляемым списком. Если список слишком длинный, вероятность того, что он тоже слишком много информации для пользователя, и должен быть отфильтрован в управляемый список.

Если вы должны использовать пейджинг, вам нужно использовать всплывающее управление, которое может выдерживать обратные вызовы, что может означать использование . Я не знаю достаточно об AjaxControlToolkit, чтобы сказать, можно ли это сделать.

Лично, когда мне нужно было делать то, что вы пытаетесь сделать с помощью всплывающего окна, я использую Colorbox. Но для этого также требуется jQuery.

Перемещение сетки на отдельную страницу и настройку Colorbox для открытия страницы в iframe. Таким образом, iframe управляет обратной почтой.