We Keep Coding

ASP.NET: UpdatePanel not displaying even when Visible set to True

I have two Update Panels in an aspx page and one ModalPopupExtender inside each of them. The problem I am facing is that, I have set the Visible property to false in the aspx page and set it to True when it needs to be displayed. But the UpdatePanel is not showing up even though I have set Visible=True property.
aspx code:
<%--Request closed --%>
<asp:UpdatePanel ID="udpModalReqClose" runat="server" Visible="false">
<ContentTemplate>
<div style="display:none">
<asp:Button ID="btnDummyButton_ReqClose" UseSubmitBehavior="true" runat="server" Text="DummyButton" Style="display: none;" />
</div>
<asp:Panel ID="pnlCloseReq" runat="server" BackColor="White" BorderStyle="Solid" BorderColor="Black" BorderWidth="1px">
<div>
<table id="Table24" runat="server" border="0" cellpadding="4" cellspacing="10" width="400px">
<tr>
<td align="center">
<asp:Label ID="lblcloseSuccessOPR" runat="server" Font-Bold="true" ForeColor="Red" />
</td>
</tr>
<tr>
<td style="height: 5px;"></td>
</tr>
<tr>
<td align="center">
<asp:Button ID="btn_okclose" runat="server" SkinID="btnSearch" CssClass="btnSearch" OnClick="btnPOCPIRedirect_Click"
CausesValidation="false" align="center" Text="OK" Width="65px" />
</td>
</tr>
<tr>
<td style="height: 5px;"></td>
</tr>
</table>
</div>
</asp:Panel>
<cc1:ModalPopupExtender ID="mpeClosedSuccess" runat="server" PopupControlID="pnlCloseReq" TargetControlID="btnDummyButton_ReqClose"
BackgroundCssClass="modalPopup1" DropShadow="true" BehaviorID="mpe">
</cc1:ModalPopupExtender>
</ContentTemplate>
</asp:UpdatePanel>
<%--Request declined --%>
<asp:UpdatePanel ID="udpModalReqDecline" runat="server" Visible="false">
<ContentTemplate>
<div style="display:none">
<asp:Button ID="btnDummyButton_ReqDecline" UseSubmitBehavior="true" runat="server" Text="DummyButton" Style="display: none;" />
</div>
<asp:Panel ID="pnlRequestDecline" runat="server" BackColor="White" BorderStyle="Solid" BorderColor="Black" BorderWidth="1px">
<div>
<table id="Table17" runat="server" border="0" cellpadding="4" cellspacing="10" width="400px">
<tr>
<td align="center">
<asp:Label ID="lblRequestDecline" runat="server" Font-Bold="true" ForeColor="Red" />
</td>
</tr>
<tr>
<td style="height: 5px;"></td>
</tr>
<tr>
<td align="center">
<asp:Button ID="Button4" runat="server" SkinID="btnSearch" CssClass="btnSearch" OnClick="btnPOCPIRedirect_Click"
CausesValidation="false" align="center" Text="OK" Width="65px" />
</td>
</tr>
<tr>
<td style="height: 5px;"></td>
</tr>
</table>
</div>
</asp:Panel>
<cc1:ModalPopupExtender ID="mpeRequestDecline" runat="server" PopupControlID="pnlRequestDecline" TargetControlID="btnDummyButton_ReqDecline"
BackgroundCssClass="modalPopup1" DropShadow="true" BehaviorID="mpe">
</cc1:ModalPopupExtender>
</ContentTemplate>
</asp:UpdatePanel>
Link buttons which triggers the modalpopup in aspx:
<ItemTemplate>
<asp:LinkButton ID="LinkButton3" OnClick="lnkCloseReleaseHL" runat="server"
Text="Close"></asp:LinkButton>
</ItemTemplate>
<asp:TemplateColumn HeaderText="Decline">
<ItemTemplate>
<asp:LinkButton ID="lnkDeclineHLRelease" runat="server" OnClick="lnkDeclineHLRelease_Click">Decline All</asp:LinkButton>
</ItemTemplate>
Code behind:
public void lnkCloseReleaseHL(object sender, System.EventArgs e)
{
udpModalReqClose.Visible = true;
string successMsg = "Request has been closed Succesfully.";
lblcloseSuccessOPR.Text = successMsg;
mpeClosedSuccess.Show();
}
protected void lnkDeclineHLRelease_Click(object sender, EventArgs e)
{
udpModalReqDecline.Visible = true;
string successMsg = "Request has been declined.";
lblRequestDecline.Text = successMsg;
mpeRequestDecline.Show();
}
If I do not set the Visible=False property in the aspx page, one of the ModalPopup is shown on the webpage, blank with the 'OK' button I have inserted in the popup.
Also, if I have just one UpdatePanel in my aspx page, the popup works perfectly fine without setting Visible property. Once I add another UpdatePanel below it, this problem occurs(screenshot in the link), where the panel with 'OK' button is displayed on page load.
Panel appearing on page with the 'OK' button
I tried searching for every possible solutions on the web but nothing has helped me. If someone can please guide me how I can resolve this, it would be of great help. I just want to know how I can make multiple UpdatePanels work without having this issue.

