Adding a RadControls HTML Editor to MoJoPortal

This forum is only for questions or discussions about working with the mojoPortal source code in Visual Studio, obtaining the source code from the repository, developing custom features, etc. If your question is not along these lines this is not the right forum. Please try to post your question in the appropriate forum.

Please do not post questions about design, CSS, or skinning here. Use the Help With Skins Forum for those questions.

This forum is for discussing mojoPortal development

You can monitor commits to the repository from this page. We also recommend developers to subscribe to email notifications in the developer forum as occasionally important things are announced.

Before posting questions here you might want to review the developer documentation.

Do not post questions about design, CSS, or skinning here. Use the Help With Skins Forum for those questions.

This thread is closed to new posts. You must sign in to post in the forums.

5/14/2009 6:25:37 PM

tee33

Total Posts 1

View Posts

Adding a RadControls HTML Editor to MoJoPortal

Hi I'm new to MoJo and also just got RadControls for AJAX from Telerik has anyone tried to add it to MoJo Portal?
And if so how did you do it? Like I said I'm new to MoJoPortal and kinda lost on this one. Thanks.

6/17/2009 12:55:46 PM

Allister

Total Posts 18

View Posts

Re: Adding a RadControls HTML Editor to MoJoPortal

Did you get anywhere with this? I'm adding Telerik controls to an ascx and have some problems with the AJAX functionality.

Cheers

Allister

6/17/2009 3:16:33 PM

Rick Hubka

Total Posts 245

View Posts

Re: Adding a RadControls HTML Editor to MoJoPortal

RadControls

I thought I would copy this from the other post were I had it because the topic on this one is more appropriate.

Here are the steps I use to implement Telerik Controls into a mojoPortal Project...
First I assume you are developing your mojoPortal modules in your own VS project and use post build events to copy your code to mojoPortal.Web

Web.Config changes in mojoPortal.Web

NOTE: you won't need the lines with RadUpload if you are not using this Telerik feature

1) Copy
Telerik.Web.UI.dll and Telerik.Web.Design.dll to Web\bin.

2) *** In the mojoPortal.Web project add the 2 Web\bin telerik dll above as References.

3) Put
<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
on the second line of all ascx or aspx pages that use any telerik controls
Also... add
using Telerik.Web.UI;
to all *.cs pages

4)To Web.config <httpHandlers> section add

<add path="Telerik.Web.UI.WebResource.axd" type="Telerik.Web.UI.WebResource" verb="*" validate="false" />
<add path="Telerik.RadUploadProgressHandler.ashx" type="Telerik.Web.UI.RadUploadProgressHandler" verb="*" validate="false" />

5)To Web.config <httpModules> section add

<add name="RadUploadModule" type="Telerik.Web.UI.RadUploadHttpModule" />

6)To Web.config <handlers> section add

<add name="Telerik_Web_UI_WebResource_axd" verb="*" preCondition="integratedMode" path="Telerik.Web.UI.WebResource.axd" type="Telerik.Web.UI.WebResource" />

You may or may not want to replace the standard microsoft Script Manager in layout.Master with:

<telerik:RadScriptManager ID="RadScriptManager1" enablepagemethods="true" runat="server" />

If you do... check 2 things.

1) you kept enablepagemethods="true" because it was in the origional mojoPortal one

2) Make sure you add
<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
to the second line in the page.

In my app I do not see a difference using Teleriks's Script Manager over the Microsoft one.

I also copied the folder Web\App_DesignTimeStyle\ up to my project so my app could see most the js while I'm developing.

Other than the Web.Config I never want to change any Core mojoPortal code or I will be creating myself a maintenance nightmare.

Rick Hubka

6/17/2009 3:35:11 PM

Allister

Total Posts 18

View Posts

Re: Adding a RadControls HTML Editor to MoJoPortal

Many thanks for this.

Allister

6/18/2009 2:38:30 AM

Allister

Total Posts 18

View Posts

Re: Adding a RadControls HTML Editor to MoJoPortal

