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

Forums / Developing with Sitefinity / MVC Widget / Designer with RadDateTimePicker to select public properties

MVC Widget / Designer with RadDateTimePicker to select public properties

2 posts, 0 answered
  1. Chip
    Chip avatar
    14 posts
    Registered:
    25 Nov 2013
    01 Jul 2014
    Link to this post

    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 (https://www.youtube.com/watch?v=7YMCjfJW1m0). 

    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);
                }
            }
     
            #endregion

     I 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();
        },

     


  2. Nikola Zagorchev
    Nikola Zagorchev avatar
    424 posts
    Registered:
    24 Nov 2016
    02 Jul 2014
    Link to this post
    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();
        },

    I suppose this line should use the datetime property of the ControlData, not 'value':
    jQuery(this.get_presaleBegin).set_selectedDate(value);

    Hope this helps.

    Regards,
    Nikola Zagorchev
    Telerik
     
    Do you want to have your say in the Sitefinity development roadmap? Do you want to know when a feature you requested is added or when a bug fixed? Explore the Telerik Sitefinity CMS Ideas&Feedback Portal and vote to affect the priority of the items
     
2 posts, 0 answered