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>
Related
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 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
I am using ListView control in ASP.NET to retrieve data from my database. I studied web form codes for my ListView control and figured out that it basically makes labels to show my data retrieved from the database. I wonder how I can manipulate the label. I can easily change the font color of the label, but I cannot make the label to truncate and show "(..more)" if its length goes more than 10 without resorting to C# code. (I could not find the labels in .cs page.) Is there anyway I can manipulate the C# codes of the labels automaticaly generated by ListView control? Pease let me know. Thanks in advance!
Below is my ListView control in C#
<asp:ListView ID="Posts" runat="server" DataSourceID="SqlDataSource1">
<ItemTemplate>
<span>
<asp:Label ID="subjectLabel" runat="server" Font-Bold="True" Font-Size="Large" Text='<%# Eval("subject") %>' />
<br />
<asp:Label ID="contentsLabel" runat="server" Font-Size="Small" ForeColor="#666699" Text='<%# Eval("contents") %>' />
<br />
<br /></span>
</ItemTemplate>
If you really want to avoid doing it in code, you could always do it in the SQL that provides the data:
SELECT CASE WHEN Len(contents) > 10 THEN Left(contents, 10) + '...' ELSE contents END
FROM YourTable
WHERE whatever
But you can do it in the databinding Eval() using the ternary operator if you don't want to use code-behind.
in the code behind page u need to bind the listview control with the datatable which u are fetching like,
Posts.Datasource=dt;
Posts.Databind();
where dt is the datatable which u are fetching using sql query.can give more explanation once u write the question more elaborately
Hi say of have a table of cars in my SQL database. That table has a column for the car make and a column called picture of type:
Picture(image, null)
I'm then displaying my cars in a repeater and so it might look like this:
<asp:Repeater id="carsRepeater" runat="server" DataSourceID="CarsDataSource>
<HeaderTemplate>
<table>
</HeaderTemplate>
<ItemTemplate>
<tr>
<td>
<asp:Label id="carMakeLabel" runat="Server" Text='<%# Eval("Make") %>' />
</td>
<td>
Some how display a clickable image here
</td>
</tr>
</ItemTemplate>
<FooterTemplate>
</table>
</Footer>
</asp:Repeater>
What I'm wanting is in column two to get the picture of the car to display and make it so you can click on that picture and it will run a method in the code behind. Also I have this requirement where the picture click method mustn't require javascript to run.
Can someone please give me an idea of how I would go about this?
I'm currently thinking about putting the image somehow in a link but I'm not sure how to display the image. Maybe the asp:Image but that requires an ImageUrl.
Try image button, it displays an image, doesn't require javascript and you can run a method on click event from code behind
Write an HTTPHandler (say CarImage.ashx) and in that handler, given ID of the image return the binary data with ContentType of image/gif (or whatever). Render an image tag in the datagrid with src as CarImage.ashx?ImageID=xxxxx. The process is described many place including this one.
I am programming using .NET aspx. In the asp:DataList component I want to distribute columns evenly, even in case not all columns are assigned an ItemTemplate.
E.g.
<asp:DataList id="test" runat="server" Width="90%" gridlines="None"
RepeatDirection="Horizontal"
RepeatColumns="4" HorizontalAlign="Left">
<ItemTemplate> ... </ItemTemplate>
</asp:DataList>
At runtime the array bound to the datalist only contains 2 elements. I still want the columns to be distributed evenly over the four spaces.
If you are dedicated to using a DataList, there are two reasonable methods for accomplishing this.
First, you can wrap your ItemTemplate in a div with a fixed width.
<ItemTemplate>
<div style="width: 250px;">
...
</div>
</ItemTemplate>
Secondly, if your DataList must expand or contract to fit the viewer's screen, you can utilize jquery.
We will be grabbing the computed client width of the datalist after page load and adjusting the columns to be distributed evenly.
<asp:DataList id="MyDataList" ClientIDMode="Static" runat="server" Width="90%" gridlines="None"
RepeatDirection="Horizontal"
RepeatColumns="4" HorizontalAlign="Left">
<ItemTemplate>
<div class="DataListItem">
....
</div>
</ItemTemplate>
</asp:DataList>
Two quick notes before we see the jquery
ClientIDMode="Static" on the datalist
Every datalist item will be wrapped in a div with class "DataListColumn"
In jquery, upon page load, you can get the computed datalist width as follows
$(document).ready(function () {
$(".DataListItem").width($("#MyDataList").width() / 4); // Set the column width
});
With all of that said, you may want to just use a repeater so you can have more control over actual columns.