Re. Telerik controll in user written modules (features), I have the following findings that might help other (I guess they're obvious to people more experienced than I, but I can't be the only one?).

If you use the RadAjaxManager (excellent tool to Ajaxify controls, allowing you to easily declare which controls should be updated when another control is updated - all using Ajax), you mustn't put it in the ascx. Put the RadAjaxManager in the layout.Master page (with the ScriptManager), and put a RadAjaxProxyManager in the user control.

The RadAjaxProxyManager is declared in an alomost identical fashion to the actual RadAjaxManager, and is documented in the expected place.

This sorted all my Ajax problems.

6/18/2009 5:10:28 PM

Rick Hubka

Total Posts 245

View Posts

Re: Adding a RadControls HTML Editor to MoJoPortal

Hi Allister

No.... You are not the only one!

Can you elaborate on the code required for your RadAjaxManagerProxy setup?

I have 9 User Controls(ascx) and 6 Pages(aspx) in my project. I am using RadAjaxManager in only one the the ascx pages and "Yes" my js is giving me problems on that User Control.

Here is my RadAjaxManager declaration:
<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" OnAjaxRequest="RadAjaxManager1_AjaxRequest">

As you can see I use OnAjaxRequest to call a code behind method.

The RadAjaxManagerProxy object does not expose the OnAjaxRequest method so I'm double stumped?????

Rick Hubka

6/19/2009 4:13:21 AM

Allister

Total Posts 18

View Posts

Re: Adding a RadControls HTML Editor to MoJoPortal

The RadAjaxManagerProxy is almost identical in it's declaration to the actual RadAjaxManager, but as you say is missing a few of the methods and properties. This Telerik documentation page tells all:

http://www.telerik.com/help/aspnet-ajax/ajax-manager-proxy.html

I too use the AjaxRequest. A sample of one of my calls is:

// Resize chart when splitter bars moved

function resizeChart(sender)

{

var ajaxManager = <%= RadAjaxManager.GetCurrent(Page).ClientID %>;

var arg1 = sender.get_width() + "px";

var arg2 = sender.get_height() - 40 + "px";

var arguments = arg1 + "," + arg2;

ajaxManager.ajaxRequest(arguments);

}

This is the actual code in the ascx. Here's my RadAjaxManager declaration in the layout.Master file:

<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" EnableAJAX="true">

</telerik:RadAjaxManager>

And here's part of the declaration of the proxy in the ascx file:

<telerik:RadAjaxManagerProxy ID="RadAjaxProxyManager1" runat="server">

<AjaxSettings>

<telerik:AjaxSetting AjaxControlID="SomeControl">

<UpdatedControls>

<telerik:AjaxUpdatedControl ControlID="ChanChart" LoadingPanelID="LoadingPanel1"></telerik:AjaxUpdatedControl>

<telerik:AjaxUpdatedControl ControlID="isInitialLoad"></telerik:AjaxUpdatedControl>

</UpdatedControls>

</telerik:AjaxSetting>

</telerik:RadAjaxManagerProxy>

As you can see it's almost identical to the RadAjaxManager declaration. The final thing I had to do was wire-up the proxy in the ascx code-behind such:

protected void Page_Load(object sender, EventArgs e)

