[CLOSED] Label Separator - change Default

  1. #1

    [CLOSED] Label Separator - change Default

    Good Evening
    I would like to change the Default Separator ':' on FieldLabels for the whole Window the Labels are placed.

    Can I do this ?

    Kind Regards
    Peter
    Last edited by Daniil; Jun 06, 2013 at 4:34 AM. Reason: [CLOSED]
  2. #2
    What about the following code
    protected void Page_Load(object sender, EventArgs e)    
    {        
         if (!X.IsAjaxRequest)        
    	 {
        	 foreach (Field field in ControlUtils.FindControls<Field>(Window1))
    		 {                 
    		       field.LabelSeparator = "-";
             }
    	 }
    }
  3. #3

    How can I replace default label separator used in FormPanelFor (:)

    How can i overwrite the label separator used when calling FormPanelFor for creating model support forms
  4. #4
    Hi @iskrazvezda,

    Welcome to the Ext.NET forums!

    Example
    @(Html.X().FormPanelFor(m => m)
        .FieldDefaults(defaults => defaults.LabelSeparator = "*")
    )
    To define a custom label separator to a specific field please use a Field attribute for the Model's property:
    [Field(LabelSeparator = "*")]
    public string Name { get; set; }
  5. #5

    Replace all separator

    Thank you @Daniil

    I found your solution quite neat and understandable, i think it's the way to go when you are aware of all FormPanel instances

    I also tried a client side approach, I noticde that I could redefine the separator used on all fields of all views (which was my intention of quickfix):

    Ext.form.field.Base.prototype.labelSeparator = "";
    It has to be executed before any of the desired targets render (i put on my layout page headers script section).

    As I was trying to mark required fields I also evaluated using sequences for the afterRender event handler e,g:

    Ext.FormPanel.prototype.afterRender = Ext.Function.createSequence(Ext.FormPanel.prototype.afterRender, function () {
    
    		        $(".x-form-required-field", "#" + this.id).each(function (index, elem)
    		        {
    		            $("label[for='" + elem.id + "'] .x-form-item-label-inner").append('<em style="color:red">*</em>');
    		        });
    
    		    }
    One of the disadvantages of this approach is that it's "markup" dependent and it could be difficult to manage exceptions although some flags attributes may be used to handle special cases and over-runs.
  6. #6
    As for marking field with asterisk, you might be interested to review the FieldIndicator functionality.
    https://examples2.ext.net/#/Form/Fie...cator/Overview

    Though, it doesn't allow to put an indicator where you put it with the afterRender approach.

    As for the afterRender approach, personally I would replace it with this one. It has a few benefits.

    1. Better performance. It doesn't traverse and modify already rendered DOM objects.
    2. It is not markup-dependent.
    3. It will work if you change a FieldLabel on the fly without re-executing the logic.

    The test case work with Ext.NET v2 and v3.

    Example
    <%@ Page Language="C#" %>
    
    <!DOCTYPE html>
    <html>
    <head runat="server">
        <title>Ext.NET v3 Example</title>
    
        <script>
            Ext.form.field.Base.override({
                initComponent: function () {
                    this.callParent(arguments);
    
                    if (this.allowBlank === false && this.fieldLabel) {
                        this.labelSeparator += '<em style="color:red">*</em>';
                    }
                }
            });
        </script>
    </head>
    <body>
        <form runat="server">
            <ext:ResourceManager runat="server" />
    
            <ext:FormPanel runat="server">
                <Items>
                    <ext:TextField ID="TextField1" runat="server" AllowBlank="false" FieldLabel="1" />
                    <ext:TextField runat="server" AllowBlank="true" FieldLabel="2" />
                    <ext:TextField runat="server" AllowBlank="false" FieldLabel="3" />
                </Items>
            </ext:FormPanel>
        </form>
    </body>
    </html>
  7. #7

    Works

    That's a good approach to customize components at initialization.

    Thank you.

Similar Threads

  1. Replies: 4
    Last Post: Jul 25, 2013, 8:51 AM
  2. [CLOSED] Label and LinkButton Doesn't seem to have a default font
    By nhg_itd in forum 1.x Legacy Premium Help
    Replies: 2
    Last Post: Oct 03, 2011, 3:52 AM
  3. [CLOSED] Is it possible to change default calendar colors?
    By rnachman in forum 1.x Legacy Premium Help
    Replies: 4
    Last Post: Sep 12, 2011, 5:56 PM
  4. How to change HtmlEditor default color.
    By speedstepmem3 in forum 1.x Help
    Replies: 3
    Last Post: Sep 29, 2009, 7:12 AM
  5. How to change default font of HTML Editor
    By VietView in forum 1.x Help
    Replies: 0
    Last Post: Mar 25, 2009, 8:22 AM

Posting Permissions