Develop Reference

asp.net gridview template field with second row spanning mutiple columns

Good Afternoon,
I would like to know if this is possible. I have a gridview with several (4 template fields). The 4 fields include
First Name
Last Name
Phone
Email
What I would like to do is get a fifth data column(address) completely on a different row so that the data looks like this.
Row #1 | First Name | Last Name | Phone | Email| Record #1
Row #2 | Address | Record #1
Row #3 | First Name | Last Name | Phone | Email| Record #2
Row #4 | Address | Record #2
Can anybody help me with this, please?

For some reason this question is upvoted. I will wrote you an answer:
<table>
<asp:Repeater runat="server" ID="repeater1" >
<ItemTemplate>
<tr>
<td> <%#Eval("FirstName")%></td>
<td> <%#Eval("LastName")%></td>
....//other <td></td>
</tr>
<tr>
<td><%#Eval("Address")%></td>
</tr>
</ItemTemplate>
</asp:Repeater>
</table>
I will leave for you the css part, also if you want to have column names look into <th> tags, but I don't know how you will achieve that properly when you have on row 1 columns different form row 2. If you want to have delete/edit functionality you should add new td with linkButton/ImageButton/Button with functionality which will delete/edit the current row. For this you will need <%#Eval("ID")%> in CommandArguments of the button. But again in this case this will be interesting because you have one record on 2 rows. The design decision is done by you this is the solution.
You should probably look how to have multiple columns on row 1 and only one on row 2, this was attribute of td colspan
In code behind:
repeater1.DataSource = dst; // this should be data set containing all the needed values
repeater1.DataBind();

