ImageEditor: starting the editor with only pencil command active

6 posts, 1 answers
  1. Lemcube Srl
    Lemcube Srl avatar
    2 posts
    Member since:
    Jun 2012

    Posted 09 Jul 2014 Link to this post

    Hello to everyone

    I would like to have the ImageEditor starting with the preselection of pencil command so the user can immediately start drawing with the pencil on the surface of the canvas.
    Is there a way to do it?

    In the same ImageEditor when the user is using the pencil i would also like not to show the the pencil dialog box. Is it possible?

    Cheers
    Mauro
  2.
  3. Answer
    Vessy
    Admin
    Vessy avatar
    2240 posts

    Posted 10 Jul 2014 Link to this post

    Hi Mauro,

    You can execute the Pencil command of ImageEditor just after the imgae is loaded for editing by attaching a handler to the ImageEditor's OnClientImageLoad event with a similar logic:
    <telerik:RadImageEditor ID="RadImageEditor1" runat="server" ImageUrl="~/Images/Chrysanthemum.jpg"
        OnClientImageLoad="OnClientImageLoad">
    </telerik:RadImageEditor>
    <script>
        function OnClientImageLoad(imageEditor, args) {
            imageEditor.executeCommand("Pencil");
        }
    </script>

    Regarding the hiding of the dialog - if you are going to use only the Pencil command you can directly hide the dialog with the following CSS style:
    .RadDock .rieDialogs
    {
        display: none !important;
    }


    If you want to use more dialogs, though, you can attach a handler to the ImageEditor's ClientDialogLoaded event and manage the dialog visibility in it:
    <telerik:RadImageEditor ID="RadImageEditor1" runat="server" ImageUrl="~/Images/Chrysanthemum.jpg" OnClientDialogLoaded="OnClientDialogLoaded">
    </telerik:RadImageEditor>
    <script>
        function OnClientDialogLoaded(imageEditor, args) {
            var widgetName = args.get_widget().get_name();
            setTimeout(function () {
                if (widgetName == "Pencil") {
                    $telerik.$(".rieDialogs")[0].style.display = "none";
                }
                else {
                    $telerik.$(".rieDialogs")[0].style.display = "block";
                }
            }, 10);
        }
    </script>

    Hope this information will be helpful for you.

    Regards,
    Vessy
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  5. Lemcube Srl
    Lemcube Srl avatar
    2 posts
    Member since:
    Jun 2012

    Posted 14 Jul 2014 Link to this post

    Vassy, you're great. This is the solution i was looking for.

    Tanks
    Mauro
  7. Vessy
    Admin
    Vessy avatar
    2240 posts

    Posted 14 Jul 2014 Link to this post

    Hi Mauro,

    I am really glad that the proposed solution served its purposes. Please, do not hesitate to contact us if any further assistance is needed.

    Regards,
    Vessy
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  8.
  9. Brian Favell
    Brian Favell avatar
    44 posts
    Member since:
    Mar 2005

    Posted 22 Aug 2014 Link to this post

    This is almost exactly what I'm looking for in our solution.  Is it possible to take this 1 step further and set the Pencil size to 3 during OnClientImageLoad()?
  11. Vessy
    Admin
    Vessy avatar
    2240 posts

    Posted 27 Aug 2014 Link to this post

    Hi Brian,

    The Pencil dialog is not available in the imageLoad event handler, therefore the value of the pencil size cannot be set in it. The easiest way to achieve it would be to enable the ImageEditor's external dialogs and modify the ComboBox declaration in the Pencil.ascx file in the following way:
    <td>
        <telerik:RadComboBox ID="SizeCombo" runat="server" Width="70" ToolTip="Set line size" RenderMode="Lightweight" EnableViewState="false">
            <Items>
                <telerik:RadComboBoxItem Text="1" Value="1" />
                <telerik:RadComboBoxItem Text="3" Value="3" Selected="true"/>
                <telerik:RadComboBoxItem Text="7" Value="7" />
                <telerik:RadComboBoxItem Text="10" Value="10" />
            </Items>
        </telerik:RadComboBox>
    </td>

    Hope this helps.

    Regards,
    Vessy
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
Back to Top