Doesn't anybody know if there is a general way to use datatypes on a normal page or usercontrol? Isn't there a package or control which can do this?

Eventually I wrote my own code instead of using existing datatypes because I needed to add to some extra business logic. If I ever need to use default datatypes on a page or usercontrol I'll look at the sourcecode of Blog4Umbraco. Thanks again Richard!

Is the Blog4Umbraco sourcecode available? At codeplex I can only find the package. I want to look at the source code because I want to use the TinyMCE datatype on my custom control.

Does somebody know where in the Umbraco Source code I have to look for the part where datatypes are loaded into a page (contenttype). If I look at EditMember.aspx or editMedia.aspx it only show the default controls (like the passwordChanger in the member section), but I can't find the place where the extra datatypes are loaded which are defined in the contenttype. If I know where it's done I might be able to figuere out how I can place datatypes on a custom page. I'd still like to place the TinyMCE editor on a custom page.

Hi Jeroen,

Sure the sourcecode for Blog4Umbraco is availalbe, just download the latest changeset

http://blog4umbraco.codeplex.com/SourceControl/list/changesets

Hi Jeroen,

A good way to see how you can load datatypes in a usercontrol is to take a look at the autoform code.

The code should be in the umbraco extensions project on codeplex: http://umbracoext.codeplex.com/SourceControl/list/changesets

Thanks for the source code Tim. I've looked at the CreatePost.ascx page and it might be helpfull, but where is this usercontrol used? I'd like to see an example how this page looks like.

The CreatePost.ascx is usefull, but it displays all the datatypes from another document type. What I would like is to be able to load a datatype directly without it being defined on a document type. Does somebody have a sample for that?

I've finally been able to add datatypes to a normal page. Here is my sample for the TinyMCE editor:

Frontpage:

<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="FormatEmail.ascx.cs" Inherits="MikzIntranet.UmbracoExtension.Tree.Member.FormatEmail" %>
<%@ Register Namespace="umbraco.uicontrols" Assembly="controls" TagPrefix="umb" %>

<umb:TabView ID="TabViewDetails" runat="server" Width="552px" Height="692px"/>
<asp:PlaceHolder ID="blogpostControls" runat="server"></asp:PlaceHolder>

Backend:

public partial class FormatEmail : System.Web.UI.UserControl
    {
        private umbraco.editorControls.tinyMCE3.TinyMCE _tinymce = null;
        public TabPage managementTab;

        protected void Page_Load(object sender, EventArgs e)
        {
            if (_tinymce != null)
            {
                if (_tinymce.config["umbraco_toolbar_id"] != null)
                {
                    _tinymce.config.Remove("umbraco_toolbar_id");
                }
                _tinymce.config.Add("umbraco_toolbar_id", string.Concat(TabViewDetails.ClientID, "_tab01layer_menu_sl"));
            }
        }


        protected override void OnInit(EventArgs e)
        {
            base.OnInit(e);

            managementTab = TabViewDetails.NewTabPage("Beheer");
            managementTab.Controls.Add(blogpostControls);

            DataTypeDefinition d = DataTypeDefinition.GetDataTypeDefinition(-87);
            _tinymce = (umbraco.editorControls.tinyMCE3.TinyMCE)d.DataType.DataEditor;
            blogpostControls.Controls.Add(_tinymce);
        }
    }

The only thing I dont understand is the following line:

_tinymce.config.Add("umbraco_toolbar_id", string.Concat(TabViewDetails.ClientID, "_tab01layer_menu_sl"));

Without this the TinyMCE editor doesn't work but what does it do and why?

Time to kick this topic again :). I still don't understand what this does:

_tinymce.config.Add("umbraco_toolbar_id", string.Concat(TabViewDetails.ClientID, "_tab01layer_menu_sl"));

Also now I want to add 2 TinyMCE datatypes to a custom section, but I can't get it to work. I'm using the following code:

if (_smallEditorNL != null)
{
    //Set the config so the editor can be displayed.
    if (_smallEditorNL.config["umbraco_toolbar_id"] != null)
    {
        _smallEditorNL.config.Remove("umbraco_toolbar_id");
    }
    _smallEditorNL.config.Add("umbraco_toolbar_id", string.Concat(TabViewDetails.ClientID, "_tab02layer_menu_sl"));
}

