Showing posts with label popup. Show all posts
Showing posts with label popup. Show all posts

Monday, March 26, 2012

DetailsView Inside of a Modal Popup

I'm using a DetailsView to insert new records into a database as well as edit existing records. The Modal is called via ModalPopupExtender.Show() when a LinkButton is clicked and then hidden when the LinkButtons on the DetailsView are clicked. The Functions of the modal popup seem to work fine as well as the Insert() Update() methods of the DetailsView. The problem I'm having is with updating the Text property of the LinkButton at the bottom of the DetailsView to change it from "Add" to "Save" depending on the DetailsView.CurrentMode that I'm changing to/from. I've tried using Update Panels around the LinkButtons only in the DetailsView and then I added an AsyncPostBack trigger for the LinkButton that pops the modal DetailsView in Insert mode and an AsyncPostBack that pops the modal DetailsView in Edit mode from the GridView I have on the page. Then I added a PostBack trigger to handle clicks of the LinkButton on the DetailsView for Insert/Update (depending on the mode) and then Cancel. Both of the postbacks close the modal successfully, it's the AsyncPostBacks that are not updating the Modal DetailsView to show the right Text on the one LinkButton I'm trying to update. Any help would be appreciated. Here is the code:

1protected void Page_Load(object sender, EventArgs e)2 {34 }5protected void AddCategory_OnClick(object sender, EventArgs e)6 {7 ModalPopupExtender1.Show();8 CategoryDetailsView.ChangeMode(DetailsViewMode.Insert);910 }11protected void UpdateInsert_OnClick(object sender, EventArgs e)12 {13if (CategoryDetailsView.CurrentMode == DetailsViewMode.Insert)14 {15 CategoryDetailsView.InsertItem(true);16 }17if (CategoryDetailsView.CurrentMode == DetailsViewMode.Edit)18 {19 CategoryDetailsView.UpdateItem(true);20 }21 }22protected void Cancel_OnClick(object sender, EventArgs e)23 {24 ModalPopupExtender1.Hide();25 CategoryDetailsView.ChangeMode(DetailsViewMode.ReadOnly);2627 }28private LinkButton updateinsertbtn29 {30get31 {32 LinkButton udtisrtbtn;33 udtisrtbtn = (LinkButton)CategoryDetailsView.FindControl("UpdateInsertLinkBtn");34return udtisrtbtn;35 }36 }37private int index38 {39get40 {41return CategoryGridView.SelectedIndex;42 }43 }44protected void CategoryGridView_OnSelectedIndexChanged(object sender, EventArgs e)45 {46 CategoryDetailsView.ChangeMode(DetailsViewMode.Edit);47if (index != -1)48 {49 ModalPopupExtender1.Show();50 CategoryGridView.DataSourceID =null;51 CategoryTableAdapter categoryAdapter =new CategoryTableAdapter();52 CategoryGridView.DataSource = categoryAdapter.GetCategories();53 CategoryGridView.SelectedIndex = index;54int categoryid = Convert.ToInt32(((Categories.CategoryDataTable)CategoryGridView.DataSource).Rows[CategoryGridView.SelectedRow.DataItemIndex]["CategoryID"]);55 SqlDataSource1.SelectCommand ="Select CategoryName, CategoryDescription, CategoryID from Category where CategoryID = " + categoryid;5657 CategoryDetailsView.DataBind();58 CategoryGridView.DataSource =null;59 CategoryGridView.DataSourceID ="SqlDataSource1";60 SqlDataSource1.SelectCommand ="Select CategoryID, CategoryName, CategoryDescription from Category Order by CategoryName";61 CategoryGridView.DataBind();6263 }64 }

<asp:ContentID="Content1"ContentPlaceHolderID="maincontent"Runat="Server">
<script>
function okScript()
{
var prm = Sys.WebForms.PageRequestManager.getInstance();
prm._doPostBack('UpdatePanel1','');
}
</script>
<asp:ScriptManagerid="ScriptManager1"runat="server"></asp:ScriptManager>
<table>
<tr>
<tdvalign="top"style="padding:5px;line-height:1.6em;">

