Ajax Modal Popup Extender And gridview

Collapse
X
Collapse
 
  • Page of 2
  • Time
  • Show
Clear All
new posts
Previous 1 2 template Next
  • malav123
    New Member
    • Feb 2008
    • 217
    #1

    Ajax Modal Popup Extender And gridview

    Hi,
    I am using Ajax's modal popup extender to display the information about all the rows of gridview but the problem is when page loads, modal popup extender loads for all the rows... but i want to implement the same as when i request for particular row at that time modal popup should be load.... because it's take so much execution time when the page loads... so is there any solution of my problem ??? I am waiting for Reply...

    thanks in advance.....


    -malav.
    Tags: modalpopup gridview
    • acoder
      Recognized Expert MVP
      • Nov 2006
      • 16032
      #2
      Post what code you have so far.

        Comment

        • malav123
          New Member
          • Feb 2008
          • 217
          #3
          Originally posted by acoder
          Post what code you have so far.

          Means which code you want to see ? code of design or coding ???

            Comment

            • acoder
              Recognized Expert MVP
              • Nov 2006
              • 16032
              #4
              The code for the modal popup extender. When you say that you want it to load when you request a particular row, would that be triggered by a button click?

                Comment

                • malav123
                  New Member
                  • Feb 2008
                  • 217
                  #5
                  The following code contains all the things for modal popup extender....

                  Code:
                  <asp:TemplateField>
                                        <ItemTemplate>
                                            <asp:ImageButton ID="imgGrid" runat="server" ImageUrl="~/images/info1.gif" />
                                            <asp:Panel ID="Panel1" runat="server" CssClass="modalPopup">
                                                <div style="text-align: left; vertical-align: middle">
                                                    <table class="modalPopup" width="600px" align="center">
                                                        <tr>
                                                            <td align="right" colspan="2">
                                                                <asp:ImageButton ID="imgCancel" runat="Server" ToolTip="Close" Height="15px" ImageUrl="~/images/close_vista.gif" /></td>
                                                        </tr>
                                                        <tr>
                                                            <td>
                                                                <fieldset style="height: 100px; width: 290px">
                                                                    <legend style="font-size: 15px">Borrower Details</legend>
                                                                    <table width="100%">
                                                                        <tr>
                                                                            <td width="60%">
                                                                                <asp:Label ID="lblmodalname" runat="Server" Font-Bold="true" Text="Borrower Name:"></asp:Label></td>
                                                                            <td width="40%">
                                                                                <asp:Label ID="lblmodalnameval" runat="server" Text="Borrower"></asp:Label></td>
                                                                        </tr>
                                                                        <tr>
                                                                            <td>
                                                                                <asp:Label ID="lblWorkph" runat="Server" Font-Bold="True" Text="Work Phone:"></asp:Label></td>
                                                                            <td>
                                                                                <asp:Label ID="lblWorkphval" runat="server" Text="12345"></asp:Label></td>
                                                                        </tr>
                                                                        <tr>
                                                                            <td>
                                                                                <asp:Label ID="lblmodalEmail" runat="Server" Font-Bold="True" Text="E-Mail:"></asp:Label></td>
                                                                            <td>
                                                                                <asp:Label ID="lblmodalEmailval" runat="server" Text="marc@yahoo.com"></asp:Label></td>
                                                                        </tr>
                                                                        <tr>
                                                                            <td>
                                                                                <asp:Label ID="lblmodalcity" runat="Server" Font-Bold="True" Text="City:"></asp:Label></td>
                                                                            <td>
                                                                                <asp:Label ID="lblmodalcityval" runat="server" Text="rajkot"></asp:Label></td>
                                                                        </tr>
                                                                        <tr>
                                                                            <td>
                                                                                <asp:Label ID="lblstate" runat="Server" Font-Bold="True" Text="State:"></asp:Label></td>
                                                                            <td>
                                                                                <asp:Label ID="lblstateval" runat="server" Text="Gujarat"></asp:Label></td>
                                                                        </tr>
                                                                    </table>
                                                                </fieldset>
                                                            </td>
                                                            <td rowspan="2">
                                                                <fieldset style="height: 200px; width: 240px">
                                                                    <legend style="font-size: 15px">Info</legend>
                                                                    <table width="100%">
                                                                        <tr>
                                                                            <td width="30%">
                                                                                <asp:Label ID="lblleadStatus" runat="Server" Font-Bold="True" Text="Status:"></asp:Label></td>
                                                                            <td width="10%">
                                                                                <asp:Label ID="lblleadstatusval" runat="Server" Text="Credit"></asp:Label></td>
                                                                        </tr>
                                                                        <tr>
                                                                            <td>
                                                                                <asp:Label ID="lblleadloanref" runat="Server" Font-Bold="True" Text="Lead Referal:"></asp:Label></td>
                                                                            <td>
                                                                                <asp:Label ID="lblleadloanrefval" runat="Server" Text="New"></asp:Label></td>
                                                                        </tr>
                                                                        <tr>
                                                                            <td>
                                                                                <asp:Label ID="lblleadowner" runat="Server" Font-Bold="True" Text="Lead Owner:"></asp:Label></td>
                                                                            <td>
                                                                                <asp:Label ID="lblleadownerval" runat="Server" Text="Marc"></asp:Label></td>
                                                                        </tr>
                                                                        <tr>
                                                                            <td>
                                                                                <asp:Label ID="lblleadCE" runat="Server" Font-Bold="True" Text="CE:"></asp:Label></td>
                                                                            <td>
                                                                                <asp:Label ID="lblleadCEval" runat="Server" Text="XYZ"></asp:Label></td>
                                                                        </tr>
                                                                        <tr>
                                                                            <td colspan="2">
                                                                                <br />
                                                                            </td>
                                                                        </tr>
                  Code:
                                                                                          <tr>
                                                                            <td>
                                                                                <asp:Label ID="lblLCR" runat="Server" Font-Bold="True" Text="Last Credit Report:"></asp:Label></td>
                                                                            <td>
                                                                                <asp:Label ID="lblLCRval" runat="Server" Text="12/12/2007"></asp:Label></td>
                                                                        </tr>
                                                                        <tr>
                                                                            <td>
                                                                                <asp:Label ID="lblLT" runat="Server" Font-Bold="True" Text="Last Title:"></asp:Label></td>
                                                                            <td>
                                                                                <asp:Label ID="lblLTval" runat="Server" Text="01/12/2007"></asp:Label></td>
                                                                        </tr>
                                                                        <tr>
                                                                            <td>
                                                                                <asp:Label ID="lblLP" runat="Server" Font-Bold="True" Text="Last Prequal:"></asp:Label></td>
                                                                            <td>
                                                                                <asp:Label ID="lblLPval" runat="Server" Text="12/10/2007"></asp:Label></td>
                                                                        </tr>
                                                                        <tr>
                                                                            <td>
                                                                                <asp:Label ID="lblpriceengine" runat="Server" Font-Bold="True" Text="Price Engine:"></asp:Label></td>
                                                                            <td>
                                                                                <asp:Label ID="lblpriceengineval" runat="Server" Text="High"></asp:Label></td>
                                                                        </tr>
                                                                    </table>
                                                                </fieldset>
                                                            </td>
                                                        </tr>
                                                        <tr>
                                                            <td>
                                                                <fieldset style="height: 80px; width: 290px">
                                                                    <legend style="font-size: 15px">Loan Details</legend>
                                                                    <table width="100%">
                                                                        <tr>
                                                                            <td width="60%">
                                                                                <asp:Label ID="lblleadpp" runat="Server" Font-Bold="True" Text="Purchase Price:"></asp:Label></td>
                                                                            <td width="40%">
                                                                                <asp:Label ID="lbllealppval" runat="Server" Text="12,500"></asp:Label></td>
                                                                        </tr>
                                                                        <tr>
                                                                            <td>
                                                                                <asp:Label ID="lblleadloan" runat="Server" Font-Bold="True" Text="Loan Amount:"></asp:Label></td>
                                                                            <td>
                                                                                <asp:Label ID="lblleadloanval" runat="Server" Text="1,12,500"></asp:Label></td>
                                                                        </tr>
                                                                        <tr>
                                                                            <td>
                                                                                <asp:Label ID="lblleadhome" runat="Server" Font-Bold="True" Text="Value of Home:"></asp:Label></td>
                                                                            <td>
                                                                                <asp:Label ID="lblleadhomeval" runat="Server" Text="8,12,500"></asp:Label></td>
                                                                        </tr>
                                                                        <tr>
                                                                            <td>
                                                                                <asp:Label ID="lblleadproduct" runat="Server" Font-Bold="True" Text="Product:"></asp:Label></td>
                                                                            <td>
                                                                                <asp:Label ID="lblleadproductval" runat="Server" Text="ABC"></asp:Label></td>
                                                                        </tr>
                                                                    </table>
                                                                </fieldset>
                                                            </td>
                                                        </tr>
                                                        <tr>
                                                            <td colspan="2">
                                                                <fieldset style="height: 50px; width: 590px;">
                                                                    <legend style="font-size: 15px;">Comment</legend>
                                                                </fieldset>
                                                                <br />
                                                            </td>
                                                        </tr>
                                                    </table>
                                                </div>
                                            </asp:Panel>
                                            <div align="center" style="vertical-align: middle">
                                                <cc1:ModalPopupExtender ID="ModalPopupExtender" runat="server" TargetControlID="imgGrid"
                                                    PopupControlID="Panel1" BackgroundCssClass="modalBackground" DropShadow="true"
                                                    CancelControlID="imgCancel"/>
                                            </div>
                                        </ItemTemplate>
                                    </asp:TemplateField>

                    Comment

                    • malav123
                      New Member
                      • Feb 2008
                      • 217
                      #6
                      Code:
                      <asp:TemplateField>
                                        <ItemTemplate>
                                            <asp:ImageButton ID="imgGrid" runat="server" ImageUrl="~/images/info1.gif" />
                                            <asp:Panel ID="Panel1" runat="server" CssClass="modalPopup">
                                                <div style="text-align: left; vertical-align: middle">
                                                    <table class="modalPopup" width="600px" align="center">
                                                        <tr>
                                                            <td align="right" colspan="2">
                                                                <asp:ImageButton ID="imgCancel" runat="Server" ToolTip="Close" Height="15px" ImageUrl="~/images/close_vista.gif" /></td>
                                                        </tr>
                                                        <tr>
                                                            <td>
                                                                <fieldset style="height: 100px; width: 290px">
                                                                    <legend style="font-size: 15px">Borrower Details</legend>
                                                                    <table width="100%">
                                                                        <tr>
                                                                            <td width="60%">
                                                                                <asp:Label ID="lblmodalname" runat="Server" Font-Bold="true" Text="Borrower Name:"></asp:Label></td>
                                                                            <td width="40%">
                                                                                <asp:Label ID="lblmodalnameval" runat="server" Text="Borrower"></asp:Label></td>
                                                                        </tr>
                                                                        <tr>
                                                                            <td>
                                                                                <asp:Label ID="lblWorkph" runat="Server" Font-Bold="True" Text="Work Phone:"></asp:Label></td>
                                                                            <td>
                                                                                <asp:Label ID="lblWorkphval" runat="server" Text="12345"></asp:Label></td>
                                                                        </tr>
                                                                        <tr>
                                                                            <td>
                                                                                <asp:Label ID="lblmodalEmail" runat="Server" Font-Bold="True" Text="E-Mail:"></asp:Label></td>
                                                                            <td>
                                                                                <asp:Label ID="lblmodalEmailval" runat="server" Text="marc@yahoo.com"></asp:Label></td>
                                                                        </tr>
                                                                        <tr>
                                                                            <td>
                                                                                <asp:Label ID="lblmodalcity" runat="Server" Font-Bold="True" Text="City:"></asp:Label></td>
                                                                            <td>
                                                                                <asp:Label ID="lblmodalcityval" runat="server" Text="rajkot"></asp:Label></td>
                                                                        </tr>
                                                                        <tr>
                                                                            <td>
                                                                                <asp:Label ID="lblstate" runat="Server" Font-Bold="True" Text="State:"></asp:Label></td>
                                                                            <td>
                                                                                <asp:Label ID="lblstateval" runat="server" Text="Gujarat"></asp:Label></td>
                                                                        </tr>
                                                                    </table>
                                                                </fieldset>
                                                            </td>
                                                            <td rowspan="2">
                                                                <fieldset style="height: 200px; width: 240px">
                                                                    <legend style="font-size: 15px">Info</legend>
                                                                    <table width="100%">
                                                                        <tr>
                                                                            <td width="30%">
                                                                                <asp:Label ID="lblleadStatus" runat="Server" Font-Bold="True" Text="Status:"></asp:Label></td>
                                                                            <td width="10%">
                                                                                <asp:Label ID="lblleadstatusval" runat="Server" Text="Credit"></asp:Label></td>
                                                                        </tr>
                                                                        <tr>
                                                                            <td>
                                                                                <asp:Label ID="lblleadloanref" runat="Server" Font-Bold="True" Text="Lead Referal:"></asp:Label></td>
                                                                            <td>
                                                                                <asp:Label ID="lblleadloanrefval" runat="Server" Text="New"></asp:Label></td>
                                                                        </tr>
                                                                        <tr>
                                                                            <td>
                                                                                <asp:Label ID="lblleadowner" runat="Server" Font-Bold="True" Text="Lead Owner:"></asp:Label></td>
                                                                            <td>
                                                                                <asp:Label ID="lblleadownerval" runat="Server" Text="Marc"></asp:Label></td>
                                                                        </tr>
                                                                        <tr>
                                                                            <td>
                                                                                <asp:Label ID="lblleadCE" runat="Server" Font-Bold="True" Text="CE:"></asp:Label></td>
                                                                            <td>
                                                                                <asp:Label ID="lblleadCEval" runat="Server" Text="XYZ"></asp:Label></td>
                                                                        </tr>
                      Code:
                                                                                              <tr>
                                                                            <td colspan="2">
                                                                                <br />
                                                                            </td>
                                                                        </tr>
                                                                        <tr>
                                                                            <td>
                                                                                <asp:Label ID="lblLCR" runat="Server" Font-Bold="True" Text="Last Credit Report:"></asp:Label></td>
                                                                            <td>
                                                                                <asp:Label ID="lblLCRval" runat="Server" Text="12/12/2007"></asp:Label></td>
                                                                        </tr>
                                                                        <tr>
                                                                            <td>
                                                                                <asp:Label ID="lblLT" runat="Server" Font-Bold="True" Text="Last Title:"></asp:Label></td>
                                                                            <td>
                                                                                <asp:Label ID="lblLTval" runat="Server" Text="01/12/2007"></asp:Label></td>
                                                                        </tr>
                                                                        <tr>
                                                                            <td>
                                                                                <asp:Label ID="lblLP" runat="Server" Font-Bold="True" Text="Last Prequal:"></asp:Label></td>
                                                                            <td>
                                                                                <asp:Label ID="lblLPval" runat="Server" Text="12/10/2007"></asp:Label></td>
                                                                        </tr>
                                                                        <tr>
                                                                            <td>
                                                                                <asp:Label ID="lblpriceengine" runat="Server" Font-Bold="True" Text="Price Engine:"></asp:Label></td>
                                                                            <td>
                                                                                <asp:Label ID="lblpriceengineval" runat="Server" Text="High"></asp:Label></td>
                                                                        </tr>
                                                                    </table>
                                                                </fieldset>
                                                            </td>
                                                        </tr>
                                                        <tr>
                                                            <td>
                                                                <fieldset style="height: 80px; width: 290px">
                                                                    <legend style="font-size: 15px">Loan Details</legend>
                                                                    <table width="100%">
                                                                        <tr>
                                                                            <td width="60%">
                                                                                <asp:Label ID="lblleadpp" runat="Server" Font-Bold="True" Text="Purchase Price:"></asp:Label></td>
                                                                            <td width="40%">
                                                                                <asp:Label ID="lbllealppval" runat="Server" Text="12,500"></asp:Label></td>
                                                                        </tr>
                                                                        <tr>
                                                                            <td>
                                                                                <asp:Label ID="lblleadloan" runat="Server" Font-Bold="True" Text="Loan Amount:"></asp:Label></td>
                                                                            <td>
                                                                                <asp:Label ID="lblleadloanval" runat="Server" Text="1,12,500"></asp:Label></td>
                                                                        </tr>
                                                                        <tr>
                                                                            <td>
                                                                                <asp:Label ID="lblleadhome" runat="Server" Font-Bold="True" Text="Value of Home:"></asp:Label></td>
                                                                            <td>
                                                                                <asp:Label ID="lblleadhomeval" runat="Server" Text="8,12,500"></asp:Label></td>
                                                                        </tr>
                                                                        <tr>
                                                                            <td>
                                                                                <asp:Label ID="lblleadproduct" runat="Server" Font-Bold="True" Text="Product:"></asp:Label></td>
                                                                            <td>
                                                                                <asp:Label ID="lblleadproductval" runat="Server" Text="ABC"></asp:Label></td>
                                                                        </tr>
                                                                    </table>
                                                                </fieldset>
                                                            </td>
                                                        </tr>
                                                        <tr>
                                                            <td colspan="2">
                                                                <fieldset style="height: 50px; width: 590px;">
                                                                    <legend style="font-size: 15px;">Comment</legend>
                                                                </fieldset>
                                                                <br />
                                                            </td>
                                                        </tr>
                                                    </table>
                                                </div>
                                            </asp:Panel>
                                            <div align="center" style="vertical-align: middle">
                                                <cc1:ModalPopupExtender ID="ModalPopupExtender" runat="server" TargetControlID="imgGrid"
                                                    PopupControlID="Panel1" BackgroundCssClass="modalBackground" DropShadow="true"
                                                    CancelControlID="imgCancel"/>
                                            </div>
                                        </ItemTemplate>
                                    </asp:TemplateField>
                      Last edited by acoder; May 21 '08, 11:34 AM. Reason: Added code tags

                        Comment

                        • acoder
                          Recognized Expert MVP
                          • Nov 2006
                          • 16032
                          #7
                          Could you post the client-side code instead? Where's the JavaScript code? How is it triggered? If it's too much code, post a link to a test page instead.

                            Comment

                            • malav123
                              New Member
                              • Feb 2008
                              • 217
                              #8
                              Originally posted by acoder
                              Could you post the client-side code instead? Where's the JavaScript code? How is it triggered? If it's too much code, post a link to a test page instead.

                              I am not using any javascript code for modal popup, my modal popup extender is,
                              Code:
                              <cc1:ModalPopupExtender ID="ModalPopupExtender" runat="server" TargetControlID="imgGrid"
                                                    PopupControlID="Panel1" BackgroundCssClass="modalBackground" DropShadow="true"
                                                    CancelControlID="imgCancel"/>
                              modal popup triggers whenever i clicks on image button named "imgGrid" and my target pannel is "panel1" and i am getting data for panel1 is dynamic... that code i have written in "RowDataBou nd" of gridview control...
                              Last edited by malav123; May 21 '08, 11:48 AM. Reason: code tag

                                Comment

                                • acoder
                                  Recognized Expert MVP
                                  • Nov 2006
                                  • 16032
                                  #9
                                  Originally posted by malav123
                                  modal popup triggers whenever i clicks on image button named "imgGrid" and my target pannel is "panel1" and i am getting data for panel1 is dynamic... that code i have written in "RowDataBou nd" of gridview control...
                                  I'm not much of a .NET person, so I would need to see HTML and JavaScript, not .NET code. So, show the relevant JavaScript and HTML as they appear on the client-side.

                                    Comment

                                    • malav123
                                      New Member
                                      • Feb 2008
                                      • 217
                                      #10
                                      Originally posted by acoder
                                      I'm not much of a .NET person, so I would need to see HTML and JavaScript, not .NET code. So, show the relevant JavaScript and HTML as they appear on the client-side.
                                      Thanks for kind response but now my problem is solved...
                                      at time of loading i blocks the modal popup and activates only when the user clicks on it....

                                        Comment

                                        • acoder
                                          Recognized Expert MVP
                                          • Nov 2006
                                          • 16032
                                          #11
                                          Originally posted by malav123
                                          Thanks for kind response but now my problem is solved...
                                          at time of loading i blocks the modal popup and activates only when the user clicks on it....
                                          That's good to hear. Can you show the changes you made?

                                            Comment

                                            • malav123
                                              New Member
                                              • Feb 2008
                                              • 217
                                              #12
                                              Originally posted by acoder
                                              That's good to hear. Can you show the changes you made?
                                              Ya why not... i have made changes which are very small but makes very big difference....


                                              i thinks i have posted all the changes that is in my code which i have posted before... but at last by setting style property it gave me desired result given below...

                                              Code:
                                              <asp:Panel ID="Panel1" runat="server" style="display: none"  CssClass="modalPopup">

                                                Comment

                                                • malav123
                                                  New Member
                                                  • Feb 2008
                                                  • 217
                                                  #13
                                                  Originally posted by acoder
                                                  That's good to hear. Can you show the changes you made?

                                                  The panel which displays as a content of modal popup extender....
                                                  thanks again....

                                                    Comment

                                                    • acoder
                                                      Recognized Expert MVP
                                                      • Nov 2006
                                                      • 16032
                                                      #14
                                                      Oh is that all it was? You just needed to hide the content! That's too simple ;)

                                                      Thanks for posting.

                                                        Comment

                                                        • malav123
                                                          New Member
                                                          • Feb 2008
                                                          • 217
                                                          #15
                                                          Originally posted by acoder
                                                          Oh is that all it was? You just needed to hide the content! That's too simple ;)

                                                          Thanks for posting.


                                                          Ya solution was so simple... but the result is too benificial for my project... before the problem solved it was taking too much execution time at the time of page loading because at the time of load all the rows was loading modal popup extender and that was also displayed at time of grid load... it was also not looks good so i m happy that very big problem is solved...

                                                            Comment

                                                            Previous 1 2 template Next
                                                            Working...