Given the following markup for a GridView column, why are my image buttons showing up as left aligned?
<ItemStyle HorizontalAlign="Center" Width="55px" />
<ItemTemplate>
<asp:ImageButton ID="removeButton" runat="server"
ImageUrl="~/Images/Icons/x-m.png"
CommandArgument='<%# Eval("ResourceId") %>'
AlternateText="Remove Button"
onclick="removeButton_Click" />
</ItemTemplate>
Can you use css? You might have better luck styling using the following css.
Lets say width of x-m.png is 25px;
.X { width: 55px; }
.Y { display: block; margin: 0 auto; width: 25px; }
<ItemStyle cssClass="X" />
<ItemTemplate>
<asp:ImageButton ID="removeButton" runat="server"
ImageUrl="~/Images/Icons/x-m.png"
CommandArgument='<%# Eval("ResourceId") %>'
AlternateText="Remove Button"
onclick="removeButton_Click"
cssClass="Y"/>
</ItemTemplate>
Related
I am having a problem in forcing gridview header to "unbold". I tried using the Gridview parameter for header font style but it doesn't really work. Unfortunately, all other methods I tried did not work.
Using CSS Class
.headercell
{
font-weight: normal;
font-size: 12px;
font-family: "Franklin Gothic Book"
}
Programmatically using Row Data Bound
If e.Row.RowType = DataControlRowType.Header Then
For i = 0 To GridView1.Columns.Count - 1
GridView1.Columns(i).HeaderStyle.Font.Bold = False
Next
End If
What would be the most efficient way to set the gridview header to unbold?
UPDATE (ASPX CODE):
<asp:GridView ID="GridView1" runat="server" BackColor="White"
BorderColor="#333333" BorderStyle="Solid" BorderWidth="2px"
CellPadding="3" Font-Bold="false" Font-Overline="False"
Font-Size="Small" Font-Underline="False" HtmlEncode="false">
<RowStyle ForeColor="#000066" Height="23px" HorizontalAlign="Center"
VerticalAlign="Middle" />
<FooterStyle BackColor="White" ForeColor="#000066" />
<PagerStyle BackColor="White" ForeColor="#000066"
HorizontalAlign="Left" />
<SelectedRowStyle BackColor="#669999" Font-Bold="True"
ForeColor="White" />
<HeaderStyle BackColor="#002851" Font-Bold="False"
CssClass="headercell" ForeColor="White" HorizontalAlign="Left"
VerticalAlign="Middle" />
<Columns>
<asp:TemplateField HeaderText="STATUS" ShowHeader="False"
Visible="True">
<ItemTemplate>
<asp:Button ID="Btn1" runat="server" CommandArgument='<%#
DataBinder.Eval(Container, "RowIndex") %>'
CommandName="Btn1_cmd">
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
You can use HeaderStyle-Font-Bold on your <asp:BoundField /> So just set it to false as following
HeaderStyle-Font-Bold="false"
Add a CssClass namely "gvstyling" to your gridview
Write a css just like this...
.gvstyling th
{
font-size: 12px;
font-weight: normal;
}
Try below :
th {
font-weight: normal;
}
This is the cssclass I added to the Gridview:
.Grid, .Grid th, .Grid td
{
border-color: #CCCCCC;
font-family: Franklin Gothic Book;
font-size: 12px;
font-weight: normal;
}
In the source code, I just added CssClass="Grid" to the Gridview (not in header cssclass).
On an ASP.Net DetailsView and also on a GridView I noticed that the tick mark in CheckBoxes are a light gray (disabled) colour even though I set it as blue.
<asp:CheckBoxField DataField="DayOfWeekMonday" HeaderText="Monday:" SortExpression="DayOfWeekMonday">
<ItemStyle ForeColor="Blue" />
</asp:CheckBoxField>
The same thing happens when the CheckBox is a TemplateField.
<asp:TemplateField HeaderText="Monday:" SortExpression="DayOfWeekMonday">
<EditItemTemplate>
<asp:CheckBox ID="CheckBoxEditDayOfWeekMonday" runat="server" Checked='<%# Bind("DayOfWeekMonday") %>' />
</EditItemTemplate>
<InsertItemTemplate>
<asp:CheckBox ID="CheckBoxInsertDayOfWeekMonday" runat="server" Checked='<%# Bind("DayOfWeekMonday") %>' />
</InsertItemTemplate>
<ItemTemplate>
<asp:CheckBox ID="CheckBoxItemDayOfWeekMonday" runat="server" Checked='<%# Bind("DayOfWeekMonday") %>' Enabled="false" />
</ItemTemplate>
<ItemStyle ForeColor="Blue" />
</asp:TemplateField>
I also tried this in the code-behind file.
Protected Sub CheckBoxItemDayOfWeekMonday_DataBinding(sender As Object, e As EventArgs)
Dim theControl As CheckBox
theControl = DetailsView.FindControl("CheckBoxItemDayOfWeekMonday")
theControl.ForeColor = Drawing.Color.Blue
End Sub
Is there a way to change it to blue like the rest of our fields and columns?
I noticed you meant the tick mark INSIDE the checkboxes, not the forecolor. I don't think you can change this as this is very OS dependant. I have implemented this with images in the past. You can try these CSS3 CheckBoxes which uses images: http://webdesign.tutsplus.com/tutorials/htmlcss-tutorials/quick-tip-easy-css3-checkboxes-and-radio-buttons/
Sample:
HTML:
<span><input type="checkbox" id="c1" name="cc" />
<label for="c1"><span></span>Check Box 1</label>
</span>
CSS:
input[type="checkbox"] {
display:none;
}
input[type="checkbox"] + label {
color:#000000;
font-family:Arial, sans-serif;
font-size:14px;
}
input[type="checkbox"] + label span {
display:inline-block;
width:19px;
height:19px;
margin:-1px 4px 0 0;
vertical-align:middle;
background:url(http://webdesigntutsplus.s3.amazonaws.com/tuts/391_checkboxes/check_radio_sheet.png) left top no-repeat;
cursor:pointer;
}
input[type="checkbox"]:checked + label span {
background:url(http://webdesigntutsplus.s3.amazonaws.com/tuts/391_checkboxes/check_radio_sheet.png) -19px top no-repeat;
}
JSFiddle: http://jsfiddle.net/4FraV/2/
I can't get my paging buttons: "<< < > >>" to align right.
Here is my GridView:
<asp:GridView ID="GridView1" ShowHeader="false" AllowPaging="true" PageSize="2"
AutoGenerateColumns="false" Width="100%" runat="server">
<Columns>
<asp:TemplateField>
<ItemTemplate>
foo
</ItemTemplate>
<ItemStyle CssClass="blah" />
</asp:TemplateField>
<asp:TemplateField>
<ItemTemplate>
bar
</ItemTemplate>
<ItemStyle CssClass="pluh" />
</asp:TemplateField>
</Columns>
<PagerStyle CssClass="gridpager" HorizontalAlign="Right" />
<PagerSettings Mode="NextPreviousFirstLast" FirstPageText="<<" PreviousPageText="<"
NextPageText=">" LastPageText=" >>" Position="Bottom" />
</asp:GridView>
And the CSS style:
.gridpager, .gridpager td
{
padding-left: 5px;
text-align: right;
}
If I remove the PageStyle CssClass and use HorizontalAlign="Right" on PagerSettings it works, but then I don't get the padding I need. And specifying both a CssClass and HorizontalAlign like my sample doesn't work.
What do I need to do?
Thank you!
It looks because of the horrible markup Web Forms outputs. The pager is created as a table within a td. I can get it working with this CSS:
.gridpager table {
float: right;
}
Edit: glad you got it figured out. I didn't know if you wanted to do it with pure CSS. I also don't like the float method much.
Edit 2: Looks like the rendered grid uses the align attribute in the td used for the pager when you use <PagerStyle HorizontalAlign="Right" />
Well, I feel kind of silly, but turns out I just needed to remove "text-align: right" from my style. Thanks for reading!
You can do simply a css trick:
.gridpager td table{
margin-right:20px;
}
This should solve the issue.
Somebody asked similar question not long ago. But nobody answered comprehensively.
Assume I have:
<asp:Button id="b1" Text="Submit" runat="server" />
<asp:Button id="b2" Text="Submit" runat="server" />
I want to set the following property to both buttons:
height: 100px;
width: 50px;
Let's say both properties are included in a class. How do I apply that class into both buttons?
Thank's
Method 1
Add a CSS stylesheet with the following selector.
input[type="submit"] {
height: 100px;
width: 50px;
}
Method 2
Use an ASP.Net Theme.
Method 3
Set a class name on each button using the CssClass property.
Markup:
<asp:Button id="btn1" Text="Submit" CssClass="buttonStyle1" />
<asp:Button id="btn2" Text="Submit" CssClass="buttonStyle1" />
<asp:Button id="btn3" Text="Submit" CssClass="buttonStyle1" />
<!-- the class can be applied to any number of other elements -->
CSS:
.buttonStyle1 {
height: 100px;
width: 50px;
}
just give them the same class for css
<asp:Button id="b1" CssClass="TestStyle" Text="Submit" runat="server" />
<asp:Button id="b2" CssClass="TestStyle" Text="Submit" runat="server" />
.TestStyle
{
height: 100px;
width: 50px;
}
Work on asp.net vs05. I have three type of value Like:IsDesign,IsPrinting,IsInstall they are bit type. To represent this bits values on my gridview I use three checkbox columns, GridView control with three header checkbox and checkbox for each individual record. When you click the header check all checkboxes when the header checkbox is checked it highlights all the rows and checks the checkboxes in all rows, and when unchecked it restores back the original color of the row and unchecks the checkboxes.
To complete this task, want to use the client side script.
<asp:GridView ID="gvSearch" runat="server" AutoGenerateColumns="False" DataKeyNames="JobID" Width="880px" CellPadding="5" ForeColor="#333333" GridLines="None" AllowPaging="True" HorizontalAlign="Center" CellSpacing="1" PageSize="5" ShowFooter="True" Height="278px" OnPageIndexChanging="gvSearch_PageIndexChanging" OnRowDataBound="gvSearch_RowDataBound">
<Columns>
<asp:CheckBoxField HeaderText="IsDesign" />
<asp:CheckBoxField HeaderText="IsPrinting" />
<asp:TemplateField HeaderText="IsInstall">
<EditItemTemplate>
<asp:CheckBox ID="ckbIsDelivered" runat="server" Checked='<%# Bind("IsDelivered") %>' Text="IsDelivered" />
</EditItemTemplate>
<FooterTemplate>
<asp:Button ID="btnSave" runat="server" OnClick="btnSave_Click" Text="Save" />
</FooterTemplate>
<ItemTemplate>
<asp:CheckBox ID="ckbIsDelivered" runat="server" onclick = "Check_Click(this)" Checked='<%# Bind("IsDelivered") %>' />
</ItemTemplate>
<HeaderTemplate>
<br />
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td style="width: 21px">
<input id="chkAll" name="chkAll" onclick = "checkAll(this);" type="checkbox" />
</td>
<td style="width: 70px">
<asp:Label ID="Label14" runat="server" Text="IsDelivered" />
</td>
</tr>
</table>
</HeaderTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="JobID " SortExpression="JobID">
<EditItemTemplate>
<asp:Label ID="Label1" runat="server" Text='<%# Eval("JobID") %>' />
</EditItemTemplate>
<ItemTemplate>
<asp:Label ID="lblJobID" runat="server" Text='<%# Bind("JobID") %>' />
</ItemTemplate>
</asp:TemplateField>
<asp:BoundField DataField="JobNo" HeaderText="JobNo " SortExpression="JobNo" />
<asp:BoundField DataField="ClientName" HeaderText="ClientName " SortExpression="ClientName" />
<asp:BoundField DataField="MediaName" HeaderText="MediaName " SortExpression="MediaName" />
<asp:BoundField DataField="BrandName" HeaderText="BrandName " SortExpression="BrandName" />
<asp:BoundField DataField="JobTypeDesc" HeaderText="JobTypeDesc " SortExpression="JobTypeDesc" />
<asp:BoundField DataField="JobDesc" HeaderText="JobDesc " SortExpression="JobDesc" />
<asp:BoundField DataField="OutletNameEnglish" HeaderText="OutletNameEnglish " SortExpression="OutletNameEnglish" />
<asp:BoundField DataField="OutletAddressEnglish" HeaderText="OutletAddressEnglish " SortExpression="OutletAddressEnglish" />
<asp:BoundField DataField="Length" HeaderText="Length " SortExpression="Length" />
<asp:BoundField DataField="Height" HeaderText="Height " SortExpression="Height" />
<asp:BoundField DataField="Sft" HeaderText="Sft " SortExpression="Sft" />
<asp:BoundField DataField="DeliveryTargetDate" HeaderText="DeliveryTargetDate " SortExpression="DeliveryTargetDate" DataFormatString="{0:dd MMM yyyy}" />
<asp:BoundField DataField="JobPriorityID" HeaderText="JobPriorityID " SortExpression="JobPriorityID" />
<asp:BoundField DataField="Remarks" HeaderText="Remarks " SortExpression="Remarks" />
<asp:CheckBoxField DataField="Status" HeaderText="Status " SortExpression="Status" />
<asp:CheckBoxField DataField="IsActive" HeaderText="IsActive " SortExpression="IsActive" />
</Columns>
<AlternatingRowStyle BackColor="White" ForeColor="#284775" />
<RowStyle BackColor="#F7F6F3" ForeColor="#333333" Height="50px" />
<FooterStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" Height="20px" />
<PagerStyle BackColor="#284775" ForeColor="White" HorizontalAlign="Center" />
<SelectedRowStyle BackColor="#E2DED6" Font-Bold="True" ForeColor="#333333" />
<HeaderStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" HorizontalAlign="Center" BorderWidth="1px" Height="20px" />
<EditRowStyle BackColor="#999999" Height="40px" Width="100px" />
This will become much easier if you use CSS rules for your styling instead of inline styles like you currently have. To do this, change your row style tags to only specify CSS classes, not specific styles, like this:
<asp:GridView ID="gvSearch" runat="server" CssClass="gridView">
<%-- ... Your other markup here ... --%>
<AlternatingRowStyle CssClass="altRow" />
<RowStyle CssClass="row" />
<FooterStyle CssClass="footer" />
<PagerStyle CssClass="pager" />
<SelectedRowStyle CssClass="selectedRow" />
<HeaderStyle CssClass="headerRow" />
<EditRowStyle CssClass="editingRow" />
</asp:GridView>
Then you can apply the same styles you originally had inline in your markup using a style sheet like this (all of the CSS rules are exactly the same as your original inline styles):
.gridView { width: 880px; padding: 5px; color: #333; text-align: center;
height: 278px; border-collapse:separate;border-spacing: 1px;}
.altRow { background: #fff; color: #284775 }
.row { background: #f7f6f3; color: #333; height: 50px }
.footer { background: #5d7b9d; font-weight: bold; color: #fff; height: 20px }
.pager { background: #284775; color: #fff; text-align: center; }
.selectedRow { background: #e2ded6; font-weight: bold; color: #333 }
.headerRow { background: #5d7b9d; font-weight: bold; color: #333;
text-align: center; border: 1px solid #000; height: 20px }
.editingRow { background: #999; height: 40px; width: 100px }
Once you've got your CSS established, the next thing to do is handle clicking the header check boxes. To do this, you must use a JavaScript framework like jQuery, Dojo, YUI, MooTools or Prototype. Doing it without one would take me all day to write out and explain properly, and even then it may not even work across all browsers. I'll show you how to do what I think you're looking for using jQuery, since that is what I'm most comfortable with, however any JavaScript framework can accomplish the same thing.
In your header template, you won't need anything except an ID on your <input /> tag, which you already have. You should remove the onclick attribute you already have, since you won't need it. Make sure you're using the CSS rules I defined above, as the code I'm going to write relies on it being there.
First, subscribe to the click event of the header checkbox. When the checkbox is clicked, this code finds the column the checkbox exists in and then goes through every row in the table and clicks the checkbox it finds in that column.
$(document).ready(function() {
$("#chkAll").click(function(){
// First find the column index of the clicked checkbox
// If you know your column order won't change, this
// can be done with less code by just hard-coding
// the "colIndex" variable to the zero-based column number
var $this = $(this);
var clickedColumn = $this.closest(".headerRow > th");
var headerRow = $this.closest(".headerRow");
var colIndex = headerRow.children().index(clickedColumn);
// Next, traverse through the table, checking or
// unchecking each checkbox in the specified column index
var table = $this.closest("table.gridView");
if (this.checked) {
table.find("tr.altRow, tr.row").each(function() {
var $this = $(this);
// Finding the checkbox in the correct column
// involves finding the correct column and then
// getting the checkbox inside it. This is easy
// with jQuery
var checkbox = $this.children()
.eq(colIndex)
.children("input:checkbox");
checkbox.attr("checked", true);
$this.addClass("selectedRow");
});
} else {
table.find("tr.altRow, tr.row").each(function() {
var $this = $(this);
// Finding the checkbox in the correct column
// involves finding the correct column and then
// getting the checkbox inside it. This is easy
// with jQuery
var checkbox = $this.children()
.eq(colIndex)
.children("input:checkbox");
checkbox.attr("checked", false);
$this.removeClass("selectedRow");
});
}
});
});
A working demo of this can be found at: http://jsbin.com/alafo