By refreshing gridview using timer, modal popup is automatically closing - asp.net

Am using a modal pop for a grid view column where the grid view is set with timer.
<asp:UpdatePanel ID="GridPanel" runat="server">
<ContentTemplate>
<asp:Timer ID="autorefresh" runat="server" Interval="5000" />
<asp:GridView ID="SigmaGrid" runat="server" AutoGenerateColumns="False"
onrowcommand="SigmaGrid_RowCommand" CssClass="mGrid" PagerStyle-CssClass="pgr"
AlternatingRowStyle-CssClass="alt" AllowPaging="True"
onpageindexchanging="SigmaGrid_PageIndexChanging">
<AlternatingRowStyle CssClass="alt" />
<PagerStyle />
<Columns>
<asp:TemplateField HeaderText="FirstName" SortExpression="FirstName">
<ItemTemplate>
<asp:LinkButton ID="FirstName" runat="server" Text='<% # Eval("FirstName") %>' CommandName="Select"></asp:LinkButton>
</ItemTemplate>
</asp:TemplateField>
</Columns>
<PagerStyle CssClass="pgr" />
</asp:GridView>
<asp:Panel ID="DtlsPanel" runat="server" BackColor="White" Height="400" Width="500px" >
<table style="border: Solid 3px #626262; width: 100%; height: 100%"
cellpadding="0" cellspacing="0">
<tr style="background-color: #626262">
<td colspan="2" style="height: 10%; color: White; font-weight: bold; font-size: larger"
align="center">
Records
</td>
</tr>
<tr>
<td style="color: Black">
First Name:
</td>
<td align="center" style="color: Black">
<asp:Label ID="FNamelbl2" runat="server"></asp:Label>
</td>
</tr>
</table>
</asp:Panel>
<asp:Button ID="btnPopUp" runat="server" Style="display: none" />
<asp:ModalPopupExtender ID="DetailsPopUp1" runat="server" BackgroundCssClass="modalBackground"
TargetControlID="btnPopUp" PopupControlID="DtlsPanel" CancelControlID="btnCancel"
PopupDragHandleControlID="PopupHeader">
</asp:ModalPopupExtender>
</ContentTemplate>
</asp:UpdatePanel>
Code
protected void SigmaGrid_RowCommand(object sender, GridViewCommandEventArgs e)
{
if (e.CommandName == "Select")
{
LinkButton FirstName = (LinkButton)e.CommandSource;
GridViewRow row = (GridViewRow)FirstName.NamingContainer;
FNamelbl2.Text = FirstName.Text;
this.DetailsPopUp1.Show();
}
}
Problem
Whne i click on firstname colunn i get a pop up which displays the details of a row.. As i have used timer gridview is refreshed and pop up is automatically closing.

If you're using a ModalPopupExtender with postbacks, you should ensure in codebehind that the popup will be shown. Therefore you can use it's method Show.
For example in the page's or UserControl's PreRender:
C#
protected void Page_PreRender(object sender, System.EventArgs e)
{
if (this.Visible) {
this.DetailsPopUp1.Show();
}
}
VB.NET
Private Sub Page_PreRender(sender As Object, e As System.EventArgs) Handles Me.PreRender
If Me.Visible Then
Me.DetailsPopUp1.Show()
End If
End Sub

Related

asp.net gridview - spread bound data across multi lines per row with updatepanel

