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
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;
}
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 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;
}
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>
I have an ASP.NET menu and for the items that contain a drop down menu, it displays an arrow in a new <td>, the problem is the spacing is horrible. How do i tap into that <TD> or lessen the spacing between the menu text and Arrow?
Screenshot of menu issue:
HTML Output:
<td style="white-space:nowrap;">
<a class="ctl00_itemMenu_1 StaticMenuItemStyle ctl00_itemMenu_3" style="border-style:none;font-size:1em;" href="Default.aspx"> Home </a>
</td>
<td style="width:0;">
<img style="border-style:none;vertical-align:middle;" alt="Expand Home" src="Images/menu_arrow.gif">
</td>
Menu Control:
<asp:Menu ID="itemMenu" SkinID="MenuSkin" runat="server" Orientation="Horizontal"
CssClass="menu" DynamicItemFormatString=" {0} " StaticItemFormatString=" {0} "
StaticEnableDefaultPopOutImage="true" StaticPopOutImageUrl="~/Images/menu_arrow.gif"
DynamicPopOutImageUrl="~/Images/menu_arrow_dynamic.gif" DynamicEnableDefaultPopOutImage="true"
MaximumDynamicDisplayLevels="5">
<StaticMenuStyle CssClass="StaticMenuStyle" />
<StaticMenuItemStyle Width="100%" CssClass="StaticMenuItemStyle" />
<StaticHoverStyle CssClass="StaticHoverStyle" />
<DynamicMenuStyle CssClass="DynamicMenuStyle" />
<DynamicMenuItemStyle CssClass="DynamicMenuItemStyle" Width="100%" />
<DynamicHoverStyle CssClass="DynamicHoverStyle" />
</asp:Menu>
CSS:
.menu
{
padding: 0px 0px 0px 7px;
margin:0px;
}
.StaticMenuStyle a, .StaticMenuStyle a:visited, .StaticMenuStyle a:active, .StaticMenuStyle a:hover
{
color: #ffffff;
text-decoration: none;
padding: 3px 9px 3px 9px;
height: 100%;
display: table;
font-weight: bold;
font-family: Tahoma, Arial;
}
.DynamicMenuStyle a, .DynamicMenuStyle a:visited, .DynamicMenuStyle a:active, .DynamicMenuStyle a:hover
{
color: #ffffff;
text-decoration: none;
padding: 7px 9px 7px 9px;
width: 100%;
height: 100%;
display: table;
font-weight: bold;
font-family: Tahoma, Arial;
}
.StaticMenuStyle td
{
font-weight: normal;
height: 100%;
font-size: 11px;
border-collapse: collapse;
/*cursor: pointer;*/
}
.DynamicMenuStyle table
{
border-collapse: collapse;
border-spacing: 0px;
}
.DynamicMenuStyle td
{
border: solid 1px #ffffff;
font-weight: normal;
width: 100%;
height: 100%;
/*cursor: pointer;*/
background-color: #333333;
border-collapse: collapse;
border-spacing: 0px;
font-size: 11px;
}
.DynamicMenuStyle td table tr td
{
border: solid 0px #ffffff;
padding: 7px 4px;
}
.StaticMenuItemStyle td
{
padding: 7px 0px 7px 0px;
border: 0px solid #ffffff;
font-weight: normal;
text-align: left;
}
.StaticHoverStyle td, .DynamicHoverStyle td
{
background-color: #5c5c5c;
font-weight: bold;
}
.StaticSelectedStyle, .DynamicSelectedStyle
{
font-weight: normal;
cursor: pointer;
}