I'm not sure why it isn't more common knowledge that you can do this in a GridView. You can mix and match spanned rows and throw some regular GridView columns on at the end of the span (bound or templated).
You do lose some of the bells and whistles of the GridView, because you will have to manually handle sorting and some of the other things that make the GridView easy to work with. But unlike the Repeater, you still get some of the extra functionality of the GridView.
If you throw together a datasource that matches the fields I'm binding to here, you will see it has a second row that spans multiple columns (all the way to the last templated column of the GridView).
It's basically a header template, Two HTML tables, and then whatever type of GridView columns you need after that, if any at all.
The first html table is the normal row. The second html table is the just a long row to put something like a long description or notes.
Didn't include the CSS here, but that's how you will format column widths and alignment.
Works fine, but it sure takes longer to build these. You have to spend a lot of time adjusting column widths, and it is a pain to get the header column to match up with row columns. But, not much different than what you would run into making a template for a repeater.
<asp:GridView ID="GridView2" AutoGenerateColumns="False" runat="server" >
<Columns>
<asp:TemplateField>
<HeaderTemplate>
<table id="Table1" runat="server" >
<tr id="Tr1" runat="server" >
<td id="Td1" style="width: 55px; text-align: center; vertical-align: bottom; border-right: solid 1px black;" runat="server">
<asp:LinkButton ID="lbPoNoSort" CommandArgument="id" CommandName="Sort" runat="server">ID#</asp:LinkButton></td>
<td id="Td2" style="width: 85px;" runat="server">
<asp:LinkButton ID="lbDateRequested" CommandArgument="ReqDate" CommandName="Sort" runat="server">Date</asp:LinkButton></td>
<td id="Td3" style="width: 100px; text-align: center; vertical-align: bottom; border-left: solid 1px black; border-right: solid 1px black;" runat="server">
<asp:LinkButton ID="lblNameSort" CommandArgument="col2" CommandName="Sort" runat="server">Name</asp:LinkButton></td>
<td id="Td4" style="width: 130px; text-align: center; vertical-align: bottom; border-left: solid 1px black; border-right: solid 1px black;" runat="server">
<asp:LinkButton ID="lblApprovSort" CommandArgument="approved_by" CommandName="Sort" runat="server">User</asp:LinkButton></td>
<td id="Td5" style="width: 175px; text-align: center; vertical-align: bottom; border-left: solid 1px black; border-right: solid 1px black;" runat="server">
<asp:LinkButton ID="lbVendorSort" CommandArgument="vendor" CommandName="Sort" runat="server">Vendor</asp:LinkButton></td>
<td id="Td7" style="width: 150px; text-align: center; vertical-align: bottom; border-left: solid 1px black; border-right: solid 1px black;" runat="server">
<asp:LinkButton ID="lbTypeSort" CommandArgument="col4" CommandName="Sort" runat="server">Type</asp:LinkButton></td>
<td id="Td8" style="width: 65px; text-align: center; vertical-align: bottom; border-left: solid 1px black; border-right: solid 1px black;" runat="server">
<asp:LinkButton ID="lbNoSort" CommandArgument="col5" CommandName="Sort" runat="server">OrderNo</asp:LinkButton></td>
<td id="Td9" style="width: 90px; text-align: center; vertical-align: bottom; border-left: solid 1px black; border-right: solid 1px black;" runat="server">
<asp:LinkButton ID="lbCostSort" CommandArgument="col6" CommandName="Sort" runat="server">Est. Cost</asp:LinkButton></td>
<td id="Td10" style="width: 75px; text-align: center; vertical-align: bottom; border-left: solid 1px black; border-right: solid 1px black;" runat="server">
<asp:LinkButton ID="lbPaymentTypeSort" CommandArgument="col10" CommandName="Sort" runat="server">Payment Type</asp:LinkButton></td>
<td id="Td11" style="width: 75px; text-align: center; vertical-align: bottom; border-left: solid 1px black; border-right: solid 1px black;" runat="server">
<asp:LinkButton ID="lbLocationSort" CommandArgument="col7" CommandName="Sort" runat="server">Inventory Location</asp:LinkButton></td>
<td id="Td12" style="width: 75px; text-align: center; vertical-align: bottom; border-left: solid 1px black;" runat="server">
<asp:LinkButton ID="lbDeliverySort" CommandArgument="col13" CommandName="Sort" runat="server">Delivery Method</asp:LinkButton></td>
</tr>
</table>
</HeaderTemplate>
<ItemTemplate>
<table >
<tr>
<td style="width: 55px; text-align: center; vertical-align: top; border-right: solid 1px black;">
<asp:Label ID="Label7" runat="server" Visible="false" Text='<%# Bind("id") %>'></asp:Label>
<asp:LinkButton ID="lbPoNo" CommandName="View" runat="server" Visible="true" Text='<%# Bind("id") %>' ></asp:LinkButton>
</td>
<td style="width: 85px; text-align: center; vertical-align: top; border-left: solid 1px black; border-right: solid 1px black;">
<asp:Label ID="Label2" runat="server" Text='<%# Eval("Date")%>' >
</asp:Label>
</td>
<td style="width: 100px; text-align: center; vertical-align: top; border-left: solid 1px black; border-right: solid 1px black;">
<asp:Label ID="Label3" runat="server" Text='<%# Eval("col1")%>' >
</asp:Label>
</td>
<td style="width: 130px; text-align: center; vertical-align: top; border-left: solid 1px black; border-right: solid 1px black;">
<asp:Label ID="Label4" runat="server" Text='<%# Eval("col2")%>' >
</asp:Label>
</td>
<td style="width: 175px; text-align: center; vertical-align: top; border-left: solid 1px black; border-right: solid 1px black;">
<asp:Label ID="Label5" runat="server" Text='<%# Eval("col3")%>' >
</asp:Label>
</td>
<td style="width: 150px; text-align: center; vertical-align: top; border-left: solid 1px black; border-right: solid 1px black;">
<asp:Label ID="Label6" runat="server" Text='<%# Eval("col4")%>' >
</asp:Label>
</td>
<td style="width: 65px; text-align: center; vertical-align: top; border-left: solid 1px black; border-right: solid 1px black;">
<asp:LinkButton ID="lbOrderNo" runat="server" CommandName="ViewOrder" Text='<%# DataBinder.Eval(Container.DataItem, "col5") %>'></asp:LinkButton>
</td>
<td style="width: 90px; text-align: center; vertical-align: top; border-left: solid 1px black; border-right: solid 1px black;" runat="server">
<asp:Label ID="Label8" runat="server" Text='<%# Eval("col6")%>' >
</asp:Label>
</td>
<td style="width: 75px; text-align: center; vertical-align: top; border-left: solid 1px black; border-right: solid 1px black;" runat="server">
<asp:Label ID="Label9" runat="server" Text='<%# Eval("col7")%>' >
</asp:Label>
</td>
<td style="width: 75px; text-align: center; vertical-align: top; border-left: solid 1px black; border-right: solid 1px black;">
<asp:Label ID="Label10" runat="server" Text='<%# Eval("col8")%>' >
</asp:Label>
</td>
<td style="width: 75px; text-align: center; vertical-align: top; border-left: solid 1px black;">
<asp:Label ID="Label11" runat="server" Text='<%# Eval("col9")%>' >
</asp:Label>
</td>
</tr>
</table>
<table class="job-info">
<tr class="TableData">
<td style="width: 1100px">
<asp:Label ID="Label13" CssClass="details" runat="server" Text="Details:" ></asp:Label> <asp:Label ID="Label12" BackColor="WhiteSmoke" runat="server" Text='<%# Eval("col10")%>' >
</asp:Label>
</td>
</tr>
</table>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField Visible="True" HeaderText="Accounting">
<ItemTemplate>
<asp:CheckBox ID="check" runat="server" Enabled="False" />
</ItemTemplate>
<HeaderStyle Width="60px" />
<ItemStyle HorizontalAlign="Center" />
</asp:TemplateField>
</Columns>
</asp:GridView>

