In the webforms application, I am trying to conditionally set the CssClass for this panel like this, but it does not work...
<asp:Panel ID="pnlFooter" runat="server" Width="26.67cm" CssClass="">
<% If (prpLastVID() = Eval("UID_VEHICLE")) Then
CType(lstView.FindControl("pnlFooter"), Panel).Attributes("CssClass")="RPT_footer"%>
I need to apply the cssClass "RPT_footer" only when the last vehicle record/row is being placed into the lstView so that the footer appears at the bottom of the page.
CSS: (.RPT_footer { position: absolute; bottom: 0; width:100%; } ).
Any suggestions will be very welcome.
If you would like to set cssclass on client side use for example java script or jquery function. In this solution you must set OnClientClick attribute on webcontrols with behaviour which actually changing panel style.
If you prefer set on server side look for this question.
Try this:
CType(lstView.FindControl("pnlFooter"), Panel).CssClass="RPT_footer"
or:
CType(lstView.FindControl("pnlFooter"), Panel).Attributes.Add("class","RPT_footer")
Related
I have a GridView with fixed header and 10 rows that can be updated new rows by users.
In the GridView I show only 3 rows and vertical scrollbar.
After a user selects any row on the GridView (the postback occurs), I want to scroll it to the selected row.
How can I do this?
Thanks in advance.
If you are using winform, you need to set
dataGridView1.FirstDisplayedScrollingRowIndex = dataGridView1.SelectedRows[0].Index;
This is something I came up with to solve this. Its by no means perfect as Im just a noob at JavaScript. Any and all edits are welcome.
First of all ...be aware that
"Any server controls that appear within the naming container have
their rendered id value prefixed with the ID of the naming container
control."
From https://learn.microsoft.com/en-us/aspnet/web-forms/overview/older-versions-getting-started/master-pages/control-id-naming-in-content-pages-cs
In a nutshell...you have a hidden field to save the value of the top of the scroll box...and set it back to that value on pageload. All code in JavaScript.
1: Create hidden field.
<input type="hidden" id="hdnScrollTop" runat="server" value="0" />
2:Update the hidden field with the value of the top of the window (this.scrollTop). This is done via the onscroll attribute. This div will scroll because of overflow: auto;. Also notice the name "MainContent_hdnScrollTop".
On the <aps:Content> tag (not shown) I have the ContentPlaceHolderID="MainContent"
so you may need to change the name accordingly. Check the names generated on the rendered page.
<div id="divScroll" style="vertical-align: top; height: 550px; overflow: auto; width: 950px;"
onscroll="$get('MainContent_hdnScrollTop').value = this.scrollTop;">
3: You might have to add the scriptmanager control. Your only allowed one. I had a MasterPage that had it already.
<asp:ScriptManager ID="scriptManager" runat="server" EnablePartialRendering="True" />
4: The javascript that set the top of the divScroll to the hidden field.
<script type="text/javascript">
var prm = Sys.WebForms.PageRequestManager.getInstance();
prm.add_pageLoaded(pageLoaded);
function pageLoaded(sender, args)
{
try {
$get("divScroll").scrollTop = $get("MainContent_hdnScrollTop").value;
}
catch(err) { return;}
}
</script>
Does anyone know of a native ASP.NET way to insert a <div> into an asp:ValidationSummary?
If you are inserting the div at the top you could use the Headertext attribute of the ValidationSummary like so.
<asp:ValidationSummary ID="ValidationSummary1" runat="server" HeaderText="<div> Stuff inside Div </div>" />
*Note if you are adding the style to the actual summary section you may want to try adding your style to the tag inside the summary.
If your only goal is to start a new block, just use a style:
#myDiv {
display: block;
}
You may need to override the PreRender event to add this
http://msdn.microsoft.com/en-us/library/system.web.ui.webcontrols.validationsummary.onprerender.aspx
In ASP.NET Gridviews generate a table which generates a parent div container. This can break CSS layouts since there is no way to attach styles to the generated div. Is there a way to prevent the div from generating or a way to apply a style to it?
This was asked and marked as resolved here but MS just said that the div is needed for the Paging and Sorting functionality. Am I to understand that if I want to use the paging and sorting functionality I can't wrap my own div around it and apply a style? Thanks
If you're stuck with an unstyled wrapper (which it appears that you are) but want to enforce a style, give it another wrapper, and apply your style to the combination. If a plain div has some padding you want to get rid of (for example), this in the aspx:
<div id="crushGvDiv">
<asp:GridView ... >
</div>
and this for CSS:
div#crushGvDiv, div#crushGvDiv div { padding: 0; margin: 0; }
UPDATE
Ians response does remove much of the hackery from this but it also requires
more effort on my part. I think we can have the best of both worlds if we
do this just a little differently...
We no longer want to add a 'table-responsive' div to our source at all. We DO want to add a 'table-responsive-table' to our GridView classes.
ASP
<asp:GridView ID=gvMain DataSourceID=dsMain RunAt=Server
CssClass='table table-responsive-table'>
Our JavaScript just needs to add the 'table-responsive' class to the parent div of those 'table-responsive-table' class tables that we've added.
JS
$( document ).ready(function() {
$(".table-responsive-table").parent().addClass('table-responsive');
});
This will generate:
HTML
<div class=table-responsive>
<table class='table table-responsive-table' .....>
This new output should be relatively free of hackery related problems due to the fact that we have exactly the same output in the end as we would've otherwise had (except for the extra class on the table), we do not need to modify this code for every table (meaning we can write it once and it'll automatically be applied to all GridViews with the 'table-responsive-table' class), and we are not moving\copying the table data at all (this is important for speed, paging, and sorting). I know everyone says they have the best answer but I really do think this is the absolute best way of handling this.
NOTE: I have not tested this new code but it will probably work just fine.
An easy solution without render modifying:
I need to apply a style to the div generated by the gridview because it breaks my layout, so I created a div with id "myContainerDiv" and moved my GridView into it, and using jQuery I apply some styles.
Example:
$("#myContainerDiv > div").css("display", "inline");
I put this javascript in $(document).ready(function({}));.
But if you use UpdatePanel, like I must use in this particular case, I execute this $().css() in every async postback. Without that the style will be lost if you execute some updatepanel where your gridview is contained. But I execute this $().css() only if a particular UpdatePanel is fired (no need to execute this javascript instruction in every every every async postback)
Example:
<script type="text/javascript">
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler);
function EndRequestHandler(sender, args) {
if (args.get_error() == undefined && sender._updatePanelClientIDs != null &&
sender._updatePanelClientIDs.length > 0 && sender._updatePanelClientIDs[0] == "<%= MyParticularUpdatePanel.ClientID %>") {
$("#myContainerDiv > div").css("display", "inline");
}
}
</script>
Resolved!
The entire page will look like that:
<script type="text/javascrcipt" src="jquery.js"></script>
<script type="text/javascript">
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler);
function EndRequestHandler(sender, args) {
if (args.get_error() == undefined && sender._updatePanelClientIDs != null &&
sender._updatePanelClientIDs.length > 0 && sender._updatePanelClientIDs[0] == "<%= MyParticularUpdatePanel.ClientID %>") {
$("#myContainerDiv > div").css("display", "inline");
}
}
</script>
<asp:UpdatePanel runat="server" ID="MyParticularUpdatePanel" UpdateMode="Conditional" RenderMode="Inline">
<Triggers>
// Your triggers here...
</Triggers>
<ContentTemplate>
<div id="myContainerDiv" style="display:inline;">
<asp:GridView runat="server" ID="MyGridView" AutoGenerateColumns="false" Height="150px" EmptyDataText="No data.">
<Columns>
<asp:BoundField DataField="ID" HeaderText="My ID" />
</Columns>
</asp:GridView>
</div>
</ContentTemplate>
</asp:UpdatePanel>
I don't know if this code will compile exactly like I wrote because I wrote it using notepad.
Sorry for my poor english, I'm from Brazil.
Christophe Trevisani Chavey.
http://www.christophetrevisani.com
Same issue here, OMG it's so annoying. Glitch in rendering in IE6/7 when butting a div to the top of a gridview - the parent DIV causes a space between the two elements.
I've dug into the GridView code using reflector and found the problem:
Private Sub Render(ByVal writer As HtmlTextWriter, ByVal renderPanel As Boolean)
If (Not Me.Page Is Nothing) Then
Me.Page.VerifyRenderingInServerForm(Me)
End If
Me.PrepareControlHierarchy
If renderPanel Then
Dim clientID As String = Me.ClientID
If Me.DetermineRenderClientScript Then
If (clientID Is Nothing) Then
Throw New HttpException(SR.GetString("GridView_MustBeParented"))
End If
Dim builder As New StringBuilder("__gv", (clientID.Length + 9))
builder.Append(clientID)
builder.Append("__div")
writer.AddAttribute(HtmlTextWriterAttribute.Id, builder.ToString, True)
End If
writer.RenderBeginTag(HtmlTextWriterTag.Div)
End If
Me.RenderContents(writer)
If renderPanel Then
writer.RenderEndTag
End If
End Sub
This is called from render:
Protected Friend Overrides Sub Render(ByVal writer As HtmlTextWriter)
Me.Render(writer, Not MyBase.DesignMode)
End Sub
So, 'renderPanel' == not DesignMode. The DIV is used for paging and sorting when then gridview isn't in an UpdatePanel. On my site, all GridViews are in a UP plus they inherit from a custom gridview class, so my solution was to override the above function with the following:
Protected Overrides Sub Render(ByVal writer As System.Web.UI.HtmlTextWriter)
Me.PrepareControlHierarchy()
Me.RenderContents(writer)
End Sub
The other solution could be to copy the render method from above and changed as required.
This smells of HACK - you've been warned, but might work for you, esp if you're not using paging/sorting.
Simplest and best solution using CSS class "gridViewWrapperFix".
ASPX:
<div class="gridViewWrapperFix">
<asp:GridView>
<%--the full gridview would go here--%>
</asp:GridView>
</div>
CSS:
/* styles the div that gets auto generated around and asp.net gridview */
.gridViewWrapperFix > div {
padding: 0;
margin: 0;
border: 3px solid red;
}
You can put it inside of an asp:Panel and set the Visible property on the panel to false if the table is empty.
I've never done this, but I my first guess would be you could grab the rendered html output just before it gets to the browser, remove the outer div and then htmltextwrite out your new rendered html in the prerender event or make a user or custom control to do this.
But then you risk breaking the functionality of the gridview but if you know you won't be using the features that use the div, then you might get away with it.
You could define an explicit CssClass for your Gridviews to make use of.
<asp:GridView ... CssClass="nameOfStyleClass" ... />
Then define a css class:
.nameOfStyleClass
{
< Style stuff >
}
I have a DropDownList for which I am trying to show a div OnSelectedIndexChanged but it says OBJECT REQUIRED.
I am binding the DataList in that div:
aspx:
<asp:DropDownList runat="server" ID="lstFilePrefix1" AutoPostBack="True"
OnSelectedIndexChanged="DropDownList1_SelectedIndexChanged" >
<asp:ListItem Text="Prefix1" Value="Prefix1" />
<asp:ListItem Text="Prefix2" Value="Prefix2" />
<asp:ListItem Text="Prefix3" Value="Prefix3" />
<asp:ListItem Text="Prefix1 and Prefix2" Value="Prefix1 and Prefix2" />
<asp:ListItem Text="Prefix2 and Prefix3" Value="Prefix2 and Prefix3" />
</asp:DropDownList>
<asp:DataList ID="DataList1" runat="server" RepeatColumns="4"
CssClass="datalist1" OnItemDataBound="SOMENAMEItemBound"
CellSpacing="6" onselectedindexchanged="DataList1_SelectedIndexChanged"
HorizontalAlign="Center" Width="500px">
code behind:
protected void DropDownList1_SelectedIndexChanged(object sender, EventArgs e)
{
if (lstFilePrefix1.SelectedItem.Text=="Prefix2")
{
int TotalRows = this.BindList(1);
this.Prepare_Pager(TotalRows);
Page.ClientScript.RegisterClientScriptBlock(GetType(), "JScript1", "ShowDiv('data');", true);
}
}
javascript:
function ShowDiv(obj)
{
var dataDiv = document.getElementById(obj);
dataDiv.style.display = "block";
}
What am I doing wrong?
You can use a standard ASP.NET Panel and then set it's visible property in your code behind.
<asp:Panel ID="Panel1" runat="server" visible="false" />
To show panel in codebehind:
Panel1.Visible = true;
Make the div
runat="server"
and do
if (lstFilePrefix1.SelectedValue=="Prefix2")
{
int TotalRows = this.BindList(1);
this.Prepare_Pager(TotalRows);
data.Style["display"] = "block";
}
Your method isn't working because the javascript is being rendered in the top of the body tag, before the div is rendered. You'd have to include code to tell the javascript to wait for the DOM to be completely ready to take on your request, which would probably be easiest to do with jQuery.
There are a few ways to handle rendering/showing controls on the page and you should take note to what happens with each method.
Rendering and Visibility
There are some instances where elements on your page don't need to be rendered for the user because of some type of logic or database value. In this case, you can prevent rendering (creating the control on the returned web page) altogether. You would want to do this if the control doesn't need to be shown later on the client side because no matter what, the user viewing the page never needs to see it.
Any controls or elements can have their visibility set from the server side. If it is a plain old html element, you just need to set the runat attribute value to server on the markup page.
<div id="myDiv" runat="server"></div>
The decision to render the div or not can now be done in the code behind class like so:
myDiv.Visible = someConditionalBool;
If set to true, it will be rendered on the page and if it's false it won't be rendered at all, not even hidden.
Client Side Hiding
Hiding an element is done on the client side only. Meaning, it's rendered but it has a display CSS style set on it which instructs your browser to not show it to the user. This is beneficial when you want to hide/show things based on user input. It's important to know that the element CAN be hidden on the server side too as long as the element/control has runat=server set just as I explained in the previous example.
Hiding in the Code Behind Class
To hide an element that you want rendered to the page but hidden is another simple single line of code:
myDiv.Style["display"] = "none";
If you have a need to remove the display style server side, it can be done by removing the display style, or setting it to a different value like inline or block (values described here).
myDiv.Style.Remove("display");
// -- or --
myDiv.Style["display"] = "inline";
Hiding on the Client Side with javascript
Using plain old javascript, you can easily hide the same element in this manner
var myDivElem = document.getElementById("myDiv");
myDivElem.style.display = "none";
// then to show again
myDivElem.style.display = "";
jQuery makes hiding elements a little simpler if you prefer to use jQuery:
var myDiv = $("#<%=myDiv.ClientID%>");
myDiv.hide();
// ... and to show
myDiv.show();
Another method (which it appears no-one has mentioned thus far), is to add an additional KeyValue pair to the element's Style array. i.e
Div.Style.Add("display", "none");
This has the added benefit of merely hiding the element, rather than preventing it from being written to the DOM to begin with - unlike the "Visible" property. i.e.
Div.Visible = false
results in the div never being written to the DOM.
Edit: This should be done in the 'code-behind', I.e. The *.aspx.cs file.
<div id="OK1" runat="server" style ="display:none" >
<asp:DropDownList ID="DropDownList2" runat="server"></asp:DropDownList>
</div>
vb.net code
Protected Sub DropDownList1_SelectedIndexChanged(sender As Object, e As EventArgs) Handles DropDownList1.SelectedIndexChanged
If DropDownList1.SelectedIndex = 0 Then
OK1.Style.Add("display", "none")
Else
OK1.Style.Add("display", "block")
End If
End Sub
RegisteredClientScriptBlock adds the script at the top of the page on the post-back with no assurance about the order, meaning that either the call is being injected after the function declaration (your js file with the function is inlined after your call) or when the script tries to execute the div is probably not there yet 'cause the page is still rendering. A good idea is probably to simulate the two scenarios I described above on firebug and see if you get similar errors.
My guess is this would work if you append the script at the bottom of the page with RegisterStartupScript - worth a shot at least.
Anyway, as an alternative solution if you add the runat="server" attribute to the div you will be able to access it by its id in the codebehind (without reverting to js - how cool that might be), and make it disappear like this:
data.visible = false
I was having a problem where setting element.Visible = true in my code behind wasn't having any effect on the actual screen. The solution for me was to wrap the area of my page where I wanted to show the div in an ASP UpdatePanel, which is used to cause partial screen updates.
http://msdn.microsoft.com/en-us/library/bb399001.aspx
Having the element runat=server gave me access to it from the codebehind, and placing it in the UpdatePanel let it actually be updated on the screen.
Hiding on the Client Side with javascript
Using plain old javascript, you can easily hide the same element in this manner:
var myDivElem = document.getElementById("myDiv");
myDivElem.style.display = "none";
Then to show again:
myDivElem.style.display = "";
jQuery makes hiding elements a little simpler if you prefer to use jQuery:
var myDiv = $("#<%=myDiv.ClientID%>");
myDiv.hide();
... and to show:
myDiv.show();
Bascially I want to know the best way to hide/show an ASP.NET control from a Javascript function. I figured I would just access the control in Javascript using:
var theControl = document.getElementById("txtEditBox");
Then just set the control's Visible property to true/false. It doesn't seem to be working, I can't seem to figure out how to set "Visible" to true/false. How can I do that? Also, is that the best way to hide/show a ASP.NET control from a Javascript function?
Thanks,
Jeff
The "Visible" property of an ASP.NET control determines whether or not it will be rendered on the client (i.e. sent to the client). If it is false when the page is rendered, it will never arrive at the client.
So, you cannot, technically, set that property of the control.
That said, if the control is rendered on the client because the Visible property is true when the page is rendered, you can then hide it using javascript like this:
var theControl = document.getElementById("txtEditBox");
theControl.style.display = "none";
// to show it again:
theControl.style.display = "";
That assumes that the control's id attribute really is "txtEditBox" on the client and that it is already visible.
Also, is that the best way to hide/show a ASP.NET control from a Javascript function?
There is not necessarily a "best" way, although one better approach is to use CSS class definitions:
.invisible { display: none; }
When you want to hide something, dynamically apply that class to the element; when you want to show it again, remove it. Note, I believe this will only work for elements whose display value starts off as block.
instead of using visible, set its css to display:none
//css:
.invisible { display:none; }
//C#
txtEditBox.CssClass = 'invisible';
txtEditBox.CssClass = ''; // visible again
//javascript
document.getElementById('txtEditBox').className = 'invisible'
document.getElementById('txtEditBox').className = ''
Set the style to "display: none".
var theControl = document.getElementById("<%= txtEditBox.ClientID %>");
theControl.style.display = "none";
You can't hide/ show the ASP.NET version of the control as that only exists in a server context. To use JavaScript you need to play with the controls style/ visibility state.
The only kind-of way to do it would be to wrap the control in an UpdatePanel and have something like this:
<asp:UpdatePanel ID="panel" runat="server">
<ContentTemplate>
<asp:TextBox ID="myTextBox" runat="server" />
</ContentTemplate>
<Triggers>
<asp:AsynchronousPostbackTrigger ControlID="button" EventName="Click" />
</Triggers>
</asp:UpdatePanel>
<asp:Button ID="button" runat="server" OnClick="toggle" Text="Click!" />
Then you need this in your code behind:
protected void toggle(object sender, EventArgs e){
myTextBox.Visibility = !myTextBox.Visibility;
}
Now when you click the button an async postback occurs and it will refresh the UpdatePanel.
Note: This is not a good solution, as it'll be a very heavy AJAX request, because you need to submit the ViewState.
Also, it may not be 100% right, I did that from memory.
This should hide the control:
theControl.style.display = 'none';
You can use the display property for this. But as Jason noted, this is a DHTML DOM (client-side) property that is completely independent from the ASP.NET (server-side) Visible property which controls rendering.
theControl.style.display = "none";
Display Property
You want to set the display style property to 'none' (to hide) or null to show.
var theControl = document.getElementById("txtEditBox");
theControl.style.display = 'none';
theControl.style.display = null;
Doing it the jQuery way:
$('#txtEditBox').hide();
$('#txtEditBox').show();
Or if you don't want to use css:
<asp:TextBox ID="txtBox" runat="server" style="display:none;">
I think the best solution is to put your ASP control inside a div and set the property display to the div element.
<div id="divTest">
<asp:TextBox ID="txtTest" runat="server"></asp:TextBox>
</div>
<script type="text/javascript">
SIN JQuery
document.getElementById('divTest').style.display = "none";
CON JQuery
$('#divTest').hide();
</script>