I have a panel inside a gridview and I need it to be 'spread' for the width of the row :
never mind what's in the panel. What I show here is just to demo my needs...My HTML:
<asp:GridView ID="GridView1" runat="server"
AutoGenerateColumns="False"
CellPadding="3"
CssClass="myGrid"
DataKeyNames="Role_Name">
<AlternatingRowStyle BackColor="#E6E6E6" />
<Columns>
<asp:TemplateField>
<ItemTemplate>
<asp:ImageButton ID="imgShow" runat="server" OnClick="Show_Hide_details" BorderStyle="None" BackColor="Transparent" ImageUrl="~/Content/Images/Arrow_Down.png"
CommandArgument="Show" />
<asp:Panel ID="pnlRole" runat="server" Style="position: relative;" Visible="false">
<asp:Label ID="lblAAA" runat="server" Text="aaa" /><br />
<asp:Label ID="lblBBB" runat="server" Text="bbb" /><br />
<asp:Label ID="lblCCC" runat="server" Text="ccc" /><br />
<asp:Label ID="lblDDD" runat="server" Text="ddd" /><br />
</asp:Panel>
</ItemTemplate>
</asp:TemplateField>
<asp:BoundField DataField="Role_Name" HeaderText="Name">
<HeaderStyle Width="100px" />
<ItemStyle CssClass="myGridItemMaxWidth" HorizontalAlign="Left" Wrap="false" />
</asp:BoundField>
<asp:BoundField DataField="Role_Description" HeaderText="Description">
<HeaderStyle Width="150px" />
<ItemStyle CssClass="myGridItemMaxWidth" HorizontalAlign="Left" Wrap="false" />
</asp:BoundField>
</Columns>
<HeaderStyle CssClass="myGridHeader" />
<RowStyle ForeColor="#000066" />
</asp:GridView>
I'd appreciate any help/idea/solution.
EDIT :
To better explain my problem, here's another image :
(never mind what's in the panel. What I show here is just to demo my needs...)
It's tough to do that properly inside of a GridView without it becoming unwieldy.
You would better off with a ListView and using the functionality there.
<asp:ListView ID="ListView1" runat="server"
DataKeyNames="Role_Name"
OnItemCommand="ListView1_ItemCommand">
<LayoutTemplate>
<table class="myGrid">
<thead>
<tr>
<th></th>
<th>Name</th>
<th>Description</th>
</tr>
</theah>
<tbody>
<asp:PlaceHolder ID="itemPlaceholder" runat="server" />
</tbody>
</table>
</LayoutTemplate>
<ItemTemplate>
<tr>
<td>
<asp:ImageButton ID="imgShow" runat="server" BorderStyle="None" BackColor="Transparent" ImageUrl="~/Content/Images/Arrow_Down.png" CommandName="Toggle" />
</td>
<td><%# Eval("Role_Name") %></td>
<td><%# Eval("Role_Description") %></td>
</tr>
<tr>
<td colspan="3">
<asp:Panel ID="pnlRole" runat="server" Style="position: relative;" Visible="false">
<asp:Label ID="lblAAA" runat="server" Text="aaa" /><br />
<asp:Label ID="lblBBB" runat="server" Text="bbb" /><br />
<asp:Label ID="lblCCC" runat="server" Text="ccc" /><br />
<asp:Label ID="lblDDD" runat="server" Text="ddd" /><br />
</asp:Panel>
</td>
</tr>
</ItemTemplate>
<EmptyDataTemplate>
<p>No data found.</p>
</EmptyDataTemplate>
</asp:ListView>
This will unfortunately have an extra <tr>...</tr> for each row. To resolve that, a way you could do this is to use runat="server" for the <tr> in place of the Panel.
<tr id="pnlRole" runat="server" Visible="false">
<td colspan="3">
<asp:Label ID="lblAAA" runat="server" Text="aaa" /><br />
<asp:Label ID="lblBBB" runat="server" Text="bbb" /><br />
<asp:Label ID="lblCCC" runat="server" Text="ccc" /><br />
<asp:Label ID="lblDDD" runat="server" Text="ddd" /><br />
</td>
</tr>
Now in the code-behind you can reference this
protected void ListView1_ItemCommand(object sender, ListViewCommandEventArgs e)
{
if (e.CommandName == "Toggle")
{
HtmlTableRow pnlRole = e.Item.FindControl("pnlRole") as HtmlTableRow;
pnlRole.Visible = !pnlRole.Visible;
ImageButton imgShow = e.Item.FindControl("imgShow") as ImageButton;
if (pnlRole.Visible == true)
imgShow.ImageUrl="~/Content/Images/Arrow_Down.png";
else
imgShow.ImageUrl="~/Content/Images/Arrow_Up.png";
}
}
Here is what I came up with -
On the left is the GridView when all rows are 'closed'. On the right, after 'opening' 2 rows:
Markup:
<form id="form1" runat="server" style="">
<asp:ScriptManager runat="server"></asp:ScriptManager>
<table runat="server" style="font-weight: bold; margin: 0 auto; font-family: Arial;">
<tr>
<td style="text-align: center; width: 500px; overflow: hidden">
<asp:GridView ID="grv_Four_Rows" runat="server"
AutoGenerateColumns="False" BackColor="black" GridLines="None"
CellPadding="3" CssClass="myGrid" DataKeyNames="Test1_First_Name">
<HeaderStyle CssClass="myGridHeader" />
<RowStyle BackColor="#b5c7de" />
<AlternatingRowStyle BackColor="#d1e0e0" />
<Columns>
<asp:TemplateField>
<ItemStyle HorizontalAlign="Left" />
<HeaderTemplate>
<table>
<tr>
<td style="width: 150px;">First</td>
<td style="width: 150px;">Last</td>
</tr>
</table>
</HeaderTemplate>
<ItemTemplate>
<table>
<td>
<asp:UpdatePanel ID="upp_Main_Row" runat="server">
<ContentTemplate>
<asp:Panel runat="server">
<td>
<asp:ImageButton ID="imgShow" runat="server" OnClick="Show_Hide_details"
ImageUrl="~/Content/Images/Arrow_Down.png" CommandArgument="Show" />
</td>
<td style="width: 150px"><%# Eval("Test1_First_Name")%></td>
<td style="width: 150px"><%# Eval("Test1_Last_Name")%></td>
</asp:Panel>
</ContentTemplate>
</asp:UpdatePanel>
</td>
</table>
<table style="border-style: solid; border-width: thin; width: 100%">
<asp:UpdatePanel ID="upp_2nd_row" runat="server" Visible="false">
<ContentTemplate>
<tr>
<td>
<a style="color: red">Address: </a><%# Eval("Test1_Address")%>
</td>
</tr>
</ContentTemplate>
</asp:UpdatePanel>
<asp:UpdatePanel ID="upp_3rd_row" runat="server" Visible="false">
<ContentTemplate>
<tr>
<td>
<a style="color: red;">Description: </a><%#Eval("Test1_Description")%>
</td>
</tr>
</ContentTemplate>
</asp:UpdatePanel>
<asp:UpdatePanel ID="upp_4th_row" runat="server" Visible="false">
<ContentTemplate>
<tr style="float: left">
<td>
<a style="color: red">Note1: </a><%#Eval("Test1_Note_1")%>
<a style="color: red">Note2: </a><%#Eval("Test1_Note_2")%>
</td>
</tr>
</ContentTemplate>
</asp:UpdatePanel>
</table>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
</td>
</tr>
</table>
</form>
<style type="text/css">
.myGrid {
border: 1px solid black;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
overflow: hidden;
background-color: white;
text-align: center;
margin: 0 auto;
}
.myGridHeader > th {
text-align: center;
border: solid 1px;
font-family: Arial;
background-color: #DDFFD6;
font-weight: bold;
color: #000066;
}
</style>
C# code-behind:
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
load_grv_Four_Rows();
}
}
//================================================================================================
protected void Show_Hide_details(object sender, EventArgs e)
{
ImageButton imgShowHide = sender as ImageButton;
GridViewRow row = imgShowHide.NamingContainer as GridViewRow;
if (imgShowHide.CommandArgument == "Show")
{
row.FindControl("upp_2nd_Row").Visible = true;
row.FindControl("upp_3rd_Row").Visible = true;
row.FindControl("upp_4th_Row").Visible = true;
imgShowHide.CommandArgument = "Hide";
imgShowHide.ImageUrl = "~/Content/Images/Arrow_Up.png";
}
else
{
row.FindControl("upp_2nd_Row").Visible = false;
row.FindControl("upp_3rd_Row").Visible = false;
row.FindControl("upp_4th_Row").Visible = false;
imgShowHide.CommandArgument = "Show";
imgShowHide.ImageUrl = "~/Content/Images/Arrow_Down.png";
}
}
//================================================================================================
private void load_grv_Four_Rows()
{
try
{
SqlConnection con;
DataSet ds;
con = new SqlConnection(System.Configuration.ConfigurationManager.ConnectionStrings["BETSEFER_DB"].ConnectionString);
string CmdString = "SELECT * FROM tbl_Test1 ORDER BY Test1_First_Name";
ds = new DataSet();
using (SqlDataAdapter sda = new SqlDataAdapter(CmdString, con))
{
sda.Fill(ds);
if (ds.Tables.Count > 0)
{
DataView dv = ds.Tables[0].DefaultView;
grv_Four_Rows.DataSource = dv;
grv_Four_Rows.DataBind();
}
}
}
catch (SqlException ex)
{
Session["mySQL_Error_Msg"] = ex.Message;
Server.ClearError();
Response.Redirect("~/Errors.aspx");
}
}
//================================================================================================
The table:
I still have lots of formatting and cosmetic issues but for those I'll open a new post.
Hope it helps someone.