Page load first time:Page index in gridView not working

I have two gridView: grvHeadline and gdvNotification, gdvNotification is load data by selected item of grvHeadline .
When page load: data of gdvNotification is load by first item of grvHeadline.
My problem is:
The page load is first: if gdvNotification has paging (1,2,3,...), when i click paging in gdvNotification, it not run. Page is reload but page index is 0.
When i select other item in grvHeadline and reselect first item, then click paging in gdvNotification, it run, page index was changed.
I was debug: When the page is load first time: I click to page index in gdvNotification then pageload() was called with IsPostBack=True, but not call to event gdvNotification_PageIndexChanging of gdvNotification.
Here is my code:
protected void gdvNotification_PageIndexChanging(object sender, GridViewPageEventArgs e)
{
logger.Debug("Gridview Headline page index changing .");
gdvNotification.PageIndex = e.NewPageIndex;
HeadlineSelected(hdfNotificationIdSelected.Value, e.NewPageIndex);
//gdvNotification.DataBind();
lbPageIndex.Text = (e.NewPageIndex + 1).ToString(CultureInfo.InvariantCulture);
}
And
private void HeadlineSelected(string notificationIdSelected, int index)
{
logger.Debug("Head line selected");
GetDataFromSessionAndCache();
IList<InformationEntity> infoNotificationList = new List<InformationEntity>();
if (string.IsNullOrEmpty(notificationIdSelected))
{
//Clear
IList<InformationEntity> data = new List<InformationEntity>()
{
new InformationEntity()
{
AuthorName = string.Empty,
Contents = string.Empty,
BulletinDateFrom = null,
BulletinDateTo = null,
Id = string.Empty,
Subject = string.Empty,
}
};
gdvNotification.DataSource = data;
gdvNotification.DataBind();
pnPageIndex.Visible = false;
btnEditNotification.Enabled = false;
}
else
{
infoNotificationList = MasterDataHelper.GetInformationByHighOrderId(notificationIdSelected);
logger.Debug("Notification list not null");
if (infoNotificationList != null)
{
if (infoNotificationList.Count == 0)
{
pnPageIndex.Visible = false;
hdfNotificationId.Value = string.Empty;
btnEditNotification.Enabled = false;
}
else
{
if (infoNotificationList.Count == 1)
{
fakepanel.Visible = true;
}
else
{
fakepanel.Visible = false;
}
if (base.IsPermission(PERMISSION_INFORMATION_FOLLOWUP))
{
btnEditNotification.Enabled = true;
}
pnPageIndex.Visible = true;
gdvNotification.PageIndex = index;
hdfNotificationId.Value = infoNotificationList[index].Id;
gdvNotification.DataSource = infoNotificationList;
gdvNotification.DataBind();
}
logger.Debug("Set value for label total page");
lblTotalPage.Text = gdvNotification.PageCount.ToString(CultureInfo.InvariantCulture);
lbPageIndex.Text = gdvNotification.PageCount == 0
? gdvNotification.PageCount.ToString(CultureInfo.InvariantCulture)
: (gdvNotification.PageIndex + 1).ToString(CultureInfo.InvariantCulture);
lbTotal.Text = infoNotificationList.Count().ToString(CultureInfo.InvariantCulture);
}
}
}
Update code in view *.aspx.
<table style="padding-top: 25px; padding-bottom: 25px; table-layout: fixed" width="100%">
<tr>
<td style="width: 49%" class="Top">
<table class="Master" style="width: 100%; height: 35px; border-spacing: 2px 0px">
<tr style="padding: 0px 0px 0px 0px; margin: 0px 0px 0px 0px;">
<td class="BasicValue" style="width: 100%; padding: 0px 0px 0px 0px; margin: 0px 0px 0px 0px;">
<asp:Panel ID="Panel2" runat="server" DefaultButton="btnSearch">
<asp:TextBox ID="txtFuzzySearch" runat="server" Style="width: 76%; height: 25px; text-align: left;
float: left; border-style: double; border-color: Gray;" />
<asp:Label ID="label" runat="server" Text="※あいまい検索" Width="20%" Style="text-align: center;
vertical-align: middle; margin-top: 5px;" />
<asp:Button ID="btnSearch" runat="server" Text="Button" Style="display: none" OnClick="btnSearch_Click" />
</asp:Panel>
</td>
</tr>
</table>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:Panel ID="panelContainer" runat="server" Width="100%" Height="582px" Style="margin-top: 0px;overflow-y: auto">
<asp:HiddenField ID="hdfNotificationIdSelected" runat="server" Value="" />
<asp:GridView ID="grvHeadline" runat="server" AutoGenerateColumns="False" Style="width: 100%"
BorderWidth="0px" CellSpacing="2" CellPadding="10" GridLines="None" ShowHeader="false"
OnSelectedIndexChanged="grvHeadline_SelectedIndexChanged" OnRowDataBound="grvHeadline_RowDataBound">
<HeaderStyle CssClass="BasicColumnTitle" />
<AlternatingRowStyle CssClass="RowStyleEven" />
<RowStyle CssClass="RowStyleOdd" />
<SelectedRowStyle CssClass="RowStyleHi heallineSelected" />
<Columns>
<asp:TemplateField>
<HeaderStyle Width="10%" />
<ItemStyle Width="80%" />
<ItemTemplate>
<table style="border-spacing: 0px">
<tr>
<td>
<asp:Image ID="Image6" runat="server" ImageAlign="Left" Style="display: none" ImageUrl="../img/triangle-on.png" />
<asp:Image ID="Image1" runat="server" ImageAlign="Left" Style="display: none" ImageUrl="../img/triangle-off.png" />
<asp:Image ID="Image4" runat="server" Visible='<% #int.Parse(Eval("ThreadQty").ToString()) < 2%>'
ImageAlign="Left" ImageUrl="../img/Doc1.png" />
<asp:Image ID="Image5" runat="server" Visible='<% #int.Parse(Eval("ThreadQty").ToString())>=2%>'
ImageAlign="Left" ImageUrl="../img/Doc2.png" />
</td>
<td>
<asp:Label CssClass="bold" Style="resize: none; width: 100%; margin-left: 5px; vertical-align: bottom;
text-align: justify" ID="txt1" Text='<%#DevideString(HttpUtility.HtmlEncode(Eval("Subject")), 35) %>' runat="server">
</asp:Label><br />
<asp:Label CssClass="bold" Style="resize: none; margin-left: 5px; vertical-align: bottom; text-align: justify;"
ID="txt2" Text='<%#DevideString(HttpUtility.HtmlEncode(Eval("AuthorName")), 35) %>' runat="server" />
</td>
</tr>
</table>
<asp:HiddenField ID="hdfSelectedId" runat="server" Value='<% #Eval("Id")%>' />
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField>
<HeaderStyle Width="3%" />
<ItemStyle Width="20%" VerticalAlign="Top" CssClass="position" />
<ItemTemplate>
<table style="border-spacing: 0px; height: 100%;" width="100%">
<tr>
<td class="Top Left" style="height: auto;">
<asp:Image ID="Image3" runat="server" CssClass="Top Left" Visible='<%# ShowImgUpScreen(DateTime.Parse(Eval("BulletinDateFrom").ToString()),Eval("ThreadQty").ToString()) %>'
ImageAlign="Left" Style="vertical-align: top;" ImageUrl="~/img/Up1.png" />
<asp:Image ID="Image7" runat="server" CssClass="Top Left" Visible='<%# ShowImgNewScreen(DateTime.Parse(Eval("BulletinDateFrom").ToString()),Eval("ThreadQty").ToString()) %>'
ImageAlign="Left" Style="vertical-align: top;" ImageUrl="~/img/New2.png" />
</td>
</tr>
</table>
<asp:Label ID="Label4" runat="server" CssClass="Right Bottom" Text='<%#CheckDateTime((DateTime)Eval("BulletinDateFrom"))%>'
Style="float: right; position: absolute; bottom: 3px; right: 3px" />
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
</asp:Panel>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="grvHeadline" EventName="SelectedIndexChanged" />
</Triggers>
</asp:UpdatePanel>
<table class="BasicValue" style="width: 100%; margin-bottom: -58px; margin-top: 43.5px">
<tr style="padding: 0px 0px 0px 0px; margin: 100px 0px 0px 0px;">
<td class="BasicValue" style="padding: 5px 10px 5px 10px">
<asp:Button ID="btnNewHeadline" class="ButtonSchedule" runat="server" Text="ヘッドラインの新親追加"
Height="100%" Style="text-align: center; float: right; margin: 0px 5px 0px 0px;"
Width="165px" OnClick="btnNewHeadlineRegist_Click" />
</td>
</tr>
</table>
</td>
<td style="width: 1%;" class="Center">
<div class="verticalLine" style="background-color: #C5C5CA; text-align: center; height: 696px;
width: 4px; margin-left: 48%">
</div>
</td>
<td style="width: 49%; position: relative" class="Top">
<asp:UpdatePanel ID="UpdatePanel2" runat="server">
<ContentTemplate>
<asp:HiddenField ID="hdfNotificationId" runat="server" />
<asp:GridView ID="gdvNotification" runat="server" AutoGenerateColumns="False" Style="width: 100%;"
BorderWidth="0px" CellSpacing="0" CellPadding="0" GridLines="None" PageSize="1"
AllowPaging="True" ShowHeader="false" OnPageIndexChanging="gdvNotification_PageIndexChanging">
<HeaderStyle CssClass="BasicColumnTitle" />
<Columns>
<asp:TemplateField>
<ItemTemplate>
<asp:Panel ID="panel1" runat="server" Width="100%" Height="618" ScrollBars="Vertical">
<table style="width: 100%;">
<tbody>
<tr style="height: 40px">
<td class="BasicValue" style="vertical-align: bottom;padding-left:2em">
<div>
<asp:Label ID="lblhead" CssClass="bold" runat="server" Text='<% #Eval("Subject")%>' Style=" font-weight: bold"></asp:Label>
</div>
</td>
</tr>
<tr style="height: 40px">
<td class=" BasicValue" style="vertical-align: bottom ;padding-left: 2em;">
<div>
<asp:Label ID="Label2" runat="server" Style=" font-weight: bold" Text='<% #Eval("AuthorName")%>'></asp:Label><asp:Label
ID="Label3" runat="server" Style="float: right" Text='<%# string.Format("{0:yyyy/MM/dd hh:mm}",Eval("BulletinDateFrom"))%>'></asp:Label></div>
</td>
</tr>
<tr style="height: 40px">
<td class="BasicValue" style="vertical-align: bottom">
<div>
<asp:Label ID="lblSection" runat="server" Style="padding-left: 2em;" Text='<%# GetSectionName(Eval("Id").ToString())%>'></asp:Label>
</div>
</tr>
<tr style="height: 497px;">
<td class="BasicValue" style="text-align: left; vertical-align: top; padding-left:2em ">
<asp:Label ID="lblContent" runat="server"
Text='<% #Eval("Contents")%>'></asp:Label>
</td>
</tr>
</tbody>
</table>
</asp:Panel>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
<asp:Panel runat="server" ID="fakepanel" Height="30px">
</asp:Panel>
<div class="Center" style="margin-bottom: 0px; margin-top: 0cm; font-family: ＭＳ Ｐゴシック">
<asp:Panel ID="pnPageIndex" runat="server">
<span>Page
<asp:Label ID="lbPageIndex" runat="server" /><span>/</span><asp:Label ID="lblTotalPage"
runat="server"></asp:Label>
<span>(<asp:Label ID="lbTotal" runat="server"></asp:Label>件)</span></span>
</asp:Panel>
</div>
<table style="width: 100%;position: absolute; bottom: 0px">
<tr style="margin: 0px 0px 0px 0px;">
<td class="BasicValue" style="margin: 0px 0px 0px 0px; width: 100%; padding: 5px 10px 5px 10px">
<asp:Button ID="btnEditNotification" CssClass="ButtonSchedule" runat="server" Text="お知らせの編集"
Height="85%" Style="float: left; text-align: center; margin: 0px 10px 0px 0px; position: relative; left: 260px"
Width="158px" OnClick="btnEditNotification_Click" />
<asp:Button ID="btnUpdateNotification" CssClass="ButtonSchedule" runat="server" Text="このお知らせに追記"
Height="85%" Style="float: right; text-align: center; margin: 0px 5px 0px 0px;"
Width="158px" OnClick="btnUpdateNotification_Click" />
</td>
</tr>
</table>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="grvHeadline" EventName="SelectedIndexChanged" />
<asp:AsyncPostBackTrigger ControlID="gdvNotification" EventName="PageIndexChanging" />
</Triggers>
</asp:UpdatePanel>
</td>
</tr>
</table>
Can somebody tell me what's happening?
(p/s: i'm trying to learning English, if you don't understand, please tell me.)

