Browser issue in ajax settings

[Bavya]

Hi

I have some issue with loading image in RadImageEditor. It is working fine in IE but not in any other browser (tested in FF and Chrome).  I have a RadListBox in page and in its selectedIndexchanged event it will add corresponding image to RadImageEditor. The problem is when I ajaxify the controls (tried with both RadAjaxManager and RadAjaxPanel), it is working only in IE. Otherwise it will work in all browsers. Please give some idea regarding this issue. (I am using Telerik dll version 2012, 1, 215, 35)

 

I am pasting my code for the reference.

 
ASPX:

<telerik:RadAjaxPanel runat="server" ID="RadAjaxPanel1">
                 <telerik:RadListBox ID="RadListBox1" runat="server"
                    SelectionMode="Multiple" EnableDragAndDrop="true" AutoPostBack="true" OnSelectedIndexChanged="RadListBox1_SelectedIndexChanged">
                 </telerik:RadListBox>

            <telerik:RadImageEditor ID="RadImageEditor1" runat="server" Top="500px" Left="430px"
                   OnImageLoading="RadImageEditor1_ImageLoading">
            </telerik:RadImageEditor>
  </telerik:RadAjaxPanel>

Also tried this approach to ajaxify the controls:-

<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" >
           <AjaxSettings>
               <telerik:AjaxSetting AjaxControlID="RadAjaxManager1">
                   <UpdatedControls>
                       <telerik:AjaxUpdatedControl ControlID="RadListBox1" />
                       <telerik:AjaxUpdatedControl ControlID="RadImageEditor1" />
                   </UpdatedControls>
               </telerik:AjaxSetting>
               <telerik:AjaxSetting AjaxControlID="RadListBox1">
                   <UpdatedControls>
                             <telerik:AjaxUpdatedControl ControlID="RadImageEditor1" />
                   </UpdatedControls>
               </telerik:AjaxSetting>
           </AjaxSettings>
       </telerik:RadAjaxManager>

C#:

protected void RadImageEditor1_ImageLoading(object sender, ImageEditorLoadingEventArgs args)
    {
        args.Cancel = true;
    }

   protected void RadListBox1_SelectedIndexChanged(object sender, EventArgs e)
    {
       //retrieving corresponding image from database

        byte[] buffer = null;
        buffer = (byte[])SqlCommand.ExecuteScalar();
        MemoryStream memStream = new MemoryStream(buffer);
        MemoryStream memStream1 = new MemoryStream();
        System.Drawing.Bitmap.FromStream(memStream).Save(memStream1, System.Drawing.Imaging.ImageFormat.Png);
        RadImageEditor1.ImageUrl = "data:image/png;base64," + Convert.ToBase64String(memStream1.ToArray());
   }

Thanks,
Bavya.

[Niko]

Hello Bavya,

The scenario that you wish to accomplish is easily doable, but you should change your approach a bit. There are basically two methods that you can implement and each of the is perfectly fine, therefore you should choose the one that more closely resonates with your preferences.
The first approach is to use the ImageLoading event and substitute the ImageEditor editable image with the one that you wish to use. In the SelectedIndexChanged event of the RadListBox you can simply reset the changes to the currently edited image so that the ImageLoading event gets executed again. This approach is implemented in the attached sample page. You can review it and test it on your side by adding your DB retrieving/storing approaches.
The other method is to implement a custom image content provider, thus fine-tuning the loading and storing of the ImageEditor. Such an example is provided in one of our demos - http://demos.telerik.com/aspnet-ajax/imageeditor/examples/customcontentprovider/defaultcs.aspx and explanations can be found in the following help article - http://www.telerik.com/help/aspnet-ajax/radimageeditor-custom-image-provider.html.

The approach that you have taken in your example does not work correctly due to the way the image is loaded(or more correctly not loaded, but simply displayed) in the image editor. Although it is visible, it cannot be edited consistently, because the server is thoroughly aware of it.

Please, try the approaches provided in this post. Hope this helps.

Kind regards,
Niko
the Telerik team

[Bavya]

Hello Niko,

Thanks a lot for your support. I was trying with ResetChanges() method of RadImageEditor, but not in SelectedIndexChanged event of RadImageEditor :)

I followed the first approach and it is working as expected. Will give a try with the second approach as well to know more.

Again Thanks a lot for the appropriate answer with sample demo.

-Bavya.