<asp:HyperLinkID="AddCatLinkButton"runat="server"Text="Add New Category"NavigateUrl="javascript:NewCategory('addCategory.aspx');"></asp:HyperLink><br/>

<asp:LinkButtonID="AddCategoryLinkButton"runat="server"Text="Add New Category"OnClick="AddCategory_OnClick"></asp:LinkButton>

</td>

<tdvalign="top">

<asp:UpdatePanelid="UpdatePanel1"runat="server"UpdateMode="Conditional">

<contenttemplate>

<asp:GridViewid="CategoryGridView"runat="server"DataSourceID="SqlDataSource1"CellPadding="3"DataKeyNames="CategoryID"AutoGenerateColumns="False"OnSelectedIndexChanged="CategoryGridView_OnSelectedIndexChanged">

<Columns>

<asp:CommandFieldHeaderText="Edit"ShowSelectButton="true"SelectText="Edit"/>

<asp:BoundFieldDataField="CategoryID"HeaderText="CategoryID"InsertVisible="False"ReadOnly="True"SortExpression="CategoryID"Visible="False"/>

<asp:BoundFieldDataField="CategoryName"HeaderText="Name"SortExpression="CategoryName"/>

<asp:BoundFieldDataField="CategoryDescription"HeaderText="Description"SortExpression="CategoryDescription"/>

<asp:TemplateFieldHeaderText="Remove Category">

<ItemTemplate>

<asp:LinkButtonID="DeleteButton"runat="server"Text="Remove"CommandName="Delete"></asp:LinkButton>

</ItemTemplate>

<ItemStyleHorizontalAlign="Center"/>

</asp:TemplateField>

</Columns>

<EmptyDataTemplate>

There are no categories to display.

</EmptyDataTemplate>

</asp:GridView>

</contenttemplate>

</asp:UpdatePanel>

</td>

</tr> </table>

<asp:PanelID="CategoryPanel"runat="server"GroupingText="Product Category"Style="display:none;"CssClass="modalPopup">

<asp:DetailsViewID="CategoryDetailsView"runat="server"AutoGenerateRows="False"DataKeyNames="CategoryID"DefaultMode="ReadOnly"

DataSourceID="SqlDataSource1"CellPadding="3"CssClass="TextBox"OnModeChanged="CategoryDetailsView_OnModeChanged">

<Fields>

<asp:BoundFieldDataField="CategoryID"HeaderText="CategoryID"InsertVisible="False"

ReadOnly="True"SortExpression="CategoryID"Visible="False"/>

<asp:BoundFieldDataField="CategoryName"HeaderText="Name"SortExpression="Name"/>

<asp:BoundFieldDataField="CategoryDescription"HeaderText="Description"

SortExpression="Description"/>

</Fields>

<FooterTemplate>

<asp:UpdatePanelID="LinkUpdate"runat="server"EnableViewState="true"UpdateMode="Always"RenderMode="Inline">

<ContentTemplate>

<asp:LinkButtonID="UpdateInsertLinkBtn"runat="server"Text="Test"OnClick="UpdateInsert_OnClick"></asp:LinkButton>

</ContentTemplate>

<Triggers>

<asp:AsyncPostBackTriggerControlID="AddCategoryLinkButton"EventName="Click"/>

<asp:AsyncPostBackTriggerControlID="CategoryGridView"EventName="SelectedIndexChanged"/>

<asp:PostBackTriggerControlID="UpdateInsertLinkBtn"/>

<asp:PostBackTriggerControlID="CancelButton1"/>

</Triggers>

</asp:UpdatePanel>

<asp:LinkButtonID="CancelButton1"runat="server"Text="Cancel"OnClick="Cancel_OnClick"></asp:LinkButton>