I'm not sure, but you can try using
style="display:none"
instead of
Visible="false"

.Net Listview with flow layout display horizontally

I am working on my first Mobile Site using bootstrap. I am trying to create a Listview that is responsive, I made some research and I need to select Layout= Flow but my issue is that this layout flows from top to bottom (one column). I need to be able to display it from left to right up to 4 items, but I can't make it work.
code
<asp:ListView ID="ProductsListView" DataSourceID="SqlDataSource1" runat="server" DataKeyNames="ID">
<LayoutTemplate >
<div ID="itemPlaceholderContainer" runat="server" style="">
<span runat="server" id="itemPlaceholder" />
</div>
<div style="">
</div>
</LayoutTemplate>
<ItemTemplate>
<span style="">ID:
<asp:Label ID="IDLabel" runat="server" Text='<%# Eval("ID") %>' />
</span>
</ItemTemplate>
</asp:ListView>

It looks like you are having the same problem as this user.
horizontal list view in asp.net
The LayoutTemplate contains a block level element (the div). This means that the ItemTemplate will be wrapped in the div which will take up the full available width.
You should be able to just remove div from the LayoutTemplate, make it a span, or make it a table like in the Selected Answer of the post I linked from #mshsayem
If you just want to show the images in a single row, you can just put
them in the columns of a single row. Try rewriting the listview markup
as follows (move table,tr markups into LayoutTemplate):
<asp:ListView runat="server" ID="PageHorizon">
<LayoutTemplate>
<table>
<tr>
<asp:PlaceHolder ID="itemPlaceholder" runat="server"></asp:PlaceHolder>
</tr>
</table>
</LayoutTemplate>
<ItemTemplate>
<td>
<img src='<%#Eval("ImagePath")%>' alt="Single Image"
width="64px" height="64px" />
</td>
</ItemTemplate>
</asp:ListView>

The script below displays the Listview item with layout = flow horizontally and it is responsive. I hope someone find it useful.
<div style=" text-align: center;">
<!-- start listview-->
<asp:ListView ID="ListView1" runat="server" DataKeyNames="ID" DataSourceID="SqlDataSource1">
<LayoutTemplate >
<div ID="itemPlaceholderContainer" runat="server" >
<span runat="server" id="itemPlaceholder" />
</div>
</LayoutTemplate>
<EmptyDataTemplate>
<span>No data was returned.</span>
</EmptyDataTemplate>
<ItemTemplate>
<table style="display: inline-block;" >
<tr >
<td colspan="3">
<asp:Image ID="Image1" runat="server" Height="200px"
ImageUrl='<%# Eval("Picture") %>' Width="150px" />
</td>
</tr>
<tr>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td>
</td>
<td>
<span style="background-color: #FFFBD6;color: #333333;">
<asp:Label ID="OrderOfferNameLabel" runat="server"
Text='<%# Eval("WHATEVER") %>'></asp:Label>
</span>
</td>
<td>
</td>
</tr>
<tr>
<td>
</td>
<td>
<span style="background-color: #FFFBD6;color: #333333;">
<asp:Label ID="ProductNameLabel" runat="server"
Text='<%# Eval("WHATEVER") %>'></asp:Label>
</span>
</td>
<td>
</td>
</tr>
<tr>
<td colspan="3">
<asp:Button ID="Button1" runat="server" Height="44px"
style="height: 26px; width: 56px" Text="Button" Width="380px" />
</td>
</tr>
</table>
</ItemTemplate>
</asp:ListView>
</div>

Display repeater data horizontally

In continuation to my last question, I was suggested to use Repeater for displaying data fetched from SQL Db in horizontal layout.
https://stackoverflow.com/questions/25447351/asp-net-c-sharp-customized-gridview/25458682#25458682
As per suggestion I implemented a repeater control. The data was displayed in horizontal layout but only second column fetched from the DB.
How to get the first column too:
<asp:Repeater ID="RepDetails" runat="server">
<HeaderTemplate>
<asp:Literal ID="litRowStart" runat="server"></asp:Literal>
<td>
<asp:Label ID="lblExpID" runat="server" Text='<%#Eval("Exp_ID") %>' Font-Bold="true" />
</td>
<asp:Literal ID="litRowEnd" runat="server"></asp:Literal>
</HeaderTemplate>
<ItemTemplate>
<asp:Literal ID="litRowStart1" runat="server"></asp:Literal>
<td>
<asp:Label ID="lblExpAmt" runat="server" Text='<%#Eval("Amt_Allocated") %>' Font-Bold="true" />
</td>
<asp:Literal ID="litRowEnd1" runat="server"></asp:Literal>
</ItemTemplate>
</asp:Repeater>

