We Keep Coding

ASP enabling Script Compression / Caching Prevents Update Progress Displaying

I've recently turned on Script Compression and Caching in the webconfig to minimise the amount of scripts loaded on each page (which massively reduced load time). However since turning on all the update panels do not display the update progress image during update.
The page doesn't refresh which suggests the update panel is still working however the loading gif which I display during long processes doesn't appear anymore.
Web.Config Addition:
<system.web.extensions>
<scripting>
<scriptResourceHandler enableCompression="true" enableCaching="true"/>
</scripting>
</system.web.extensions>
Example Panel:
<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
<ContentTemplate>
*Content
</ContentTemplate>
</asp:UpdatePanel>
<asp:UpdateProgress id="updateProgress1`" runat="server">
<ProgressTemplate>
<div style="position: fixed; text-align: center; height: 100%; width: 100%; top: 0; right: 0; left: 0; z-index: 9999999;">
<asp:Image ID="imgUpdateProgress1" runat="server" ImageUrl="images/loading.gif" AlternateText="Loading ..." ToolTip="Loading ..." style="padding: 10px;position:fixed;top:30%;left:40%;" />
</div>
</ProgressTemplate>
</asp:UpdateProgress>
I didnt include any postback/async controls before and it worked as expected, I have added a few of these to see if they are now a requirement with the new script compression but still no effect.
Any ideas anyone?

Probably the update takes less than 500 milliseconds that it's the default value of the DisplayAfter property of the UpdateProgress.
Try to set it to 0:
<asp:UpdateProgress id="updateProgress1`" runat="server" DisplayAfter="0">
...
</asp:UpdateProgress>
More information here.

Vertical Scroll to appear in GridView

I have tried various ways to get a vertical scroll bar to show for my GridView when there are to many rows.
I have tried adding a DIV around the GridView and it looks horrible as its padding like 20px away from my GridView. I there a way so when the information is coming from the database when the GridView hits its maximum height (200px) the GridView will have a scroll bar?
I also don't want my Headers and Rows to have really big Heights when i do this because when i tried setting a height for my GridView they went bigger if there was on 1 piece of data.
CODE:
#gv_AcceptedRequests, #gv_PendingRequests, #gv_DeclinedRequests {
position:absolute;
margin-top: 120px;
margin-left: 60px;
width: 480px;
font-family: Arial;
font-size: 12px;
border-color: orange;
overflow: auto;
}
Attempt1:
For some reason the DIV isnt startingat the top of the datagrid?

Can you provide code (html & css) of what you allready made up.
You can place a surrounding DIV around the GridView. The code below places a DIV around your gridview. With a CSS (preferred external CSS file) of overflow-y (shows a vertical scrollbar) and zero padding. If there's still padding left, then there's an issue with the CSS on the page.
<div id='scrolldiv' style='position:absolute;border:1px solid black;height:100px;width:650px;overflow-y:scroll;margin-top:120px;margin-left:60px;'>
<div id='gv_AcceptedRequests' style='position:absolute;width:480px;font-family:Arial;font-size:12px;border-color:orange;overflow:auto;'>
//gridview
</div>
</div>

Please place grid view inside DIV tag and apply style height,width and overflow to DIV.
<div style="height: 100px;overflow:auto">
<asp:gridview id="grid" >
</<asp:gridview>
</div>
Hope this helps

AJAX Collapsible Panel Extender Code Behind

I am having some problem with AJAX Collapsible Panel Extender. Currently what I am trying to do is when certain panel is extended, then it will perform some sql statement. I have no idea on how to write the code other than just squeeze all of them in the Page Load method. Here is how I set up my collapsible panel extender:
<!-- FIRST COLLAPSIBLE PANEL EXTENDER -->
<asp:Panel ID="pHeader1" runat="server" CssClass="cpHeader">
<!-- First collapsible panel extender header -->
<div class="form-group" style="background-color:#ffb848; height: 30px; vertical-align: middle">
<div class="col-md-3">
<div style="float: left; color: White; padding: 5px 5px 0 0">
Collapsible Panel
</div>
</div>
<div class="col-md-9">
<div style="float: right; color: White; padding: 5px 5px 0 0">
<asp:Label ID="lblHeaderText1" runat="server" />
<asp:Image ID="imgArrows1" Text = "IMAGE" runat="server" />
</div>
</div>
<div style="clear: both"></div>
</div>
</asp:Panel>
<!-- First collapsible panel extender body -->
<asp:Panel ID="pBody1" runat="server" CssClass="cpBody">
<asp:Label ID="lblBodyText1" runat="server" />
Hey there
</asp:Panel>
<asp:CollapsiblePanelExtender ID="cpe1" runat="server" TargetControlID="pBody1" CollapseControlID="pHeader1"
ExpandControlID="pHeader1" Collapsed="true" ImageControlID="imgArrows1"
CollapsedImage="~/Images/downarrow.jpg"
ExpandedImage="~/Images/uparrow.jpg" TextLabelID="lblHeaderText1" CollapsedText="Show"
ExpandedText="Hide" CollapsedSize="0" ExpandedSize="200"
ScrollContents="true">
</asp:CollapsiblePanelExtender>
Any related research link would be appreciated. Thanks in advance.

