Accessing static text along with Image Selector in custom wi

Posted by Community Admin on 21-May-2012 00:00

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.

Posted by Community Admin on 25-May-2012 00:00

Hi Russell,

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

Cheers,
Nick

Posted by Community Admin on 25-May-2012 00:00

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.

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>

Posted by Community Admin on 25-May-2012 00:00

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.

Posted by Community Admin on 30-May-2012 00:00

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?

Posted by Community Admin on 30-May-2012 00:00

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.

This thread is closed

All Replies