Ajax Modal Popup Extender And gridview

[malav123]

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.

[acoder]

Post what code you have so far.

[malav123]

Post what code you have so far.

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

[acoder]

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?

[malav123]

The following code contains all the things for modal popup extender....

<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="[e-mail]"></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>

                                                                        <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>
 

[malav123]

<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="[e-mail]"></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>
                                                                        <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>

[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.

[malav123]

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,

<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 "RowDataBound" of gridview control...

[acoder]

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 "RowDataBound" 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.

[malav123]

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....

[acoder]

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?

[malav123]

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...

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

[malav123]

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....

[acoder]

Oh is that all it was? You just needed to hide the content! That's too simple ;)

Thanks for posting.

[malav123]

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...

[acoder]

Glad to hear it. Good luck with the rest of your project.

[malav123]

Glad to hear it. Good luck with the rest of your project.

Thank u so much for best wishes..........