This is possible.
In gist you are supposed to work with the ajax client-side page life-cycle. Like there is a page load in your server-side aspx page; there is a page load in the client (i.e. the web page rendered in the browser) which happens after all the asp.net client ajax js libraries are all loaded.
In that you are supposed to do something like:
//this would be <%=myExtender.ClientID%> when using a master page
var extender = $find('myExtender_ClientId');
extender.add_collapsed( function() { alert('collapsed'); });
extender.add_expanded( function() { alert('expanded'); });
More details here: http://forums.asp.net/p/1112899/1717195.aspx
You'd want to execute some server side logic to populate stuff in the container that becomes visible. For this you need some AJAJ. This is nothing but some aspx pages written in such a way to render JSON responses back to your browser. But they will be invoked via an XMLHttpRequest object.
Alternatively you can rely on asmx web services, or even page methods to do the work for you. They've to run as script services to do the work for you.
Have a look at this thread for that: http://forums.asp.net/t/1729092.aspx?loading+data+in+the+target+control+panel+of+collapsible+extender+when+Collapse+Expand+control+panel+is+clicked+

Change the height of layout in master page when dynamically add a control in asp

![enter image description here][1]How can I change the height of the layout of the my page when the user adds new controllers. I would like to enhance the height of my page when the user adds a new control.
I am using in master page
<div class="main">
<asp:ContentPlaceHolder ID="MainContent" runat="server"/>
</div>
and in my css
.main
{
padding: 0px 12px;
margin: 12px 8px 8px 8px;
height: auto;
}
One more question, can I achieve that programmatically in aspx.cs file ?
Any advice would be appreciated.
Thank you.

As long as your asp:Content has elements's in that have content in or a set height it should add to the height of the page
example
<asp:Content ContentPlaceHolderID="MainContent" runat="server">
<div>
</div>
</asp:Content>
Also need to check for CSS styles that are altering the height of div's as this will effect any content you place in there

Show image in browser in full screen in C# ASP.NET

i want to show an image in the browser page and to stretch it so it would fill the whole browser page.
i tried:
<asp:Image ID="myimage" runat="server" ImageUrl="/Images/mypic.jpg" Width="100%" Height="100%"></asp:Image>
and also tried using css:
<asp:Image ID="myimage" runat="server" ImageUrl="/Images/mypic.jpg" CssClass="myimage1"></asp:Image>
and in the CSS:
.myimage1{height:100%;width:100%;}
in both cases the browser (IE9), stretches the image with a height that is much bigger then the broswer hight and a right scroll bar is shown.
How can i stretch an image to the exact size of the current page size?

Its stretching to 100% of the parent container, which might be too wide. Try setting the width value of the body and html elements.
Try setting
html, body { width: 100%; height: 100%; }
Or you could use jQuery to find out the width of the parent element first and then set your image to that. No need to use ASP controls with this, just CSS and jquery.
$newheight = $('#yourimageid').parent().height();
$('#yourimageid').css('height', $newheight);
This will grab the parent elements height, and then append the value to the css height value

i found the solution using an img html tag and using CSS:
http://bytes.com/topic/asp-net/answers/850635-how-stretch-background-image-fill
add this inside the aspx page inside the body tag:
<img src="Styles/mypic.jpg" alt="" />
in the css:
html,body
{
margin: 0;
padding: 0;
}
img
{
position:absolute;
z-index:-1;
width:100%;
height:100%;
}