Develop Reference

Table border lines showing over panels ASP NET

I'm currently trying to figure out what the hell is happening, when I pop up a panel(date picker) when clicking a textbox, I get the table borders overlapping on the panel.
I'm pretty new to ASP NET / c# etc but from what I can see there is no 'show on top' or 'force top' option within the panel properties.
Thank you very much in advanced, pic of the issue and code for that section below as well.
EDIT: it also only seems to be the 'dates' that have the lines, as you can see Mon / tues and the month picker don't seem to be affected.
I've now set EVERY style to z-index: -1; other than the panel which is z-index 99999 but still not working :(
Issue still happening but using the following code now:
Head
<style type="text/css">
#txtresumedate_PopupControlExtender
{
z-index:99999;
}
Also tried and forced the cssstyle onto the panel:
<style type="text/css">
.panel
{
z-index:99999;
}
Body:
`<tr>
<td class="style9">
Likely resumption date?</td>
<td class="style12">
<asp:TextBox ID="txtresumedate" runat="server" Width="100%"></asp:TextBox>
<ajax:PopupControlExtender ID="txtresumedate_PopupControlExtender"
runat="server" DynamicServicePath="" Enabled="True" ExtenderControlID=""
PopupControlID="Panel1" Position="Bottom" TargetControlID="txtresumedate">
</ajax:PopupControlExtender>
<asp:Panel ID="Panel1" runat="server" Width="400px"
BorderStyle="Double" >
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:Calendar ID="Calendar1" runat="server"
onselectionchanged="Calendar1_SelectionChanged" Width="200px">
</asp:Calendar>
</ContentTemplate>
</asp:UpdatePanel>
</asp:Panel>
</td>
</tr>`

The following should solve you problem:
#Panel1 {
background-color:#ffffff;
z-index:9999;
}

Try this - use z-index
<style type="text/css" />
#txtresumedate_PopupControlExtender
{
z-index:99999; // make sure this should be greater then table's z-index
}
</style>

Maintaining page scroll position after updatepanel partial postback

I am a beginner at ASP.NET and I have a problem maintaining the scroll position of the page after a partial postback of an UpdatePanel. I tried setting MaintainScrollPositionOnPostback="true" in <%# Page Language="C#" ...%> but it didn't do the trick. Please note that I am using (and have to use) FireFox.
Any help would be appreciated. Thank you! Here is my code:
<asp:Content ID="BodyContent" ContentPlaceHolderID="MainContent" runat="server">
<asp:HiddenField ID="ClassificationHiddenField" runat="server" />
<asp:HiddenField ID="DateHiddenField" runat="server" />
<table>
<tr>
<td>
<asp:Panel ID="GroupTitlePanel" CssClass="titlePanelBold" BorderStyle="Ridge" runat="server"
Width="400px">
<table id="MainTable">
<tr>
<td align="center" class="style3">
<asp:Label ID="GroupLabel" runat="server">
</asp:Label>
</td>
<td align="center" class="style4">
<asp:Label ID="ReturnLabel" runat="server" Text="Expected Return">
</asp:Label>
</td>
</tr>
</table>
</asp:Panel>
<br />
<asp:Panel ID="GroupMainPanel" runat="server" Width="400px">
</asp:Panel>
</td>
<td width='100px'>
</td>
<td>
</td>
</tr>
</table>
<asp:Panel ID="BottomPanel" runat="server" BorderStyle="Ridge">
<table>
<tr>
<td align="center">
<br />
<asp:ToolkitScriptManager ID="ToolkitScriptManager1" EnablePartialRendering="true"
runat="server">
</asp:ToolkitScriptManager>
<asp:CheckBoxList runat="server" ID="GroupCheckBoxList" RepeatColumns="10" RepeatDirection="Horizontal"
RepeatLayout="Table" AutoPostBack="true" ClientIDMode="AutoID" OnSelectedIndexChanged="GroupCheckBoxList_SelectedIndexChanged">
</asp:CheckBoxList>
</td>
</tr>
<tr>
<td>
<asp:UpdatePanel ID="GroupUpdatePanel" runat="server" Visible="true" UpdateMode="conditional">
<ContentTemplate>
<asp:Panel ID="GroupGraphPanel" runat="server" Visible="true">
</asp:Panel>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="GroupCheckBoxList" EventName="SelectedIndexChanged" />
</Triggers>
</asp:UpdatePanel>
</td>
</tr>
</table>
</asp:Panel>