modalpopup extender in asp.net ajax

I have two radio buttons with the same groupname. On selection of the one radio button i want two new radio buttons,and on selection of other radio button i want two other new radio button to be visible.
I want all of these inside the ModalPopupExtender.
Here's an example:
ASPX:
<head runat="server">
<title>Modal Popup</title>
<style type="text/css">
.modalStyle
{
background-color: Gray;
filter: alpha(opacity=70);
opacity: 0.7;
}
.panelStyle
{
width: 300px;
height: 180px;
border: 2px solid Gray;
background-color:White;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<asp:ToolkitScriptManager ID="scripManager" runat="server" />
<asp:ModalPopupExtender ID="modal" CancelControlID="btnCancel" BackgroundCssClass="modalStyle" PopupControlID="popup" TargetControlID="lblPopup" runat="server" />
<asp:Label ID="lblPopup" runat="server" />
<asp:Panel runat="server" ID="popup" CssClass="panelStyle">
<table style="width: 100%;">
<tr>
<td>
<asp:RadioButton ID="rdboption1" AutoPostBack="true" OnCheckedChanged="CheckedChanged" runat="server" Text="Option 1" GroupName="Options" /><br />
<asp:RadioButton ID="rdboption11" runat="server" Text="Option 1.1" GroupName="SubOption1"
Visible="false" /><br />
<asp:RadioButton ID="rdboption12" runat="server" Text="Option 1.2" GroupName="SubOption1"
Visible="false" />
</td>
</tr>
<tr>
<td>
<asp:RadioButton ID="rdboption2" AutoPostBack="true" OnCheckedChanged="CheckedChanged" runat="server" Text="Option 2" GroupName="Options" /><br />
<asp:RadioButton ID="rdboption21" runat="server" Text="Option 2.1" GroupName="SubOption2"
Visible="false" /><br />
<asp:RadioButton ID="rdboption22" runat="server" Text="Option 2.2" GroupName="SubOption2"
Visible="false" />
</td>
</tr>
<tr>
<td style="text-align: center;">
<asp:Button ID="btnCancel" runat="server" Text="Cancel" />
</td>
</tr>
</table>
</asp:Panel>
</form>
</body>
Code behind:
public partial class Test : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
modal.Show();
}
protected void CheckedChanged(object sender, EventArgs e)
{
var radioButton = sender as RadioButton;
ResetOptions();
switch(radioButton.ID)
{
case "rdboption1":
rdboption11.Visible = true;
rdboption12.Visible = true;
break;
case "rdboption2":
rdboption21.Visible = true;
rdboption22.Visible = true;
break;
}
}
private void ResetOptions()
{
rdboption11.Visible = false;
rdboption12.Visible = false;
rdboption21.Visible = false;
rdboption22.Visible = false;
}
}