</FooterTemplate>

</asp:DetailsView>

<divalign="center">

<asp:LinkButtonID="OkButton"runat="server"></asp:LinkButton> <asp:LinkButtonID="CancelButton"runat="server"></asp:LinkButton>

</div>

</asp:Panel>

<ajaxToolkit:ModalPopupExtenderID="ModalPopupExtender1"runat="server"TargetControlID="AddCatLinkButton"CancelControlID="CancelButton"OkControlID="Okbutton"

PopupControlID="CategoryPanel"OnOkScript="okScript()"BackgroundCssClass="modalBackground"DropShadow="true">

</ajaxToolkit:ModalPopupExtender>

<asp:SqlDataSourceID="SqlDataSource1"runat="server"ConnectionString="<%$ ConnectionStrings:IT_ASSETDbase %>"

DeleteCommand="DELETE FROM [Category] WHERE [CategoryID] = @dotnet.itags.org.CategoryID"

InsertCommand="INSERT INTO [Category] ([CategoryName], [CategoryDescription]) VALUES (@dotnet.itags.org.CategoryName, @dotnet.itags.org.CategoryDescription)"

SelectCommand="SELECT 'javascript:NewCategory(''editCategory.aspx?CategoryID=' + CAST(CategoryID AS nvarchar) + ''');' AS URL, CategoryID, CategoryName, CategoryDescription FROM Category"

UpdateCommand="UPDATE [Category] SET [CategoryName] = @dotnet.itags.org.CategoryName, [CategoryDescription] = @dotnet.itags.org.CategoryDescription WHERE [CategoryID] = @dotnet.itags.org.CategoryID">

<DeleteParameters>

<asp:ControlParameterControlID="CategoryGridView"Name="CategoryID"PropertyName="SelectedValue"Type="Int32"/>

</DeleteParameters>

<UpdateParameters>

<asp:ParameterName="CategoryName"Type="String"/>

<asp:ParameterName="CategoryDescription"Type="String"/>

<asp:ParameterName="CategoryID"Type="Int32"/>

</UpdateParameters>

<InsertParameters>

<asp:ParameterName="CategoryName"Type="String"/>

<asp:ParameterName="CategoryDescription"Type="String"/>

</InsertParameters>

</asp:SqlDataSource>

</asp:Content>

">

I was unable to accomplish changing the Text property value to what I wanted but I ended up modifying the code to remove the Update Panels in order to get modal DetailsView to Insert and Edit records and then update the GridView control by calling GridView.DataBind() after the Update() or Insert() methods were called for the DetailsView. Not exactly what I wanted but works.

DetailsView in a modalpopup

Hello,

i am using a detailsview in a modalpopup. When i click edit in the detailsview, the popup closes again. I have a cancel button separately to close the popup. How do i prevent the popup from closing when i press the Detailsview?

thanks for your kind help.

Maurice

I am having a very similiar problem as you.

I have a usercontrol that contains some textbox's, a button and a gridview.

When I click the button I filter the gridview based on content from the textbox's

The usercontrol is inside a modalpopup. When I click on the button, the modalpopup disappears. The popup should not disappear!


I started to encounter this problem after I upgraded from Beta2 to RTM of AJAX.NET Extensions and got the latest version of the Control Toolkit.

Is there anyone with any solutions?!?


Hi,

ModalPopup will hide whenever a postback occurs (well, technically it doesn't hide but rather it won't be shown again). If the content of your ModalPopup is causing postbacks, you should wrap it in an UpdatePanel (just the content of the ModalPopup - not the whole ModalPopup itself) so the popup remains visible.

Thanks,
Ted


Hi, I have a modal popup which shows search results.It uses updatepanel as you mentioned and on a button click I fill an asp-repeater control.

After searching (repeater is populated), if I click the cancel button of the popupextender then

the dropdown boxes on the page remain invisible..Is this a bug ? appreciate any solution. Thanks.