I have a GridView with selection enabled. I'd like to programmatically change the style of these links, but I'm not sure how to access them. I've applied CSS to them using the a selector, but I can't do this through the code.
How can I modify the appearance of these buttons using C#?
Try Below Code:
<asp:GridView ID="gvUserInfo" runat="server"
onrowdatabound="gvUserInfo_RowDataBound1">
<Columns>
<asp:TemplateField>
<ItemTemplate>
<asp:LinkButton ID="lnkButton" runat="server" Text="Link"></asp:LinkButton>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
protected void gvUserInfo_RowDataBound1(object sender, GridViewRowEventArgs e)
{
if (e.Row.RowType == DataControlRowType.DataRow)
{
LinkButton lnk = e.Row.FindControl("lnkButton") as LinkButton;
lnk.ForeColor = System.Drawing.Color.Red;
}
}
Because I grid view is a Table you can use CSS
<html>
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" DataKeyNames="RegNo" DataSourceID="SqlDataSource1" Width="931px" CellPadding="4" ForeColor="#333333" GridLines="None" Height="170px" AutoGenerateDeleteButton="True">
</asp:GridView>
<style>
td > a {
/*button*/
display: inline-block;
margin-bottom: 0;
font-weight: normal;
text-align: center;
vertical-align: middle;
-ms-touch-action: manipulation;
touch-action: manipulation;
cursor: pointer;
background-image: none;
border: 1px solid transparent;
white-space: nowrap;
padding: 4px 8px;
font-size: 14px;
line-height: 1.42857143;
border-radius: 4px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
/*button color*/
color: #ffffff;
background-color: #c71c22;
border-color: #c71c22;
}
td > a:hover {
color: #555555;
text-decoration: none;
background-color: #9a161a;
border-color: #911419;
}
Related
I'm having trouble with the style for a disabled button.
The enabled button works, the hover works but the disabled button reverts to the default? style:
CSS:
.smlbutton:enabled{
color: #fff;
background-color: #1d60ff;
height: 20px;
width: 18px;
padding: 0px;
border: none 0px transparent;
font-size: 7px;
font-weight: lighter;
webkit-border-radius: 20px 10px 10px 10px;
-moz-border-radius: 9px 10px 10px 10px;
border-radius: 5px 20px 20px 20px;
}
.smlbutton:hover{
color: #fff;
background-color: #1d60ff;
height: 22px;
width: 18px;
padding: 0px;
border: none 0px transparent;
font-size: 7px;
font-weight: lighter;
webkit-border-radius: 20px 10px 10px 10px;
-moz-border-radius: 9px 10px 10px 10px;
border-radius: 5px 20px 20px 20px;
}
.smlbutton:disabled,.smlbutton.disabled{
color: #fff;
background-color: #1d60ff;
height: 200px;
width: 18px;
padding: 0px;
border: none 0px transparent;
font-size: 7px;
font-weight: lighter;
webkit-border-radius: 20px 10px 10px 10px;
-moz-border-radius: 9px 10px 10px 10px;
border-radius: 5px 20px 20px 20px;
The ASPX:
<asp:TemplateField HeaderText="Approval Drawings Approved" Visible="true">
<ItemTemplate>
<asp:TextBox ID="tbApprovals" runat="server" Text='<%# Bind("Approvals", "{0:MM/dd/yy}") %>' AutoPostBack="true" Enabled="true" OnTextChanged="tbDate_OnTextChangeApprovals" Width="100px"></asp:TextBox>
<ajaxToolkit:CalendarExtender ID="tbApprovals_CalendarExtender" runat="server" TargetControlID="tbApprovals" />
<asp:Button ID="btnApprovalsConvertToBaseline" class="smlbutton" runat="server" Text="B." OnClick="btnApprovalsConvertToBaseline_Click" Enabled="FALSE" />
<asp:Button ID="btnApprovalsCompleteTask" class="smlbutton" runat="server" Text="D." OnClick="btnApprovalsCompleteTask_Click" Enabled="FALSE" />
<asp:Button ID="btnApprovalsCompleteTaskOnTime" class="smlbutton" runat="server" Text="DOT" OnClick="btnApprovalsCompleteTaskOnTime_Click" Enabled="FALSE" />
</ItemTemplate>
</asp:TemplateField>
I enable the button using this c#
try
{
TextBox tempApprovals = (TextBox)e.Row.Cells[9].FindControl("tbApprovals");
DateTime myDateApprovals = DateTime.ParseExact(tempApprovals.Text.ToString(), "yyyy-MM-dd",
System.Globalization.CultureInfo.InvariantCulture);
if (myDateApprovals <= DateTime.Now.Date && e.Row.Cells[10].Text != "Actual")
{
tempApprovals.ForeColor = System.Drawing.Color.Red;
tempApprovals.Font.Bold = true;
}
Button btnApprovals = (Button)e.Row.Cells[9].FindControl("btnApprovalsConvertToBaseline");
Button btnApprovals2 = (Button)e.Row.Cells[9].FindControl("btnApprovalsCompleteTask");
Button btnApprovals3 = (Button)e.Row.Cells[9].FindControl("btnApprovalsCompleteTaskOnTime");
if (e.Row.Cells[10].Text.ToString() == "Forecast")
{
btnApprovals.Enabled = true;
}
if (e.Row.Cells[10].Text.ToString() == "Baseline")
{
btnApprovals.Enabled = false;
btnApprovals2.Enabled = true;
btnApprovals3.Enabled = true;
}
if (e.Row.Cells[10].Text.ToString() == "Adjusted")
{
btnApprovals.Enabled = false;
btnApprovals2.Enabled = true;
btnApprovals3.Enabled = true;
}
if (e.Row.Cells[10].Text.ToString() == "Actual")
{
btnApprovals2.Enabled = false;
btnApprovals3.Enabled = false;
}
}
catch { }
}
You do not need to style each pseudo-class. Instead, let inherit from parent.
.smlbutton {
color: #fff;
background-color: #1d60ff;
height: 22px;
width: 18px;
padding: 0px;
border: none 0px transparent;
font-size: 7px;
font-weight: lighter;
webkit-border-radius: 20px 10px 10px 10px;
-moz-border-radius: 9px 10px 10px 10px;
border-radius: 5px 20px 20px 20px;
}
.smlbutton:disabled,
.smlbutton[disabled] {
background-color: #0f0;
}
.smlbutton:hover {
background-color: #f00;
}
while applying page filters, depending on resultset(10 per page) my gridview height is shrinked. How do I avoid that and make gridview retain its height with horizontal scrollbar at same place even no. of rows is less than 10.
Pls help.
here is my code:
<asp:GridView ID="gv_SOUpdate" runat="server" AllowPaging="true" ShowHeader="true"
AllowSorting="true" style="border-color:Black;"
AutoGenerateColumns="False" BorderColor="White" GridLines="Both" PageSize="10"
BorderStyle="Solid" width="1600px"
onpageindexchanging="gv_SOUpdate_PageIndexChanging"
onsorting="gv_SOUpdate_Sorting"
BackColor="#CCCCCC"
onrowcreated="gv_SOUpdate_RowCreated"
onrowdatabound="gv_SOUpdate_RowDataBound">
<HeaderStyle CssClass="GridviewScrollHeader" ForeColor="black"/>
<RowStyle CssClass="GridviewScrollItem" />
<PagerStyle CssClass="GridviewScrollPager" />
.GridviewScrollHeader TH, .GridviewScrollHeader TD
{
padding:4px;
font-weight: bold;
border-right: 1px solid #AAAAAA;
border-bottom: 1px solid #AAAAAA;
background-color: #CCCCCC;
text-align: center;
vertical-align:middle;
font-family:Calibri;
border-color: Black;
z-index:0;}
.GridviewScrollItem TD
{
padding:4px;
border-right: 1px solid #AAAAAA;
border-bottom: 1px solid #AAAAAA;
background-color: #F1F2CD;
font-family:Calibri;
border-color: Black;}
.GridviewScrollPager
{
border-top: 1px solid #303030;
background-color: #FFFFFF; }
.GridviewScrollPager TD
{
padding-top: 3px;
font-size: 14px;
padding-left: 5px;
padding-right: 5px; }
.GridviewScrollPager A
{
color:Black;}
.GridviewScrollPager SPAN
{
font-size: 16px;
font-weight: bold;}
You can try the GridViewSettings.Settings.VerticalScrollBarMode property and use the ASPxGridViewSettings.VerticalScrollableHeight property to set the height.
Sources : https://www.devexpress.com/Support/Center/Question/Details/Q450294/how-to-set-a-fixed-gridview-height
I have a CSS3 modal dialog with a gridview that will be populated upon doing a search. However, when I go and actually do the search (and therefore cause a postback), the modal dialog closes. If I manually open it again, the gridview is populated as I wanted.
My question is how to keep the modal dialog open in the code behind after the search. Any help would be greatly appreciated!
This is my CSS:
.modalDialog {
position: fixed;
font-family: Arial, Helvetica, sans-serif;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: rgba(0, 0, 0, 0.8);
z-index: 99999;
opacity:0;
-webkit-transition: opacity 400ms ease-in;
-moz-transition: opacity 400ms ease-in;
transition: opacity 400ms ease-in;
pointer-events: none;
}
.modalDialog:target {
opacity:1;
pointer-events: auto;
}
.modalDialog > div {
width: 800px;
position: relative;
margin: 10% auto;
padding: 5px 20px 13px 20px;
/*border-radius: 10px;*/
background: #fff;
/*background: -moz-linear-gradient(#fff, #999);
background: -webkit-linear-gradient(#fff, #999);
background: -o-linear-gradient(#fff, #999);*/
}
.close {
background: #606061;
color: #FFFFFF;
line-height: 25px;
position: absolute;
right: -12px;
text-align: center;
top: -10px;
width: 24px;
text-decoration: none;
font-weight: bold;
-webkit-border-radius: 12px;
-moz-border-radius: 12px;
border-radius: 12px;
-moz-box-shadow: 1px 1px 3px #000;
-webkit-box-shadow: 1px 1px 3px #000;
box-shadow: 1px 1px 3px #000;
}
.close:hover {
background: #00d9ff;
}
and the HTML:
Open Modal
<div id="openModal" class="modalDialog">
<div>
X
<div>
<asp:Button ID="SearchBtn" runat="server"
OnClick="Search" Text="Search" />
<asp:GridView ID="gridview" GridLines="None"
AutoGenerateColumns="False" runat="server">
<Columns>
<asp:BoundField SortExpression="Name" DataField="Name"
HeaderText="Name" />
</Columns>
</asp:GridView>
</div>
</div>
</div>
If you want the modal to be open after searching and populating the gridview with values, do this.
gridview.DataBind();
ScriptManager.RegisterStartupScript(this, this.GetType(), "Pop", "openModal();", true);
openModal should be containing the function you need to reopen your modal.
I wrote the following code to create a button on page dynamically and once the user click on it it set the text value of a Label. By putting a breakpoint inside the Dynamiclbutton_Click I can see that click function is being called and label text is being set, but on page no value is set for the Label.
I tried this by dragging and dropping a button from toolbox and double clicking on it for the onlick function to be created by VS 2010, and when the user click on that declarative Button the page is getting refreshed and the new value of Label is being shown.
What additional thing I need to do for dynamic Button for it to behave like a declarative one? I need the user can click on dynamic button and label gets new value. what is missing?
public partial class CPIAbstracting : System.Web.UI.Page
{
protected override void OnInit(EventArgs e)
{
placeHolder2.Controls.Add(new LiteralControl("</br>"));
Button DynamicButton = new Button();
DynamicButton.Text = "test";
DynamicButton.Click += new EventHandler(Dynamiclbutton_Click);
placeHolder2.Controls.Add(DynamicButton);
}
protected void Page_Load(object sender, EventArgs e)
{
}
protected void Dynamiclbutton_Click(object sender, EventArgs e)
{
Label1.Text = "Dynamic button is clicked";
}
protected void Button1_Click(object sender, EventArgs e)
{
Label1.Text = "Static button is clicked";
}
}
ASPX :
<%# Page Title="" Language="C#" MasterPageFile="~/Site1.Master" AutoEventWireup="true" CodeBehind="CPIAbstracting.aspx.cs" Inherits="MED2020.WinRecs.Web.Sandbox.CPIAbstracting" %>
<%# Register assembly="AjaxControlToolkit" namespace="AjaxControlToolkit" tagprefix="asp" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
<style type="text/css">
.accordion1 {
}
.accordionHeader1 {
border: 1px solid #2F4F4F;
color: white;
background-color: #2E4d7B;
font-family: Arial, Sans-Serif;
font-size: 14px;
font-weight: bold;
padding: 5px;
margin-top: 5px;
cursor: pointer;
}
.accordionHeaderSelected1 {
border: 1px solid #2F4F4F;
color: white;
background-color: #5078B3;
font-family: Arial, Sans-Serif;
font-size: 12px;
font-weight: bold;
padding: 5px;
margin-top: 5px;
cursor: pointer;
}
.accordionContent1 {
background-color: #D3DEEF;
border: 1px dashed #2F4F4F;
border-top: none;
padding: 5px;
padding-top: 10px;
font-family: Arial, Sans-Serif;
font-size: 10px;
font-weight: bold;
}
.ApplicationDefault {font-family: Verdana; font-size: 10px;}
.Title {text-align: center; font-size: 12px; font-family:
Verdana; font-weight: bold;}
.AuthorInformation {text-align: center; color:green; margin-top: 5px}
.MainContent {
text-align: center;font-family: Verdana; font-size: small;
}
.Copyright {margin-top: 10px; color: Gray; font-weight:bold; width: 100%;
float: left; text-align: center;}
.ErrorText {font-family: Verdana; font-weight: bold; color:Maroon;}
.BoldText {font-family: Verdana; font-weight: bold;}
.style1
{
width: 100%;
}
.style3
{
width: 240px;
}
.style4
{
width: 882px;
}
.style10
{
height: 168px;
}
.style11
{
width: 882px;
height: 168px;
}
</style>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ApplicationContent" runat="server">
<br />
<asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
<asp:Accordion ID="Accordion1" CssClass="accordion1"
HeaderCssClass="accordionHeader1"
HeaderSelectedCssClass="accordionHeaderSelected1" ContentCssClass="accordionContent1"
runat="server" Height="232px" Width="402px"> </asp:Accordion>
<br />
<br />
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
</ContentTemplate>
</asp:UpdatePanel>
<asp:UpdatePanel ID="UpdatePanel2" runat="server" ChildrenAsTriggers="False"
UpdateMode="Conditional">
<ContentTemplate>
<asp:PlaceHolder id="placeHolder2" runat="server"></asp:PlaceHolder>
</ContentTemplate>
</asp:UpdatePanel>
<asp:UpdatePanel ID="UpdatePanel3" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<asp:PlaceHolder id="ph3" runat="server"></asp:PlaceHolder>
</ContentTemplate>
</asp:UpdatePanel>
<asp:Panel ID="Panel1" runat="server">
</asp:Panel>
<asp:Button ID="Button1" runat="server" Text="Button" onclick="Button1_Click" />
</asp:Content>
The problem is that your dynamically added button is inside an UpdatePanel, while the Label is outside of it. I don't know what your scenario is, but you need to have both controls inside UpdatePanel(s) and set the triggers correctly.
See this related question:
Change text in TextBox outside of UpdatePanel
I have some buttons in list view and I need to change their CSS attributes through code behind so the color can be changed dynamically through functions.
I get the following error:
**Error 6 The name 'SubDomainButton' does not exist in the current context.**
I would be happy being able to edit the CSS Class currently assigned to the buttons or reference the Button that is inside the ListView.
I want to do something like...
SubDomainButton.Style.Add("border-color", (string) (Session["BorderFontColor"]));
SubDomainButton.Style.Add("color", (string)(Session["BorderFontColor"]));
SubDomainButton.Style.Add("background-color", (string)(Session["BackgroundColor"]));
HTML Segment:
<asp:ListView ID="SubDomainListView" runat="server" DataKeyNames="ID" DataSourceID="SubDomainSqlDataSource"
EnableModelValidation="True" OnItemCommand="SubDomainListView_ItemCommand">
<itemtemplate>
<asp:Button ID="SubDomainButton" runat="server" Text='<%# Eval("SubDomain") %>' CommandText="click" CommandName="Select"
CommandArgument='<%# Eval("ID")%>' UseSubmitBehavior="False" CssClass="button" />
</itemtemplate>
<selecteditemtemplate>
<asp:Button ID="Button2" runat="server" Text='<%# Eval("SubDomain") %>' CommandText="click" CommandName="Select"
CommandArgument='<%# Eval("ID")%>' UseSubmitBehavior="False" CssClass="buttoninact" Enabled="False" />
</selecteditemtemplate>
<layouttemplate>
<div id="itemPlaceholder" runat="server">
</div>
</layouttemplate>
</asp:ListView>
CSS:
/* Button Styles */
.button {
-webkit-box-shadow: rgba(0,0,0,0.0.1) 0 1px 0 0;
-moz-box-shadow: rgba(0,0,0,0.0.1) 0 1px 0 0;
box-shadow: rgba(0,0,0,0.0.1) 0 1px 0 0;
border: 1px solid;
font-family: Lucida Grande,Tahoma,Verdana,Arial,sans-serif;
font-size: 12px;
font-weight: 700;
padding: 2px 6px;
height: 28px;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
text-decoration: underline;
}
/*Hover Styles*/
.button:hover {
-webkit-box-shadow: rgba(0,0,0,0.0.1) 0 1px 0 0;
-moz-box-shadow: rgba(0,0,0,0.0.1) 0 1px 0 0;
box-shadow: rgba(0,0,0,0.0.1) 0 1px 0 0;
border: 1px solid;
font-family: Lucida Grande,Tahoma,Verdana,Arial,sans-serif;
font-size: 12px;
font-weight: 700;
padding: 2px 6px;
height: 28px;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
text-decoration: none;
}
.buttoninact {
-webkit-box-shadow: rgba(0,0,0,0.0.1) 0 1px 0 0;
-moz-box-shadow: rgba(0,0,0,0.0.1) 0 1px 0 0;
box-shadow: rgba(0,0,0,0.0.1) 0 1px 0 0;
border: 1px solid;
font-family: Lucida Grande,Tahoma,Verdana,Arial,sans-serif;
font-size: 12px;
font-weight: 700;
padding: 2px 6px;
height: 28px;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
text-decoration: none;
}
You can do it by adding inline CSS styles:
<itemtemplate>
<asp:Button ID="SubDomainButton" runat="server" Text='<%# Eval("SubDomain") %>' CommandText="click" CommandName="Select" CommandArgument='<%# Eval("ID")%>' UseSubmitBehavior="False" CssClass="button"
style='<%# String.Format("border-color: {0}; color: {1}; background-color: {2};",(string)Session["BorderFontColor"],(string)Session["BorderFontColor"],(string)Session["BorderFontColor"]) %>' />
</itemtemplate>