Cover entire row with a single column - width issue

I have repeater & table controls. My table has one column. When I run the code each cell in the row covers around 25% (based on content of cell) of the row & background color also changes for that area only. I want cell to cover the entire row. Following is the code. I set the column width to 100%, however it did not solve the issue. I do not want to hard code the width for cell.
<div style="overflow-y: auto; width: 100%; height: 395px; border: 0px solid #3C454F; background-color: #FFFBE6; border: 0px solid #3C454F;">
<asp:Repeater ID="TestList" runat="server">
<HeaderTemplate>
<table>
</HeaderTemplate>
<ItemTemplate>
<tr style="background-color: aqua; padding-top: 5px">
<td style="width: 100%;">
<%#Container.DataItem%>
</td>
</tr>
</ItemTemplate>
<AlternatingItemTemplate>
<tr style="background-color: white; padding-top: 5px">
<td style="width: 100%;">
<%#Container.DataItem%>
</td>
</tr>
</AlternatingItemTemplate>
<FooterTemplate>
</table>
</FooterTemplate>
</asp:Repeater>
</div>

Try this one:
<div style="overflow-y: auto; width: 100%; height: 395px; border: 0px solid #3C454F; background-color: #FFFBE6; border: 0px solid #3C454F;">
<asp:Repeater ID="TestList" runat="server">
<HeaderTemplate>
<table style="width:100%;">
</HeaderTemplate>
<ItemTemplate>
<tr style="background-color: aqua; padding-top: 5px">
<td style="width: 100%;">
<%#Container.DataItem%>
</td>
</tr>
</ItemTemplate>
<AlternatingItemTemplate>
<tr style="background-color: white; padding-top: 5px">
<td style="width: 100%;">
<%#Container.DataItem%>
</td>
</tr>
</AlternatingItemTemplate>
<FooterTemplate>
</table>
</FooterTemplate>
</asp:Repeater>
</div>

