Model popup extender

Question

0.00/5 (No votes)

See more:

I implementing ajax modal popup for some details showing purpose. In that, popup I implemented grid. now what is problem means when I click paging and sorting in popup will hide. how to recover this problem

What I have tried:

ASP.NET

<div class="table-responsive">
                               <asp:UpdatePanel runat="server">
                                   <ContentTemplate>
                                       <asp:GridView runat="server" Width="80%" PageSize="5" ID="presenteruploadfilegrid" AutoGenerateColumns="false" SkinID="gridviewSkin"
                                           AllowPaging="true" AllowSorting="true" OnRowDataBound="presenteruploadfilegrid_RowDataBound" OnDataBound="presenteruploadfilegrid_DataBound"
                                           OnRowCommand="presenteruploadfilegrid_RowCommand" OnPageIndexChanging="presenteruploadfilegrid_PageIndexChanging" OnSorting="presenteruploadfilegrid_Sorting">
                                           <Columns>
                                               <asp:TemplateField HeaderText="File Type" SortExpression="DocumentTypeDesc" ItemStyle-Width="20%">
                                                   <ItemTemplate>
                                                       <asp:Label runat="server" BorderStyle="None" Width="100%" Text='<%#Eval("DocumentTypeDesc") %>'></asp:Label>
                                                   </ItemTemplate>
                                               </asp:TemplateField>
                                               <asp:TemplateField HeaderText="File Name" SortExpression="FileName" ItemStyle-Width="40%">
                                                   <ItemTemplate>
                                                       <asp:Label runat="server" ID="lblFileName" BorderStyle="None" Width="100%" Text='<%#Eval("FileName") %>'></asp:Label>
                                                   </ItemTemplate>
                                               </asp:TemplateField>
                                               <asp:TemplateField HeaderText="Uploaded Date" SortExpression="CreatedDate" ItemStyle-Width="20%">
                                                   <ItemTemplate>
                                                       <asp:Label runat="server" BorderStyle="None" Width="90" Text='<%#Eval("CreatedDate") %>'></asp:Label>
                                                   </ItemTemplate>
                                               </asp:TemplateField>
                                               <asp:TemplateField ItemStyle-Width="10%" ItemStyle-HorizontalAlign="Center">
                                                   <ItemTemplate>
                                                       <asp:Button runat="server" Width="100%" ID="btnview" CssClass="btn btn-primary btn-xs" Text="View" CommandName="View" />
                                                       <asp:HiddenField ID="HiddenDocumentID" Value='<%#Eval("UserDocumentId") %>' runat="server" />
                                                   </ItemTemplate>
                                               </asp:TemplateField>
                                           </Columns>
                                           <PagerStyle CssClass="pageStyle" />
                                           <PagerSettings Mode="NumericFirstLast" PageButtonCount="5" />
                                       </asp:GridView>
                                       <asp:HiddenField ID="HiddenSortingStatus" runat="server" />
                                       <asp:Panel runat="server" ID="panelpagination" Visible="false" CssClass="paging_div">
                                           <asp:Label ID="lblpagetotal" runat="server" Visible="false" />
                                       </asp:Panel>
                                   </ContentTemplate>
                                   <Triggers>
                                       <asp:PostBackTrigger ControlID="presenteruploadfilegrid" />
                                   </Triggers>
                               </asp:UpdatePanel>
                           </div>
                           <asp:Button runat="server" CssClass="pull-right btn btn-primary" ID="close" Text="Close" Style="margin-bottom:10px;" OnClick="close_Click" />

                       </div>

Posted 21-Jul-16 20:57pm

MalathiMals

Updated 21-Jul-16 23:32pm

Add a Solution

2 solutions

Solution 2

C#

I assume u r calling serverside events for paging and sorting. 
Call paging and sorting using Ajax and i should not hide ur popup.

Posted 21-Jul-16 23:32pm

Abrar Kazi

Comments

MalathiMals 22-Jul-16 5:44am

can u provide any examples

Vincent Maverick Durano 22-Jul-16 6:06am

You can't call the server-side events of gridview thru AJAX. You may need to create your own client-side grid for you to be able to add the client-side paging and sorting functionality. And yes you have to deal with data via AJAX.

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Vincent Maverick Durano · Accepted Answer · 2016-07-21T23:31:00

Solution 1

use a fake/dummy button as the target control for your modal popup. Just set style="display:none" so it will become invisible. For example:

ASP.NET

<asp:linkbutton id="lnkTarget" runat="server" style="displaye:none;" xmlns:asp="#unknown" />
<asp:panel id="pnlPopUp" runat="server" style="display:none" cssclass="modal" xmlns:asp="#unknown">
    Your content
</asp:panel>
<asp:modalpopupextender id="ModalPopupExtender1" runat="server" targetcontrolid="lnkTarget" popupcontrolid="pnlPopUp" backgroundcssclass="modal-bg" xmlns:asp="#unknown">
</asp:modalpopupextender>

Then call:

C#

ModalPopUpExtender1.Show();

In the event where you show the modal, on paging and on sorting event.

Posted 21-Jul-16 23:31pm

Vincent Maverick Durano

Comments

MalathiMals 22-Jul-16 5:44am

yes i implemented like this. in that panel i used grid view. when i click sorting paging only that popup hide

Vincent Maverick Durano 22-Jul-16 5:49am

That's why you need show the popup after sorting or paging by calling Modal1.Show();

MalathiMals 22-Jul-16 5:52am

ya that's work but every time taking load operation. when I click sorting one column that's go one min and then come

Vincent Maverick Durano 22-Jul-16 6:04am

that's normal since the the server paging/sorting will tigger a full postback to recreate the page.

You can use LINQ to do custom paging. LINQ has powerful operators , the Take() and Skip() allows you to skip a certain number of rows, and only take a limited number of rows from that point. For example we set the page size to 10 which means that it will only select and display 10 records per page instead of selecting the entire results from the database. For example see: http://www.c-sharpcorner.com/UploadFile/8c19e8/implement-custom-paging-in-gridview-with-linq/

If you want to avoid database hits when you do paging then you can apply data caching and so you can reference the data from the cache and use that data to perform paganation.