I have a specific control gridview , i apply specific CSS file on it , i wanna to change this CSS under specific condition in my .cs file, is there away to do that?
for example :
<ItemStyle CssClass ="normal"/>
i want to change this in .cs under specific condition.
Do you mean GridView?
It doesn't have and ItemStyle Property. Columns within it do though.
So you can use:
gv.Columns[0].ItemStyle.CssClass = "RedItem";
DataGrid does have an ItemStyle property:
dg.ItemStyle.CssClass = "MoreThanNormalClass";
Its not clear from your question what you want to change...
Example,
CSS Classes:
<style>
.Normal{ background-color:Lime; }
.Warning{ background-color:Red; }
</style>
ASP.NET markup:
<asp:DataGrid runat="server" id="dg" onitemdatabound="dg_ItemDataBound" >
<ItemStyle CssClass="Normal" />
</asp:DataGrid>
C# code behind :
protected void Page_Load(object sender, EventArgs e)
{
int[] someInts = { 1, 15, 20 };
dg.DataSource = someInts;
dg.DataBind();
}
protected void dg_ItemDataBound(object sender, DataGridItemEventArgs e)
{
if (e.Item.DataItem != null)
{
int v = (int)e.Item.DataItem ;
if (v > 10 && v < 20)
e.Item.CssClass = "Warning";
}
}
Outputs:
Your styles doesn't have to be in a .css file: You can change the file to an .aspx or maybe create an HttpHandler to serve up your CSS.
You have to get something like this rendered to the HTML page.
<style type="text/css">
.itemstyle
{
/* whatever styles you need */
}
</style>
This can override whatever you have in your CSS file. One option is to put a Literal control on the ASPX page:
<asp:Literal ID="litStyle" runat="server" />
and use that to write out the necessary styles from code behind:
litStyle.Text = "<style type=\"text/css\">.itemstyle{" + myStyles + "}</style>";
You can inject a <style> tag with the necessary adjustments to it onto the page without modifying the CSS file.
Just create a literal control, acting as placeholder for the modified styles, on the ASPX page. From the code-behind, render something similar to the following to the literal:
Literal1.Text = "<style type=\"text/css\">.normal { background-color:red; }</style>";
...with "normal" being the original CSS class that you want to modify. The beauty of CSS is that it would first apply styles set in the included files, then any "overwritten" styles explicitly specified on the page in <style> tags.
Dynamic CSS is generally frowned upon.
You should define two ( or more) classes within your CSS and then set the ClassName property of the element in a PreRender event( or client side) script as needed.
Well, controls aren't responsible of managing CSS source files and its addition to the page, so, the easy answer is no, you can't do that.
By the way, there's some solution for doing that.
You can include a CSS file with style HTML element from your control by adding a server control (HtmlGenericControl, for example), with the apropiate attributes and values, so, if container control requires some specific CSS file, you can add it during container control's life cycle, just before rendering it, to HTML head element (marked with runat="server" attribute) of some ASP.NET page.
Maybe a good way of doing that should be creating a configuration section in your web.config implementing your own one which may support creating dependencies of controls/pages and CSS stylesheet files, so, using this approach, you would be able to implement some method in a derived from System.Web.UI.Page class that may add CSS files depending on controls:
<cssDependencies>
<control type="YourNamespace.YourControl" cssFile="~/Styles/Default/YourControlStyle.css" />
<cssDependencies>
And then, your CustomPageBase would have its own "AddControl" method which should register its type in some collection that may be iterated in the PreRender method, so, there you can add CSS files based on control's types.
I'm just giving you ideas! :)
EDIT & NOTE:
Anyway, this approach, and your goal, could have problems in terms of performance optimization.
Best optimized sites should combine all needed CSS into one, so browser should load one instead of many during page renderization.
I believe combining all CSS files into one can be achieved with "CSS files and control types approach", and I would suggest you to go this way, because if you don't do that, you can end with pages having dozens of style elements.
Have you heard about DotLess project? Check it out here: http://www.dotlesscss.org/ Maybe it can give you a better approach with less effort!
The best way would be to have different classes set up in your static css-file and change which of these classes your gridview uses from codebehind (.cs). This way you will still get the benefit of the css being cached and well separated from your view (.aspx).
css:
.normal { background-color:white; }
.alternate { background-color:#EEE; }
codebehind
var css = SomeLogic() ? "normal" : "alternate";
gridView.RowStyle.CssClass = css;
Related
I want set CSS style attributes of some controls (like input text) for example by Request.Form["x"] method in aspx page .cs code ,runat="server" is set for that controls and them is known in intellisense of .cs and them didn't find by form1.FindControl("x") (for some my reason that depend on jQuery issue) but i want set their CSS style in another syntax.
Thanks for any suggestion
Instead of using a client html control, use a server side control with a css class name. Then modify the definition of the CSS class in the code behind.
In your aspx:
<style type="text/css" runat="server" id="htmlCss"></style>
<asp:TextBox ID="txtField" runat="server" CssClass="myCssClass"></asp:TextBox>
Code behind:
protected void Page_Load(object sender, EventArgs e)
{
string css = #".myCssClass { background-color:yellow; }";
htmlCss.InnerHtml = css;
}
All the control needs to know is the styles are in "myCssClass". In Page Load you decide what the styles are going to be.
i want to render css in page conditionally based on cookie. at my server side i detect cookie and store the cookie value in variable and now in aspx page i want to render css with the help of if else logic based on cookie value stored in variable at code behind.
suppose in my .cs code behind i store the cookie value like strCountryCookie="GB" and in my aspx page i am trying to render css using if else logic based on cookie value stored in variable.
so here is the way i am trying.
<%
if(strCountryCookie=="DE")
{ %>
#acloginpod {
width:380px;
background:#ebebeb url(../images/acloginpodbg.gif) repeat-x;
border:1px solid #d3d3d3;
-webkit-border-radius:7px;
-moz-border-radius:7px;
}
<% } else { %>
it is showing error. so i am not being able to figure out how to render it based on cookie value using if else logic. so please guide me with concept. thanks
Like others said, you can't use server-side code in CSS. What you did is almost correct, if you make sure the string is accessible from the code behind:
protected string strCountryCookie = "GB";
and then fix your statement
<head runat="server">
<title>Test</title>
<% if (strCountryCookie == "GB")
{ %>
<style type="text/css">
#acloginpod {
width:380px;
background:#ebebeb url(../images/acloginpodbg.gif) repeat-x;
border:1px solid #d3d3d3;
-webkit-border-radius:7px;
-moz-border-radius:7px;
}
</style>
<%} %>
Although this will get rather ugly quick... especially if you add a bunch of countries.
Another option is to put all the custom styles into its own style sheet and then dynamically load up the style sheet based on the cookie. You get the benefit of the style sheet being cached in this case:
<link id="_countryStyleSheet" rel="stylesheet" type="text/css" runat="server" />
And then load the style sheet in your code behind:
_countryStyleSheet.Href = String.Format("~/styles/{0}.css", strCountryCookie);
In this example, the style sheet would be named GB.css, etc.
You can't use any code in CSS files.
you can put your css into a separate file and then include it or not in the header based on your condition.
approach that I prefer in such cases is to include ALL css markup on each page, but rather assign my elements with different classes based on condition. For you that would mean to use a class .acloginpod instead of id and then assign element with this class only when country is 'DE'.
or if you want different styles for different countries then define element class as following:
">
and in your css define different classes like mydiv-DE or mydiv-GB
I am struggling with something that I guess should be standard practice really. I have a number of user controls that use some JQuery plugins. I do not really want to link to the extra CSS and JS files from my main masterpage as this would cause extra load to the user the first time they hit the site, (admittedly it would only be the once), so I was just putting them links into the top of the user control. Then I looked at my source HTML, not nice! Even worse for controls that repeat multiple times on a page.
So I was thinking is there a way of injecting them into the Head of the page when they are needed from the User Control. For that matter is there a way of doing it to the footer for JS stuff?
To dynamically register a script (and ensure that duplicates are merged) in ASP.NET you can call:
Page.ClientScript.RegisterClientScriptInclude(
"mykey", "~/scripts/jquery-1.3.2.js");
And read the full details on this method on MSDN.
To add CSS dynamically you can do something like this:
HtmlLink cssLink = new HtmlLink();
cssLink.Href = "path to CSS";
cssLink.Attributes["some attr1"] = "some value1";
cssLink.Attributes["some attr2"] = "some value2";
Page.Header.Controls.Add(cssLink);
This example of injecting CSS will not merge duplicate entries. To avoid duplication you'll have to keep track of duplicates yourself. One place you can store a list of scripts you've already registered is in HttpContext.Items. Stick a HashSet in there that keeps a list of all registered scripts so that you don't register the same CSS file twice (which is generally harmless, but something to avoid anyway).
I followed a similar approach, but I use CSS directly in the user control so I don't have to import a CSS file. The following is code entirely from a sample user control:
<style id="style1" type="text/css" visible="false" runat="server">
td { font-family: Tahoma; font-size: 8pt; }
</style>
In code-behind:
protected override void OnLoad(EventArgs e)
{
base.OnLoad(e);
HtmlGenericControl style = new HtmlGenericControl("style");
style.Attributes.Add("type", "text/css");
style.InnerHtml = style1.InnerHtml;
Page.Header.Controls.Add(style);
}
You'll notice that the CSS is rendered in the head tag and not inside the body tag.
You can use ClientScript.RegisterClientScriptInclude() for the JavaScript.
For the CSS, one trick is to include them in your Master page, but with Visible="false", so that they aren't rendered into the markup by default.
Then, in your user controls, set a flag in the Items collection, from an early event, such as OnLoad(). For example, this.Context.Items["mycss"] = true;
Finally, in your Master page, from a later event, such as OnPreRender(), check to see if those flags are set. If they are, then set the Visible property to true for the corresponding CSS.
This also allows you to use the control with Master pages that don't use the CSS, since the Items entries could simply be ignored. If you have many Master pages that need the same behavior, you could put this code in a base class or use nested Master pages.
I assume you're using Asp.NET.
Try putting a content placeholder in the of the MasterPage...
<head>
<asp:ContentPlaceHolder ID="AdditionalPageHeader" />
</head>
If you're working in an aspx file or an ascx you need only define a content control...
<asp:Content ContentPlaceHolderID="AdditionalPageHeader" />
If you're working on a code-behind only type of server control, you can can get a pointer to that content place holder:
this.Page.Master.FindControl("AdditionalPageHeader")
... and manipulate it's contents programatically.
To add stylesheets or javascript (inline or not) dynamical I wrote these three functions:
Public Function addScript(ByVal path2js As String) As System.Web.UI.Control
Dim si As New HtmlGenericControl
si.TagName = "script"
si.Attributes.Add("type", "text/javascript")
si.Attributes.Add("src", path2js)
Return si
End Function
Public Function addScript_inline(ByVal js As String) As System.Web.UI.Control
Dim si As New HtmlGenericControl
si.TagName = "script"
si.Attributes.Add("type", "text/javascript")
si.InnerHtml = js
Return si
End Function
Public Function addStyle(ByVal path2css As String) As System.Web.UI.Control
Dim css As New HtmlLink
css.Href = path2css
css.Attributes.Add("rel", "stylesheet")
css.Attributes.Add("type", "text/css")
css.Attributes.Add("media", "all")
Return css
End Function
I call them in page_load on my masterpage, like this:
Me.Page.Header.Controls.Add(modGlobal.addScript("script/json/json2.js"))
or
Me.Page.Header.Controls.Add(modGlobal.addStyle("style/flexigrid/flexigrid.css"))
Regards
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();