How to populate GridView(with Paging) & show in ModalPopup when click on asp button?

Question

I'm a beginner of AjaxControlToolKit. I'm trying to populate GridView & show in ModalPopup when click on asp button. Paging should be enabled in gridview in popup. How can I do that ?

Show what you have so far. It's easy to use a gridview with SqlDataSource. How do you play on populating the gridview? — Humpy, Sep 27 '13 at 19:04
Thanks Humpy for your response. I want to click on ASP button, then a jquery popup will appear with gridview. I dont want to populate Grid at Page load event. Grid must enable paging property enable. How can I achieve that ? — Temp Expt, Sep 28 '13 at 05:21
So you want to have the user click on the button, then a modal popup appears with the gridview information? — Humpy, Sep 30 '13 at 12:12

score 0 · Answer 1 · edited Sep 30 '13 at 12:48

If I understood you correctly, you can do it this way. I think it will be easier for you to use jQuery instead of the AjaxControlToolkit for what you are trying to do. You will want to install the jQuery plugins, and the easiest way to do this is using the NuGet package manager in Visual Studio. You will just search jQuery and the libraries you need should show up. Then you will want to put this in the header (or right after the tag).

JQUERY:

 <script type="text/javascript">
          function showpopup() {
                 $("#popup").dialog({
                  modal: true,
                  width: 590,
                  buttons: {
                  Ok: function () {
                  $(this).dialog("close");
                   }
                }
              });
           };
 </script>

This is the popup that will display. As you can tell, this popup does not have a gridview in it, but it is calling a function "#popup". This is where your gridview will be. And this is how mine looks with a few extra controls such as a button and a label.

HTML Markup:

 <div class="popUpStyle" title="Duplicate Deal Found!" id="popup" style="display: none">
    <asp:GridView ID="gvDealTracking" runat="server" Width="200px" AutoGenerateColumns="False">
      <Columns>
    <asp:TemplateField HeaderText="VehicleID" HeaderStyle-Wrap="false" Visible="false">
        <ItemTemplate>
         <asp:Label ID="lblDupVehicleID" runat="server" Text='<%# Bind("VehicleID") %>'></asp:Label>
        </ItemTemplate>
        <HeaderStyle Wrap="False" />
   </asp:TemplateField>
    <asp:TemplateField HeaderText="Stock #" HeaderStyle-Wrap="false">
       <ItemTemplate>
          <asp:Label ID="lblDupStockNumber" runat="server" Text='<%# Bind("StockNumber") %>'></asp:Label>
        </ItemTemplate>
     <HeaderStyle Wrap="False" />
</asp:TemplateField>
              ..... 
              ....
        </Columns>
</asp:GridView>
                <br />
 <asp:Button ID="btnUse" runat="server" UseSubmitBehavior="false" CausesValidation="false" OnClick="btnUse_Click" Text="Use"></asp:Button>
 <asp:Label ID="lblMessagePop" runat="server"></asp:Label>
          <br />
 </div>

As you can see in the that has the grid in it does have a css style attached to it (class="popUpStyle"). Mine looks like this..

CSS:

.wm {
        color: Gray;
 }

 .popUpStyle {
    font: normal 11px auto "Trebuchet MS", Verdana;
      /*background-color: gray;*/
      color: black;
      padding: 6px;
      filter: alpha(opacity=80);
      opacity: 0.8;
 }

You want to put this after the as well. You can then populate this gridview in the page load or any way you want to. The way I populate mine is that it checks to see if the "DealNumber" already exists in the database, and if it does, then this popup is shown. I'm not sure how you plan on populating the gridview, but since you said you want it on page load, you can use a DataTable.. something like..

Code behind c#:

   DataTable dt = new DataTable();
   SqlDataAdapter cmdReturnExisting = new SqlDataAdapter("SELECT VehicleID, StockNumber, Dealership, FIMAST, DealDate, Buyer, GrossProfit, AmtFinanced, BankName FROM Vehicle WHERE FIMAST = '" + DealNumber + "';", conn);
     cmdReturnExisting.Fill(dt);
     gvDealTracking.DataSource = dt;
     gvDealTracking.DataBind();

You'd want that in your page load, but don't forget to put this in your button click in the behind code...

Page.ClientScript.RegisterStartupScript(this.GetType(), "Call my function", "showpopup();", true);

This, in my opinion is going to be a better way to do this then using the AjaxControlToolkit. I hope this helps.

one suggestion always do parameterized query http://stackoverflow.com/questions/5468425/how-do-parameterized-queries-help-against-sql-injection — Satinder singh, Sep 30 '13 at 12:52

score 0 · Answer 2 · answered Sep 30 '13 at 12:46

Copy this code to your page and just edit the Gridview according to your requirements.

<asp:Button ID="btnGrdPopup" runat="server" Text="Show Grid" />

        <ajaxToolkit:ConfirmButtonExtender ID="cbe" runat="server" DisplayModalPopupID="mpeConfirmBox"
            TargetControlID="btnGrdPopup">
        </ajaxToolkit:ConfirmButtonExtender>
        <ajaxToolkit:ModalPopupExtender ID="mpeConfirmBox" runat="server" PopupControlID="pnlPopup"
            TargetControlID="btnDetailPopup" CancelControlID="btnCancel" BackgroundCssClass="modalAppInfoBackground">
        </ajaxToolkit:ModalPopupExtender>




  <asp:Panel runat="server" ID="pnlPopup" Width="450" 
                    Style="display: none;">
                   <asp:Gridview runat="server" ID="gdv">
                         <%-- Your gridview inner code --%>
                   </asp:Gridview>
                  <asp:button runat="server" ID="btnCancel" Text="Cancel"> </asp:Button>
                </asp:Panel>

How to populate GridView(with Paging) & show in ModalPopup when click on asp button?

2 Answers2