{

RadAjaxManager manager = RadAjaxManager.GetCurrent(Page);

manager.ClientEvents.OnRequestStart = "mngRequestStarted";

manager.AjaxRequest += new RadAjaxControl.AjaxRequestDelegate(RadAjaxManager1_AjaxRequest);

if (!IsPostBack)

{

....

}

It was actuall far eaier to do than the above might suggest, and now I can use the RadAjaxManager without problem. The 'mngRequestStarted' is a piece of JavaScript I have in the ascx, and would normally have been delared in the RadJaxManager declaration such: <ClientEvents OnRequestStart="mngRequestStarted" />. You simply have to move such things to the C# now.

I hope this helps,

Allister

6/19/2009 9:07:49 PM

Rick Hubka

Total Posts 245

View Posts

Re: Adding a RadControls HTML Editor to MoJoPortal

Thanks for the info Allister

I'm going to give it a try this weekend.

One question.

In mojoPortal layout.Master did you put the code in for RadAjaxManager empty like this.

<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
</telerik:RadAjaxManager>

Did you get specific like this

<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
    <ajaxsettings>
    <telerik:AjaxSetting AjaxControlID="RadAjaxManager1">
          <UpdatedControls>
             <telerik:AjaxUpdatedControl ControlID="mainContent" />
          </UpdatedControls>
   </telerik:AjaxSetting>
    </ajaxsettings>
</telerik:RadAjaxManager>

OR did you cover all bases like this

<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
    <ajaxsettings>
       <telerik:AjaxSetting AjaxControlID="RadAjaxManager1">
          <UpdatedControls>
             <telerik:AjaxUpdatedControl ControlID="leftContent" />
             <telerik:AjaxUpdatedControl ControlID="mainContent" />
             <telerik:AjaxUpdatedControl ControlID="rightContent" />
          </UpdatedControls>
       </telerik:AjaxSetting>
    </ajaxsettings>
</telerik:RadAjaxManager>

Thanks again

If this works for me you had better add a "buy me beer button" :)
Cause I'll owe you a couple.

Rick Hubka

6/20/2009 3:04:36 AM

Allister

Total Posts 18

View Posts

Re: Adding a RadControls HTML Editor to MoJoPortal

Empty, as in your first example and my post above. This is the complete layout.master

<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="~/App_MasterPages/layout.Master.cs" Inherits="mojoPortal.Web.layout" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >

<head id="Head1" runat="server"><title></title>

<portal:StyleSheetCombiner id="StyleSheetCombiner" runat="server" JQueryUIThemeName="blitzer" />

<portal:IEStyleIncludes id="IEStyleIncludes1" runat="server" />

<portal:MetaContent id="MetaContent" runat="server" />

<portal:Favicon id="Favicon1" runat="server" />

<meta name="viewport" content="width=670, initial-scale=0.45, minimum-scale=0.45"/>

</head>

<body class="pagebody">

<form id="frmMain" runat="server">

<asp:SiteMapDataSource ID="SiteMapData" runat="server" ShowStartingNode="false" />

<asp:SiteMapDataSource ID="PageMapDataSource" runat="server" ShowStartingNode="false" />

<asp:SiteMapDataSource ID="ChildPageSiteMapData" runat="server" ShowStartingNode="false" />

<telerik:RadScriptManager ID="RadScriptManager1" runat="server" EnablePartialRendering="true" AsyncPostBackTimeout="600" EnablePageMethods="true" >

<Scripts>

<asp:ScriptReference Path="/NoWattUsage/Charts/FusionCharts.js" />

<asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js" />

<asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQuery.js" />

</Scripts>

</telerik:RadScriptManager>

<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" EnableAJAX="true">

</telerik:RadAjaxManager>

<div id="wrapwebsite">

<div id="wrapheader">

<div class="headergraphic"></div>

<portal:SiteTitle id="SiteTitle1" runat="server" />

<portal:SkipLink id="SkipLink1" runat="server" />

<div class="topnav">

<ul>

<portal:WelcomeMessage id="WelcomeMessage" runat="server" RenderAsListItem="true" ListItemCSS="firstnav" />

<portal:HomeLink id="HomeLink" runat="server" RenderAsListItem="true" />

<portal:UserProfileLink id="UserProfileLink" runat="server" RenderAsListItem="true" />

<portal:MailboxLink id="MailboxLink1" runat="server" RenderAsListItem="true" />

<portal:MemberListLink id="MemberListLink" runat="server" RenderAsListItem="true" />

<portal:RegisterLink id="RegisterLink" runat="server" RenderAsListItem="true" />

<portal:LoginLink id="LoginLink" runat="server" RenderAsListItem="true" />

<portal:LogoutLink id="LogoutLink" runat="server" RenderAsListItem="true" />

