Inser <div> into Validation Summary? - asp.net

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

Related

aspx ASP.NET setting CssClass

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")

div section visibility true/false on certain pages asp.net

im a newbie in asp.net and i have a issue. i need to make my div section visible only on some pages. i placed attribute style:(not with " on start of course)
<div ID="id1" class="grid-box width33 grid-h" style="visibility:visible" >
<!-- Other code here //-->
</div>
and i need to make in code behind some kind of if statement that's going to check if my section picker picked that div section, and if it is picked it's going to be printed on page, else it's going to render something else.
on my page_load method i have a code such as:
if (this.CurrentContent.CentralSection.HasValue)
{
this.ucCentralSection.CentralSectionId = this.CurrentContent.CentralSection.Value;
}
else
{
this.ucCentralSection.Visible=false;
}
but it's not working properly...
Add a runat attribute to your div. Use FindControl method in your code-behind to locate the div in question and toggle the visible property there.
Use like this
<div ID="id1" class="grid-box width33 grid-h" style="visibility:visible"
runat="server" >
<!-- Other code here //-->
</div>
And in your cs page
var div = (HtmlGenericControl)Page.FindControl("id1");
div.Visibility=true;
Other wise you can use Panel server control.

Content in HeaderText attribute of ValidationSummary control rendered incorrectly

I have the following validation summary control in the markup:
<asp:ValidationSummary ID="vsValErrs" CssClass="errors" HeaderText="<div><%# TranslatedMessage%></div>" runat="server" />
where TranslatedMessage is a property defined in the code behind. The problem is that the validation summary control gets rendered as
<div id="vsValErrs" class="errors" style="color:Red;">
<div>
<!--[CDATA[<%# TranslatedMessage%-->
]]>
</div>
</div>
which causes the content to be rendered incorrectly, probably because the ]]> part is outside the comment block. Why does this happen?
For those who are wondering, the reason for having a div in the HeaderText attribute is because I'm using it to style the header text (using a CSS selector that selects the first div, in the errors class); it's probably not best practice but this is the only way I've come up with.
Have you try by setting headertext property value in pageload event like
protected void Page_Load(..)
{
..
ValidationSummury1.HeaderText="<div>"+TranslatedMessage+"</div>";
}
If translated message is not available then put it into session varible and set it to HeaderText property.

jQuery: check all checkboxes

Consider this scenario:
<asp:CheckBoxList> in a master page.
the goal is to have all checkboxes in this list to be checked on page load.
there are many checkbox lists on the page.
The markup:
<asp:CheckBoxList runat="server" ID="chkSubscriptionType"
DataSourceID="myDS"
CssClass="boxes" DataTextField="Name" DataValueField="Name" />
renders to:
<input id="ctl00_cphContent_chkSubscriptionType_0" type="checkbox" name="ctl00$cphContent$chkSubscriptionType$0" />
Question: how can you use jQuery to check all boxes in this asp:CheckBoxList on document.ready? I see samples everywhere, but naming convention used by the master page throws off the samples in other places.
Because of the naming container, the ID's will be auto-generated and messed up, as you mention. You can use an attribute filter to select all elements that contain the part that you do know, that is, "chkSubscriptionType". For example:
$("input[id*=chkSubscriptionType]").attr("checked", "checked");
The *= means "contains".
ASP.NET's naming conventions are slightly frustrating. You can side-step them by wrapping your element in a span, and giving it a class. You can then use that span.class to focus your selector:
$(function(){
// On dom-ready, all checkboxes in span.names will be checked
$("span.names :checkbox").attr("checked", "checked");
});
<span class="names">
<asp:CheckBoxList ... />
</span>
Regardless of asp/php/ruby, etc, you should be able to do something like:
$(document).ready(function(){
$("input[type=checkbox]").attr("checked", "checked");
});

How to rid of empty div that contains a GridView

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 >
}

Resources