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.
Related
This is a simple question. In a GridView control, I assumed that I could set the HeaderStyle-Font-Bold item within the asp:GridView tag and it would automatically apply it to all column header texts but this has no effect and only works if I set it within the asp:BoundField tag of each column.
This doesnt work:
<asp:GridView ... HeaderStyle-Font-Bold="false">
but this does:
<asp:BoundField ... HeaderStyle-Font-Bold="false"/>
Is this how its suppose to work? ie do I have to set the headerstyle at each column?
What effect should it have if I set the HeaderStyle-Font-Bold in the asp:Griview tag?
Thanks
Rob
Edit
I'm not looking for a solution as to how to make the header text bold as I already know how to do this. My question is about using the HeaderStyle-Font-Bold property and why it doesnt work if I set it in the asp:griview tag but works fine in the asp:BoundField tag.
Thanks
Add class to Gridview Control work both for using ItemTemplate,BoundField and set css
HTML MARKUP:
<asp:GridView CssClass="gvstyling">
....
</asp:GridView>
Simple CSS:
// For heading
.gvstyling th {
background-color: Red;
font-size: 12px;
}
// For Cell
.gvstyling td {
background-color: Red;
font-size: 12px;
}
// For Row
.gvstyling tr {
background-color: Red;
font-size: 12px;
}
Answer to yours edited one
If you using TemplateField, then you need to Add HeaderStyle-Font-Bold="false" inside TemplateField instead of Gridview and it will work for you
HTML MARKUP: look like this
<asp:GridView id="myGV1" CssClass="gvstyling">
<asp:TemplateField HeaderText="Id" HeaderStyle-Font-Bold="false" Visible="false">
<ItemTemplate>
<asp:Label ID="lblid" runat="server" Text='<%# Eval("Id") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
......
......
</asp:GridView>
what about
<headerstyle
font-bold="false"/>
How to change the table layout when using datalist. Below is the aspx i am using to populate the data, but i get the result like shown in Example 1. There is not continuation of showing the data due to the table layout ? How can achieve to show the result as shown in example 2 ?
I am in need of using the datalist since I am using repeatcolumn which is not available in repeater.
Aspx :
<asp:DataList ID="dl_Groups" RepeatColumns="2" runat="server"
OnItemDataBound="dl_Groups_ItemDataBound" RepeatDirection="vertical"
ShowFooter="False" ShowHeader="False">
<ItemTemplate>
<asp:CheckBox runat="server" ID="chk_Group" Text='<%# Eval("category_type") %>'
Value='<%# Eval("service_type_category_id") %>' onclick="OnGroupClick" />
<asp:CheckBoxList runat="server" ID="chkServiceType" Style="padding-left: 20px"
DataValueField="ServiceTypeID" DataTextField="Name" EnableViewState="true">
</asp:CheckBoxList>
<br />
</ItemTemplate>
</asp:DataList>
have you gone through these properties of the CheckBoxList
RepeatColumns="2"
RepeatDirection="Vertical"
RepeatLayout="Table"
These may be helpful to you.
You may also take benefit of css
As follows
#chkServiceType tr{
display:inline-block;
margin-right:20px;
}
#chkServiceType tr label{
margin-left:5px;
}
I have a gridview and i want to preserve its width no matter what data it is displaying. For example, if there is a word with the length of 900 (Eg. abbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb) I want gridview to display in a new line instead of widening its width (girdview width is 700). For instance, like stackoverfolw, it is displaying my example word very well. This textbox has not widen than it should, hasn't ?
My current code can't do the job. Thanks. Any help?
My code.
<asp:GridView ID="gv" runat="server" CssClass="gv" AutoGenerateColumns="False" Width="700px">
<Columns>
<asp:BoundField DataField="" HeaderText=""
dataformatstring="{0:dd-MM-yyyy}" HtmlEncode="false" SortExpression="" >
<ControlStyle Width="100" />
<HeaderStyle Width="100" />
<ItemStyle Width="100" />
</asp:BoundField>
.gv th
{
width: 100px;
}
This works for me
.my-text
{
float:left;
overflow-y:auto;
overflow-x:auto;
word-break:break-all;
}
Inside your template field
<asp:TemplateField>
<ItemTemplate>
<asp:Label ID="Label1" runat="server" CssClass="my-text"
Text='<%# Bind("YourColumnName")'
></asp:Label>
</ItemTemplate>
</asp:TemplateField>
Give width of div containing grid in pixels instead of percentage
<div id="divGrid" style='position:absolute; width:800px;'>
<!-- your grid here -->
</div>
Also, You can take width of screen in pixel and calculate the pixel in percentage. suppose width of screen is 1000 pixel is return by screen.width then you 90% will be 900px.
In javascript :
<script language="javascript" type="text/javascript">
document.getElementById('divGrid').style.width = screen.width + "px";
</script>
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