How do you 'install' the Kangaroo Add References Wid

Posted by Community Admin on 09-Oct-2012 00:00

I downloaded the <b>Kangaroo Add References Widget</b> from the Marketplace, but I'm not sure how to actually use it. I'm still have issues when trying to add references to custom javascript files. I'm looking for a reliable way to get the scripts to load in the order I want them to and thought that maybe this Kangaroo deal would do the trick, but again I don't know how to get it working. Also since the update to the Sitefinity website it appears that the Kangaroo widget is no longer available in the Marketplace...?

Posted by Community Admin on 26-Oct-2012 00:00

Any help would be appreciated...?

or if anyone has a better fool proof way of using javascript plugins that would be great. I didn't think it would be so tricky to use plugins, but apparently it is.

I'm trying to use a Google Maps jQuery plugin and I can't for the life of me get it to work.

Thanks!

Posted by Community Admin on 31-Oct-2012 00:00

Hi Richard,

Thanks for using Sitefinity.

Take a look at these posts about implementing jQuery and even about the latest updates to Kangaroo widget:

Post 1

Post 2

Let me know if these don't clear up your problems.

Regards,
Patrick Dunn
the Telerik team

Do you want to have your say in the Sitefinity development roadmap? Do you want to know when a feature you requested is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items

Posted by Community Admin on 07-Nov-2012 00:00

That's funny Patrick you linked me to two of my own posts...

Posted by Community Admin on 12-Nov-2012 00:00

Hello Richard,

Actually, you have several options when using javaScript on Sitefinity pages. You can use our JavaScript widget. Here's more information about it (which is javaScriptEmbedControl). Here's some additional information about it:

www.sitefinity.com/.../configuring-the-java-script-widget

Another option would be to use a ResourseLinks control:

www.sitefinity.com/.../resourcelinks-control

Here's an example on how to add a google Map to a widget template:

<%@ Register TagPrefix="sf" Namespace="Telerik.Sitefinity.Web.UI.ContentUI" Assembly="Telerik.Sitefinity" %>

<%@ Register TagPrefix="sf" Namespace="Telerik.Sitefinity.Web.UI.Comments" Assembly="Telerik.Sitefinity" %>

<%@ Register TagPrefix="sf" Namespace="Telerik.Sitefinity.Web.UI" Assembly="Telerik.Sitefinity" %>

<%@ Register TagPrefix="sf" Namespace="Telerik.Sitefinity.Web.UI.PublicControls.BrowseAndEdit" Assembly="Telerik.Sitefinity" %>

<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>

<script src="http://maps.google.com/maps?file=api&v=2&key=Paste the GOOGLE MAPS API key here"

type="text/javascript"></script>

<script type="text/javascript">

//<![CDATA[

function load()

if (GBrowserIsCompatible())

var map = new GMap2(document.getElementById("map"));

map.addControl(new GLargeMapControl());

var MapTypes = map.getMapTypes();

MapTypes[0].getName= function() return "text 1";

MapTypes[1].getName = function() return "text 2";

MapTypes[2].getName = function() return "text 3";

map.addControl(new GMapTypeControl());

map.setCenter(new GLatLng(52.173931692568, 18.8525390625), 6);

var marker = new GMarker(new GLatLng(52.173931692568, 18.8525390625));

map.addOverlay(marker);

//]]>

</script>

<div>

<div id="map" style=

"width: 790px; height: 450px; background: url(http://geofinder.web4you.com.pl/template/loader.gif); background-repeat: no-repeat; background-position: center;"

></div>

<div style="padding-top:10px; text-align: right; width: 790px;"><a href="http://geofinder.web4you.com.pl">

<img src="http://geofinder.web4you.com.pl/geofinder1.gif" alt="Geofinder Google Maps generator" border="0" width="80" height="15"></a></div>

</div>

<telerik:RadListView ID="NewsList" ItemPlaceholderID="ItemsContainer" runat="server" EnableEmbeddedSkins="false" EnableEmbeddedBaseStylesheet="false">

<LayoutTemplate>

<sf:ContentBrowseAndEditToolbar ID="MainBrowseAndEditToolbar" runat="server" Mode="Add"></sf:ContentBrowseAndEditToolbar>

<ul class="sfnewsList sfnewsListTitleDateContent">

<asp:PlaceHolder ID="ItemsContainer" runat="server" />

</ul>

</LayoutTemplate>

<ItemTemplate>

<li class="sfnewsListItem">

<h2 class="sfnewsTitle">

<sf:DetailsViewHyperLink ID="DetailsViewHyperLink1" TextDataField="Title" ToolTipDataField="Description" runat="server" />

</h2>

<div class="sfnewsAuthorAndDate">

<asp:Literal ID="Literal2" Text="<%$ Resources:Labels, By %>" runat="server" />

<sf:PersonProfileView ID="PersonProfileView1" runat="server" />

<sf:FieldListView ID="PostDate" runat="server" Format=" | PublicationDate.ToLocal():MMM dd, yyyy" />

</div>

<sf:FieldListView ID="NewsContent" runat="server" Text="0" Properties="Content" WrapperTagName="div" WrapperTagCssClass="sfnewsContent" />

<sf:CommentsBox ID="itemCommentsLink" runat="server" CssClass="sfnewsCommentsCount"/>

<sf:ContentBrowseAndEditToolbar ID="BrowseAndEditToolbar" runat="server" Mode="Edit,Delete,Unpublish"></sf:ContentBrowseAndEditToolbar>

</li>

</ItemTemplate>

</telerik:RadListView>

<sf:Pager id="pager" runat="server"></sf:Pager>

<asp:PlaceHolder ID="socialOptionsContainer" runat="server" />

Place this source on a new web user control under the following row:

<%@ Control Language="C#" ....... %>

Change the script. Paste the GOOGLE MAPS API key there.

NOTE ! The Google Maps key is generated individually for each domain. Pasting below code into your web page will not give an expected result unless line 6 does not contain the code that is generated after registration on http://www.google.com/apis/maps/signup.html.
The only condition to use the script generated by GeoFinder is to publish the information about source of the script along with the link to this page. The script has already attached banner with the link.

Then register the control.

The map is not yet working with only changes to the widget template.
I needed to change the HTML output of the page to add on-load to the page to load the map script.
Add JavaScript widget to the page and write the source code bellow. On the JavaScript widget select the radio button option "before the closing body tag".

$(document).ready(function()

var MapDiv=document.getElementById("map");

var myLatlng = new google.maps.LatLng(38.899501, -77.031656);

var myOptions =

zoom: 8,

center: myLatlng,

var map = new google.maps.Map(MapDiv, myOptions);

)

$('body').attr("onload","load()");

I have used this sample.

Regards,
Jen Peleva
the Telerik team

Do you want to have your say in the Sitefinity development roadmap? Do you want to know when a feature you requested is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items

Posted by Community Admin on 12-Nov-2012 00:00

Keep in mind both resourcelinks and the javascript embed control with yield endless frustrating and random results...

Posted by Community Admin on 14-Feb-2013 00:00

Hey Jen thanks for that example! I'm not sure what to put for the <%@ Control Language="C#" ....... %> part. What needs to go where you've put ..........? And will this automatically get updated when I update to the latest version of Sitefinity?

Thanks!

Posted by Community Admin on 19-Feb-2013 00:00

Hi Richard,

By thies I simply meant to create a new user controls, and since the upper line is auto generated when you create a new ascx file in VS, I put .......

Kind regards,
Jen Peleva
the Telerik team

This thread is closed

All Replies