More in this section

Forums / Developing with Sitefinity / Accessing static text along with Image Selector in custom widget

Accessing static text along with Image Selector in custom widget

6 posts, 0 answered
  1. Russell
    Russell avatar
    15 posts
    Registered:
    23 Sep 2011
    21 May 2012
    Link to this post
    Following the code from Josh Morales' post on creating widgets, I am trying to create a widget to show a series of text boxes as well as an equal amount of image selectors.  For reasons unknown, I can get the image selectors to work no problem, but I cannot retrieve any of the text from the widget designer.  This appears to be very straight forward, but doesn't work.  I have traced using the Chrome javascript console and the designer field is never accessed.  The code attached is a modified version of Josh's Fields Widget.
    01.SitefinityWebApp.Custom.Widgets.FieldsWidgetControl.FieldsWidgetDesigner.prototype = {
    02.    initialize: function () {
    03.        SitefinityWebApp.Custom.Widgets.FieldsWidgetControl.FieldsWidgetDesigner.callBaseMethod(this, 'initialize');
    04.    },
    05.    dispose: function () {
    06.        SitefinityWebApp.Custom.Widgets.FieldsWidgetControl.FieldsWidgetDesigner.callBaseMethod(this, 'dispose');
    07.    },
    08.    refreshUI: function () {
    09.        var data = this._propertyEditor.get_control();
    10.        //Get text
    11.        jQuery("#StuffSelector").val(data.TestText);
    12.        
    13.        this.resizeEvents();
    14. 
    15.         
    16. 
    17.        // load image src
    18.        var i = this.get_ImageSelector();
    19.        i.set_value(data.SelectedImageSrc);
    20. 
    21.        // load selected page
    22.        var p = this.get_PageSelector();
    23.        var pageid = data.SelectedPageID;
    24.        if (pageid) p.set_value(pageid);
    25. 
    26.        // load tags
    27.        var t = this.get_TagsSelector();
    28.        var tags = data.TagValue;
    29.        if (tags != null)
    30.            t.set_value(data.TagValue.split(","));
    31. 
    32.        // load categories
    33.        var c = this.get_CategoriesSelector();
    34.        var cats = data.CategoryValue;
    35.        if (cats != null)
    36.            c.set_value(data.CategoryValue.split(","));
    37.    },
    38.    applyChanges: function () {
    39. 
    40. 
    41.        // save selected page
    42.        var controlData = this._propertyEditor.get_control();
    43.        controlData.TestText = jQuery("#StuffSelector").val();
    44. 
    45.        controlData.SelectedPageID = this.get_PageSelector().get_value();
    46. 
    47.         
    48. 
    49.        // save selected image
    50.        var i = this.get_ImageSelector();
    51.        controlData.SelectedImageSrc = i.get_value();
    52. 
    53.        // save selected tags
    54.        var t = this.get_TagsSelector();
    55.        var tags = t.get_value();
    56.        if (tags != null)
    57.            controlData.TagValue = t.get_value().join();
    58. 
    59.        // save selected categories
    60.        var c = this.get_CategoriesSelector();
    61.        var cats = c.get_value();
    62.        if (cats != null)
    63.            controlData.CategoryValue = c.get_value().join();
    64.    },
    My designer is the same as Josh's, with the exception of the text field, and the Fieldswidget.cs is the same, but with the string field added in:
    01.private string testText = "This is STUFF";
    02.         
    03. /// <summary>
    04./// Gets or sets the url to the selected image
    05./// </summary>
    06./// <value>
    07./// The selected image url.
    08./// </value>
    09.public string SelectedImageSrc { get; set; }
    10. 
    11. public string TestText
    12. {
    13.      get { return testText; }
    14.      set { testText = value; }
    15. }


  2. Nick
    Nick avatar
    18 posts
    Registered:
    19 Jul 2012
    25 May 2012
    Link to this post
    Hi Russell,

    Could you post a copy of the HTML in your 2 ascx files?

    Cheers,
    Nick


  3. Russell
    Russell avatar
    15 posts
    Registered:
    23 Sep 2011
    25 May 2012
    Link to this post
    FieldsWidget.aspx
    01.<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="FieldsWidget.ascx.cs" Inherits="SitefinityWebApp.Custom.Widgets.FieldsWidgetControl.FieldsWidget" %>
    02. 
    03.<h1>Sitefinity Fields</h1>
    04.<p><asp:HyperLink ID="PageLink" runat="server" /></p>
    05.<p><asp:Image ID="Thumbnail" runat="server"  /></p>
    06.<p>Stuff:<asp:Literal ID="Text" runat="server" /></p>
    07. 
    08.<h2>Categories</h2>
    09.<asp:Repeater ID="CategoriesRepeater" runat="server">
    10.    <HeaderTemplate><ul></HeaderTemplate>
    11.    <ItemTemplate>
    12.        <li><%# Container.DataItem %></li>
    13.    </ItemTemplate>
    14.    <FooterTemplate></ul></FooterTemplate>
    15.</asp:Repeater>
    16. 
    17.<h2>Tags</h2>
    18.<asp:Repeater ID="TagsRepeater" runat="server">
    19.    <HeaderTemplate><ul></HeaderTemplate>
    20.    <ItemTemplate
    21.        <li><%# Container.DataItem %></li>
    22.    </ItemTemplate>
    23.    <FooterTemplate></ul></FooterTemplate>
    24.</asp:Repeater>
    FieldsWidgetTemplate
    01.<%@ Control Language="C#" %>
    02.<%@ Register Assembly="Telerik.Sitefinity" Namespace="Telerik.Sitefinity.Web.UI.Fields" TagPrefix="sf" %>
    03.<sitefinity:FormManager ID="formManager" runat="server" />
    04. 
    05.<!-- show the image preview as a thumbnail -->
    06.<style type="text/css">
    07.    #Options li img
    08.    {
    09.        height: 50px !important;
    10.        margin: 5px 5px 5px 0px;
    11.    }
    12.</style>
    13. 
    14.<div class="sfContentViews">
    15.    <div id="Options">
    16.        <div>
    17.            <div id="groupSettingPageSelect">
    18.                <ul class="sfTargetList">
    19.                    <li>
    20.                        <label class="sfTxtLbl">
    21.                            Type in some STUFF:</label>
    22.                        <asp:TextBox ID="StuffSelector" runat="server" />
    23.                    </li>
    24.                    <li>
    25.                        <label class="sfTxtLbl">
    26.                            Select A Page:</label>
    27.                        <sf:PageField ID="PageSelector" runat="server" WebServiceUrl="~/Sitefinity/Services/Pages/PagesService.svc/" DisplayMode="Write" />
    28.                    </li>
    29.                    <li>
    30.                        <label class="sfTxtLbl">
    31.                            Select An Image:</label>
    32.                        <sitefinity:ImageField ID="ImageSelector" runat="server" DisplayMode="Write" UploadMode="Dialog" DataFieldName="Image" />
    33.                    </li>
    34.                    <li>
    35.                        <label class="sfTxtLbl">
    36.                            Category:</label>
    37.                        <sitefinity:HierarchicalTaxonField ID="CategoriesSelector" runat="server" DisplayMode="Write" Expanded="false" ExpandText="ClickToAddCategories"
    38.                            ShowDoneSelectingButton="true" AllowMultipleSelection="true" BindOnServer="false" TaxonomyMetafieldName="Category" WebServiceUrl="~/Sitefinity/Services/Taxonomies/HierarchicalTaxon.svc" />
    39.                    </li>
    40.                    <li>
    41.                        <sitefinity:FlatTaxonField ID="TagsSelector" runat="server" DisplayMode="Write" WebServiceUrl="~/Sitefinity/Services/Taxonomies/FlatTaxon.svc/cb0f3a19-a211-48a7-88ec-77495c0f5374"
    42.                            TaxonomyMetafieldName="Tags" AllowMultipleSelection="true" Expanded="false" Title="Tags" />
    43.                    </li>
    44.                </ul>
    45.            </div>
    46.        </div>
    47.    </div>
    48.</div>
  4. MB
    MB avatar
    302 posts
    Registered:
    09 Jan 2005
    25 May 2012
    Link to this post
    I suspect that the problem may be that you are using <asp:textbox> as the UI element.

    ASP.Net has almost certainly changed the ID at the client to reflect the NamingContainer structure, and so your jQuery #id reference is wrong. You would need to pass/fetch a reference to the ClientID to make that work.

    Try changing it to  <input type="text" id="StuffSelector" />

    ASP.Net should render that as-is, and your jQuery reference will be valid. You can style it using class="sfTxt" etc etc to conform to Sitefinity admin UI.
  5. Russell
    Russell avatar
    15 posts
    Registered:
    23 Sep 2011
    30 May 2012
    Link to this post
    Good try, but the ID still gets changed:
    <input name="propertyEditor$ctl00$ctl00$ctl00$ctl00$ctl00$StuffSelector" type="text" id="propertyEditor_ctl00_ctl00_ctl00_ctl00_ctl00_StuffSelector">

    This actually conforms to the same pattern as the other controls:
    <a onclick="return false;" id="propertyEditor_ctl00_ctl00_ctl00_ctl00_ctl00_PageSelector_ctl00_ctl00_openSelector" class="sfLinkBtn sfChange" href="javascript:__doPostBack('propertyEditor$ctl00$ctl00$ctl00$ctl00$ctl00$PageSelector$ctl00$ctl00$openSelector','')">
        <strong class="sfLinkBtnIn">Select a page</strong>
    </a>
    If I look at the simple Hello World example, it doesn't have the same modified ID:
    <span id="propertyEditor_ctl00_ctl00_ctl00"><div>
        <span>Your name:</span><br>
        <input type="text" id="txtName">
    </div></span>
    So, this begs the question, what is causing the other code to change its ID?
  6. MB
    MB avatar
    302 posts
    Registered:
    09 Jan 2005
    30 May 2012
    Link to this post
    I've not seen that behaviour before - none of my own designers behave that way.

    Normally, asp.net does not mung the id on standard html elements (i.e. no runat="server") or if clientidmode="static" is specified on a server control.
6 posts, 0 answered