We Keep Coding

ASP, CSS and C# - Fixing Gridview Headers for Scrolling

Work on the website is going well and I am adding the more fancy features. I noticed their gridviews were incredibly long vertically so I started adding a scrollbar to sort it out. Problem is that the header disappears. There are a few solutions online but all of the ones I have found either do not solve the problem or use JavaScript.
I am willing to use JavaScript if it comes to it, but ideally would only like to use ASP, C# and CSS (I am trying to keep the code as close to their original layout and code design as possible). Is this possible or is JavaScript the only way to go? I have provided the tags for ASP below
<div style="width: 100%; height: 800px; overflow: scroll">
<asp:GridView ID="grdInventory" runat="server" HeaderStyle-CssClass="FixedHeader" AutoGenerateColumns="False" Width="100%" onrowcommand="grdInventory_RowCommand" >
<RowStyle CssClass="normrow" />
<AlternatingRowStyle CssClass="oddrow" />
<Columns>
...Data...etc...
</Columns>
</asp:GridView></div>
And the CSS current for the FixedHeader style
.FixedHeader
{
position: absolute;
}
Any help would be widely appreciated!

Fire Gridview OnRowCommand on clicking label

I'm having difficulty getting a RowCommand to execute when I click on the label of a GridView.
Here is my code for the gridview.
<asp:GridView ID="JobsGridView" runat="server" OnRowCommand="JobsGridView_RowCommand" EmptyDataText="No builds found" HeaderStyle-CssClass="HeaderColors" AutoGenerateColumns="False" ShowHeader="false">
<Columns>
<asp:ButtonField Text='SingleClick' CommandName="SingleClick" Visible="False"/>
<asp:TemplateField>
<ItemTemplate>
<asp:Label ID="JobIdLabel" runat="server" Text='<%# Bind("BrokenProject") %>' ></asp:Label>
</ItemTemplate>
</asp:TemplateField>
</Columns>
<RowStyle Width="100%" CssClass=""></RowStyle>
</asp:GridView>
How can I get the JobsGridView_RowCommand function to be called when I click on the label? If I make the buttonfield visible I can see the button saying SingleClick beside it and it does call the function, but I don't want this extra button. I just want to click the name on a list and have something happen.
I know it seems stupid to expect clicking the label to do anything but it seems there are no events for labels, and I've been looking at some similar code and they do something like this...

You could use a LinkButton instead.
<asp:LinkButton ID="JobIdLink" runat="server"
CommandName="SomeCommand"
Text='<%# Bind("BrokenProject") %>' >
</asp:LinkButton>
You could even style it to look less like a link and more like a label.
a:link
{
color: black;
text-decoration: none;
}
a:visited
{
color: black;
text-decoration: none;
}
a:hover
{
color: black;
text-decoration: none;
}

Unless you want to write Javascript to handle the click, you'll need a control with the ability to post back to the server, like Andrei mentioned. Inputs (for example a button) and hyperlinks can do that.

DataGridView design X scroll with fixed header, visible grid line, even column width

I'm making an admin panel and I have DataGridView on each page.
At the moment, it is not showing x &y gridLines and column width is arbitrary. I've used ItemStyle width 10%, but still doesn't really do the trick.
Here is my source code
<td class="auto-style9" colspan="2">
<div style= "Overflow:scroll; overflow-x: scroll; max-height: 220px; width: auto">
<asp:GridView ID="GridViewUpPer" runat="server" AutoGenerateColumns="False" Font-Names="Arial" Font-Size="Small" HorizontalAlign="Center">
<Columns>
<asp:BoundField DataField="SubCatID" HeaderText="Sub category ID">
<ItemStyle Width="10%" />
</asp:BoundField>
Here is my design
x scroll is not appearing and my gridView is not showing the entire columns. I only can change heard text color not the text color of data. I'm using table and div.
I have 15 of GV looking like this..... Can anyone help me to design a good looking gridView?? Without using java coz I'm new to programming and I don't know that script language...... Thanks~
C#, VS 2012, web application

space between text and checkbox

I want to have space between checkbox and the text.
<asp:CheckBox ID="chkPublic" runat="server" Text="Public" Font-Bold="true" />
How to get space between checkbox and text. Thanks.
EDIT: I need some css format. Thanks.

<asp:CheckBox ID="chkPublic" runat="server" Text="Public" Font-Bold="true" CssClass="mycheckbox" />
In stylesheet.css
.mycheckbox input[type="checkbox"]
{
margin-right: 5px;
}

A late reply, but hopefully helpful to someone else looking for a solution. You can "quick-and-dirty" add space by embedding non-breaking spaces in the text property value. The advantage is that you can do this for controls that are exceptions to the styles applied elsewhere without having to create a new style sheet for just one control. For example:
<asp:CheckBox runat="server" ID="myCheckBox" Text=" Check this to subscribe" />

I created a style for the label:
label {
font-size: 1em;
color: black;
text-transform: uppercase;
margin-left: 5px;
}
However it will affect the header labels so I also created a style as well:
.lheader {
font-size: 1.5em;
color: #1ca795;
text-transform: uppercase;
}
It worked perfectly on all devices.

