Page Selector for RC changed CSS in 4.0?

Posted by Community Admin on 22-Jan-2011 00:00

Hey folks,

I just upgraded my RC project (build 1030) to the final release (build 1098) and noticed that the code sample used in this post to place a page selector on a custom template (using the News Rotator project) is no longer working for me. My page selector window doesn't show any of the page titles. However, you can click on the empty spaces and get real page values. It's like all the fonts are now white on white.

Did something change between the builds that affected this?

Help is appreciated. I'm sure it's some minor tweak somewhere to the sample code you provided or a project change here.

On a side note, I have to say that the release version's dashboard looks even better than RC. Nice work.

Thanks.

- William

P.S. I should note that this happens in IE7 and Firefox 3 both. It was working before the upgrade, I did nothing to change the files but upgrade, and now I'm experiencing the problem. Styling is obviously being included as the designer is showing the effects of the CSS.

Posted by Community Admin on 26-Jan-2011 00:00

Hi WilliamCooper,

Can you please check if the empty spaces are coming from pages that are not published or are set as not to show in navigation? I am running this on an upgraded project (a project which has been upgraded with every Sitefinity 4.0 version) and not able to reproduce the issue with the page selector? Also do have the same problems when you try to use the page selector in the Navigation widget when you choose to make a custom selection of pages?

Kind regards,
Radoslav Georgiev
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about 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 27-Jan-2011 00:00

Hi Radoslav,

Yes, all those pages were published. Actually my steps were....

1. Look at that control and notice it is working.
2. Upgrade to the 1098 build.
3. Look at that control and notice that it is not working.

Nothing happened in-between. It's very odd. I'll check in with the navigation page selector control and see if I'm seeing the same problem. In terms of the code i'm using, it's an exact download from the post I referenced. Happens in IE7, Firefox3, Chrome, etc.

Thanks much. I'll post again when I've investigated more, but please let me know if you have any other notions of what might be going on. I'll do some troubleshooting on my end.

- William

Posted by Community Admin on 27-Jan-2011 00:00

Hello again Radoslav,

Well, oddly, the Navigation page selector (in the Navigation widget) works perfectly. What's more, the layout it is using (with lines) is different from the layout used in the News Rotator sample. It actually looks much better in the Navigation widget than it did when the News Rotator sample was working well.

Meanwhile, my News Rotator widget continues to not show any pages. If you are looking at the sample you provided (linked above) and it looks fine on your end, I'm not sure where else to go with the issue. I'll keep seeing if I can make it work, but if you have any other suggestions in what might be happening, I'd appreciate it.

I'm including a screen cap here so you see what I'm seeing.

Thanks

- William

Posted by Community Admin on 28-Jan-2011 00:00

In trying to solve this further, I created a much simpler designer based on your example and am experiencing the same problem. I thought I'd include the code here, but I'm not entirely sure that will help.

SelectorControlDesignerTemplate.ascx

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

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

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

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

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

<telerik:RadWindowManager ID="windowManager" runat="server"

Height="100%"

Width="100%"

Behaviors="None"

Skin="Sitefinity"

ShowContentDuringLoad="false"

VisibleStatusBar="false">

<Windows>

<telerik:RadWindow ID="widgetEditorDialog" runat="server" Height="100" Width="100" ReloadOnShow="true" Behaviors="Close" Modal="true" />

</Windows>

</telerik:RadWindowManager>

<div id="selectorTag" style="display: none;" class="sfDesignerSelector">

<designers:PageSelector runat="server" id="selector"/>

</div>

<asp:LinkButton runat="server" ID="pageSelectButton" OnClientClick="return false;" CssClass="sfLinkBtnIn">Select Page</asp:LinkButton>

<input type="text" id="PageSelectionValue" />

SelectorControlDesigner.cs

using System.Collections.Generic;

using System.Web.UI;

using System.Linq;

using Telerik.Sitefinity.Web.UI.ControlDesign;

using Telerik.Web.UI;

using Telerik.Sitefinity.Web.UI.Fields;

using System.Web.UI.WebControls;

namespace TestAppCustomControls

public class SelectorControlDesigner : ControlDesignerBase

protected override void InitializeControls(Telerik.Sitefinity.Web.UI.GenericContainer container)

//throw new System.NotImplementedException();

base.DesignerMode = ControlDesignerModes.Simple;

protected override string LayoutTemplateName

get

return "TestAppCustomControls.Resources.SelectorControlDesignerTemplate.ascx";

public override IEnumerable<ScriptDescriptor> GetScriptDescriptors()

var scriptDescriptors = new List<ScriptDescriptor>(base.GetScriptDescriptors());

var desc = (ScriptControlDescriptor)scriptDescriptors.Last();

// Page Selector

desc.AddElementProperty("pageSelectButton", this.PageSelectButton.ClientID);

desc.AddComponentProperty("pageSelector", this.PageSelector.ClientID);

return scriptDescriptors.ToArray();

public override IEnumerable<System.Web.UI.ScriptReference> GetScriptReferences()

var res = new List<ScriptReference>(base.GetScriptReferences());

var assemblyName = this.GetType().Assembly.GetName().ToString();

res.Add(new ScriptReference("TestAppCustomControls.Resources.SelectorControlDesigner.js", assemblyName));

return res.ToArray();

/// <summary>

/// Gets a reference to the page select button

/// </summary>

// Page Selector add