Create your repeater like this:
<table>
<tr>
<asp:Repeater ID="repTest" runat="server">
<ItemTemplate>
<td>
<div>
<b>
<%#Eval("NameofColumnYOuWantToShowAsHeader") %>
</b>
</div>
<div>
<%#Eval("YourColumnValue") %>
</div>
</td>
</ItemTemplate>
</asp:Repeater>
</tr>
</table>
For more information about repeater:
Repeater Insert, Update, Delete in asp .net

Try this one using AlternateingItemTemplate:
<asp:Repeater ID="RepDetails" runat="server">
<ItemTemplate>
<td>
<asp:Literal ID="litRowStart" runat="server"></asp:Literal>
<asp:Label ID="lblExpID" runat="server" Text='<%#Eval("Exp_ID") %>' Font-Bold="true" />
<asp:Literal ID="litRowEnd" runat="server"></asp:Literal>
</td>
</ItemTemplate>
<AlternatingItemTemplate>
<td>
<asp:Literal ID="litRowStart1" runat="server"></asp:Literal>
<asp:Label ID="lblExpAmt" runat="server" Text='<%#Eval("Amt_Allocated") %>' Font-Bold="true" />
<asp:Literal ID="litRowEnd1" runat="server"></asp:Literal>
</td>
</AlternatingItemTemplate>
</asp:Repeater>
Assuming that you're getting 2 rows in your datasource.

How to add paging capabilities to the Repeater control in ASP.Net?

