+1-888-365-2779
Try Now
More in this section

Forums / Developing with Sitefinity / PagesSelector in a FieldControl

PagesSelector in a FieldControl

3 posts, 1 answered
  1. Merritt
    Merritt avatar
    31 posts
    Registered:
    11 Mar 2011
    10 May 2015
    Link to this post

    I am trying to create a custom field control for related data pointing to pages. I want to use the built in page selector but I also need to customize it a bit to allow for additional functionality, namely creating a new page. I have gone through: Page Selector in custom field and got it working, but it doesn't work like the built-in field control for page selection. 

    So I have been trying to leverage PagesSelector, but I am bit confused on how to hook up the value:

    protected virtual Telerik.Sitefinity.Web.UI.PagesSelector PageSelector
    {
        get
        {
            return this.Container.GetControl<Telerik.Sitefinity.Web.UI.PagesSelector>("pageSelector", true);
        }
    }
     
    [TypeConverter(typeof(ObjectStringConverter))]
    public override object Value
    {
        get
        {
            return (string) this.PageSelector.Value;
        }
        set
        {
            this.PageSelector.Value = (string) value;
        }
    }

    In this example, the Value field doesn't exist and looking through the list of properties I can't quite determine what to replace it with.

    As a quick side note, I already got it working with the PageField, as is described in this post: Page Selector in custom field

     

  2. Merritt
    Merritt avatar
    31 posts
    Registered:
    11 Mar 2011
    10 May 2015
    Link to this post

    Well that wasn't what I was looking for: that control just shows the page selector view: I am assuming I need to use RelatedDataField instead.

    <sf2:RelatedDataField runat="server" AllowMultipleSelection="false" RelatedDataType="Telerik.Sitefinity.Pages.Model.PageNode"
    RelatedDataProvider="OpenAccessDataProvider" DataFieldName="Page" DisplayMode="Write" />

    This, however, gives me a non-functioning control, as seen attached: So I guess my question is how to get a RelatedDataField for a page working in a custom field control?
  3. Merritt
    Merritt avatar
    31 posts
    Registered:
    11 Mar 2011
    10 May 2015
    Link to this post

    I found a solution:

    • Create a child class of RelatedDataField

    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Web;
    using Telerik.Sitefinity.Localization;
    using Telerik.Sitefinity.ModuleEditor;
    using Telerik.Sitefinity.Web.UI;
    using Telerik.Sitefinity.Web.UI.Fields;
    using Telerik.Sitefinity.Web.UI.Fields.Config;
     
    namespace SitefinityWebApp.Custom
    {
        [FieldDefinitionElement(typeof(RelatedDataFieldDefinitionElement))]
        public class MyRelatedDataField : RelatedDataField
        {
            public override string LayoutTemplatePath
            {
                get
                {
                    return "~/Custom/MyRelatedDataField.ascx";
                }
                set
                {
                    base.LayoutTemplatePath = value;
                }
            }
        }
    }

    • Create your own template: this seems tricky but you can just decompile the assemblies to get to the resources and copy over what they have for Telerik.Sitefinity.Resources.Templates.Fields.RelatedDataField.ascx

    <%@ Control Language="C#" %>
    <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
    <%@ Register Assembly="Telerik.Sitefinity" Namespace="Telerik.Sitefinity.Web.UI" TagPrefix="sf" %>
    <%@ Register Assembly="Telerik.Sitefinity" Namespace="Telerik.Sitefinity.Web.UI.PublicControls" TagPrefix="sf" %>
    <%@ Register Assembly="Telerik.Sitefinity" Namespace="Telerik.Sitefinity.Web.UI.PublicControls.InlineEditing" TagPrefix="sf" %>
     
    <sf:ResourceLinks ID="kendoStyles" runat="server" UseEmbeddedThemes="True" Theme="Default">
        <sf:ResourceFile Name="Telerik.Sitefinity.Resources.Scripts.Kendo.styles.kendo_common_min.css" Static="True" />
        <sf:ResourceFile Name="Telerik.Sitefinity.Resources.Scripts.Kendo.styles.kendo_metro_min.css" Static="true" />
        <sf:EmbeddedResourcePropertySetter Name="Telerik.Sitefinity.Resources.Themes.Default.Images.Loadings.sfLoadingData.gif"
            Static="true" ControlID="loadingImage" ControlPropertyName="ImageUrl" />
    </sf:ResourceLinks>
     
    <sf:ResourceLinks ID="resourcesLinks" runat="server" UseEmbeddedThemes="True" Theme="Default">
        <sf:ResourceFile JavaScriptLibrary="JQuery" />
        <sf:ResourceFile Name="Telerik.Sitefinity.Resources.Scripts.Kendo.kendo.web.min.js" Static="True" />
        <sf:ResourceFile Name="Telerik.Sitefinity.Resources.Scripts.RequireJS.require.min.js" Static="True" />
        <sf:ResourceFile Name="Telerik.Sitefinity.Resources.Scripts.JSON2.js" />
    </sf:ResourceLinks>
     
     
    <sf:ResourceLinks ID="relatedDataResourceLinks" runat="server">
        <sf:ResourceFile Name="Styles/Tabstrip.css" />
        <sf:ResourceFile Name="Styles/Grid.css" />
    </sf:ResourceLinks>
     
    <sf:SitefinityLabel ID="titleLabel" runat="server" CssClass="sfTxtLbl" />
    <sf:SitefinityLabel ID="errorMessageLabel" runat="server" CssClass="sfFailure" />
    <asp:Panel runat="server" ID="fieldBodyWrapper">   
        <div id="relatedDataFieldContainer">
            <p class="sfNeutral" data-bind="visible: isDuplicateMode">
                <asp:Literal  id="duplicationNoteLabel" runat="server" Text="<%$Resources:ModuleEditorResources, DuplicateItemNote %>" />
            </p>
     
            <sf:SitefinityLabel id="descriptionLabel" runat="server" WrapperTagName="div" HideIfNoText="true" CssClass="sfDescription" />
             
            <div id="relatedDataSelectorWindow"></div>
            <div id="relatedDataGridContainer"></div>
            <div id="relatedDataLoadingContainer">
                <sf:SfImage ID="loadingImage" runat="server" AlternateText="" />
            </div>
            <a data-bind="invisible: hideSelectButton, click: openRelatedDataSelector" class="sfLinkBtn sfChange sfMTop10">
                <span class="sfLinkBtnIn"><asp:Literal ID="addOrSelectRelatedDataLabel" runat="server" Text="<%$Resources:ModuleEditorResources, SelectRelatedDataButton %>" /></span>
            </a>
        </div>
    </asp:Panel>

    • Now you need to hook this up in the configuration, wherever you need to use it. If you are leveraging it with a Dynamic Content Type, you can just search for RelatedDataField in DynamicModulesConfig.config and replace it accordingly. For example:

    <field frontendWidgetLabel="Related Page" frontendWidgetVirtualPath="inline" relatedDataType="Telerik.Sitefinity.Pages.Model.PageNode" relatedDataProvider="OpenAccessDataProvider" allowMultipleSelection="False" id="PageControl" dataFieldName="Page" displayMode="Write" wrapperTag="Li" title="Related Page" fieldType="SitefinityWebApp.Custom.MyRelatedDataField, SitefinityWebApp" cssClass="sfFormSeparator" fieldName="Page" type:this="Telerik.Sitefinity.Web.UI.Fields.Config.RelatedDataFieldDefinitionElement, Telerik.Sitefinity">
                                    <validator expectedFormat="None" maxLength="0" minLength="-1" regularExpression="^(.{0,})?$" required="False" maxLengthViolationMessage="The input is too long" messageCssClass="sfError" minLengthViolationMessage="The input is too short" validateIfInvisible="True" />
                                    <expandableDefinition expanded="True" />
                                </field>

     There's like four instances to replace, I think one for each "view"

     

    So this will give you a way to use the built-in related data control and modify it for additional functionality; like having a Create Page button!

     

    Answered
3 posts, 1 answered