This looks like the answer to your question. As a plus; it appears to work on every browser not just FF.
http://www.c-sharpcorner.com/Blogs/11804/maintain-scroll-position-on-postback-within-updatepanel.aspx
if you are using IE then its very simple just put the code in your
page directive.
<%# Page Language="C#" AutoEventWireup="true"
CodeFile="Default.aspx.cs" Inherits="_Default"
MaintainScrollPositionOnPostback="true" %>
but it will not work in Firefox for that you have to add one browser
file into your website
Right click on solution explorer > Add New Item
Select Browser File and add it to App_Browsers folder.
Add MaintainScrollPositionOnPostback capability to this browser file
as written below.
<browsers>
<browser refID="Mozilla">
<capabilities>
<capability name="supportsMaintainScrollPositionOnPostback" value="true" />
</capabilities>
</browser>
</browsers>
Some times this also not work,
Then a simple solution just add a blank Update panel after the grid
and onpostback just put the focus to that update panel it will work in
any browser.
in cs postbackevent updatepanel1.Focus();
If any problem just feel free to ask or any modification reply.

Though I understand that you are not familiar with javascript, still i'm suggesting this answer to you as there is no inbuilt solution for this in .net but you can achieve it with javascript with a work around. Don't worry Javascript ain't tough and is one of the important part of web development. So just give it a try. Might help you.
You can Refer to this Page : Maintaining page scroll position after updatepanel partial postback
<form id="form1" runat="server">
<asp:ScriptManager ID="SM1" runat="server" ScriptMode="Release" />
<script type="text/javascript">
// It is important to place this JavaScript code after ScriptManager1
var xPos, yPos;
var prm = Sys.WebForms.PageRequestManager.getInstance();
function BeginRequestHandler(sender, args) {
if ($get('<%=Panel1.ClientID%>') != null) {
// Get X and Y positions of scrollbar before the partial postback
xPos = $get('<%=Panel1.ClientID%>').scrollLeft;
yPos = $get('<%=Panel1.ClientID%>').scrollTop;
}
}
function EndRequestHandler(sender, args) {
if ($get('<%=Panel1.ClientID%>') != null) {
// Set X and Y positions back to the scrollbar
// after partial postback
$get('<%=Panel1.ClientID%>').scrollLeft = xPos;
$get('<%=Panel1.ClientID%>').scrollTop = yPos;
}
}
prm.add_beginRequest(BeginRequestHandler);
prm.add_endRequest(EndRequestHandler);
</script>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:Panel ID="Panel1" runat="server" Height="300">
<%-- Some stuff which would cause a partial postback goes here --%>
</asp:Panel>
</ContentTemplate>
</asp:UpdatePanel>

You can set focus on the control you'd like to see on the screen.
e.g if dropdownlist "ddlCity" is the control that causes the postback, then do the following after your dropdownlist SelectedIndexChanged code:
ddlCity.Focus();