</ul>

</div>

<portal:SiteMenu id="SiteMenu1" runat="server" TopLevelOnly="true"

UseTreeView="false" HideMenuOnSiteMap="false" UseSpanInLinks="true"

Direction="Horizonatal" />

<div class="wrapcenter">

<asp:Panel id="divLeft" runat="server" cssclass="leftside" visible="True" SkinID="pnlPlain">

<portal:PageMenu id="PageMenu1" runat="server" UseTreeView="true" />

<asp:contentplaceholder ID="leftContent" runat="server"></asp:contentplaceholder>

</asp:Panel>

<asp:Panel id="divCenter" runat="server" visible="true" cssclass="center-nomargins" SkinID="pnlPlain">

<portal:Breadcrumbs id="Breadcrumbs" runat="server" CssClass="Normal" CurrentPageCssClass="NormalBold" />

<portal:ChildPageMenu id="ChildPageMenu1" runat="server" CssClass="Head" /><a id="startcontent"></a>

<asp:ContentPlaceHolder ID="mainContent" runat="server"></asp:ContentPlaceHolder>

</asp:Panel>

<asp:Panel id="divRight" runat="server" visible="true" cssclass="rightside" SkinID="pnlPlain">

<asp:contentplaceholder ID="rightContent" runat="server"></asp:contentplaceholder>

</asp:Panel>

</div>

<div id="wrapfooter">

<portal:CopyrightLabel ID="cl1" runat="server" ShowYear="true" BeginYear="2006" /> |

<portal:mojoPortalLink id="lnkmojoportal" runat="server" UseImage="false" />

</div>

<div class="editpanel">

<asp:contentplaceholder ID="pageEditContent" runat="server"></asp:contentplaceholder>

</div>

<div class="topbanner">

</div>

</form>

</body>

</html>

Allister

6/20/2009 8:40:30 PM

Rick Hubka

Total Posts 245

View Posts

Re: Adding a RadControls HTML Editor to MoJoPortal

Hi Allister

I gave it a go today and it does not work for me.

In my ascx in page_load it fails on this line

RadAjaxManager manager = Telerik.Web.UI.RadAjaxManager.GetCurrent(Page);
manager above is null. GetCurrent returns null.

The Telerik forums say that happens when it does not find RadAjaxManager on the Master.

I searched the forums for 5 hours and your code is exactly what everyone else uses. I tried tons of variations.

The User Control page I'm doing this on is the main entry to my feature so it is a type SiteModuleControl.
All my other User Controls are the standard type UserControl.
It all makes sence to me and seems pretty straight forward. BUT ?????????
I'm wondering if type SiteModuleControl does not use layout.master.

No more time to play today. I'll get something working one way or another. Telerik Controls are great but from time to time I have to struggle to get things to work.

Rick Hubka

6/21/2009 4:12:51 AM

Allister

Total Posts 18

View Posts

Re: Adding a RadControls HTML Editor to MoJoPortal

I'm not an expert concerning the workings of mojoPortal.

Which layout.master are you editing? I only edit the one in the skin I'm using (Data/Sites/1/skins/<someskin>/layout.Master> (not the one in the ascx module).

If you like I can email you a zip of the whole project (confidentiality assumed). I'm using 2.3.0.4 and the latest Telerik Ajax controls. You can this extract/browse the various parts to find the difference.

Allister

6/21/2009 12:30:51 PM

Rick Hubka

Total Posts 245

View Posts

Re: Adding a RadControls HTML Editor to MoJoPortal

Hi Allister

MMMmmm.............

I modified the Web\App_MasterPages\layout.master
not
Data/Sites/1/skins/<someskin>/layout.Master
That would explain why my RadAjaxManager value was null.

Because it's fathers day. I am not allowed to code today. Only check my email. DAM!!!!!

I'm 99% sure this will solve the problem.
If not, I'll be gratefull for a copy of your code.

Rick

6/22/2009 10:19:46 AM

