How to bind Image with URL in Gridview - ASP.Net - c#

I have a image stored in database and it is displayed in Gridview. When i click the image it will pop up as zommed image.
The issue here is image displayed in gridview increases the gridview column height, i decreased the height but the pop up stopped working correctly.
so is it possible to bind the image with URL, i didn't know to work on it.
<asp:TemplateField HeaderText="Image">
<ItemTemplate>
<asp:Image ID="Image1" runat="server"/>
</ItemTemplate>
</asp:TemplateField>

You should set your image size for exemple :
<asp:TemplateField HeaderText="Image">
<ItemTemplate>
<asp:Image ID="Image1" runat="server" style="width:40px;height:50px;"/>
</ItemTemplate>
</asp:TemplateField>
If you use width and height properties, your image may lost the width-height ratio. You can set only width for exemple to keep the right width height rate.
Or you can use thumbnails for your grid. I mean, you can use a resized image to show in the grid and when you click on the image, you can pop up the real size image.
If the image is uploaded via your interface, at the moment of the saving the image on the server, you should redimension the image in order to save a thumbnail image.
To resize an image :
How to resize an Image C#

Try below block of code,
//Bind from db
<asp:TemplateField HeaderText="Image">
<ItemTemplate>
<asp:Image ID="Image1" runat="server" ImageUrl='<%#Eval("ImageSrc") %>' style="width:40px;height:50px;"/>
</ItemTemplate>
</asp:TemplateField>
//Bind from local
<asp:TemplateField HeaderText="Image">
<ItemTemplate>
<asp:Image ID="Image1" runat="server" ImageUrl="../Images/ABC.jpg" style="width:40px;height:50px;"/>
</ItemTemplate>
</asp:TemplateField>

Related

Image link not working for GridView ButtonField

I am trying to create a column in a GridView that contains a button and can be clicked on to select the row. When I try to assign an ImageURL (that exists) to the button, it does not display and seems as if the link is broken. Here's the code I am using:
<asp:ButtonField HeaderText="Select" ButtonType="Image" CommandName="Select" ImageUrl="../Images/SemiWorksPLM/unchecked.png"/>
However I can create an Image inside a TemplateField using the same URL and it appears okay:
<asp:TemplateField HeaderText="Select">
<ItemTemplate>
<asp:Image ID="Image1" ImageUrl="../Images/SemiWorksPLM/unchecked.png" runat="server" />
</ItemTemplate>
</asp:TemplateField>
Any idea why it would work for the Image in the TemplateField but not the ButtonField?
you could try doing it the next way:
1 - Change ButtonType to to link
2 - put the image in the text area
<asp:ButtonField CommandName="Preview" Text="<img src='Images/SemiWorksPLM/unchecked.png' style='border-width:0' />" ButtonType="Link" />
Try using a url relative the the root directory of the website:
ImageUrl="~/Images/Image2.bmp"

Is it possible to add image buttons in DataGridView?

I am now developing windows application using c#.net.
now i want to add four image buttons in datagridview cell like following picture.
Is it possible to do it? is there any control to do as the following picture.
Best Rgds,
DF
You need to add a template field as a column in your grid view. Then in the item template you can put asp image buttons. For example:
<asp:GridView runat="server" id="gdv_gridviewname" >
<Columns>
<asp:TemplateField HeaderText="Image Buttons">
<ItemTemplate>
<asp:ImageButton runat="server" ID="imgBtnSomething" ImageURL="Path to your image" />
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>

Displaying Image in gridview with RowDataBound in ASP.NET

Failing to display an image in gridview. No error messages, just displays the image icon instead of actual image from database
I have a gridview, and I am using RowDataBound event to displays information in labels. I have an Image control in the gridview
<asp:TemplateField HeaderText="Picture">
<ItemTemplate>
<asp:Image ID="imgPicture" runat="server" />
</ItemTemplate>
</asp:TemplateField>
The image path is stored in database under a column called Image like Images\image.jpg
It's stored in a folder called Images in the solution
RowDataBound
Image imgPicture = (Image)e.Row.FindControl("imgPicture");
if ((imgPicture != null))
{
imgPicture.ImageUrl = #"~\Images\" + (string)DataBinder.Eval(e.Row.DataItem, "Image");
}
i would not use the RowDataBound-Event:
<asp:TemplateField HeaderText="Picture">
<ItemTemplate>
<asp:Image ID="imgPicture" runat="server" ImageUrl='<%# Eval("Image", "~/Images/{0}") %>' />
</ItemTemplate>
</asp:TemplateField>

How to set font-size of text box in bounded fields of grid view template fields?

In ASP.NET 2.0 web application, there is a gridview and user wanted to change the font size of contents of that grid view. Below is Gridview definition and server side code to set the font-size of contents of gridview. Everything is fine except, textboxes in bounded fields of gridview. The font size does not applied on them.
GridView :
<asp:TemplateField HeaderText="Display Name" HeaderStyle-HorizontalAlign="Left" ItemStyle-HorizontalAlign="Left">
<ItemTemplate>
<asp:TextBox ID="TextBox1" runat="server" Width="100px" Text='<%# Bind("DisplayName") %>' OnTextChanged="TextBox_TextChanged" />
<asp:HiddenField ID="HiddenField1" runat="server" Value='<%# Eval("DisplayName") %>' />
</ItemTemplate>
</asp:TemplateField>
ServerSide Code:
ObjPListSetting.Style["font-size"] = sTextSize + "px";
where, sTextSize is target value (i.e. 12, 14, 16).
Why is that so? Anyone can help in this regard.
In the OnRowDataBound event hander do something like this.
TextBox txtTextBox1 = RowObject.FindControl("TextBox1");
txtTextBox1.Style["font-size"] = sTextSize + "px";
This is a dummy code. Just check how you get the rowobject in below link.
http://msdn.microsoft.com/en-us/library/system.web.ui.webcontrols.gridview.rowdatabound.aspx

itemtemplate width problem

itemtemplate width not working. i make width="50" bit it is never 50but is always more then 50. is it possible to make with on td that gridview create?
<asp:GridView ID="gwTemporaryCities" runat="server" AutoGenerateColumns="False">
<Columns>
<asp:TemplateField HeaderText="Ime">
<ItemTemplate>
<asp:Label ID="lblName" runat="server"
Text='<%# StripHTML(Eval("Name")) != "" ? StripHTML(Eval("Name")) : "/" %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField>
<ItemTemplate>
<asp:LinkButton ID="lnkBtnDelete" runat="server" Text="Odstrani" CommandName="DeleteTemporaryCity" Width="50"
CommandArgument='<%# Eval("idTemporaryCities") %>'
OnCommand="lnkBtnDelete_Command" CausesValidation="False"></asp:LinkButton>
<asp:ConfirmButtonExtender ID="cbeDelete" ConfirmText="Ali ste prepričani, da želite odstraniti mesto?"
runat="server" TargetControlID="lnkBtnDelete">
</asp:ConfirmButtonExtender>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView
You're not setting the width of the ItemTemplate, but of one of the controls contained within the item template
On top of that, the control you're setting the width on is a LinkButton, which is effectively the same as saying:
Odstrani
But depending on your font, the text "Odstrani" is probably wider than 50 pixels, so this width setting is likely to be ignored as there's no way to break that one word under 50 pixels.

Categories