This is a migrated thread and some comments may be shown as answers.

ImageEditor: starting the editor with only pencil command active

5 Answers 92 Views
ImageEditor
This is a migrated thread and some comments may be shown as answers.
Lemcube Srl
Top achievements
Rank 2
Lemcube Srl asked on 09 Jul 2014, 03:49 PM
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

5 Answers, 1 is accepted

Sort by
0
Accepted
Vessy
Telerik team
answered on 10 Jul 2014, 04:11 PM
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.

 
0
Lemcube Srl
Top achievements
Rank 2
answered on 14 Jul 2014, 10:10 AM
Vassy, you're great. This is the solution i was looking for.

Tanks
Mauro
0
Vessy
Telerik team
answered on 14 Jul 2014, 12:19 PM
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.

 
0
Brian Favell
Top achievements
Rank 1
answered on 22 Aug 2014, 07:43 PM
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()?
0
Vessy
Telerik team
answered on 27 Aug 2014, 08:16 AM
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.

 
Tags
ImageEditor
Asked by
Lemcube Srl
Top achievements
Rank 2
Answers by
Vessy
Telerik team
Lemcube Srl
Top achievements
Rank 2
Brian Favell
Top achievements
Rank 1
Share this question
or