Display message after account created

I'm having Create User Wizard inside an update panel and here is how I have done:
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:CreateUserWizard ID="CreateUserWizard1" runat="server"
DisableCreatedUser="True"
ContinueDestinationPageUrl="~/Login.aspx" MailDefinition-BodyFileName="~/EmailTemplates/NewAccountTemplate.htm" LoginCreatedUser="False">
<ContinueButtonStyle BorderStyle="None" CssClass="bar g-button g-button-submit" Font-Size="12px" />
<CreateUserButtonStyle CssClass="foo g-button g-button-red" Height="30px"
Width="125px" BorderStyle="None" Font-Size="12px" />
<MailDefinition BodyFileName="~/EmailTemplates/NewAccountTemplate.htm" From="no-reply#mihirauniverse.org" IsBodyHtml="True" Priority="High">
</MailDefinition>
<WizardSteps>
<asp:CreateUserWizardStep ID="CreateUserWizardStep1" runat="server">
<ContentTemplate>
<table>
========//Some code here
<tr>
<td>
<asp:Label ID="confirmmsg" runat="server" Text=""></asp:Label>
</td>
</table>
<asp:UpdateProgress ID="UpdateProgressUserDetails" runat="server" DisplayAfter="0">
<ProgressTemplate>
<div style="position: absolute; top: 384px; left: 169px;">
<img src="Main/images/Loader.gif" alt="loading" /><br />
<span style="font-weight: normal; font-size: small; color: #000000;">Please wait...</span>
</div>
</ProgressTemplate>
</asp:UpdateProgress>
</ContentTemplate>
</asp:CreateUserWizardStep>
<asp:CompleteWizardStep ID="CompleteWizardStep1" runat="server">
</asp:CompleteWizardStep>
</WizardSteps>
</asp:CreateUserWizard>
</ContentTemplate>
</asp:UpdatePanel>
Now I would like to know in which event and how do I display label "confirmmsg" after user account created from codebehind.
use OnCreatedUser "Occurs after the membership provider has created the new Web site user account."
code sample
<asp:CreateUserWizard runat="server" OnCreatedUser="CreateUserWizard1_CreatedUser">
protected void CreateUserWizard1_CreatedUser(object sender, EventArgs e)
{
// Display the confirm msg
}
I found the answer:
This is what I need to do in the CreatedUser event:
Dim lbl As Label
lbl = CreateUserWizard1.CompleteStep.ContentTemplateContainer.FindControl("confirmmsg")
lbl.Text = "Some text"