Rick Hubka

Total Posts 245

View Posts

Re: Adding a RadControls HTML Editor to MoJoPortal

Hi Allister

It works!!!!!!!!!!!

Thanks for all your help and pointing out I should be changing the skin layout.master file. I had in running in 5 minutes. All js problems gone.

So.... Where do ya live?
I'm in Calgary Canada.

Drop me an email sometime to rick@hubka.com

I'm not worried about leaving my email on a post any more.
I've had that email address for 15 years and my anti-spam programs catch 99% of the 400+ spams I get every day.

Rick Hubka

6/23/2009 7:42:50 AM

Allister

Total Posts 18

View Posts

Re: Adding a RadControls HTML Editor to MoJoPortal

Excellent news.

I've just spent TWO DAYS trying to get the TimeView popup in the RadTimePicker and RadDateTimePicker working. Eventually traced down to the CSS friendly control adaptor changing the tables in the popup!

If you use these controls you'll need to disable (comment out) the DataListAdapter in the CSSFriendlyAdapters.browser file!

Allister

6/23/2009 9:01:12 AM

Joe Audette

Total Posts 18439

View Posts

Re: Adding a RadControls HTML Editor to MoJoPortal

Hi Allister,

I just fixed this so it won't be a problem in the next release of mojoPortal. Basically what I did was create a new mojoDataList that inherits from DataList and replaced all use of DataList in mojoPortal so it uses mojoDataList and then I changed the CSSFriendly.browser file so it only applies the adapter to mojoDataList and not to DataList.

This way you can use DataList in custom projects without it using the adapter but if you want to use the adapter then just use mojoDataList.

Best,

Joe

6/23/2009 10:43:43 AM

Allister

Total Posts 18

View Posts

Re: Adding a RadControls HTML Editor to MoJoPortal

Hi Joe,

Thanks for that; one less thing to remember changing when I next upgrade (comnting out the DataList)!

This is for the Telerik AJAX controls, which BTW are quite nice (albeit a price).

Kindest Regards,

Allister

2/7/2010 1:14:01 PM

Rick Hubka

Total Posts 245

View Posts

Re: Adding a RadControls HTML Editor to MoJoPortal

Hey Allister

How are you doing?

I just upgraded my managers Web Site for the first time in about 8 months.

I upgraded to the latest Telerik and mojoPortal. Of cirse mojoPortal works Great!

Nowever, now I'm getting a null RadAjaxManager again just like before

RadAjaxManager manager = RadAjaxManager.GetCurrent(Page);
manager.AjaxRequest += new RadAjaxControl.AjaxRequestDelegate(manager_AjaxRequest);

I modified the layout.Master in my skin just like before.

I am assumming Telerik has changed things.

If you are still using Telerik, did you have to change anything to keep this working?

Thanks

2/7/2010 1:25:57 PM

Allister

Total Posts 18

View Posts

Re: Adding a RadControls HTML Editor to MoJoPortal

I just recently refreshed our application with the latest mojoportal sources AND the latest Telerik release Q3 2009.

I didn't have to do anything different (for Telerik anyway - hard work porting the styles to the structure). Just added the Manager, etc. to the master.layout file (removing the Ajax ScriptManager).

Must have missed something?

Allister

2/7/2010 9:34:40 PM

Rick Hubka

Total Posts 245

View Posts

Re: Adding a RadControls HTML Editor to MoJoPortal

You were right... I was missing something. Fixed and working.

I was half hoping Telerik changed things so we did not have to hard code a change to the skin we use.

Thanks

4/22/2010 7:34:40 AM

elizas

Total Posts 2

View Posts

Re: Adding a RadControls HTML Editor to MoJoPortal

The following code snippet demonstrates how you can add an event handler as well as a CSS class to an element using ScriptManager.
Sys.UI.DomEvent class provides API for attaching handlers to DOM element.
Sys.UI.DomElement class provides API and Properties for manupulating DOM elements.

You must sign in to post in the forums. This thread is closed to new posts.