if (_defaultEditorNL != null)
{
    //Set the config so the editor can be displayed.
    if (_defaultEditorNL.config["umbraco_toolbar_id"] != null)
    {
        _defaultEditorNL.config.Remove("umbraco_toolbar_id");
    }
    _defaultEditorNL.config.Add("umbraco_toolbar_id", string.Concat(TabViewDetails.ClientID, "_tab02layer_menu_sl"));
}

This is supposed to make sure both editors work in the custom section, but now I the buttons are double:

Some Umbraco core member know how this works and what I should do to add 2 TinyMCE editors to a custom section? Thanks.

Jeroen

Anyone knows how this can be done? Thanks.

Jeroen

Jeroen, did you fix this? Did you try seperating the two fields onto seperate tabs?

My problem is that I can't get the buttons on the correct tab...

Cheers,

Alex

Thanks for this post. It helped me a lot.

The only thing that umbraco_toolbar_id does is point to where tinymce has to create it's toolbar.

I also ran into the problem when using more then 1 tinymce edit field on 1 page and fixed it.

The problem you are having is probably that you've pointed it to the same element for both tinymce edit fields.

The trick is to to create a unique element for each tinymce edit field inside the menubar. In my case I'm using an UmbracoPanel, but it'll probably work exactly the same when using a TabView.

Here's the code i've used.