I was able to resolve a similar problem with the following hack:
Add HiddenField Control to the page or control you're working in. Be sure to set the ClientIDMode to static so that it is easily accessible in JavaScript. We will use JavaScript to update this control:
<asp:HiddenField ID="scrollPosition" ClientIDMode="Static" runat="server" />
Also Add a panel control as the target to which we will insert some javascript:
<asp:Panel ID="pnlScriptRunner" runat="server"></asp:Panel>
Add the following JavaScript. With the window.onscroll function, we are updating our HiddenField Control. The updateScrollPosition function will be called from our C# code behind:
<script>
window.onscroll = function () {
var ctrl = document.getElementById("scrollPosition");
ctrl.value = document.body.scrollTop;
console.log(ctrl.value);
};
function updateScrollPosition(value) {
window.scrollTo(0, value);
console.log("updating scroll position");
}
</script>
Create a new C# Class and add the following method. This will allow us to insert some Javascript from the code-behind in C#:
public static class ClientScript
{
public static void InsertScript(string script, Control target)
{
HtmlGenericControl s = new HtmlGenericControl();
s.TagName = "script";
s.InnerHtml = script;
target.Controls.Add(s);
}
}
Now, in the code behind of your control or page, call the JavaScript function "updateScrollPosition(value)" with the value from our ASP.NET HiddenField Control by inserting the javascript into pnlScriptRunner with the static class we created:
protected void btnRotate_Click(object sender, EventArgs e)
{
//Do stuff with controls in your update panel here, then:
ClientScript.InsertScript("updateScrollPosition(" + scrollPosition.Value + ");", pnlScriptRunner);
UpdatePanel1.Update();
}
My btnRotate_Click event is registered as a trigger in the update panel:
<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<b>Image Preview: </b><br />
<asp:Image ID="img" runat="server" CssClass="profileImage" />
<br />
<br />
<asp:Button ID="btnRotate" runat="server" Text="Rotate Image" ClientIDMode="Static" OnClick="btnRotate_Click" />
<br />
<br />
</ContentTemplate>
<Triggers>
<asp:PostBackTrigger ControlID="btnRotate" />
</Triggers>
</asp:UpdatePanel>
The following references are necessary:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.HtmlControls;
Hopefully this helps!

Update panel asp.net - page refresh

Page url: http://advancedmedia.co.il/data.aspx
Code:
<asp:Content ID="Content2" ContentPlaceHolderID="page_content_cp" Runat="Server">
<asp:UpdatePanel runat="server" ID="UP1" UpdateMode="Conditional">
<ContentTemplate>
<section id="page_section">
<div class="data_top">
<ul class="bxslider">
<asp:ListView ID="LV_slider" runat="server" DataSourceID="**">
<ItemTemplate>
<li>
<asp:Image ID="Image11" ImageUrl='<%#XPath("big_image_url") %>' AlternateText="slider" runat="server" />
</li>
</ItemTemplate>
</asp:ListView>
</ul>
</div>
<div class="shaddow"></div>
<div class="data_bottom">
<asp:ListView runat="server" ID="LV_data_bottom" DataSourceID="**">
<ItemTemplate>
<div style="display:inline;">
<asp:LinkButton runat="server" CommandArgument='<%#XPath("big_image_url") %>' ID="LB_thumb" OnClick="lb_thumb1" ><asp:Image runat="server" ID="IMG_img1" ImageUrl='<%#XPath("small_image_url") %>' />
<asp:Label runat="server" CssClass="title" ID="bottom_label" Text='<%#XPath("title") %>'></asp:Label></asp:LinkButton>
</div>
</ItemTemplate>
</asp:ListView>
</div>
</section>
</ContentTemplate>
</asp:UpdatePanel>
<asp:XmlDataSource ID="**" runat="server"
DataFile="~/***/***" XPath="/Data/**/**">
</asp:XmlDataSource>
</asp:Content>
Click on the thumbs "jump" the page.
I dont want the page will "jump"/"refresh" after click on thumb. how can i do that? Maybe i wrong on the place of the updatepanel ?

You can always get it done using updatepanel and microsoft ajax... but there is a better and more lightweight alternative. Use jquery to swap the main image on top when the thumbnails are clicked, without doing a page refresh.
Define a surrounding div for the imain image with id "imageBox"
<img class="thumb" src="image1_thumb.jpg" />
<div id="imageBox"> </div>
then,
$(document).ready(function(){
$('#changeImage').click(function(){
var rel = $(this).attr('rel');
$("#imageBox").html("<img src='image" + rel + ".jpg' />");
})
});
This is both clean and lightweight. no Microsoft ajax panel junk.

I'm not sure about what is your problem here, but if you want to separate the Update Panel into two you can do so.
There's an explanation on how different update panels can trigger themselves.
http://www.asp.net/web-forms/tutorials/aspnet-ajax/understanding-asp-net-ajax-updatepanel-triggers

Used AutoPostBack="false" in listview page can't be refresh ..or used javascript to change the image

Put ScriptManager.
<asp:ScriptManager EnablePartialRendering="true"
ID="ScriptManager1" runat="server"></asp:ScriptManager>
<asp:Content ID="Content2" ContentPlaceHolderID="page_content_cp" Runat="Server">
<asp:UpdatePanel runat="server" ID="UP1" UpdateMode="Conditional">
<!-- bla bla bla.. -->

