We Keep Coding

How to make X-Scroll in a gridView asp.net?

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.

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

How to drag and drop a image from iframe into a div

I have created a iframe to upload and display the images into the server without refreshing the page.Kindly help me with a solution to drag and drop the saved image from a iframe into a div.
The following code is used in the iframe(iframeImage.aspx) to display the images from the server:
<div>
<asp:DataList ID="dtlist" runat="server" RepeatColumns="4" CellPadding="5">
<ItemTemplate>
<div id="divImage" runat="server" onclick="Test()" class="draggable">
<asp:Image Width="100" ID="Image1" ImageUrl='<%# Bind("Name", "~/MyImages/{0}") %>' runat="server" />
</div>
<br />
<asp:HyperLink ID="HyperLink1" Text='<%# Bind("Name") %>' NavigateUrl='<%# Bind("Name", "~/MyImages/{0}") %>' runat="server"/>
</ItemTemplate>
<ItemStyle BorderColor="Brown" BorderStyle="dotted" BorderWidth="3px" HorizontalAlign="Center"
VerticalAlign="Bottom" />
</asp:DataList>
</div>
From code behind, I am binding the images into the datalist.
Currently, I need to drag and drop the image into a main div(reportHeader of CustomDesign.aspx).The below code is used to bind texts into the main div:
function CreateTextLineLabel(textAreaElt) {
var id = "Text1" + count.num++;
$('#reportHeader').append('<div id="' + id + '" class="draggable" ondblclick="showPopup(this)"><span>' + $(textAreaElt).val() + '</span></div> ');
$("#" + id).draggable({ revert: "invalid" });
$("#" + id).resizable();
$("#reportHeader").droppable({
activeClass: "ui-state-hover",
hoverClass: "ui-state-active",
drop: function(event, ui) {
$(this)
.addClass("ui-state-highlight")
.find("p")
.html("Dropped!");
}
});
$(textAreaElt).remove();
}

Im pretty sure you cant actually do this at all, images in your iframe are in a different document so no drag and drop framework (that I've ever heard of) will work spanning 2 documents.
It sounds to me like you are better off to implement an ajax upload control instead of having your upload code in an iframe. This will still avoid having a postback but also gets around dirty postbacks ect. If you have a google for ajax upload you will see plenty of different examples you can use depending on the kind of result and actual codebase you are using. If you arent using MVC a common one is in the Ajax Control Toolkit

The Following Example will help you to accomplish this with Javascript. Check it out, I have used it before and it works perfectly.
Goodl luck!

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>

Adding Dynamic Image Overlay to Databound Gridview

I am trying to add an image overlay of a cell within a data bound gridview cell in ASP.Net (C#). The effect is designed to have a string within the image that is going to sit on top of the image that is pulled from the server.
IE:
Database contains path to images. Data grid is pulling these images in based on the ID of the items in question. I need to pull the price from the database and lay it onto an image that is placed over the data bound image cell.
SQL Statement gets results.
Results contains path to image for items.
Items are sometimes on sale, so a special overlay is needed.
Overlay will have a varying price overlaying it.
I tried to break it down into easy portions. I am not sure if I am over thinking things or not but I can't find a feasible way to do this. The data is converted to a table due to the data grid control in ASP.Net, and there isn't any way to determine the IDs after the table is created.
If anyone has any ideas I would be most appreciative.

One way to do this is to set the cell's background to the image using CSS and write the price as plain text into the same cell (rendered output displayed):
<td class="product"
style="background: url(path-to-image.png) top left no-repeat">
<span class="price">$ 3.22</span>
</td>
The only downside to this approach is that the cell would have to be explicitly sized to the same dimensions as the image, which you may not know.
Another option is to use an <img> element inside the cell and still use a <span> for the plain text price (rendered output displayed):
<td class="product">
<img src="path-to-image.png" alt="..."/>
<span class="price">$ 3.22</span>
</td>
Regardless of which method, you would use CSS to position and style the price within the cell:
td.product {
position: relative
}
span.price {
position: absolute;
top : 40px; < whatever works for you
left: 40px; <
}
A very simple GridView example with templating
You will need to set the GridView's AutoGenerateColumns property to false and handle the column creation and templating yourself.
<asp:GridView ID="products" runat="server"
AutoGenerateColumns="false"
DataKeyNames="productId"
DataSourceID="ObjectDataSource1">
<Columns>
<asp:BoundField DataField="productId" HeaderText="Product ID" />
<asp:TemplateField HeaderText="Whatever ...">
<ItemTemplate>
<img src='<%# DataBinder.Eval(Container.DataItem,"productImageUrl") %>'
alt="..." />
<span class="price">
<%# DataBinder.Eval(Container.DataItem,"productPrice","{0:c}") %>
</span>
</ItemTemplate>
</asp:TemplateField>
<asp:BoundField DataField="productDesc" HeaderText="Description" />
</Columns>
</asp:GridView>