Just add &nbsp before the text
in case for example text is generated like this:
Text='<%# Eval("SubCatName")%>'
do it like this:
Text='<%#"&nbsp"+Eval("SubCatName")%>'

You could write it like this:
<asp:CheckBox ID="chkPublic" runat="server" Text="" Font-Bold="true" /> MyText
Or maybe just like that:
<asp:CheckBox ID="chkPublic" runat="server" Text=" Public" Font-Bold="true" />
is a single space in html

how to make heading title into the center in asp:GridView

Does anyone know how can I center a title to the center in asp:GridView?
Example:
and my code as below:
<table border="0" width="500">
<tr>
<td width="450px" align="center">
<asp:GridView ID="grid" runat="server" AutoGenerateColumns="False"
DataSourceID="dsTest" DataKeyNames="id"
CellPadding="6" GridLines="None" AllowPaging="True" PageSize="20" AllowSorting="True" Width="450px">
<Columns>
<asp:TemplateField HeaderText=" Address" SortExpression="suburb, street">
<ItemTemplate>
<a style='cursor:pointer' href='#'>
<%# Eval("unit_number") %> <%# Eval("level_number") %> <%# Eval("street_number") %> <%# Eval("street") %>
<%# Eval("suburb") %> <%# Eval("postcode") %></a>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
</td>
</tr>
</table>
Does anyone know how can I make the 'Address' to the center instead? I have tried to set a text-align:"center" in css for GridView, but it's doesn't seem working for me
Also... if I like to more all display address to the left, does anyone know how can I do it?

Actually it's HeaderStyle-HorizontalAlign
<asp:TemplateField HeaderText="Address" SortExpression="suburb, street" HeaderStyle-HorizontalAlign="Center">

If you are using Visual Studio 2015 and creating a “Web Application” as I did. None of these options work. Mostly because the above commands are being over-ridden by a call-out in the Bootstrap.css file.
How to fix this - After inserting the table on the web page you need to open Bootstrap.css under the Content folder in Solution explorer.
I did a search for “Table” and found that at line 1419, there were two “Table” styles called out that surrounded a “th” style. "th" being the "Table Header". It was set by default to “text-align: left;”. Simply change "left" to “center” and all works fine.
Below is a snippet from the default Bootstrap.css file that I found and altered. On mine it started at line 1413 and ended on line 1426.
table {
max-width: 100%;
background-color: transparent;
text-align:center;
}
th {
text-align: center;
}
.table {
width: 100%;
margin-bottom: 20px;
}
Hope this helps.

If you use bootstrap
,the Column 's title is Left align because of bootstrap.css 's th.
I guess some css may override your table head.
bootstrap th style
So you need to override the bootstrap css that edit the head of table.
As Mohammad answer you can override all the table is the page.
or just use this style, that select the of the specific table (select by table's class).
<style>
table.table_class tbody tr th
{
text-align:center !important;
}
</style>
<asp:GridView runat="server" ID="Gv_Data"
CssClass="table_class "
...
And for the content data to left for asp:TemplateField , you must find some tag that relate to ItemStyle-HorizontalAlign try to code below
<asp:TemplateField ItemStyle-HorizontalAlign="Left">
<ItemTemplate >
...
</ItemTemplate>
</asp:TemplateField>
and for asp:BoundField you can do it like this
<asp:BoundField DataField="rownum" HeaderText="ลำดับที่" ItemStyle-
HorizontalAlign="Center" />
p.s. < HeaderStyle HorizontalAlign="Center" /> won't help you because it will be overridden by bootstrap , and too bad even the class text-center of bootstrap will be overridden too.

You could try adding a css class to center it
<style type="text/css">
.header-center{
text-align:center;
}
</style>
Then just add HeaderStyle-CssClass:
<asp:TemplateField HeaderText="Address" SortExpression="suburb, street" HeaderStyle-CssClass="header-center">

Use this
<HeaderStyle HorizontalAlign="Center" />
inside the <asp:TemplateField HeaderText="Address" SortExpression="suburb, street"> tag

If using <HeaderStyle HorizontalAlign="Center" /> doesn't work, make sure your site is not added into the Compatibility View list in IE(I had the same issue and removing the web server from the list resolved the issue for me).
to remove the site, select the settings cog in IE and then select 'Compatibility View Settings' and if you're site is within the list, remove it.
Once removed, <HeaderStyle HorizontalAlign="Center" /> (or any other variation) should work as expected.

simple just add the below mention style to your web form
<style>
th[scope=col]{
text-align:center;
}
</style>

this is worked for me
HeaderStyle-CssClass="header-center"

Create a Site.css file and add
.Center {
text-align:center;
}
I would not modify the bootstrap.css file just in case you upgrade or reinstall...your changes could get overriden.
Now you can add a HeaderStyle or ItemStyle tag using Center for the CssClass property
<asp:BoundField ….>
…...
<HeaderStyle CssClass="Center" Width="10px" Wrap="False" />
<ItemStyle CssClass="Center" Width="10px" Wrap="False" />
</asp:BoundField>