Radbinary not showing after select image using radasyncuplload

[Henk]

Hi,

I have the following challenge ;-), I have a radgrid and editing using Editform  I have a radbinary image and radasyncupload in the editform. I am able to store the image in the data base after the "update command". But after selecting I only see the filename but not the selected image.  it is NOT user friendly NOT showing the selected image when clicking on the radasyncupload. Question is how to display the selected value in the radbinary image  using asyncupload.in the edit template.

Thanks,

Henk

[Shinu]

Hi Henk,

Please have a look into this online demo which demonstrates the working of RadAsyncUpload and RadBinaryImage in RadGrid.

Thanks,
Shinu.

[Henk]

Hi Shinu,

I used exactly the same method as your example! But in that demo the image is NOT shown in the editform mode and only the uploaded filename is shown in edit mode and afer the update the image is refresh. As written in the post, I am able to change the image after the update but I want the image displayed in edit mode after I select the image.and BEFORE clicking on the update button!

[Shinu]

Hi Henk,

Please try the below sample code snippet which works fine at my end.

ASPX:

<telerik:RadAsyncUpload ID="RadAsyncUpload1" runat="server" OnClientFileUploaded="callAjaxRequest"
    OnFileUploaded="RadAsyncUpload1_FileUploaded" TargetFolder="Uploads/">
</telerik:RadAsyncUpload>
<telerik:RadBinaryImage ID="RadBinaryImage1" runat="server" />

JavaScript:

function callAjaxRequest(sender, rags) {
    __doPostBack();
}

C#:

protected void RadAsyncUpload1_FileUploaded(object sender, FileUploadedEventArgs e)
{
    RadBinaryImage1.ImageUrl = "Uploads/" + e.File.FileName;
}

Thanks,
Shinu.

[Henk]

HI Shinu,

It does not work. I think you are missing my point or i am not clear enough...

In my radgrid scenario I dont have the image column like in the online demo. I have placed a radbinary in the editform template and radasyncupload. I want to see the image in the editform template after I select an image using the radasyncupload, i.e.when in "edit"mode. Afterwards I used this image to update in the database.

Regards,

Henk

[Konstantin Dikov]

Hi Henk,

The requirement that you have is a rather complex one and there are several problems that should be handled.

The first problem is that once the image is uploaded, in order to set the data to the RadBinaryImage, a postback should occur and the server-side OnFileUploaded event must be handled, where the image can be retrieved. Although this is a simple task, once you set the DataValue of the RadBinaryImage and return back to the client, the image will be displayed, but if you try to update the item afterwords, the image will not be available.

For your convenience, following is a simple example demonstrating how you could handle the above by wrapping the RadBinaryImage in a RadAjaxPanel and update only that control when an image is uploaded:

<telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
    <script type="text/javascript">
        function fileUploaded(sender, args) {
            var trElement = $find("<%= RadGrid1.ClientID %>").get_editItems()[0].get_editFormItem();
            var ajaxPanel = $telerik.findControl(trElement, "RadAjaxPanel1");
            ajaxPanel.ajaxRequest();
        }
    </script>
</telerik:RadCodeBlock>

<telerik:RadGrid runat="server" ID="RadGrid1" OnNeedDataSource="RadGrid1_NeedDataSource">
    <MasterTableView AutoGenerateColumns="false">
        <Columns>
            <telerik:GridEditCommandColumn></telerik:GridEditCommandColumn>
            <telerik:GridTemplateColumn>
                <ItemTemplate>
                </ItemTemplate>
                <EditItemTemplate>
                    <telerik:RadAjaxPanel runat="server" ID="RadAjaxPanel1">
                        <telerik:RadBinaryImage runat="server" ID="RadBinaryImage1" />
                    </telerik:RadAjaxPanel>
                    <telerik:RadAsyncUpload runat="server" ID="RadAsyncUpload1" OnFileUploaded="RadAsyncUpload1_FileUploaded"
                        AllowedFileExtensions="png" OnClientFileUploaded="fileUploaded">
                    </telerik:RadAsyncUpload>
                </EditItemTemplate>
            </telerik:GridTemplateColumn>
        </Columns>
    </MasterTableView>
