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).
Related
have searched all day for solution to vb.net web project, 3.5 framework (VS 2008) which uses DataGrid (not gridview) to set consistent widths for all 17 columns in my grid. The grid is overflowing past the div area and the "Note" column particularly is very wide with very little text in it. For this particular column I've tried both allowing wrapping and nowrap and but the width never changes. I've set the width of columns in the grid properties column collection with no change. Now I am setting the widths programmatically like so but with minimal effects. The Note column is still quite wide.
Ideally what I would like is to fix column sizes (not auto grow or shrink) and have text that is too large to fit to be cut off. I haven't designated an overall grid width. Is that why the grid is misbehaving?
vb.net:
DataGrid1.Columns(14).HeaderStyle.Width = Unit.Pixel(25) 'LightDuty
DataGrid1.Columns(14).HeaderStyle.Wrap = True
'
DataGrid1.Columns(15).HeaderStyle.Width = Unit.Pixel(150) 'Note
DataGrid1.Columns(15).HeaderStyle.Wrap = True
css:
#grid
{
float:left;
width:100%;
/*border: 1px solid blue;*/
margin: 10px 10px 0px 10px;
padding:10px 10px 1px 10px;
text-align:center;
}
aspx: (just a portion of the top of the grid)
<div id="grid">
<asp:datagrid id="DataGrid1" runat="server"
Font-Names="Tahoma"
Font-Size="Small"
ShowFooter="True"
DataMember="vwSomeDataSetTable"
AutoGenerateColumns="False"
AllowSorting="True"
PageSize="25"
OnPageIndexChanged="DataGrid1_Paging" >
<FooterStyle HorizontalAlign="Right"></FooterStyle>
<SelectedItemStyle HorizontalAlign="Left" />
<PagerStyle HorizontalAlign="Left" Mode="NumericPages"
Position="TopAndBottom" />
<AlternatingItemStyle BackColor="#EBF5FF"></AlternatingItemStyle>
<headerStyle Font-Bold="True" ></headerStyle>
<Columns>
<asp:BoundColumn DataField="name" SortExpression="name" HeaderText="Employee">
<headerStyle HorizontalAlign="Center" Font-Bold="False" Font-Italic="False"
Font-Overline="False" Font-Size="Small" Font-Strikeout="False"
Font-Underline="False" Wrap="False"> </headerStyle>
<ItemStyle Wrap="False" Font-Bold="False" Font-Italic="False"
Font-Overline="False" Font-Strikeout="False" Font-Underline="False"
HorizontalAlign="Left"></ItemStyle>
</asp:BoundColumn>
<asp:BoundColumn DataField="LD" SortExpression="LD"
HeaderText="LD">
<headerStyle HorizontalAlign="Center" Font-Bold="False" Font-Italic="False"
Font-Overline="False" Font-Size="Small" Font-Strikeout="False"
Font-Underline="False" Wrap="False" />
<ItemStyle Font-Names="Webdings" Wrap="false" HorizontalAlign="Left"
Font-Bold="False" Font-Italic="False" Font-Overline="False"
Font-Strikeout="False" Font-Underline="False"/>
</asp:BoundColumn>
<asp:BoundColumn DataField="Note" SortExpression="note" HeaderText="Note">
<headerStyle HorizontalAlign="Center" Font-Bold="False"
Font-Italic="False" Font-Overline="False" Font-Strikeout="False"
Font-Underline="False" Wrap="False"></headerStyle>
<ItemStyle Wrap="False" Font-Bold="False" Font-Italic="False"
Font-Overline="False" Font-Strikeout="False" Font-Underline="False"
HorizontalAlign="Left"></ItemStyle>
</asp:BoundColumn>
Naturally as soon as I ask for help, I come to a solution on my own!
UPDATE: I removed everywhere I had set to allow wrapping in the grid columns collection properties for each headerstyle and itemstyle of every column as I realized some were set to wrap, some were not, creating inconsistencies with what I was attempting to set programmatically and once I did that, the columns started shrinking to a more usable size. I still have a way to go, but it's getting better.
Here is my ASP:
<asp:GridView ID="GridView1" runat="server" AllowSorting="True" AutoGenerateEditButton="true"
DataSourceID="AccessDataSource1"
AutoGenerateColumns="False" DataKeyNames="ID"
RowStyle-CssClass="editPhotoGridFormat"
AlternatingRowStyle-CssClass="editPhotoGridFormat"
AlternatingRowStyle-BackColor="Gray"
RowStyle-Height="400px"
RowStyle-VerticalAlign="Top">
<RowStyle Height="400px" />
<Columns>
<asp:CommandField ShowSelectButton="True" />
<asp:BoundField DataField="ID" HeaderText="ID" InsertVisible="False"
ReadOnly="True" SortExpression="ID" />
<asp:BoundField DataField="BlogTitle" HeaderText="BlogTitle"
SortExpression="BlogTitle" />
<asp:ImageField DataImageUrlField="Image" HeaderText="Image"
DataImageUrlFormatString="~/PlaceImages/{0}" ControlStyle-CssClass="editPhotoGridFormat"
AlternateText="Something went wrong"
NullDisplayText="No picture on file" />
<asp:BoundField DataField="PicText" HeaderText="PicText" />
<asp:BoundField DataField="TravelDate" HeaderText="TravelDate" SortExpression="TravelDate" />
<asp:BoundField DataField="BeginText" HeaderText="BeginText" ItemStyle-Height="10px" />
<asp:BoundField DataField="Caption" HeaderText="Caption" />
<asp:BoundField DataField="City" HeaderText="City" />
<asp:BoundField DataField="Country" HeaderText="Country"
SortExpression="Country" />
<asp:BoundField DataField="EndText" HeaderText="EndText" />
</Columns>
</asp:GridView>
Here's my CSS:
.editPhotoGridFormat
{
width: 220px;
height: 180px;
}
It seems like no matter where I set height, it doesn't want to change the height of my rows. You can see that I have set the height in many places in my code, and I've tried using each one individually. Any ideas folks? All the posts on gridview row height here seem to be for Android, lol.
Try this
<asp:GridView ID="GridView1"> <rowstyle Height="20px" /></asp:GridView>
OR
Mention the height value for RowStyle(& AlternateRowStyle) in your HTML source
You can do that same in code-behind
GridView1.RowStyle.Height = 50;
But my suggestion is use CSS(Best way)
.RowStyle {
height: 50px;
}
.AlternateRowStyle {
height: 50px;
}
HTML Source
<asp:gridview id="GridView1" runat="server" xmlns:asp="#unknown">
RowStyle-CssClass="RowStyle"
AlternatingRowStyle-CssClass="AlternateRowStyle">
</asp:gridview>
Have you tried to set the row height in your css?
Set this style in the CssClass properties for the RowStyle and AlternateRowStyle styles of your GridView:
.smallRow
{
height: 150px;
}
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.
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>
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