We Keep Coding

how to stop ajax modal popup from closing in an update panel that is running a timer

I have an asp update panel that contains a repeater with items bound to a dataset showing the names of tables on which a particular sql query is about to run. For each item in the repeater I also show the status of the query (Waiting/Running/Completed), when the query started, and when the query finished.
When the user presses a run button, each table is queried in turn, and the status/start time/end time are all updated to give the user feedback as to where the queries are up to. This is all achieved using asp:timer and asp:AsyncPostBackTrigger. As each query finishes a "data preview" button is also unhidden that opens an ajax modal popup box to show the data extracted.
My issue is that if a user presses the data preview button whilst the timer is still running, the popup opens and then immediately closes. Once all queries have finished and the timer is closed, all is fine - but I would like the user to be able to able to preview the results of each query at the point they finish.
I have found on other forums the suggestion to move the modal popup box out of the update panel, but then I can't find a way to link the repeater buttons to the popup controls.
Any ideas?
ASPX page extract:
<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
<asp:Timer runat="server" ID="Timer1" Interval="1000" Enabled="false" ontick="Timer1_Tick" />
<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Always">
<Triggers>
<asp:AsyncPostBackTrigger ControlID="Timer1" EventName="Tick" />
</Triggers>
<ContentTemplate>
<asp:ImageButton ID="Export" ImageUrl='/Stock/Some.png' runat="server" Enabled="False" Visible="False" />
<br />
<br />
<asp:Repeater ID="rptTbl" runat="server">
<HeaderTemplate>
<h3>Querying Tables:</h3>
<table id="Tbls" class="table">
<tr>
<td width="40%" style="border-right: 1px solid #494444; border-bottom: 1px solid #494444" >
<b>Table Name</b>
</td>
<td width="20%" style="border-right: 1px solid #494444; border-bottom: 1px solid #494444" >
<b>Status</b>
</td>
<td width="15%" style="border-right: 1px solid #494444; border-bottom: 1px solid #494444" >
<b>Query Start</b>
</td>
<td width="15%" style="border-right: 1px solid #494444; border-bottom: 1px solid #494444" >
<b>Query End</b>
</td>
<td width="10%" style="border-bottom: 1px solid #494444" >
<b>Preview Data</b>
</td>
</tr>
</HeaderTemplate>
<ItemTemplate>
<tr>
<td style="border-right: 1px solid #494444;">
<asp:Label ID="TblData" runat="server" Text='<%# Eval("table_name") %>'></asp:Label>
</td>
<td style="border-right: 1px solid #494444;">
<asp:Image ID="LoadingImg" runat="server" ImageUrl="~/Stock/Spinner.gif" Visible="False" Height="20px" /><asp:Label ID="LoadingLabel" runat="server" Text='Please Wait...'></asp:Label>
</td>
<td style="border-right: 1px solid #494444;">
<asp:Label ID="lblQuerySart" runat="server" Text=''></asp:Label>
</td>
<td style="border-right: 1px solid #494444;">
<asp:Label ID="lblQueryEnd" runat="server" Text=''></asp:Label>
</td>
<td>
<asp:ImageButton ID="BtnViewData" runat="server" AlternateText="Preview Data..." OnCommand="BtnViewData_Click" CommandArgument='<%# Eval("table_name") %>' CausesValidation="False" BorderStyle="Solid" BorderWidth="1px" ImageAlign="AbsMiddle" Height="20px" ImageUrl="~/Stock/Some.png" Visible="False" Enabled="False" />
<ajaxToolkit:modalpopupextender
id="MPE_ShowData" runat="server"
cancelcontrolid="ButtonDeleteCancel" okcontrolid="ButtonDeleleOkay"
targetcontrolid="BtnViewData" popupcontrolid="DivShowData"
backgroundcssclass="ModalPopupBG">
</ajaxToolkit:modalpopupextender>
<ajaxToolkit:confirmbuttonextender id="CBE_ShowData"
runat="server" targetcontrolid="BtnViewData" enabled="True"
displaymodalpopupid="MPE_ShowData">
</ajaxToolkit:confirmbuttonextender>
</td>
</tr>
</ItemTemplate>
<FooterTemplate>
</table>
</FooterTemplate>
</asp:Repeater>
<br>
</br>
</ContentTemplate>
</asp:UpdatePanel>
<asp:panel class="popupConfirmation" id="DivShowData"
style="display: none" runat="server" ScrollBars="Auto" Height="70%" Width="70%" BackColor="Gray">
<div class="popup_Container">
<div class="popup_Titlebar" id="PopupHeader">
<div class="TitlebarLeft">
Show The Data</div>
<div class="TitlebarRight" onclick="$get('ButtonDeleteCancel').click();">
</div>
</div>
<div class="popup_Body">
<p>
This is where the data appears!
</p>
</div>
<div class="popup_Buttons">
<input id="ButtonDeleleOkay" type="button" value="Okay" />
<input id="ButtonDeleteCancel" type="button" value="Cancel" />
</div>
</div>
</asp:panel>