The first edit field:

   panel.Menu.NewElement("div", "tinyMCEMenu1", "tinymceMenuBar", 0);
   DataTypeDefinition dataTypeDefinition1 = DataTypeDefinition.GetDataTypeDefinition(2318);
   umbraco.editorControls.tinyMCE3.TinyMCE tinymce1 = (umbraco.editorControls.tinyMCE3.TinyMCE)dataTypeDefinition1.DataType.DataEditor;
   tinymce1.config.Add("umbraco_toolbar_id", "tinyMCEMenu1");
   plhDescription.Controls.Add(tinymce1);

 And the second edit field:

   panel.Menu.NewElement("div", "tinyMCEMenu2", "tinymceMenuBar", 0);
   DataTypeDefinition dataTypeDefinition2 = DataTypeDefinition.GetDataTypeDefinition(2318);
   umbraco.editorControls.tinyMCE3.TinyMCE tinymce2 = (umbraco.editorControls.tinyMCE3.TinyMCE)dataTypeDefinition2.DataType.DataEditor;
   tinymce2.config.Add("umbraco_toolbar_id", "tinyMCEMenu2");
   plhDescription.Controls.Add(tinymce2);

 (I've created a custom datatype definition so that's why i'm using GetDataTypeDefinition with the ID 2318)

Anyhow, all is fine for me now, just wanted to share my code in case it can help other people.

Best Regards,

Vincent

Thanks Vincent

I was using Jeroen's code (final post on page 1) but I've removed this from the Page_Load:

if (_tinymce != null)
            {
                if (_tinymce.config["umbraco_toolbar_id"] != null)
                {
                    _tinymce.config.Remove("umbraco_toolbar_id");
                }
                _tinymce.config.Add("umbraco_toolbar_id", string.Concat(TabViewDetails.ClientID, "_tab01layer_menu_sl"));
            }

Then adjusted yours and it works a treat!

Thanks,

Alex

Im trying to get this to work with the ContentPicker.

I got this so far:

DataTypeDefinition dataTypeDefinition1 = DataTypeDefinition.GetDataTypeDefinition(1038);
umbraco.controls.ContentPicker mediaPicker = (umbraco.controls.ContentPicker)dataTypeDefinition1.DataType.DataEditor;

mediaPicker.AppAlias = "media";
mediaPicker.TreeAlias = "media";

PlaceholderMediaPicker.Controls.Add(mediaPicker);

1038 does not work, and I dont know how to find the correct id. I want this to work on whatever installation it is run at, so why is the id (in this case 1038) hardcoded in all examples.. How do you find the correct id?

Does the rest of what im doing look correct?

You can find the id by going to the data types in the developer section and hover over the datatype. At the bottom (in IE) you can see the id. Here the id's are hard coded but I usually store them in web.config so they are easy to update.

Jeroen

ok, so you cannot dynamicly get em somehow? it is not a value you can get with the API from the MediaPicker type or somthing?

Not that I'm aware of.

Jeroen

I think I found where the ids are from in the database.. the weird thing is if I use a ContentPicker like in

http://www.nibble.be/?p=87

and I use the correct ID for a ContentPicker then I get the error 

Unable to cast object of type 'umbraco.editorControls.pagePicker' to type 'umbraco.controls.ContentPicker'

Hi Jacob

I may be misunderstanding this but are you trying to dynamically find the nodeid of the Media Picker? If so, couldn't you pull it straight from the database?

SELECT     TOP (1) umbracoNode.id
FROM         umbracoNode INNER JOIN
                      cmsDataType ON umbracoNode.id = cmsDataType.nodeId
WHERE     (umbracoNode.text = 'Media Picker')

Alex 

Agreed, not the most future proof solution but may be the only one.

I've not heard of a pagePicker...

I've managed to successfully add the TinyMCE into my custom page using Jeroen's code here, but with a couple of problems - I'm not getting the content picker on inserting a link, or the media picker on inserting an image - I'm getting the standard popups but without any localisation, so they look like:

Am I missing something obvious?

Hmm everything works here. Here is a sample I'm using:

private TinyMCE _editorDefaultContent;

DataTypeDefinition editorDatatype = DataTypeDefinition.GetDataTypeDefinition(Configuration.EditorId);

DataTab.Menu.NewElement("div", "tinyMCEMenu1", "tinymceMenuBar", 0);
_editorDefaultContent = (TinyMCE)editorDatatype.DataType.DataEditor;
_editorDefaultContent.config.Add("umbraco_toolbar_id", "tinyMCEMenu1");
PlaceHolderDefaultContent.Controls.Add(_editorDefaultContent);

_editorDefaultContent.Text = "Some html";

Jeroen

Well, I'm not adding the TinyMCE controls to a top menu, but I can't imagine that would be a problem? I'll try adding a toolbar in in case it is that.

How is the rest of your custom section set up? I have:

A page inherits from UmbracoEnsuredPage and is a content page for my own master page, which inherits directly from System.Web.UI.MasterPage but is a content page for umbracoPage.Master.

Make sense?

Could it be a resource reference I'm missing? The dialogs are not styled at all like the ones in the rest of the Umbraco system, and presumably the TinyMCE setup for the media picker and things is done with a script include?

I would have thought that the Umbraco master page should be including all of that though!

Rob,

Could you solve the issue that you mentioned above? Can you please let me know the solution? I am also having the same issue here, media in the editor is not working.

Hi MVJ, sorry for late reply, I have been on an extended break, I didn't get i working in the end - time was too tight to make perfect integration as important as just some rich text editing, so I used the Yahoo UI rich editor in the end - I find it much nicer to work with than TinyMCE, and my needs were pretty simple.

Hi all

I'm trying to load Richtext Editior in a user control. But its not rendering anything. Here is my code sample

html :<asp:PlaceHolder ID="plcs" runat="server"></asp:PlaceHolder>

            DataTypeDefinition d = DataTypeDefinition.GetDataTypeDefinition(-87);
            _tinymce = (umbraco.editorControls.tinyMCE3.TinyMCE)d.DataType.DataEditor;

            if (_tinymce != null)
            {
                umbraco.uicontrols.TabView tabview = (umbraco.uicontrols.TabView)FindControlRecursive(this.Page.Master, "TabView1");
                if (_tinymce.config["umbraco_toolbar_id"] != null)
                    _tinymce.config.Remove("umbraco_toolbar_id");
                _tinymce.config.Add("umbraco_toolbar_id", string.Format("{0}_tab01layer_menu_sl", tabview.ClientID));
            }
            plcs.Controls.Add(_tinymce);

Plz. anyone help me what I'm missing in my code.

Thanks

Pnima

i follewed the above code but RTE not renderring on the page ............any idea about that ????

Hello,

Could you please post some of your code so I can see what might be going wrong. Do you get any errors?

Jeroen

Hi Jeroen,

I figure out finally how to render RTE on the edit page of my custom section .... thanx for the code .... but now i want to use uComponent dataType Grid which i defined in my datatype -- developer section .... in the edit page of my custom section any idea how can i use that .....

Cheers,

Jigs

Hi Jigs,

Sorry I haven't added the dataType grid to a custom section yet. However I did use MNTP. Perhaps you can use this sample: http://our.umbraco.org/wiki/reference/code-snippets/use-mntp-on-a-usercontrol.

Jeroen

Hi Jeroen,

Thanx for your help ,,, I tried your example and i got error of type cast.

Unable to cast object of type 'uComponents.Core.DataTypes.DataTypeGrid.DtgDataEditor' to type 'umbraco.cms.businesslogic.datatype.AbstractDataEditorControl'.

Here is my code .....

Am i doing anything wrong ...... any help would be appriciated....

Thanx,

Jigs

That could be because DTG doesn't derive from AbstractDataEditorControl. :-)

It derives from: Control, INamingContainer, IDataEditor.

Hi Ove,

Thanx for your help ,,,, i will try this and let you know how it works......

Cheers,

Jigs

Hi Ove,

I tried this one gave me null refrence error ...... any idea why ??? .....any Example would be appriciated ..... thankx

dtg = (uComponents.Core.DataTypes.DataTypeGrid.DtgDataEditor)((IDataEditor)dg.DataType.DataEditor);

cheers,

Jigs

It might be a good idea to have a look at the source code to see how everything works. When I tried using MNTP in a custom section I also didn't know how it worked, but after looking at the source code it was a lot clearer.

Jeroen

Hi all,

Having some difficulty getting the richtext editor to render from within a user control used as a datatype.

When I use the code below, I get the textarea rendered in the page, but a javascript error prevents the richtext editor from loading.

DataTypeDefinition d = DataTypeDefinition.GetDataTypeDefinition(-87);
_tinymce = (umbraco.editorControls.tinyMCE3.TinyMCE)d.DataType.DataEditor;

if (_tinymce != null)
{
umbraco.uicontrols.TabView tabview = (umbraco.uicontrols.TabView)this.Page.Master.FindControlR("TabView1");
        if (_tinymce.config["umbraco_toolbar_id"] != null)
        {
        _tinymce.config.Remove("umbraco_toolbar_id");
        }
        _tinymce.config.Add("umbraco_toolbar_id", string.Format("{0}_tab01layer_menu_sl", tabview.ClientID));
}
ph.Controls.Add(_tinymce);

I get the following javascript error:

Cannot call method 'appendChild' of null

I've tried a few different approaches to creating the richtext editor, but the only success I've had is to render the richtext editor with its own toolbar and no media library integration, which isn't really suitable for my needs.

Has anyone had any success in rendering a richtext editor that hooks into the toolbar and is capable of accessing the media library?

Thanks,

Andy

Hello,

I created a custom datatype which extends the TinyMCE editor. See this package: http://our.umbraco.org/projects/backoffice-extensions/digibiz-email-form-with-tinymce.

If you give me your email I can send you the source code.

Jeroen

That'd be very useful, thanks! My email address is: [email protected]

Hi Andrew,

Try this source code if yyou want the MCE in the tab with toolbar hooked up with umbraco toolbar ... as it is like umbraco and you can also working media button .... from media liabrary ....

http://our.umbraco.org/forum/developers/extending-umbraco/17750-Using-tinyMCE-in-custom-section

Cheers,

Jigs

Hi Jeroen,

Finally .... i got it ..... How to render DataType Grid ---- uComponent in custom section ......

I figure it out from the source code of the uComponent ............... thnaks for good advice ....

Cheers,

Jigs

Hi Jigs,

Great you got it working! Could you please share some pieces of your code so we can learn from it? Thanks.

Jeroen

hi Jeroen,

sorry for late reply, i was off for 3 days from the work.....

here is the code for working data grid on custom page .... but still i have a problem to store more than 1 record in the grid ..... i only store one record in the grid ..... trying to find the solution of this problem but anyways it render the datatype grid in the custom page so i am happy ....

i will let you know the perfect solution if i can find the solution of the above problem.

Cheers,

Jigs

Sorry for late answer, there’s a lot of work at the moment.

My first guess from your code examples is that you have a typical viewstate problem where the control in question does not persist through postback.

You need to recreate the DTG control on every Page_Load to prevent ASP.NET from creating a new instance of the control on every postback. (Which is what it sounds like is happening)

Try loading the DTG control in Page_Loage  (From the code you posted in your latest post, it looks like you’re already doing this), but also give the control an ID.
That way, when ASP.NET loads the page after a postback (which is what happens when you press the “Add” button), it finds a control in memory with the same ID as the one you’re recreating in Page_Load.
ASP.NET will then return the control in memory, instead of creating a new control.

Hi there,

Great post!

Im trying to add the uComponent Autocomplete on to my aspx page.

I managed to render it but need to set the data value for it.

Does anyone know how to set this up?

Also, Do I have to use the asp.net script manager or is there another solution for this one? 

Many thanks

mkariti

Ok I got it!

Just made sure that my aspx page is inherit from the umbraco/masterpages/umbracoDialog.Master which holds all the required scripts .

That is cool!!!

Don't know if you've seen this wiki, but it's also a good example: http://our.umbraco.org/wiki/reference/code-snippets/use-mntp-on-a-usercontrol

Jeroen

Hi Jeroen,

Yes I did but thought that it's not what I was after.

All I needed is to implement the uComponent Autocomplete field on an aspx page which acts as a popup window.

Does this looks ok? It is working but not sure if I implemented correctly.

            DataTypeDefinition dg = DataTypeDefinition.GetDataTypeDefinition(1191);

            IDataType supplierPicker = dg.DataType;

            supplierPicker.Data.Value = "supplierPicker";

          supplierPicker.DataEditor.Editor.ID = "supplierPickerId";

            myPlaceHolder.Controls.Add(supplierPicker.DataEditor.Editor);

 And offcourse made sure that my aspx  inherit from umbraco/masterpages/umbracoDialog.Master

Cheers

mkariti

Ok So I got the control on the aspx page, Does anyone know how can I access his values from the c#?

When adding a new member to the list all that is rendered is as follows:

Hmm maybe something like myPlaceHolder.Controls.FindControl(id) but not sure if that will find it. Perhaps a recursive findcontrol method might work.

Jeroen

Yes I tried that. For some reason I cant get the items the control stores.

Regards,

mkariti

Great post. I now have a custom check box rendering. What is the best practise for exracting values on save?

As a side note - I have set up a DocumentType that stores all the required DataTypes and referenced them that way.

var docType = DocumentType.GetByAlias("DocTypeAlias");

var propType = docType.getPropertyType("PropertyTypeAlias");

var dataType = propType.DataTypeDefinition.DataType;

dataType.DataEditor.Editor.ID = propType.Alias;

var data = propType.DataTypeDefinition.DataType.Data;

placeholder.Controls.Add(dataType.DataEditor.Editor);

Hello,

How will I call usercontrol from umbraco.editorControls.userControlGrapper just like the code below.
Instead of TinyMCE I want to call my custom control?

Thank you 

 DataTypeDefinition dataTypeDefinition = DataTypeDefinition.GetDataTypeDefinition(tinyMCEDataTypeId);

            this._tinymce = (TinyMCE)dataTypeDefinition.DataType.DataEditor;

            this._tinymce.ID = "T1";

            this.panRTE.Controls.Add(this._tinymce);

            this.tpInfo.Menu.NewElement("div", "umbTinymceMenu_" + this._tinymce.ClientID, "tinymceMenuBar", 0);

I know i am too late for this, but i been spending 3 days to make TinyMce on usercontrol to get working,  still no luck. can some one post me a sample code or email to me please [email protected].

what i had done, i create a macro load user control with tinymce in it. it fail every time, but it is on the page resource.

i have no idea.

please help.

ai-ya wrong timing, happy easter

Hay yo...

i found it, there is no shortcut, for the frontend part .

look here http://www.codeproject.com/Tips/164066/Get-TinyMCE-Value-from-Server-Side-in-ASP-NET-4-0

I finally got TinyMCE working in a custom section; Umbraco 6.1.5.

The media picker (insert image) wordks fine. Unfortunally, inserting macro's fails on umbraco.presentation.tinymce3.insertMacro.renderMacro_Click(...).   

Here is the full working and tested source code. Hope it helps someone.

C:\MyProject\umbraco\Plugins\VacaturesApplication\EditTinyMCE.aspx

<%@ Page ValidateRequest="false" Language="C#" MasterPageFile="/umbraco/masterpages/umbracoPage.Master" AutoEventWireup="true" 
    CodeBehind="EditTinyMCE.aspx.cs" Inherits="Website_umbraco.Plugins.MyApplication.EditTinyMCE" %>

<asp:Content ID="Content" ContentPlaceHolderID="body" runat="server">

    <umb:UmbracoPanel ID="upnl" runat="server" hasMenu="true" Text="Edit bedrijf">

        <umb:Pane ID="pn" runat="server">

            <%-- Name --%>
            <umb:PropertyPanel runat="server" Text="Name">
                <asp:TextBox ID="txtName" runat="server" MaxLength="100" CssClass="guiInputText guiInputStandardSize" />
            </umb:PropertyPanel>

            <%-- Description (html) --%>
            <umb:PropertyPanel runat="server" Text="Description">
                <asp:PlaceHolder runat="server" ID="phDescription" />
            </umb:PropertyPanel>

        </umb:Pane>

    </umb:UmbracoPanel>

</asp:Content>

C:\MyProject\umbraco\Plugins\VacaturesApplication\EditTinyMCE.aspx.cs

using System;
using System.Web.UI;
using System.Web.UI.WebControls;
using umbraco.cms.businesslogic.datatype;
using umbraco.editorControls.tinyMCE3;
using umbraco.uicontrols;
using Umbraco.Web;
using Umbraco.Web.UI.Pages;

namespace Website_umbraco.Plugins.MyApplication
{
    public partial class EditTinyMCE : BasePage
    {
        TinyMCE mceDescription;

        protected override void OnInit(EventArgs e)
        {
            // Save button
            ImageButton save = upnl.Menu.NewImageButton();
            save.Click += save_Click;
            save.AlternateText = "Save";
            save.ImageUrl = umbraco.GlobalSettings.Path + "/images/editor/save.gif";

            // Init TyniMCE for Description
            InitTinyMCE(ref mceDescription, phDescription);
        }

        protected void Page_Load(object sender, EventArgs e)
        {
            if (!IsPostBack)
            {
                // Load your data from db, disk...
                // in this example it is loaded from  the session
                txtName.Text = (string)UmbracoContext.Current.HttpContext.Session["txtName"];
                mceDescription.Text = (string)UmbracoContext.Current.HttpContext.Session["mceDescription"];
            }
        }

        void save_Click(object sender, ImageClickEventArgs e)
        {
            // Save your data to db, disk...
            // in this example it is saved in the session
            Umbraco.Web.UmbracoContext.Current.HttpContext.Session["txtName"] = txtName.Text;
            Umbraco.Web.UmbracoContext.Current.HttpContext.Session["mceDescription"] = mceDescription.Text;
        }

        // TODO: move to a generic tools class
        public static void InitTinyMCE(ref TinyMCE control, PlaceHolder ph)
        {
            DataTypeDefinition d = DataTypeDefinition.GetDataTypeDefinition(-87); // -78 = TinyMCE DataType 

            control = (umbraco.editorControls.tinyMCE3.TinyMCE)d.DataType.DataEditor;
            ph.Controls.Add(control);

            // Add TinyMCE controls to menu bar
            UmbracoPanel panel = FindParent<UmbracoPanel>(control);
            control.config.Add("umbraco_toolbar_id", panel.Menu.ClientID + "_slh");
            panel.Menu.NewElement("div", "umbTinymceMenu_" + control.ClientID, "tinymceMenuBar", 0);
        }

        // TODO: move to a generic tools class
        public static T FindParent(Control control)
            where T : class
        {
            while (control != null)
            {
                control = control.Parent;
                if (control is T)
                {
                    return control as T;
                }
            }
            return null;
        }
    }
}

I'm getting errors when I try to implement Arjan's solution.

The problem seems to be in the public static T FindParent method. I get

"Constraints are not allowed on non-generic declarations."

Any idea why? I'm duplicating his code. Using Umbraco 6.1.6 and this code is appearing in a codebehind that's being called from the tree.

bug on forum, my question got posted twice.

Sussed it. I just needed to change it to

public static T FindParent<T>(Control control)

is working on a reply...