I have an asp.net Repeater control .I have to display only 5 rows in the repeater. I searched about it in Google but most of the resources are talking about how to do it with DataSet. In my case, I am using SqlDataSource. So I can have paging in this Repeater control?
ASP.NET Code:
<asp:Repeater ID="Repeater3" runat="server" DataSourceID="SqlDataSource3">
<HeaderTemplate>
<div>
<table border="1">
<thead>
<tr>
<td colspan="3">
<center> <strong>Safety Quizzes Record</strong> </center>
</td>
</tr>
<tr>
<td>
<center> <strong>Quiz Title</strong> </center>
</td>
<td>
<center> <strong>Date & Time</strong> </center>
</td>
<td>
<center> <strong>Score</strong> </center>
</td>
</tr>
</thead>
</HeaderTemplate>
<ItemTemplate>
<tr>
<td>
<p>
<%# Eval("Title") %>
</p>
</td>
<td>
<p>
<%# Eval("DateTimeComplete") %>
</p>
</td>
<td>
<p>
<%# Eval("Score") %>
</p>
</td>
</tr>
</ItemTemplate>
<FooterTemplate>
</table>
</div>
</FooterTemplate>
</asp:Repeater>
<asp:SqlDataSource ID="SqlDataSource3" runat="server"
ConnectionString="<%$ ConnectionStrings:testConnectionString %>" SelectCommand="SELECT dbo.Quiz.Title, dbo.UserQuiz.DateTimeComplete, dbo.UserQuiz.Score
FROM dbo.employee INNER JOIN
dbo.UserQuiz ON dbo.employee.Username = dbo.UserQuiz.Username INNER JOIN
dbo.Quiz ON dbo.UserQuiz.QuizID = dbo.Quiz.QuizID
WHERE (dbo.employee.Username = #Username)">
<SelectParameters>
<asp:Parameter Name="Username" />
</SelectParameters>
</asp:SqlDataSource>
UPDATE:
What I want is showing only 5 items in the Repeater and the others will be listed on the other pages of the Repeater. So how I can have Pagining with SqlDataSource as mentioned above.

The Repeater control does not support paging out-of-the-box.
You could however implement it but it would require you to manually code it.
I would like to recommend you to change the Repeater control for the ListView control
Differences:
Repeater. This control does not support paging, updating, inserting or deleting operations out-of-the-box, if you want these features you would need to manually code them.
ListView. This is the most flexible of all data-bound controls. It's based on templates like the Repeater and DataList controls. It does support CRUD operations automatically mapping the operations agains your data source control. It does support server paging, and you can customize pretty much everything
BTW, since you are using a SqlDataSource, you would have to manually add paging code to your queries or store procedures, you could change that behavior if you use a LinqDataSource or an EntityDataSource
This is a simplified ListView markup:
<asp:ListView runat="server" ID="lv"
DataSourceID="lds" DataKeyNames="emp_id"
EnableModelValidation="false"
EnablePersistedSelection="false"
>
<LayoutTemplate>
<br />
<br />
A static header
<div runat="server" id="itemPlaceHolder"></div>
<br />
<asp:DataPager runat="server" PageSize="4">
<Fields>
<asp:NextPreviousPagerField
ButtonType="Button"
ShowFirstPageButton="true"
ShowLastPageButton="true"
/>
</Fields>
</asp:DataPager>
</LayoutTemplate>
<ItemTemplate>
<div style="background-color:Gray">
First Name
<div><asp:Label runat="server" ID="lbl" Text='<%# Eval("fname") %>'></asp:Label></div>
<br />
<asp:GridView ID="GridView1" runat="server" DataSource='<%# Eval("Achivements") %>' />
<br />
<asp:LinkButton ID="LinkButton1" Text="Select" CommandName="Select" runat="server" />
<asp:LinkButton ID="LinkButton2" Text="Edit" CommandName="Edit" runat="server" />
<asp:LinkButton ID="LinkButton4" Text="Delete" CommandName="Delete" runat="server" />
</div>
</ItemTemplate>
<ItemSeparatorTemplate>
<hr />
</ItemSeparatorTemplate>
</asp:ListView>

Please use the PagedDataSource shown at link http://msdn.microsoft.com/en-us/library/system.web.ui.webcontrols.pageddatasource.aspx

Toggle visibility of specific elements in a ListView

I have a list view on a page and am trying emulate the toggling effect of a tree view. When first bound the detail elements (LBL_ActionTitle, LBL_Action, LBL_UrlTitle, LBL_Url) are set to visibility = false. I would like to have the click event of the element (LB_ExpandCollapse) toggle the visibility of detail elements directly related to it. IE not all the elements of that type on the page. I am not sure how to accomplish this, or if it can be done, and was hoping that someone could point me in the right direction. Here is the control for reference.
<div id="logContainer">
<asp:ListView ID=LV_Logs runat="server">
<LayoutTemplate>
<table border="0" cellpadding="0" cellspacing="0" style="width:100%">
<tr>
<td></td>
<td style="width:85%" />
</tr>
<asp:PlaceHolder ID="itemPlaceholder" runat="server" />
</table>
</LayoutTemplate>
<ItemTemplate>
<tr>
<td>
<hr />
<asp:LinkButton ID="LB_ExpandCollapse" runat="server" CausesValidation="false" OnClick="expandCollapse_Click">+</asp:LinkButton>
<asp:Label ID="LBL_MessageType" runat="server" Text='<%# Eval("messageType") %>'></asp:Label>
<hr />
</td>
<td style="text-align: right">
<hr />
<asp:Label ID="LBL_Message" runat="server" Text='<%# Eval("messageTime") %>'></asp:Label>
<hr />
</td>
</tr>
<tr style="text-align: left">
<td style="padding-left: 65px">
<asp:Label ID="LBL_ActionTitle" Visibility="false" runat="server" Text="User Action:"></asp:Label>
</td>
<td style="padding-left: 10px">
<asp:Label ID="LBL_Action" Visibility="false" runat="server" Text='<%# Eval("action") %>'></asp:Label>
</td>
</tr>
<tr style="text-align: left">
<td style="padding-left: 65px">
<asp:Label ID="LBL_UrlTitle" Visibility="false" runat="server" Text="URL:"></asp:Label>
</td>
<td style="padding-left: 10px">
<asp:Label ID="LBL_Url" runat="server" Visibility="false" Text='<%# Eval("url") %>'></asp:Label>
</td>
</tr>
</ItemTemplate>
</asp:ListView>
<asp:DataPager ID="DataPagerProducts" runat="server" PagedControlID="LV_Logs"
PageSize="20" OnPreRender="DataPagerProducts_PreRender">
<Fields>
<asp:NextPreviousPagerField ShowFirstPageButton="True" ShowNextPageButton="False" />
<asp:NumericPagerField />
<asp:NextPreviousPagerField ShowLastPageButton="True" ShowPreviousPageButton="False" />
</Fields>
</asp:DataPager>

I suggest you put the ID of the record as an ID on the TR containing the fields you want toggled. Then in your expandCollapseClick also pass the ID, so that you can set the row's style to display:block. Of course this assumes that all the rows start out at display:none. ie.
<tr id='<%# Eval("recordId") %>' style='display:none'>
and then in Javascript (pseudo-code)
function expandCollapseClick(row)
{
document.getElementById(row).style.display = 'block';
}
Then change your button to execute client-side as in:
<button onclick='expandCollapse(<%# Eval("recordId") %>)'>+</button>
This will call the code to display the row, passing in the id of the correct row. Of course this assumes that the table is fully populated when the page is retrieved and all you want to do is hide/show detail.