ImageEditor: starting the editor with only pencil command active

[Lemcube Srl]

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

[Vessy]

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

 

 

[Lemcube Srl]

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

Tanks
Mauro

[Vessy]

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

 

 

[Brian Favell]

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()?

[Vessy]

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