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>
Related
I am using windows application in .net and that application is internally calling one aspx page which have link button . When I tried to click on link button I got this error and also for your help Link button is just fetching data from database and showing in grid . Please help!
May be this question is duplicate but I didn't see any help after checked answers.
I am unable to get why this error is coming as I do have some other link button which is working fine.
This error I am getting only in windows app as when I am running aspx page in browser I am not getting this error ! Please help on this.
<asp:LinkButton ID="linkViewLog" runat="server" Text="View Log Files" OnClientClick="javascript:ShowHideLogs();return false;"></asp:LinkButton>
<div id="divLogs" style="visibility: hidden; display: none; margin-left: 25px; margin-top: 5px;">
<telerik:RadButton ID="btnLogs" runat="server" Text="Refresh" OnClick="btnLogs_Click">
</telerik:RadButton>
<telerik:RadGrid ID="gridLogs" runat="server" AutoGenerateColumns="false" OnDetailTableDataBind="gridLogs_DetailTableDataBind">
<MasterTableView DataKeyNames="property">
<NoRecordsTemplate>
<div>
Loading Data...</div>
</NoRecordsTemplate>
<Columns>
<telerik:GridBoundColumn DataField="property" HeaderText="Property">
</telerik:GridBoundColumn>
<telerik:GridBoundColumn DataField="lastupdate" HeaderText="Last Update">
</telerik:GridBoundColumn>
</Columns>
</MasterTableView>
</telerik:RadGrid>
</div>
I have a gridview which is bounded as
<asp:GridView
runat="server"
ID="gvShipDetails"
AutoGenerateColumns="false"
OnRowDataBound="gvShipDetails_RowDataBound">
<Columns>
<asp:TemplateField>
<HeaderTemplate>
Ship name
<br />
<asp:TextBox class="search_textbox" runat="server" BorderStyle="None" Width="100%">
</asp:TextBox>
</HeaderTemplate>
<ItemTemplate>
<%#Eval("VesselName")%>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
The problem is the finally rendered html table td is rendered as
<td> sample vessel name </td>
A lot of spaces inside td.How is this possible.
If I replace this bound code as
<asp:BoundField HeaderText="vessel name" DataField="vesselname" />
Then html is renderd as <td>sample vessel name<td>
Why is it so? I wanted to use headertemplate and i wanted to avoid these trailing spaces. How to do it
Any help will be appreciated
As Naveen suggested Doing
<ItemTemplate><%#Eval("VesselName")%></ItemTemplate>
Solved my issue and the reason for this is unknown for me
I'm trying to add scroll bars in both x and y but I only can add y-scroll.
At the moment, my gridview is showing only partial data, it is missing 3-4 columns so I really need to use x-scroll. I've tried "overflow-x: scroll;" but it doesn't work.
My source code
<div style= "overflow-x:scroll; Overflow:scroll; max-height: 150px; width: 800px">
<asp:GridView ID="GridViewUpBus" 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>
If I run, it looks like this. 2 more columns are not showing
Could it be achieved by not using javascript? If I need to use "jquery-1.4.1.js" or "gridviewScroll.min.js" where can I download it? Sorry I'm pretty new to programming and I don't really know how to use javascript or jquery.
It'd be great if I could add boarder lines in the gridview. Thanks in advance!
CSS is case sensitive so Overflow wont work but overflow will. Try
<div style= "overflow:auto; max-height: 150px; width: 800px">
to only apply croll bars if needed or:
<div style= "overflow:scroll; max-height: 150px; width: 800px">
to always have scrollbars.
Finally, avoid using inline style, apply it as a class instead.
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.
I'm building a GridView control which encapsulates a child gridview. The child gridview holds a div tag which is displayed when the user selects a row in the parent gridview. However, even though the contents is hidden i.e. the div tag, an extra column is added - how do I get rid of the extra column. In the tutorial it states that by adding a </td></td> and starting a new row <tr> this should happen but it does (I also noticed that the author turned off gridlines so my assumption is that he in fact has this problem also). Here is the gridview, oh and I set the visible state of the itemtemplate to 'true' but then the javascript could (not) find it.
<asp:GridView ID="GridView1" runat="server" AllowPaging="True" AllowSorting="True"
AutoGenerateColumns="False" DataKeyNames="PublicationID"
DataSourceID="ObjectDataSource1" Width="467px" OnRowDataBound="GridView1_RowDataBound"
Font-Names="Verdana" Font-Size="Small">
<Columns>
<asp:TemplateField>
<ItemTemplate>
<asp:CheckBox ID="PublicationSelector" runat="server" />
</ItemTemplate>
</asp:TemplateField>
<asp:BoundField DataField="NameAbbrev" HeaderText="Publication Name" SortExpression="NameAbbrev" />
<asp:BoundField DataField="City" HeaderText="City" SortExpression="City" />
<asp:BoundField DataField="State" HeaderText="State" SortExpression="State" />
<asp:TemplateField HeaderText="Owners">
<ItemTemplate>
<asp:Label ID="Owners" runat="server"></asp:Label>
</ItemTemplate>
<ItemStyle HorizontalAlign="Center" />
</asp:TemplateField>
<asp:BoundField DataField="Type" HeaderText="Type" SortExpression="Type" />
<asp:TemplateField>
<ItemTemplate >
</td></tr>
<tr>
<td colspan="7">
<div id="<%# Eval("PublicationID") %>" style="display: none; position: relative">
<asp:GridView ID="GridView2_ABPubs" runat="server" AutoGenerateColumns="false" Width="100%"
Font-Names="Verdana" Font-Size="small">
<Columns>
<asp:BoundField DataField="NameAbbrev" HeaderText="Publication Name" SortExpression="NameAbbrev" />
</Columns>
</asp:GridView>
</div>
</td>
</tr>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
Apart from the extra column in the master gridview it works fine.
Just for completeness, here is a to the original article (for some reason it didn't like my <a href> tag so it's copy and paste).
To get rid of the extra column, just set its css style to display: none. You can do this by applying a CssClass to the TemplateField containing the nested grid:
<asp:TemplateField HeaderStyle-CssClass="hidden-column" ItemStyle-CssClass="hidden-column" FooterStyle-CssClass="hidden-column">
Here is the definition of the CssClass I used:
<style type="text/css">
.hidden-column {
display: none;
}
</style>
Note: the markup will still be in the html but at least it won't be visible.
Tested under IE 8.0, Google Chrome 2.0 and Opera 10.0
Update: To eliminate the double border, just put the id and the style on the <tr> instead of the <div>:
<tr id="<%# Eval("PublicationID") %>" style="display: none; position: relative">
<td colspan="7">
<div>
...
... and change the display in the javascript from block to table-row:
div.style.display = "table-row"; // not a div anymore!!
Looks like you have unbalanced tags in your <ItemTemplate>:
<ItemTemplate >
</td></tr> <<---- These look unbalanced
<tr>
<td colspan="7">
<div id="<%# Eval("PublicationID") %>" style="display: none; position: relative">
<asp:GridView ID="GridView2_ABPubs" runat="server" AutoGenerateColumns="false" Width="100%"
Font-Names="Verdana" Font-Size="small">
<Columns>
<asp:BoundField DataField="NameAbbrev" HeaderText="Publication Name" SortExpression="NameAbbrev" />
</Columns>
</asp:GridView>
</div>
</td>
</tr>
</ItemTemplate>
I don't see an opening tag for these tr, td tags:
...
<ItemTemplate >
</td></tr>
...
Just checked and the author of the article seems to have the same issue in the generated source of the page.