TagField ReadOnly=true does not work

  1. #1

    TagField ReadOnly=true does not work

    I have to use the TagField in a read-only scenario, but this will not work. The tags are removeable with the "x".

    Here's a Test which doesn't work: (Testes with 4.12 and the current 4.5)

    <html>
    <body>
        <form runat="server">
            <ext:ResourceManager runat="server" />
            <ext:TagField
                runat="server"
                HideTrigger="true"
                Editable="false"
                ReadOnly="true">
                <Tags>
                    <ext:Tag Value="1" />
                    <ext:Tag Value="2" />
                </Tags>
                <Items>
                    <ext:Tag Value="1" Text="George" Icon="User" />
                    <ext:Tag Value="2" Text="Bob" Icon="UserAdd" />
                </Items>
            </ext:TagField>
        </form>
    </body>
    </html>
    Expected result: No "x" on the tags. User should not be able to remove one of the Tags

    Maybe there is a solution to supress the "x"? I found some hints at the Ext.js Forum that tag field readonly doesn't work in 2012 :-) Is this not fixed yet?
  2. #2
    Hello @rtic!

    It is more like this is not the feature of the tagfield, maybe. Because if you set the individual tags themselves as disabled, then you can't remove them. The disabled and readonly properties are just inherited from upper classes in the hierachy and was never really implemented, probably because it worked for individual tags being disabled (which has more flexibility) and people so far lived well with this way of making a tagfield read-only.

    I hope this helps!

    (in other words, add Disabled="true" in your lines 15 and 16)
    Fabrício Murta
    Developer & Support Expert
  3. #3

    Need some additional info

    Thanks for you quick answer. Now I've a problem Or let's say: End of knowledge...

    The TagField is filled via a store from a one to many relation, so I can't set the read only flag during the creation of the tag.

    So what would the prefered way to set the tags to read-only, without changing the load process of the store (maybe adding a additional field ist posssible).

    a.) A iteration over the tags in an AfterRenderListener looks like a solution - But this may have an performance impact in large lists.
    b.) Changing the default configuration of the tag
    c.) Magic around the template of the tag

    b + c are my prefered ways to do so, but I didn't get this running. Do you have a hint for me? I found some solutions published somewhere but none of them worked.

    Addendum:

    I did 'b':

    _tagField.TagLabelConfig = new EX.TagLabel();
    _tagField.TagLabelConfig.Disabled = true;
    OK, this works, the user can't remove the tag, but it looks terrible. So C would be the prefered solution.

    Addendum 2:
    I made a css style solution, which fixes the optic, but a template may be a better solution.

    _tagField.TagLabelConfig = new EX.TagLabel();
    _tagField.TagLabelConfig.ComponentCls = "rex-tag-readonly";
    and the css:

    .rex-tag-readonly .x-taglabel-item .x-taglabel-close-btn {
    	background-image: none;
    }
    
    .rex-tag-readonly .x-taglabel-closable .x-taglabel-item-text {
    	padding-right: 0px;
    }
    This solves the issue but as I said, a solution via template would be more elegant.
    Last edited by rtic; Nov 23, 2017 at 8:49 AM. Reason: typo
  4. #4
    Hello @rtic!

    Thanks for your feedback and insights. There's no "preferred way" to do anything in Ext.NET. There are just different approaches to do the same thing. Usually, if I think on what to do and what not, I would follow something like:

    - is this a natively supported feature (there's a specific setting to do so without further coding)
    - is the chosen approach fast (fast enough to the needs I have
    - is the chosen approach secure (we can't prevent users from changing HTML DOM, but we can make it less evident -- but always should rely on server-side validation at the right time)

    So well, I'd say the best choice is the one that works better for you.

    At first the disabled solution just works because it adds the injected tag the disabled style and behavior, which is not being clickable. But if you add the disabled tag to a list of entries (dropdown like in the tagfield example, first field) you'll still be able to add the tag and programatically remove it. It will just inherit the disabled behavior and look (which is I believe is the optical issue you're talking about).

    So yes, the solution you chose works, the template with another field (extending the TagField functionality) would also work. Maybe the one that would not work so great would be (a), iterating thru the labels in an afterRender event may bring an undesired effect/flicker on the tags during the page load, so having all set up by/before page load time should be best. If you are providing the tags from server side, then it would be a solution to just set them as disabled, just like you did.

    You could override the template to just remove the 'x' from the tags also, but that would be more difficult if you wanted to selectively enable/disable individual tags. But perhaps not considerably faster than setting them up as disabled on page load.
    Fabrício Murta
    Developer & Support Expert
  5. #5
    Tnx! Please close the thread! Problem solved.
    Last edited by rtic; Nov 23, 2017 at 8:51 AM.

Similar Threads

  1. Replies: 2
    Last Post: Aug 24, 2015, 5:52 AM
  2. [CLOSED] ReadOnly property doesn't work with checkbox field
    By Daly_AF in forum 1.x Legacy Premium Help
    Replies: 2
    Last Post: Mar 01, 2013, 12:06 PM
  3. Replies: 1
    Last Post: Jul 22, 2011, 9:33 AM
  4. [CLOSED] ReadOnly=true
    By Vasudhaika in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: Apr 11, 2011, 12:25 PM
  5. [CLOSED] [1.0] TriggerField with ReadOnly set does not work
    By jemmitch in forum 1.x Legacy Premium Help
    Replies: 2
    Last Post: Nov 25, 2009, 1:40 PM

Tags for this Thread

Posting Permissions