Delete image from folder using data list delete button

I display some images in a datalist by getting the images from folder.
Now, I want to delete the image in folder when I click the Delete button on my datalist .
Here is my delete button code:
protected void delete_onClick(object sender, EventArgs e)
{
string fileName = sender as string;
File.Delete(Server.MapPath(fileName));
FileInfo fInfo;
fInfo = new FileInfo(fileName);
fInfo.Delete();
gvImages.DataBind();
}
I don't know how to get the exact image name which I want to delete, there is a delete button with each image.
Here is my datalist:
<div>
<asp:DataList ID="gvImages" RepeatColumns="5" RepeatDirection="Horizontal" GridLines="Horizontal"
runat="server" BorderColor="#336699" BorderStyle="Solid" ShowHeader="true">
<ItemTemplate>
<center>
<table>
<tr>
<td style="width: 90px; height: 90px">
<img id="PICID" runat="server" src='<%# Container.DataItem %>' alt='' style="height: 100px;
width: 100px;" />
<br />
<asp:Button ID="Delete" Height="22px" OnClick="delete_onClick" Width="100px" runat="server"
Text="Delete Picture" /><br />
</td>
</tr>
</table>
</center>
</ItemTemplate>
</asp:DataList>
</div>
Nesting functions as you have done is a poor programming practice:
File.Delete(Server.MapPath(fileName));
Try is like this and then when you debug, you will be able to see what file you are are trying to delete:
string fileName = e.CommandArgument;
fileName = Server.MapPath(fileName);
File.Delete(fileName);
Also, are you getting an error? An exception? Why isn't there an exception handler around the code?
you should use commandName on button. And you should use OnDeleteCommand on DataList.
<div>
<asp:DataList OnDeleteCommand="Delete_Command" ID="gvImages" RepeatColumns="5" RepeatDirection="Horizontal" GridLines="Horizontal"
runat="server" BorderColor="#336699" BorderStyle="Solid" ShowHeader="true">
<ItemTemplate>
<center>
<table>
<tr>
<td style="width: 90px; height: 90px">
<img id="PICID" runat="server" src='<%# Container.DataItem %>' alt='' style="height: 100px;
width: 100px;" />
<br />
<asp:Button ID="Delete" Height="22px" CommandName="Delete" Width="100px" runat="server"
Text="Delete Picture" /><br />
</td>
</tr>
</table>
</center>
</ItemTemplate>
</asp:DataList>
</div>
Then,
For example Hold FileName:
<asp:Button CommandArgument ='<%# Container.DataItem %>' />
Then,
public void Delete_Command(Object sender, DataListCommandEventArgs e)
{
//you can hold filename on Button's CommandArgument
string fileName = e.CommandArgument;
File.Delete(Server.MapPath(fileName));
FileInfo fInfo;
fInfo = new FileInfo(fileName);
fInfo.Delete();
gvImages.DataBind();
}

How to get text in popup control extender?

i am using a popup control extender.but i am getting only index of selected value from radiobutton list.I want to get the text
Below is my source code
<div class="FloatRight">
<asp:TextBox ID="txtTeam" runat="server" Width="150px" autocomplete="off"></asp:TextBox>
<br />
<asp:Panel ID="panel" runat="server">
<div style="border: 1px outset white; width: 100px">
<asp:UpdatePanel runat="server" ID="up1">
<ContentTemplate>
<asp:RadioButtonList ID="rbteam" runat="server" AutoPostBack="true" OnSelectedIndexChanged="rbteam_SelectedIndexChanged">
</asp:RadioButtonList>
</ContentTemplate>
</asp:UpdatePanel>
</div>
</asp:Panel>
<cc1:PopupControlExtender ID="txtTeam_PopupControlExtender" runat="server" Enabled="True"
and this is server side
protected void rbteam_SelectedIndexChanged(object sender, EventArgs e) {
if (!string.IsNullOrEmpty(rbteam.SelectedValue))
{
txtTeam_PopupControlExtender.Commit(rbteam.SelectedValue);
}
else
{
txtTeam_PopupControlExtender.Cancel();
}
rbteam.ClearSelection();
}
txtTeam_PopupControlExtender.Commit(rbteam.SelectedItem.Text);

Resources