how to insert an image in Grid and be able to change it when in grid update

Hello Antonio,

Thank you for the provided clarifications!

I have created a sample for you in order to show you how to achieve your requirements. Basically you will need to use WebUpload control and on simple input button click I use the uploading functionality of the upload to get the path of the image and update it. I have two hidden fields which I use to store "filePath" and "rowId" which will be used in the update statement.

On button click (text of the button click will be different for each row, based on the value of ImageForDir field) I pass the rowId and simulate WebUpload button click, which will trigger a postback to the server when the file is uploaded. This is because server side events of the WebUpload do not allow to make any changes, they are used only to get data.

So on the postback I execute Update statement which will update the database with the new image path.

You can find db script attached also, the script is configure in a way that will create not only the data base schema, but will fill it with data also.

Code snippet:

<script>
function WebUpload1_FileUploaded(eventArgs, infoObject) {
document.getElementById('<%= filePathHF.ClientID %>').value = infoObject.filePath;
document.getElementById('<%= updateDSBtn.ClientID %>').click();
}
function btnClick(ImageID) {
$("#WebUpload1_ibb_fp").click();
document.getElementById('<%= rowIDHF.ClientID %>').value = ImageID;
}
</script>

<asp:UpdatePanel ID="updGrid" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<%= DateTime.Now.ToString() %>
<ig:WebDataGrid ID="WebDataGrid1" runat="server" AutoGenerateColumns="False" DataSourceID="ImagesDS"
Height="400px" Width="70%">
<Columns>
<ig:BoundDataField DataFieldName="Id" Key="Id">
<Header Text="Id">
</Header>
</ig:BoundDataField>
<ig:BoundDataField DataFieldName="LastName" Key="LastName">
<Header Text="LastName">
</Header>
</ig:BoundDataField>
<ig:BoundDataField DataFieldName="FirstName" Key="FirstName">
<Header Text="FirstName">
</Header>
</ig:BoundDataField>
<ig:BoundDataField DataFieldName="Address" Key="Address">
<Header Text="Address">
</Header>
</ig:BoundDataField>
<ig:TemplateDataField Key="ImageFromDir" Width="20%">
<ItemTemplate>
<table style="width: 210px;">
<tr>
<td style="width: 50%;">
<asp:Image ID="Image1" runat="server" ImageUrl='<%# Eval("ImageFromDir") %>' /></td>
<td style="width: 50%;">
<input id="uploadBtn" type="button" onclick='<%# String.Format("BLOCKED SCRIPTreturn btnClick(\"{0}\")", Eval("Id").ToString()) %>'
value='<%# Eval("ImageFromDir") == DBNull.Value ? "Upload" : "Change" %>' /></td>
</tr>
</table>
</ItemTemplate>
<Header Text="ImageFromDir">
</Header>
</ig:TemplateDataField>
</Columns>
</ig:WebDataGrid>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="updateDSBtn" EventName="Click" />
</Triggers>
</asp:UpdatePanel>

public static string connString = ConfigurationManager.ConnectionStrings["ImagesDBConnectionString"].ConnectionString;
protected void Page_Load(object sender, EventArgs e)
{
this.WebUpload1.ProgressUrl = this.ResolveUrl("~/IGUploadStatusHandler.ashx");
}
protected void updateDSBtn_Click(object sender, EventArgs e)
{
string fileName = filePathHF.Value.ToString();
string filePath = ConfigurationManager.AppSettings["fileUploadPath"].ToString() + "/" + fileName;
UpdateImage(filePath);
}
private void UpdateImage(string path)
{
SqlConnection conn = new SqlConnection(connString);
SqlCommand cmd = new SqlCommand();
cmd.CommandText = "UPDATE [ImagesTable] SET [ImageFromDir] = @ImageFromDir WHERE [Id] = @Id";
cmd.CommandType = CommandType.Text;
cmd.Connection = conn;
cmd.Parameters.AddWithValue("@ImageFromDir", path);
cmd.Parameters.AddWithValue("@Id", rowIDHF.Value.ToString());
int result = 0;
try
{
conn.Open();
result = cmd.ExecuteNonQuery();
}
catch (SqlException e)
{
// Handle exception.
}
finally
{
conn.Close();
}
}

Note:

Before you run the script change the first line to be not USE [ImageDB], but to be CREATE [ImageDB]. Or you can just create a empty database with ImageDB name and execute the script.

Looking forward to hearing from you.