Forms validation on control designers - Front- & Back-End Development - Front- & Back-End Development - Progress Community
 Front- & Back-End Development

Forms validation on control designers

  • Forms validation on control designers
  • Hi,

    I am using the RadRotator control designer, which was included with the NewsRotator Custom Control widget. If I want to make width a mandatory field, how can I do that? Is there a save method I should override and test if a value is null?
  • Hello Joseph,

    You have to use client side validation in the template of your designer or try validating the field you want inside your designer script. In Sitefinity 4.0 the ControlDesigner works with script reference to ContentViewDesignerBase.js. There are two public methods that you can use.

    refreshUI -  forces the designer to refresh the UI from the cotnrol Data
    applyChanges -  forces the designer to apply the changes on UI to the cotnrol Data


    All the best,
    Ivan Dimitrov
    the Telerik team

    Check out Telerik Trainer, the state of the art learning tool for Telerik products.
  • Thanks Ivan and Team.

    We are making quite a few custom widgets so we are very familiar w the applyChanges and refreshUI methods.

    I want to do form validation on the user's entries in the designer.  Obviously, if the designer does not pass the validation, I want to return the user to the designer*.  What do I do in applyChanges() to achieve this?  For everything I have tried so far, the app still goes to the edit-a-page screen.

    Thanks


    *giving the user guidance on how to correct the problems
  • Hello Phil,

    The easiest way is using FieldControls like TextField

    <sitefinity:TextField ID="txtFieldName" runat="server" DisplayMode="Write" Title="Test" CssClass="sfFormCtrl">
                    <ValidatorDefinition Required="true"
                                         ExpectedFormat="Custom"
                                         RegularExpression="^[a-zA-Z]+[\w#@]0,127"
                                         MessageCssClass="sfError" />
                </sitefinity:TextField>

    Best wishes,
    Ivan Dimitrov
    the Telerik team

    Check out Telerik Trainer, the state of the art learning tool for Telerik products.
  • When I try to wire up the validator the way that you most recently recommended I get an error, to the effect that, a FormManager is required on the page.  I think there are some missing pieces to your advice; maybe quite a few missing pieces.

    Could you please do one of these:
    1.) provide a complete example using the <ValidatorDefinition ... />  approach, or
    2.) provide an example using a <asp:RequiredFieldValidator .../>*  or
    3.) show me where the js function is that I can hijack.


    *I wired up an asp:RequiredFieldValidator and it throws the error text onto the designer screen the way that it should but it does not stop the postback.  So this is kinda close but I have no where to put the if(Page.IsValid)

  • Hello Phil,


    FormsManager is required when the TextField is set in write mode. The problem here is that forcing "CausesValidation" over Save button. So here is what you have to do

    - create delegate that is added on page load and cancel the changes before saving. You should read the value from the field you want to validate so you can return true or false inside
    cancelEventArgs.set_cancel(true)

       _beforeSaveChangesHandler: function (sender, cancelEventArgs)
            cancelEventArgs.set_cancel(true);


    Type.registerNamespace("Telerik.Sitefinity.Samples");
     
    Telerik.Sitefinity.Samples.SimpleViewCustomDesigner = function (element)
     
        // element
     
        this._pageLoadDelegate = null;
        this._beforeSaveChangesDelegate = null;
        Telerik.Sitefinity.Samples.SimpleViewCustomDesigner.initializeBase(this, [element]);
     
     
    Telerik.Sitefinity.Samples.SimpleViewCustomDesigner.prototype =
     
        initialize: function ()
            Telerik.Sitefinity.Samples.SimpleViewCustomDesigner.callBaseMethod(this, 'initialize');
     
            this._pageLoadDelegate = Function.createDelegate(this, this._pageLoadHandler);
              Sys.Application.add_load(this._pageLoadDelegate);
     
     
           
     
        ,
     
        dispose: function ()
            Telerik.Sitefinity.Samples.SimpleViewCustomDesigner.callBaseMethod(this, 'dispose');
     
            // ! here dispose the delegate
     
        ,
     
        /* --------------------------------- event handlers --------------------------------- */
     
        // Handles the page load event
        _pageLoadHandler: function ()
     
            this._beforeSaveChangesDelegate = Function.createDelegate(this, this._beforeSaveChangesHandler);
            this.get_propertyEditor().add_beforeSaveChanges(this._beforeSaveChangesDelegate);
     
        ,
     
            // the event is fired when the user choses save, before the data processing
          _beforeSaveChangesHandler: function (sender, cancelEventArgs)
            cancelEventArgs.set_cancel(true);
        ,
     
     
     
        /* ----------------------------- public methods ----------------------------- */
     
         
        refreshUI: function ()
             
        ,
     
        // forces the designer to apply the changes on UI to the cotnrol Data
        applyChanges: function ()
          
        
     
     
    Telerik.Sitefinity.Samples.SimpleViewCustomDesigner.registerClass('Telerik.Sitefinity.Samples.SimpleViewCustomDesigner', Telerik.Sitefinity.Web.UI.ControlDesign.ControlDesignerBase);
     
    if (typeof (Sys) !== 'undefined') Sys.Application.notifyScriptLoaded();



    We are going to prepare a blog post or documentation article about validation in the control designer.

    Best wishes,
    Ivan Dimitrov
    the Telerik team

    Check out Telerik Trainer, the state of the art learning tool for Telerik products.
  • Hi,

    I am trying to edit some of the font-sizes in one of the News List / Item templates, but keep
    getting: 

    asp:Literal ('System.Web.UI.WebControls.Literal'): cannot set attribute with name 'Font' to 'Medium'

    When tracking the CSS, it seems to be embedded so can change the CSS. What's the best way for me to
    mess around with the Font-Sizes?

    Many thanks,
    Andrei

  • sorry, figured it out. thanks