DataList does not bind image

I am using Datalist and bind some information on it, but my Datalist is not showing my image.
Here is My Aspx Code:
<asp:DataList ID="datalistnewsrelease" runat="server" RepeatColumns="4" BorderColor="WhiteSmoke"
RepeatDirection="Vertical" RepeatLayout="Flow" Width="100%" OnItemCommand="datalistnews_ItemCommand">
<ItemTemplate>
<div class="newsbox m5">
<p class="black">
<asp:Label ID="lbldate" runat="server" class="b red" Text='<%#Eval("NewsReleaseDate") %>'></asp:Label>
<asp:Label ID="lblmonth" runat="server" class="b red" Text='<%#Eval("NesReleaseMonth") %>'></asp:Label>
<asp:Label ID="lblyear" runat="server" class="b red" Text='<%#Eval("NewsReleaseYear") %>'></asp:Label>
<br>
<asp:Label ID="lbltitle" runat="server" class="b blue" Text='<%#Eval("NewsReleaseTittle") %>'></asp:Label>
<a href="<%#Eval("NewsReleaseImage")%>" rel="gallery">
<img src="<%#Eval("NewsReleaseImage")%>" width="88" height="62" class="fr ml8" alt="">
</a>
<asp:ImageButton ID="NewsRelease" runat="server" Style="float: right;" img src="images/read.png"
CommandArgument='<%#Eval("NewReleaseId")%>' CommandName="View" />
</p>
<div class="cb pb5">
</div>
</div>
</ItemTemplate>
</asp:DataList>`
My code is similar to a Gridview I am binding the DataList to, but only that the image is not showing up.

Could you please share the value coming to "NewsReleaseImage" .
Is it plain image file name or relative path ? If it's plain file name then append relative your paths in ItemBound, if its fixed then you can append directly like below
src="/Images/<%#Eval("NewsReleaseImage")%>"

I suggest you to view the generated HTML and see the generated src attribute.

How to Scroll start with bottom when page is loaded

Hi I am doing a social network service using asp.net/c#, I have little problems with message sending.
when i am starting to send message scroll display like this. when i press send message it shows old message first and scroll is top, but i want newer message it mean's when i page loaded page should be showed new messages first
my aspx codes
<div style=" overflow-y:auto; height:368px; margin-top: -50px; border-top-style: groove; border-right-style: groove; border-left-style: groove; width: 602px; margin-left: 0px;" >
<asp:Repeater runat="server" ID="Repeater1" >
<ItemTemplate>
<div style="border-top: thin none #BBCEB3; border-bottom: thin none #BBCEB3; padding: 10px; width: 548px; margin-top: -10px; right: 10px; left: 10px; border-left-width: thin; margin-left: 15px; background-color: #fffff0; border-left-color: #BBCEB3; border-right-color: #BBCEB3; border-top-style: groove; border-bottom-style: groove;">
<br />
<div style="width: 58px; height: 40px">
<asp:Image ID="Image2" runat="server" Height="59px" ImageAlign="Top" ImageUrl='<%#Eval("SProfilePic") %> ' Width="55px" />
</div>
<div style="width: 307px; margin-left: 65px; margin-top: -60px">
<asp:Label ID="Label6" runat="server" Font-Bold="True" Font-Names="Arial" ForeColor="#000066"><%#Eval("SenderName") %> </asp:Label>
</div>
<div id="status" style=" width: 461px; margin-left: 78px; margin-top: 11px;"> <asp:Label ID="Label7" runat="server" Font-Italic="False" ForeColor="Black" Font-Size="Medium"><%#Eval("Messages") %> </asp:Label>
</div>
<div style="margin-left: 400px; background-color: #C0C0C0;">
<asp:Label ID="Label11" runat="server" Text="" Font-Size="Small"><%#Eval("Time") %> </asp:Label>
</div>
</div>
</ItemTemplate>

Put server controller there for example this:
<asp:Button ID="BtnOutside" runat="server" Text="Random" style="margin-left:-999px;" />
And then use
Page.SetFocus(Me.BtnOutside.ClientID);
To get focus to that button which is not visible to the client because of the negative margin. This should push the scroll bar to the bottom.

Put this in your code wherever you want to Focus on -- You can use this
multilple times in the same code set just change the "ID"
<asp:Button ID="FocusBottom" runat="server" Text="Random" style="margin-left:-999px;"
In the event(button click whatever) put in this.
Page.SetFocus(FocusBottom);
Change the (#######) to "ID" you want to call

Highlight the Selected LinkButton Inside List View

In asp.net C# webform Have a list view with one button after binding it convert to many buttons dynamically want to highlight selected button
<asp:ListView ID="ListViewCompanyServicesList" runat="server" ItemPlaceholderID="itemPlaceHolder" OnItemCommand="ListViewCompanyServicesList_ItemCommand">
<LayoutTemplate>
<div id="itemPlaceHolder" runat="server" style="margin-bottom: 0px;">
</div>
</LayoutTemplate>
<ItemTemplate>
<asp:LinkButton ID="btnTags" runat="server" Text='<%# Eval("Service") %>' CommandName="SelectService" CommandArgument='<%# Eval("ServiceId") %>' CssClass="label label-default" Style="display: inline-block" OnClick="btnTags_Click" />
</ItemTemplate>
<EmptyDataTemplate>
<div class="promote_contentBox2">
<p class="well" style="font-size: 80%;">No record Found</p>
</div>
</EmptyDataTemplate>
</asp:ListView>

You can change the css of the button that has been clicked.
btnTags.CssClass="your custom class";

ASP.NET Repeater Item add divider after each row

I have the following Repeater and I am trying to add a divider (dotted line or similar) after each row but the style is getting messed up, what am I doing wrong?
Code:
<ItemTemplate>
<table id="tableItem" runat="server">
<tr>
<td style="width:400px;">
<%-- <asp:Label ID="lblEmployeeId" runat="server" Text='<%#Eval("EmployeeId") %>' ></asp:Label>--%>
<asp:HiddenField ID="HdnEmployeeId" runat="server" Value='<%#Eval("EmployeeId") %>' />
<asp:Literal Text="" runat="server" ID="LiteralUser" ></asp:Literal>
</td>
</tr>
<tr>
<td style="width: 100px;">
<asp:HiddenField ID="HdnRequestId" runat="server" Value='<%#Eval("id") %>' />
<asp:Label ID="lblDate" runat="server" Text='<%#Eval("Date", "{0:dd/M/yyyy}") %>'></asp:Label>
</td>
<td style="width: 80px;">
<asp:Label ID="lblHours" runat="server" Text='<%#Eval("Hours") %>'></asp:Label>
</td>
<td style="width: 50px; font-size:10px;">
<asp:Label ID="lblPeriod" runat="server" Text='<%#Eval("AMorPM") %>'></asp:Label>
</td>
<td style="width: 850px; font-size:10px;">
<asp:Label ID="lblNote" runat="server" Text='<%#Eval("Note") %>'></asp:Label>
</td>
<td style="50px">
<asp:RadioButtonList ID="rbtVerified" runat="server" >
<asp:ListItem Value="1">Accept</asp:ListItem>
<asp:ListItem Value="2">Reject</asp:ListItem>
</asp:RadioButtonList>
</td>
<td>
<asp:TextBox ID="txtNotes" runat="server" ></asp:TextBox>
</td>
</tr>
<tr>
<td style="width:900px;">
<asp:Label ID="lblBreak" runat="server" Text="------------------------------------------------------------------------------"></asp:Label>
</td>
</tr>
</table>
By Style getting messed up I mean the dotted line is being displayed only under the first column (lblDate) and the lblDate width is expanded.

you can use a separator template and inside it insert <hr />
<asp:Repeater runat="server" ID="rp">
<SeparatorTemplate>
<hr />
</SeparatorTemplate>
</asp:Repeater>

Since your middle TR has 6 TDs, add attribute colspan="6" to TD in the 1st and the last row
<td colspan="6" style="width:400px;">
...
<td colspan="6" style="width:900px;">
By the way, you're specifying different width for the 1st and the last TD and both are less than summary width of inner TDs, so those styles won't have any effect and can be removed.

Another approach would be to spit out a div at the very end of your template and change its border to dotted. I tend to use this approach quiet often as it gives me the ability to easily add space between each item by targeting the div and adding margin around it.
So something like this:
<ItemTemplate>
...
<div class="divider"></div>
</ItemTemplate>
.divider
{
border: 1px dotted #C5C5C5;
height: 5px;
margin-bottom: 15px;
width: 100%;
}

Another way to do that just with with css flex
<div style="display: flex; align-items: center">
<div>My awesome article price:</div>
<div style="flex:1;border-bottom: dotted 1px #eee"></div>
<div>10.00€</div>
</div>