Browser issue in ajax settings

3 posts, 1 answers
  1. Bavya
    Bavya avatar
    4 posts
    Member since:
    Mar 2012

    Posted 09 Apr 2012 Link to this post

    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.

  2. Answer
    Niko
    Admin
    Niko avatar
    387 posts

    Posted 11 Apr 2012 Link to this post

    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
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Bavya
    Bavya avatar
    4 posts
    Member since:
    Mar 2012

    Posted 12 Apr 2012 Link to this post

    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.
Back to Top