protected LinkButton PageSelectButton

get

return Container.GetControl<LinkButton>("pageSelectButton", true);

/// <summary>

/// Gets a reference to the page selector

/// </summary>

// Page Selector add

protected PageSelector PageSelector

get

return Container.GetControl<PageSelector>("selector", true);

/// <summary>

/// Gets the correct instance of the RadWindowManager class

/// </summary>

// Page Selector add

protected virtual RadWindowManager RadWindowManager

get

return this.Container.GetControl<RadWindowManager>("windowManager", true);

SelectorControlDesigner.js

Type.registerNamespace("TestAppCustomControls");

TestAppCustomControls.SelectorControlDesigner = function (element)

TestAppCustomControls.SelectorControlDesigner.initializeBase(this, [element]);

// Page Selector begin

this._parentDesigner = null;

this._googleAnalyticsCodeTextField = null;

this._scriptEmbedPositionChoiceField = null;

this._toogleGroupSettingsDelegate = null;

this._pageSelectButton = null;

this._pageSelector = null;

this._radWindowManager = null;

this._showPageSelectorDelegate = null;

this._pageSelectedDelegate = null;

// Page selector addition end

TestAppCustomControls.SelectorControlDesigner.prototype =

initialize: function ()

TestAppCustomControls.SelectorControlDesigner.callBaseMethod(this, 'initialize');

// Page Selector begin

this._toogleGroupSettingsDelegate = Function.createDelegate(this, function ()

dialogBase.resizeToContent();

);

this._showPageSelectorDelegate = Function.createDelegate(this, this._showPageSelector);

$addHandler(this._pageSelectButton, "click", this._showPageSelectorDelegate);

this._pageSelectedDelegate = Function.createDelegate(this, this._pageSelected);

this._pageSelector.add_doneClientSelection(this._pageSelectedDelegate);

//jQuery("#expanderDesignSettings").click(this._toogleDesignSettingsDelegate);

jQuery(".sfExpandableSection a").click(this._toogleGroupSettingsDelegate).click(function ()

$(this).parents(".sfExpandableSection:first").toggleClass("sfExpandedSection");

);

// Page selector end

,

dispose: function ()

TestAppCustomControls.SelectorControlDesigner.callBaseMethod(this, 'dispose');

,

refreshUI: function ()

var data = this._propertyEditor.get_control();

// Page Selector

jQuery("#PageSelectionValue").val(setValueForNull(data.PageURL));

,

applyChanges: function ()

var controlData = this._propertyEditor.get_control();

// Page Selector

controlData.PageURL = jQuery("#PageSelectionValue").val();

,

// Page Selection begin

get_controlData: function ()

var parent = this.get_parentDesigner();

if (parent)

var pe = parent.get_propertyEditor();

if (pe)

return pe.get_control();

alert('Control designer cannot find the control properties object!');

,

_pageSelected: function (items)

jQuery(this.get_element()).find('#selectorTag').hide();

if (items == null)

return;

var selectedItem = this.get_pageSelector().get_selectedPage();

if (selectedItem != null)

this.get_pageSelectButton().innerHTML = 'Change page';

jQuery("#PageSelectionValue").val(selectedItem.Id);

dialogBase.resizeToContent();

,

_showPageSelector: function ()

jQuery(this.get_element()).find('#selectorTag').show();

dialogBase.resizeToContent();

,

// gets the reference to the parent designer control

get_parentDesigner: function ()

return this._parentDesigner;

,

// sets the reference fo the parent designer control

set_parentDesigner: function (value)

this._parentDesigner = value;

,

// gets the reference to the propertyEditor control

get_propertyEditor: function ()

return this._propertyEditor;

,

// sets the reference fo the propertyEditor control

set_propertyEditor: function (value)

this._propertyEditor = value;

,

// get the reference to the button that opens page selector

get_pageSelectButton: function ()

return this._pageSelectButton;

,

// sets the reference to the button that opens page selector

set_pageSelectButton: function (value)

this._pageSelectButton = value;

,

// gets the reference to the page selector used to choose a page for showing the detail mode

get_pageSelector: function ()

return this._pageSelector;

,

// sets the reference to the page selector used to choose a page for showing the detail mode

set_pageSelector: function (value)

this._pageSelector = value;

,

get_radWindowManager: function ()

return this._radWindowManager;

,

set_radWindowManager: function (value)

if (this._radWindowManager != value)

this._radWindowManager = value;

// Page Selector end

TestAppCustomControls.SelectorControlDesigner.registerClass('TestAppCustomControls.SelectorControlDesigner', Telerik.Sitefinity.Web.UI.ControlDesign.ControlDesignerBase);

if (typeof (Sys) !== 'undefined') Sys.Application.notifyScriptLoaded();

function setValueForNull(in_value)

if (in_value==null)

return "";

else

return in_value;

Not sure that sheds any light on the issue at all, but figured at least this gives you exactly what I'm working with.

Again, thanks for all your help.

- William

Posted by Community Admin on 31-Jan-2011 00:00

Hi William,

Can you please try this control. It uses another page selector, It might resolve the issue. Also please check if your pages are published, and their Titles have been set.

Regards,
Radoslav Georgiev
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about 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 31-Jan-2011 00:00

Radoslav,

Fantastic! That fixed the problem and also gave me a much nicer page selector formatting block. Perfect. Thanks for saving the day on that one.

- William

This thread is closed

All Replies