Did you try to change the following
UpdateMode="Conditional"
With this?
UpdateMode="Always"

Set ClientIDMode=Auto on the LinkButton.

Everything seems correct.
Here is a sample for Update panel.
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="WebApplication3.WebForm1" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
<asp:UpdatePanel ID="Updatepanel1" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<asp:Button ID="Button1" runat="server" Text="Button" OnClick="Button1_Click" />
<asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
<asp:LinkButton ID="LinkButton1" runat="server" OnClick="LinkButton1_Click">LinkButton</asp:LinkButton>
</ContentTemplate>
</asp:UpdatePanel>
</div>
</form>
Code Behind
namespace WebApplication3
{
public partial class WebForm1 : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
}
protected void Button1_Click(object sender, EventArgs e)
{
this.Label1.Text = "change Test 1";
}
protected void LinkButton1_Click(object sender, EventArgs e)
{
this.Label1.Text = "change Test 2";
}
}
}

Create Loading animation before navigating to another page and disable all conrols on it during animation

I have a button on Page 1 and when the button click event occurs, I had to do some process that takes around 2-3 seconds. So, I want to Put a Loading Image in Center and disable all other controls on the Page 1.
I tried using UpdatePanel :
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:Button runat="server" Text="Button" onclick="Unnamed1_Click" />
<asp:Label runat="server" Text="Label" ID="lbl"></asp:Label>
</ContentTemplate>
</asp:UpdatePanel>
<asp:UpdateProgress ID="UpdateProgress1" runat="server" AssociatedUpdatePanelID="UpdatePanel1" >
<ProgressTemplate>
<div id="IMGDIV1" align="center" valign="middle" runat="server" style="position: absolute;visibility:visible;vertical-align:middle;border-style:none;border-color:black;background-color:transparent;">
<asp:Image ID="Image1" runat="server" ImageUrl="~/ajax-loader (1).gif" />
</div>
</ProgressTemplate>
</asp:UpdateProgress>
But the controls did not get disabled. Any Solution or Javascript ??
Also I want that it should work if want to stay on the same page.

why dont yu use telerik radgrid loading panel ?
http://www.telerik.com/help/aspnet-ajax/ajax-center-loadingpanel.html

CSS not working when am trying to use update panel in my webpage?

i have webpages with master page which contain my css...When i add update panel in content palce holder, css on master page are working fine but same css not working in content page holder.
<%# Page Title="District Master" Language="C#" MasterPageFile="~/webpages/MasterPage_new.master"
AutoEventWireup="true" CodeFile="frmDistrict.aspx.cs" Inherits="webpages_frmDistrict" %>
<%# Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">
<asp:ScriptManager ID="ScriptManager2" EnablePartialRendering="true" runat="server">
</asp:ScriptManager>
<div id="main_div">
<asp:UpdatePanel ID="uppnl" runat="server" Mode="Conditional">
<ContentTemplate>
<table style="width: 100%; float: left;">
<tr>
<td style="height: 100px; width: 100%; float: left;">
<asp:TextBox ID="txtSearch" runat="server"></asp:TextBox>
<asp:Button ID="btnSearchOK" runat="server" Text="Ok" Font-Names="Verdana" Font-Size="11px"
Width="6%" Font-Bold="True" OnClick="btnSearchOK_OnClick" />
<asp:Button ID="btnRefresh" runat="server" Text="Refresh" Font-Names="Verdana" Font-Size="11px"
Width="11%" Font-Bold="True" OnClick="btnRefresh_OnClick" />
<asp:Button ID="btnClose" runat="server" Text="Close" Font-Names="Verdana" Font-Size="11px"
Width="9%" Font-Bold="True" OnClick="btnClose_OnClick" />
</td>
</tr>
</table>
</ContentTemplate>
</asp:UpdatePanel>
</div>
</asp:Content>

That is because ASP.NET changes the id of all elements in the Content Panel and prepends the name of the master like id="content" would become id="body#content". To verify check the View Source in your browser.
Solution is to update your CSS according to the generated IDs.