How to use images in grid view using asp.net?
Actually i want use images in the place of text for example in the place of Edit and Delete i want use some images related to text. Is that possible to use images please help me
Please define your template like this way
<asp:TemplateField HeaderStyle-Width="40">
<ItemTemplate>
<asp:ImageButton ID="ButtonDelete" runat="server"
ImageUrl="~/Imags/delete.png" OnClick="ButtonDelete_Click" ToolTip="Delete"
CommandArgument='<%#Bind("UserId")%>'/>
</ItemTemplate>
</asp:TemplateField>
Code Behind
protected void ButtonDelete_Click(object sender, EventArgs e)
{
ImageButton button = sender as ImageButton;
DeleteUserById(Convert.ToInt32(button.CommandArgument));
}
Related
ASP.NET GridView Image Command Button causes Multiple PostBacks.Is this is a known issue ? or is there any solution(not workaround).
Try using this way
<asp:TemplateField>
<ItemTemplate>
<asp:ImageButton ID="Button" runat="server" ImageUrl="../images/Editicon.png" OnClick="Button_Click" />
</ItemTemplate>
</asp:TemplateField>
protected void Button_Click(object sender, EventArgs e)
{}
I m sure you wont face ne problem with this
I have a follow-on question to How to display an image based on SelectedValue in a GridView?
What I would really like to do is have a ViewImage button on my GridView control so that when that is clicked, the image is displayed on a new page in a new browser window. How would I do that? I'm thinking perhaps do I need to create a
<asp:ButtonField>
How do I handle the click and how do I get the image to diplay on a new form in a new web browser window?
Thanks very much for looking.
You can use TemplateColumn, in that TemplateColumn you can define a button where you put javascript function to open new window.
Example:
<asp:TemplateField>
<ItemTemplate>
<input type="button" onclick="javascript:ShowImageInNewPage('PageToShowImage.aspx?tradeId=<%# Eval("TradeId") %>');" />
</ItemTemplate>
</asp:TemplateField>
The "ShowImageInNewPage" function is a custom function you declare to popup/open new window with the selected image url.
In PageToShowImage.aspx, declare an img tag:
<asp:Image ID="imgBlah" runat="server" />
In code behind of PageToShowImage.aspx:
protected void Page_Load(object sender, EventArgs e)
{
// this is querystring from GridView page
if(Request.QueryString["tradeId"] != null)
{
imgBlah.Src = "GetImage.aspx?entityId=" + tradeId + "&entityType=T";
}
else
{
imgBlah.Src = "~/images/no-image.jpg"; // set no image
}
}
HTH
I'm hoping that you're dealing with browser supported image formats. Assuming you are, you don't need a ButtonField. One approach would be to use an <asp:HyperLink> in a TemplateColumn, as Arief suggested.
<asp:TemplateField>
<ItemTemplate>
<asp:HyperLink ID="hyperLink1" runat="server" NavigatUrl="UrlToYourViewImagePage" Text="View Image" />
</ItemTemplate>
</asp:TemplateField>
If you want the image to open in a new window, build a window.open call for each HyperLink's NavigateUrl.
I want people to click on a link (generated from an asp:HyperlinkField) and have it call a method on the server rather than redirect the user somewhere. Anyone know how to do this?
Thanks,
Matt
I'd use an asp:CommandField or asp:ButtonField instead and use ButtonType=Link - that will look the same as your linkfield, and then you can handle the OnRowCommand event in your grid to run your code.
Use an asp:LinkButton instead. Unless there's a particular reason you're attached to the asp:Hyperlink?
HyperLinkField is used for generating simple hyperlinks in databound controls. Instead you can use ButtonField. Or you can define your own link with TemplateField.
Here is a sample of generating link column which has a server side event :
<asp:templatefield headertext="Link Column">
<itemtemplate>
<asp:LinkButton ID="myLink"
CommandName="MyLinkCommand"
CommandArgument='<%#Bind("TableID") %>'
runat="server">My Link</asp:LinkButton>
</itemtemplate>
</asp:templatefield>
At code behind :
protected void YouGridView_RowCommand(object sender, GridViewCommandEventArgs e)
{
if (e.CommandName == "MyLinkCommand")
{
// Do stuff
}
}
Why not use a ButtonField instead and set the ButtonType property to a Link? It will look just like a hyperlink.
I have a gridview that displays data from a database. The datbase stores the image filename (string) among other things for an item.
I have the fileupload control showing in the EDIT view, and that uploads the file just fine.
The problem is, I want to update the image filename in the database and I am not sure how to get the data to the textbox control that the gridview uses to UPDATE the database. The textbox control i have set the visibility to hidden. here is the aspx code:
<asp:TemplateField HeaderText="Image" SortExpression="Image">
<EditItemTemplate>
<asp:TextBox ID="txtImage" runat="server" Text='<%# Bind("Image") %>' Visible="False" OnTextChanged="txtImage_TextChanged"></asp:TextBox>
<asp:FileUpload ID="FileUpload1" runat="server" />
</EditItemTemplate>
<ItemTemplate>
<asp:Image ID="Image1" runat="server" Width="50px" AlternateText='<%# Eval("Image") %>' ImageUrl='<%# "images/hardware/" + Eval("Image") %>' />
</ItemTemplate>
</asp:TemplateField>
And here is the function that stores the file onto the server, and places the filename into a variable:
protected void GridView1_RowUpdating(object sender, GridViewUpdateEventArgs e)
{
GridViewRow row = GridView1.Rows[e.RowIndex];
FileUpload fileUpload = row.Cells[0].FindControl("FileUpload1") as FileUpload;
if ( fileUpload != null && fileUpload.HasFile)
{
strFileName = fileUpload.FileName;
fileUpload.SaveAs(Server.MapPath("images/hardware/" + strFileName));
TextBox txtImage = row.Cells[0].FindControl("txtImage") as TextBox;
txtImage.Text = strFileName;
}
}
So where do I go from here? I think the update has occured already or something? Because the "txtImage.Text" does not update the database... Am I out of order here or something? I can manipulate values in the textbox in this function before it gets saved to the DB right? Thanks for your help on this one.
If you handle updating the database in the code behind you should be able to get the file name like you did in GridView1_RowUpdating. Just find the row in the grid that is in edit mode. Each row in the rows collection on the grid has a RowState property...your looking for DataControlRowState.Edit
I think I have a solution, but would like input into whether this is a good way of coding it.
I have this setup as the "Updating" event for the dataset the gridview uses:
protected void SetRecords(object sender, SqlDataSourceCommandEventArgs e)
{
if (strFileName != "")
{
e.Command.Parameters["#Image"].Value = strFileName;
}
}
Is this ok? Everything seems to work just fine... but is this a good way to solve the problem? I would like to code properly and not start bad coding practices right from the start (I am an accomplished classic ASP developer moving to C# and ASP.NET)
Thanks all!
My question is on the ASP.NET GridView control. I am using a CommandField in the Columns tag as seen below.
<asp:CommandField ShowEditButton="True" HeaderStyle-Width="40px" UpdateText="Save" ButtonType="Link" HeaderStyle-Wrap="true" ItemStyle-Wrap="true" ItemStyle-Width="40px"/>
What renders is the shown in the following image (after I click on the Edit button).
As you can see I am trying to have the Cancel link show up a new line and my question is how do you do what? If I change the ButtonType="Link" to ButtonType="Button", I get it rendering correctly as shown below.
alt text http://i38.tinypic.com/2pqopxi.jpg
I've tried Google already and maybe I'm not searching on the right tags but I couldn't see this one addressed before.
If you use a template field it will give you complete control over the look of your page, but it requires that you use the CommandName and possible CommandArgument properties, and also using the GridView's OnRowCommand.
The aspx page:
<asp:GridView id="gvGrid" runat="server" OnRowCommand="gvGrid_Command">
<Columns>
<asp:TemplateField>
<ItemTemplate>
Some Stuff random content
<br />
<asp:LinkButton id="lbDoIt" runat="server" CommandName="Cancel" CommandArgument="SomeIdentifierIfNecessary" />
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
The code behind:
protected void gvGrid_Command(object sender, GridViewCommandEventArgs e)
{
if(e.CommandName=="Cancel")
{
// Do your cancel stuff here.
}
}
Don't use a command field, use a TemplateField and put your command button in that with a line break (br) before it like you want.