Setting Zoom in and Zoom out percentages for AJAX RadImageEditor

[Robert]

 

I'm using AJAX RadImageEditor in an aspx page:

                <telerik:RadImageEditor ID="RadImageEditorFront" CssClass="ImageCtrl"  runat="server" Skin="Telerik" Width="545px" Height="300px" RenderMode ="Lightweight" StatusBarMode="Hidden" style="top: 0px; left: 0px">
                    <Tools>
                        <telerik:ImageEditorToolGroup>
                            <telerik:ImageEditorTool Text="ZoomIn" CommandName="ZoomIn" /> 
                            <telerik:ImageEditorTool Text="ZoomOut" CommandName="ZoomOut" />
                            <telerik:ImageEditorTool Text="ZoomOut" CommandName="Zoom" />
                            <telerik:ImageEditorTool Text="Rotate Right" CommandName="RotateRight" /> 
                            <telerik:ImageEditorTool Text="Rotate Left" CommandName="RotateLeft" />
                            <telerik:ImageEditorTool Text="Flip Vertical" CommandName="FlipVertical" />
                        </telerik:ImageEditorToolGroup>                

                    </Tools>
                </telerik:RadImageEditor>

 

I need to change the percentage that the AJAX RadImageEditor zooms in or out on the loaded image when I call the client side methods zoomIn() or zoomOut().

When I use the client side methods zoomIn() or zoomOut(), the image is zoomed in at 50%.

var radImageEditor = $telerik.findControl(document.documentElement, $(this).attr("id"));

radImageEditor.zoomIn(); or radImageEditor.zoomOut();

(note: jQuery code above)

I have tried zoomImage(zoomLevel, shouldUpdateUI), but that did not appear to be the solution (the image became a small dot on the screen).

How can I change the zoom in and zoom out percentage (scale) to 10% for the AJAX RadImageEditor - or asked another way - how can I get the image to scale 10% (instead of 50%) each time I call zoomIn() or zoomOut (or another zooming method)? 

 

[Vasko]

Hi Robert,

You can achieve the desired behavior by using the OnClientCommandExecuting event of the RadImageEditor:

• Add the event in the markup of the Image editor: 

  <telerik:RadImageEditor
      ID="RadImageEditor1"
      runat="server"
      RenderMode="Lightweight"
      OnClientCommandExecuting="onClientCommandExecuting">
      <Tools>
          <telerik:ImageEditorToolGroup>
              <telerik:ImageEditorTool Text="ZoomIn" CommandName="ZoomIn" />
              <telerik:ImageEditorTool Text="ZoomOut" CommandName="ZoomOut" />
              <telerik:ImageEditorTool Text="ZoomOut" CommandName="Zoom" />
          </telerik:ImageEditorToolGroup>
      </Tools>
  </telerik:RadImageEditor>

• In the <script> tag, add the following logic to set the zoom level to 10 for both the zoom-in and zoom-out commands: 

  <script>
      function onClientCommandExecuting(sender, args) {
          var imageEditor = sender
          var zoomLevel;
  
          if (args.get_commandName() == "ZoomIn") {
              zoomLevel = imageEditor.getEditableImage().get_zoomLevel() + 10
  
              if (zoomLevel > imageEditor.get_upperZoomBound()) {
                  zoomLevel = imageEditor.get_upperZoomBound();
              }
  
              imageEditor.zoomImage(zoomLevel, true);
          }
          else if (args.get_commandName() == "ZoomOut") {
              zoomLevel = imageEditor.getEditableImage().get_zoomLevel() - 10
  
              if (zoomLevel < imageEditor.get_lowerZoomBound()) {
                  zoomLevel = imageEditor.get_lowerZoomBound();
              }
  
              imageEditor.zoomImage(zoomLevel, true);
          }
  
          args.set_cancel(true)
      }
  </script>

I hope this is useful.

Kind regards,
Vasko
Progress Telerik