MVC Widget / Designer with RadDateTimePicker to select public properties
I have created an MVC widget with two public properties. The properties work fine until I try to change the PresaleBegin property to get user input from telerik:RadDateTimePicker. I have watched this video over and over to try to find my issue, but I cannot (www.youtube.com/watch
The MVC will load onto a page, but when I try to change the public properties through the interface nothing happens. The save button does not work at all.
My MVC Controller has two properties:
[
[Category("Production ID")] public int ProductionID get return this.productionID; set this.productionID = value;
[Category("Presale Date Begin")] public DateTime PresaleBegin get return this.presaleBegin; set this.presaleBegin = value; ]
I then use Sitefinity Thunder to create a Widget Designer. All works just fine until I change the ascx file to use telerik:RadDateTimePicker instead of a plain TextBox:
<div id="designerLayoutRoot" class="sfContentViews sfSingleContentView" style="max-height: 400px; overflow: auto;"> <ol> <li class="sfFormCtrl"> <asp:Label runat="server" AssociatedControlID="ProductionID" CssClass="sfTxtLbl">ProductionID</asp:Label> <asp:TextBox ID="ProductionID" runat="server" CssClass="sfTxt" /> <div class="sfExample">ProductionID</div> </li> <li class="sfFormCtrl"> <asp:Label runat="server" AssociatedControlID="PresaleBegin" CssClass="sfTxtLbl">PresaleBegin</asp:Label> <telerik:RadDateTimePicker ID="PresaleBegin" runat="server" CssClass="sfTxt" /> <div class="sfExample">Presale Begin</div> </li> </ol></div>Here are my Control references in the .cs file:
#region Control references /// <summary> /// Gets the control that is bound to the ProductionID property /// </summary> protected virtual Control ProductionID get return this.Container.GetControl<Control>("ProductionID", true); /// <summary> /// Gets the control that is bound to the PresaleBegin property /// </summary> protected virtual RadDateTimePicker PresaleBegin get return this.Container.GetControl<RadDateTimePicker>("PresaleBegin", true); #endregionI changed the descriptor in the .cs file as well from AddElementProperty to AddComponentProperty:
public override System.Collections.Generic.IEnumerable<System.Web.UI.ScriptDescriptor> GetScriptDescriptors() var scriptDescriptors = new List<ScriptDescriptor>(base.GetScriptDescriptors()); var descriptor = (ScriptControlDescriptor)scriptDescriptors.Last(); descriptor.AddElementProperty("productionID", this.ProductionID.ClientID); descriptor.AddComponentProperty("presaleBegin", this.PresaleBegin.ClientID); return scriptDescriptors; I believe the problem may be in the .js file. I have made the changes I thought were necessary:
/* Called when the designer window gets opened and here is place to "bind" your designer to the control properties */ refreshUI: function () var controlData = this._propertyEditor.get_control().Settings; /* JavaScript clone of your control - all the control properties will be properties of the controlData too */ /* RefreshUI ProductionID */ jQuery(this.get_productionID()).val(controlData.ProductionID); /* RefreshUI PresaleBegin */ jQuery(this.get_presaleBegin).set_selectedDate(value); , /* Called when the "Save" button is clicked. Here you can transfer the settings from the designer to the control */ applyChanges: function () var controlData = this._propertyEditor.get_control().Settings; /* ApplyChanges ProductionID */ controlData.ProductionID = jQuery(this.get_productionID()).val(); /* ApplyChanges PresaleBegin */ controlData.PresaleBegin = jQuery(this.get_presaleBegin).get_selectedDate(); ,
Hello Chip,
I see the you point out to a video for form field control and the client-side events are different for this type of control and widget designers. You might find useful this in our documentation and this video.
Could you please check if there are any javascript errors?
However, from the code you provided us with, I can see that there might be issues in the designer Javascript. Sample refreshUi/applyChanges functions:
/* Called when the designer window gets opened and here is place to "bind" your designer to the control properties */ refreshUI: function () var controlData = this._propertyEditor.get_control(); /* JavaScript clone of your control - all the control properties will be properties of the controlData too */ jQuery(this.get_message()).val(controlData.Message); this.get_dateTime().set_selectedDate(controlData.DateProp); , /* Called when the "Save" button is clicked. Here you can transfer the settings from the designer to the control */ applyChanges: function () var controlData = this._propertyEditor.get_control(); /* ApplyChanges Message */ controlData.DateProp= this.get_dateTime().get_dateInput().get_selectedDate(); ,jQuery(this.get_presaleBegin).set_selectedDate(value);