How to Reopen pure CSS3 modal dialog

I have following Modal Dialog (popup) using only CSS3 in my asp page for user registration:
HTML :
<%-- Modal PopUp starts here--%>
<div id="openModal" class="modalDialog">
<div> X
<table style="width:100%;">
<tr>
<td style="text-align: center; width: 100%;"></td>
</tr>
<tr>
<td style="text-align: center; width: 100%;">
<asp:Label ID="lblErrorMSG2" runat="server" Font-Bold="True" ForeColor="#FF3300" Text="Email ID Already Taken " Visible="False"></asp:Label>
</td>
</tr>
<tr>
<td style="text-align: center; width: 100%;">
<input id="txtCustFName" name="txtCustFName" type="text" required placeholder="Enter Your First Name" style="width: 80%" />
</td>
</td>
</tr>
<tr>
<td style="text-align: center; width: 100%;">
<input id="txtCustLName" name="txtCustLName" type="text" required placeholder="Enter Your Last Name" style="width: 80%" />
</td>
</td>
</tr>
<tr>
<td style="text-align: center; width: 100%;">
<input id="txtCustREmail" name="txtCustREmail" type="email" required placeholder="Enter Valid Email ID" style="width: 80%" />
</td>
</td>
</tr>
<tr>
<td style="text-align: center; width: 100%;">
<input id="txtCustRPwd" name="txtCustRPwd" type="password" required placeholder="Enter Password" style="width: 80%" />
</td>
</td>
</tr>
<tr>
<td style="text-align: center; width: 100%;">
<input id="txtCustRePwd" name="txtCustRePwd" type="password" required placeholder="ReType Password" style="width: 80%" />
</td>
</td>
</tr>
<tr>
<td style="text-align: center; width: 100%;">
<input id="txtCustPh" name="txtCustPh" type="number" size="10" min="10" max="10" required placeholder="Enter Valid Mobile No" style="width: 80%" />
</td>
</td>
</tr>
<tr>
<td class="style1" style="text-align: center; width: 100%;" onclick="btnSignUp()">
<asp:Button ID="btnSingUp" runat="server" onclick="signUp" Text="Login" />
</td>
</tr>
<tr>
<td style="text-align: center; width: 100%;"> </td>
</tr>
</table>
</div>
</div>
<%--Modal PopUp Ends Here--%>
CSS :
.modalDialog {
position: fixed;
font-family: Arial, Helvetica, sans-serif;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: rgba(0,0,0,0.8);
z-index: 99999;
opacity:0;
-webkit-transition: opacity 400ms ease-in;
-moz-transition: opacity 400ms ease-in;
transition: opacity 400ms ease-in;
pointer-events: none;
}
.modalDialog:target {
opacity:1;
pointer-events: auto;
}
.modalDialog > div {
width: 400px;
position: relative;
margin: 10% auto;
padding: 5px 20px 13px 20px;
border-radius: 10px;
background: #fff;
background: -moz-linear-gradient(#fff, #999);
background: -webkit-linear-gradient(#fff, #999);
background: -o-linear-gradient(#fff, #999);
}
.close {
background: #606061;
color: #FFFFFF;
line-height: 25px;
position: absolute;
right: -12px;
text-align: center;
top: -10px;
width: 24px;
text-decoration: none;
font-weight: bold;
-webkit-border-radius: 12px;
-moz-border-radius: 12px;
border-radius: 12px;
-moz-box-shadow: 1px 1px 3px #000;
-webkit-box-shadow: 1px 1px 3px #000;
box-shadow: 1px 1px 3px #000;}
.close:hover { background: #00d9ff;
}
In my asp page I've following anchor tag which is used to display the popup:
Register
Now the problem is:
As this is registration form, I want server side validation of existing email id .
If user entered email id already exist in DB I want to reopen the above modal dialog with an error message Email ID already exist.
I m not able to reopen that dialog box.
Is there any way to do this using js?
Plz help me.
The tutorial for modal dialog is on site:
click here
For visualizing modal dialog:
click here
Thanx in advance.

for server side validation I suggest you to use javascript web method for this. By using this web method your popup didn't close while page check server side validation.....

Change the :target to also accept a class:
.modalDialog:target, .modalDialog.target {
opacity:1;
pointer-events: auto;
}
And then when you find out the email is invalid, you can just do:
$('.modalDialog').addClass('target')
or the non-jquery equivalent.

Webcontrols from a repeater control loose their value

It seams that the solution for this problem would be what it is said in this post: http://codinglifestyle.wordpress.com/2009/10/08/repeaters-and-lost-data-after-postback-viewstate/ however it seams that for me does not work :|
So I have a page and in that page a repeater that has 3 webcontrols.
<asp:Repeater ID="repFissaggio" runat="server" OnItemCreated="repFissaggio_ItemCreated" EnableViewState="true" >
<ItemTemplate>
<table width="100%">
<tr>
<td style="width:30%;border: gray 1px solid;">
<div style="text-align: center; width:100%; border-right: gray 1px solid; border-top: gray 1px solid; border-left: gray 1px solid;border-bottom: gray 1px solid; FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif; FONT-WEIGHT: bold; FONT-SIZE: 12px; background-color:gainsboro;">Disegno Articolo</div>
<asp:Image runat="server" ImageUrl='<%# GetFileAddress(Container.DataItem) %>' Width='220px' ID="imgDisegnoArt" EnableViewState="false"></asp:Image>
</td>
<td style="width:65%">
<div style="text-align: center; width:100%; border-right: gray 1px solid; border-top: gray 1px solid; border-left: gray 1px solid;border-bottom: gray 1px solid; FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif; FONT-WEIGHT: bold; FONT-SIZE: 12px; background-color:gainsboro;">Informazioni Articolo</div>
<gsc:SchSolettoFinissaggioArticoloUC ID="ucSchSolettoFinissaggioArticolo" runat="server"></gsc:SchSolettoFinissaggioArticoloUC>
</td>
</tr>
<tr>
<td style="border: gray 1px solid;">
<div style="text-align: center; width:100%; border-right: gray 1px solid; border-top: gray 1px solid; border-left: gray 1px solid;border-bottom: gray 1px solid; FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif; FONT-WEIGHT: bold; FONT-SIZE: 12px; background-color:gainsboro;">Schema Finissaggio</div>
<asp:Image runat="server" ImageUrl='<%# GetFileAddress(Container.DataItem) %>' Width='220px' ID="imgSchedaFissaggio" EnableViewState="false"></asp:Image>
<asp:Label ID="divfileName" runat="server" Text='<%# GetFileName(Container.DataItem) %>' style="text-align: center; width:100%"></asp:Label>
</td>
<td>
<fieldset style="padding: 10px,10px,10px,10px; border-bottom-width: 5px">
<legend>Sistema di Industrializzazione</legend>
<gsc:SchSolettoSistemaProdIndusUC ID="ucSchSolettoSistemaIndus" runat="server"></gsc:SchSolettoSistemaProdIndusUC>
</fieldset>
<br />
<fieldset style="padding: 10px,10px,10px,10px; border-bottom-width: 5px">
<legend>Sistema di Produzione</legend>
<gsc:SchSolettoSistemaProdIndusUC ID="ucSchSolettoSistemaProd" runat="server"></gsc:SchSolettoSistemaProdIndusUC>
</fieldset>
</td>
</tr>
</table>
</ItemTemplate>
</asp:Repeater>
On init I call this method
protected override void InitEditor()
{
if (!IsPostBack)
{
...
repFissaggio.DataSource = SolettoDS.SoleXSchTec;
repFissaggio.DataBind();
}
}
Above this repeater I have other webcontrols. When I change a value of a dropdown the form is submitted. When that happens values of webcontrol from repeater looses their value.
What do you suggest to do?
Thanks.

I found the answer: I should put binding in protected void repFissaggio_ItemDataBound(object sender, RepeaterItemEventArgs e) and not in repFissaggio_ItemCreated