</telerik:RadGrid>

And the code-behind:

protected void RadGrid1_NeedDataSource(object sender, GridNeedDataSourceEventArgs e)
{
    DataTable table = new DataTable();
    table.Columns.Add("ID", typeof(int));
    for (int i = 0; i < 5; i++)
    {
        table.Rows.Add(i);
    }

    (sender as RadGrid).DataSource = table;
}

protected void RadAsyncUpload1_FileUploaded(object sender, FileUploadedEventArgs e)
{
    RadAsyncUpload upload = sender as RadAsyncUpload;
    GridEditFormItem editItem = upload.NamingContainer as GridEditFormItem;
    byte[] buffer = new byte[e.File.ContentLength];
    using (Stream str = e.File.InputStream)
    {
        str.Read(buffer, 0, (int)e.File.ContentLength);
    }

    (editItem.FindControl("RadBinaryImage1") as RadBinaryImage).DataValue = buffer;
}

Hope this helps.
 

Regards,
Konstantin Dikov
Telerik

 

 

[Henk]

Thanks Constantin! It works :-)

[Henk]

Hi Constantin,

I notice that the radbinary image is filled and I can see the picture in edit mode (as I replied in my previous post). (the name of the radbinary image is ePasfoto)
When updating I do a find control of the image and save the picture with a database procedure. But I notice that the datavalue is null...

If Datavalue is null how can I access the content of the image?

Regards,

Henk
update code

        protected void ResultaatGrid_UpdateCommand(object sender, GridCommandEventArgs e)
        {
            GridEditableItem editedItem = e.Item as GridEditableItem;

            string pCperID = editedItem.GetDataKeyValue("cpersoon_id").ToString();

            RadBinaryImage iMage = e.Item.FindControl("ePasfoto") as RadBinaryImage;
            try
            {
                string pCperID = editItem.GetDataKeyValue("cpersoon_id").ToString();
                using (EntitiesModel dbContext = new EntitiesModel())
                {
                    string pResultaat = "";
                    string pSoort = "";
                    //dbContext.SAVEFOTO(long.Parse(pCperID), null, fileData, ref pResultaat);

                    dbContext.SAVEFOTO(long.Parse(pCperID), pSoort, iMage.DataValue, ref pResultaat);  <-- iMage.DataValue is null
                    if (pResultaat != null && pResultaat.IndexOf("ORA-") != -1)
                        form1.Controls.Add(new LiteralControl("Fout tijdens invoer van pasfoto" + " Reden: " + pResultaat));
                }
            }
            catch (Exception exc)
            {
            }

        }

[Konstantin Dikov]

Hello Henk,

As you have correctly observed, the DataValue of the RadBinaryImage will be null and this is rather expected.

However, for retrieving the binary data for the image you should use the RadAsyncUpload control and its OnFileUploaded event (as demonstrated in my previous post) or retrieve the uploaded file directly from the UploadedFiles collection of the RadAsyncUpload. The second approach is the same as in our online demo "Grid - Binary Images and RadAsyncUpload in Grid".

Hope this helps.


Regards,
Konstantin Dikov
Telerik

 

 

[Henk]

Hi Konstantin,


It is a pity that it is not possible and yes, I can change the save to the upload event. The only drawback is  when the user click on cancel...

Thanks

Henk

[Konstantin Dikov]

Hello Henk,

You are correct that canceling the editing will cause problems with the approach where the OnFileUploaded event is handled. However, if you handle the OnUpdateCommand (as demonstrated in the demo mentioned in my previous post) you will update the image only on that command (or in the insert command as well if insert is enabled).

Please let me know if everything works correctly with that approach.


Regards,
Konstantin Dikov
Telerik