I created the following GridView
<asp:UpdatePanel ID="ProductsListUpdatePanel" runat="server">
<ContentTemplate>
<asp:ObjectDataSource ID="ProductsObjectDataSource" runat="server" SelectMethod="GetAllProducts"
TypeName="ProductsDataSource"></asp:ObjectDataSource>
<asp:Panel ID="pnl_Confirm" runat="server" Style="display: none" CssClass="ModalPopup">
Are you sure?<br />
<br />
<asp:Button ID="btnOk" runat="server" Text="Usuń" />
<asp:Button ID="btnCancel" runat="server" Text="Anuluj" />
</asp:Panel>
<asp:GridView ID="ProductsGridView" runat="server" DataSourceID="ProductsObjectDataSource"
DataKeyNames="Id" AutoGenerateColumns="False" CssClass="Grid" OnRowDataBound="ProductsGridView_RowDataBound1"
OnRowCommand="ProductsGridView_RowCommand">
<Columns>
<asp:BoundField DataField="ProductPFK" HeaderText="ProductPFK" Visible="False" />
<asp:TemplateField ShowHeader="False">
<ItemTemplate>
<asp:ImageButton ID="EditImageButton" runat="server" CausesValidation="False" CommandName="Edit"
ImageUrl="~/CSS/Pictures/edit.GIF" Text="Edit" />
<asp:ImageButton ID="DeleteImageButton" runat="server" CausesValidation="False" CommandName="Delete"
ImageUrl="~/CSS/Pictures/delete.GIF" Text="Delete" />
<ajaxtoolkit:ConfirmButtonExtender ID="ext_confirm_Delete" runat="server" TargetControlID="DeleteImageButton"
DisplayModalPopupID="ext_Modal_Delete">
</ajaxtoolkit:ConfirmButtonExtender>
<ajaxtoolkit:ModalPopupExtender ID="ext_Modal_Delete" runat="server" TargetControlID="DeleteImageButton"
PopupControlID="pnl_Confirm" CancelControlID="btnCancel" BackgroundCssClass="ModalBackground"
OkControlID="btnOk">
</ajaxtoolkit:ModalPopupExtender>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Name">
<ItemTemplate>
<asp:ImageButton ID="RollButton" runat="server" CausesValidation="False" CommandName="RollDown"
ImageUrl="~/CSS/Pictures/plus.GIF" Text="Button" CommandArgument='<%# Eval("Id") %>'
Visible="false" />
<asp:Label ID="ItemName" runat="server"><%# Eval("Name") %></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:BoundField DataField="Operator" HeaderText="Agragacja" />
<asp:CheckBoxField DataField="OwnNeeds" HeaderText="W?asne potrzeby" />
</Columns>
<HeaderStyle CssClass="GridHeader" />
</asp:GridView>
</ContentTemplate>
</asp:UpdatePanel>
When I click the RollButton new rows apears in the GridView. When the page is rendering, ConfirmButtonExtender and ModalPopupExtenderare loading I can still click some other buttons like DeleteImageButton button. Then I get the error:
Microsoft JScript runtime error: Sys.InvalidOperationException:
ScriptLoader.loadScripts cannot be called while the ScriptLoader is already
loading scripts.
What is the comprehensive sollution of this problem?
I tried to use the UpdateProgress control but I couldn't create such <div> and CSS that would cover the whole page (in IE6).
It also takes some time to render the whole ModalPanel for many rows. I belive that there is any method to do it faster.
Any solution is really welcome.
Hi W.kiermasz,
It is not an effiecient way to add AJAX Controls to each ItemTemplate. If you insist on your method, I suggest that you should use a div convered all the screen when page is loading. Meanwhile, add another javascript which will detect whether the last AJAX control is prepared or not by using typeof($find("AJAX Control's BehavavoirID")). If the last one prepared, hide the top div and show the GridView. Here is the sample which shows how to use only one ModalPopupExtender in a GridView.
<%@. Page Language="C#" %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><script runat="server"> protected void Page_Load(object sender, EventArgs e) { //Attach a Javascript funtion to the LinkButton. LinkButton myLinkButton; for (int i = 0; i < GridView1.Rows.Count; i++) { myLinkButton = (LinkButton)GridView1.Rows[i].Cells[4].FindControl("LinkButton1"); myLinkButton.Attributes.Add("onclick", "shopModalPopup('" + GridView1.Rows[i].Cells[0].Text + "');return false;"); } } protected void SqlDataSource1_Selecting(object sender, SqlDataSourceSelectingEventArgs e) { string text = e.Command.CommandText.ToString(); }</script><html xmlns="http://www.w3.org/1999/xhtml"><head runat="server"> <title>Untitled Page</title> <style> .modalBackground { background-color:Gray; filter:alpha(opacity=70); opacity:0.7; } .modalPopup { background-color:#FFD9D5; border-width:3px; border-style:solid; border-color:Gray; padding:3px; width:250px; } </style></head><body> <form id="form1" runat="server"> <asp:ScriptManager ID="ScriptManager1" runat="server"> </asp:ScriptManager> <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" DataKeyNames="EmployeeID" DataSourceID="SqlDataSource1"> <Columns> <asp:BoundField DataField="EmployeeID" HeaderText="EmployeeID" InsertVisible="False" ReadOnly="True" SortExpression="EmployeeID" ItemStyle-Width="0" /> <asp:BoundField DataField="LastName" HeaderText="LastName" SortExpression="LastName" /> <asp:BoundField DataField="FirstName" HeaderText="FirstName" SortExpression="FirstName" /> <asp:BoundField DataField="Title" HeaderText="Title" SortExpression="Title" /> <asp:TemplateField> <ItemTemplate> <asp:LinkButton ID="LinkButton1" runat="server">Click On Me</asp:LinkButton> </ItemTemplate> </asp:TemplateField> </Columns> </asp:GridView> <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:NORTHWNDConnectionString%>" SelectCommand="SELECT [EmployeeID], [LastName], [FirstName], [Title] FROM [Employees]" onselecting="SqlDataSource1_Selecting"> </asp:SqlDataSource> <asp:Panel ID="Panel1" runat="server" CssClass="modalPopup" Height="200px" Width="300px" style="display:none"> <asp:UpdatePanel ID="UpdatePanel1" runat="server"> <ContentTemplate> EmployeeID:<asp:TextBox ID="tbEmployeeID" runat="server"></asp:TextBox> <br/> Reason:<asp:TextBox ID="tbReason" runat="server"></asp:TextBox> </ContentTemplate> </asp:UpdatePanel> <asp:Button ID="btnCancel" runat="server" Text="Cancel" /> </asp:Panel> <div style="display: none"> <asp:Button ID="Button1" runat="server" Text="Button" /></div> <ajaxToolkit:ModalPopupExtender ID="ModalPopupExtender1" runat="server" TargetControlID="Button1" PopupControlID="Panel1" CancelControlID="btnCancel" BackgroundCssClass="modalBackground"> </ajaxToolkit:ModalPopupExtender> <script type="text/javascript" language="javascript">function shopModalPopup(employeeID){ //show the ModalPopupExtender $get("<%=tbEmployeeID.ClientID%>").value = employeeID; $get("<%=tbReason.ClientID%>").value =""; $find("<%=ModalPopupExtender1.ClientID%>").show(); } </script> </form></body></html>I hope this help.
Best regards,
Jonathan
No comments:
Post a Comment