What's New?

[CLOSED] TagField: Add customer value

  1. #1
    Mar 22, 2018, 7:53 AM

    [CLOSED] TagField: Add customer value

    Hi everyone,

    I'm getting following Error, when entering an e-mail address to my tag field which is not an item of that tagfield

    ext.axd?v=20018:19 Uncaught TypeError: Cannot read property 'internalId' of undefined
    at E.updateIndexes (ext.axd?v=20018:19)
    at E.onAdd (ext.axd?v=20018:19)
    at E.fire (ext.axd?v=20018:19)
    at E.doFireEvent (ext.axd?v=20018:19)
    at E.a.doFireEvent (ext.axd?v=20018:19)
    at E.fireEventArgs (ext.axd?v=20018:19)
    at E.fireEvent (ext.axd?v=20018:19)
    at E.onCollectionAddItems (ext.axd?v=20018:19)
    at E.onCollectionAdd (ext.axd?v=20018:19)
    at E.notify (ext.axd?v=20018:19)
    It occures if I do the following:
    * Select one entry from the items I added to the tagfield on clientside
    * Enter an e-mail address that has not been added on the client side
    * press the enter key to confirm
    OR
    * just enter a not added e-mail address

    I recognized that something here is going wrong :
    <input type="hidden" name="_TFRecipient_state" id="ext-element-8" value="">
    If I enter an entry which is not an item, the items I selected before or entered before are removed.

    I made some screenshots:
    Before selection
    Click image for larger version.  Name: BeforeSelectOneFromStore.PNG  Views: 209  Size: 45.2 KB  ID: 25132
    After selection one from store
    Click image for larger version.  Name: AfterSelectOneFromStore.PNG  Views: 207  Size: 44.7 KB  ID: 25133
    After enter an item
    Click image for larger version.  Name: AfterEnterOneNotInStore.PNG  Views: 191  Size: 46.2 KB  ID: 25134

    Testsample:

    <%@ Page Language="VB" AutoEventWireup="false" CodeFile="Forum.aspx.vb" Inherits="EMail_Forum" Title="E-Mail" %>

<%@ Register Assembly="System.Web.Extensions, Version=1.0.61025.0, Culture=neutral"
    Namespace="System.Web.UI" TagPrefix="asp" %>
<%@ Import Namespace="System.Web.Optimization" %>

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <asp:PlaceHolder ID="PlaceHolder1" runat="server">
        <%= Scripts.Render("~/bundles/jquery")%>
    </asp:PlaceHolder>
    <title>E-Mail</title>
    <link rel="stylesheet" type="text/css" href="../MasterPage.css" />

    <script type="text/javascript" src="../script/EMail.js"></script>

    <style type="text/css">

        #FormPanelEMail table.x-table-layout {
            width: 60%;
        }

        .smallButton .x-btn-inner-default-small {
            font-size: 9px;
        }
    </style>
</head>

<body>
    <form>
        <ext:ResourceManager ID="ResourceManager1" runat="server" />
        <ext:Viewport ID="Viewport1" runat="server" Layout="BorderLayout" AutoScroll="true">
            <Items>
                <ext:Panel ID="PanelHeader" runat="server" Region="North" Split="false" Height="64"
                    Collapsible="false" Padding="0" Margins="0" Border="false">
                    <Items>                        
                    </Items>
                </ext:Panel>
                <ext:Panel runat="server" Layout="AnchorLayout" Region="Center" AutoScroll="True" ID="FormPanelEMail">
                    <Items>
                        <ext:Label runat="server" ID="NotificationLabel" Padding="5" Hidden="true" Text="Die E-Mail konnte nicht geladen werden."></ext:Label>
                        <ext:Hidden runat="server" ID="HiddenRecipient"></ext:Hidden>
                        <ext:Hidden runat="server" ID="HiddenCc"></ext:Hidden>
                        <ext:Hidden runat="server" ID="HiddenBcc"></ext:Hidden>
                        <ext:DisplayField runat="server" ID="DFFrom" FieldLabel="Von" ColSpan="12" Padding="5" IndicatorIcon="Help">                            
                        </ext:DisplayField>
                        <ext:DisplayField runat="server" ID="DFReplyTo" FieldLabel="Antwort an" ColSpan="12" Padding="5"></ext:DisplayField>
                        <ext:Container runat="server" Layout="TableLayout">
                            <LayoutConfig>
                                <ext:TableLayoutConfig Columns="2"></ext:TableLayoutConfig>
                            </LayoutConfig>
                            <Items>
                                <ext:TagField runat="server" ID="TFRecipient" TypeAhead="true" FieldLabel="An" Width="650" AllowBlank="false" Padding="5" IndicatorIcon="Help" IndicatorTip="Mehrere E-Mail-Empfänger durch Komma oder Leerzeichen getrennt eingeben">                                    
                                    <Tags></Tags>
                                    <Items></Items>
                                </ext:TagField>                                
                                <ext:Button runat="server" Text="Cc/Bcc" ToolTip="Öffnet bzw. schließt die Textfelder zur Eingabe von Cc und Bcc" HeightSpec="">
                                    <Listeners>
                                        <Click Handler="showOrHideTextField()"></Click>
                                    </Listeners>
                                </ext:Button>
                            </Items>
                        </ext:Container>
                        <ext:Container runat="server" Layout="TableLayout" ID="ContainerCc" Hidden="true">
                            <LayoutConfig>
                                <ext:TableLayoutConfig Columns="3"></ext:TableLayoutConfig>
                            </LayoutConfig>
                            <Items>
                                <ext:TagField runat="server" ID="TFCc" FieldLabel="Cc" Padding="5" Width="650" IndicatorIcon="Help" IndicatorTip="Mehrere E-Mail-Empfänger durch Komma oder Leerzeichen getrennt eingeben">                                    
                                </ext:TagField>                                
                            </Items>
                        </ext:Container>
                        <ext:Container runat="server" Layout="TableLayout" ID="ContainerBcc" Hidden="true"> 
                            <LayoutConfig>
                                <ext:TableLayoutConfig Columns="3"></ext:TableLayoutConfig>
                            </LayoutConfig>
                            <Items>
                                <ext:TagField runat="server" ID="TFBcc" FieldLabel="Bcc" Padding="5" Width="650" IndicatorIcon="Help" IndicatorTip="Mehrere E-Mail-Empfänger durch Komma oder Leerzeichen getrennt eingeben">                                    
                                </ext:TagField>                               
                            </Items>
                        </ext:Container>
                        <ext:TextField runat="server" ID="TFSubject" FieldLabel="Betreff" EmptyText="Betreff" ColSpan="12" Padding="5" Width="650"></ext:TextField>
                        <ext:TextArea runat="server" ID="TAEMailBody" Height="150" ColSpan="12" Padding="5" Width="650"></ext:TextArea>                        
                        <ext:Container runat="server" MarginSpec="0 0 10 0">
                            <Items>
                                <ext:Button runat="server" Text="Verwerfen" Icon="Cancel" ColSpan="6" MarginSpec="0 0 0 5" ID="ButtonCancelEMail">
                                    <Listeners>
                                        <Click Fn="dropEmail"></Click>
                                    </Listeners>
                                </ext:Button>
                                <ext:Button runat="server" Text="Senden" Icon="Accept" ColSpan="6" ID="ButtonSendEMail" Disabled="true" MarginSpec="0 0 0 505">
                                    <Listeners>
                                        <Click Fn="sendEMailCheckInputFields"></Click>
                                    </Listeners>
                                </ext:Button>
                            </Items>
                        </ext:Container>   
                    </Items>
            </ext:Panel>                
            </Items>           
        </ext:Viewport>



    </form>
</body>

<script type="text/javascript">
    var extReady = false;
    var jqueryReady = false;

    var isEverythingReady = function () { return extReady && jqueryReady }

    Ext.onReady(function () {
        extReady = true;
        if (isEverythingReady())
            eMailContactManager.loadContactsForTagField("EMail");
    });

    $(document).ready(function () {
        jqueryReady = true;
        if (isEverythingReady())
            eMailContactManager.loadContactsForTagField("EMail");
    });
</script>

</html>

    js to add tags

    var eMailContactManager;
eMailContactManager = {   

    loadContactsForTagField: function (source) {
        $.get(
            "../api/eMailContact",
            function (data) {              
                if (source === "EMail") {
                    data.forEach(function (contact) {
                        App.TFRecipient.addItem(contact.Name + ' (' + contact.EMailAddress + ')', contact.Id);
                        App.TFBcc.addItem(contact.Name + ' (' + contact.EMailAddress + ')', contact.Id);
                        App.TFCc.addItem(contact.Name + ' (' + contact.EMailAddress + ')', contact.Id);
                    });
                ;
                
            });
    }};

    Thanks in advance!
    Last edited by fabricio.murta; Apr 03, 2018 at 3:59 PM.
  2. #2
    Mar 22, 2018, 12:14 PM
    Hello @stupp,

    Your sample has references to jQuery and email.js. If this is not required to reproduce the issue, please simplify the code sample so we can run it in our side.

    The code sample you provide should include only the minimum amount of code required to reproduce the issue. Code unrelated to the issue is to be removed. Anyone should be able to copy + paste your sample into a local Visual Studio test project and run without having to make modifications.

    Tips for creating simplified code samples

    If Exceptions or syntax errors are thrown when testing your code sample, we'll let you know so you can revise your original sample. Then we'll review again with the updated sample.

    The following two forum posts provide many excellent tips for posting in the forums:

    1. More Information Required
    2. Forum Guidelines
    Fabrício Murta
    Developer & Support Expert
    Ext.NETASP.NET UI Component framework
    RetypeDocumentation website generator
    MojeeLightning fast Emoji library for .NET
    Ext.NET Examples|Ext.NET API Docs|ExtJS API Docs|Twitter
  3. #3
    Mar 22, 2018, 12:22 PM
    I've tried with this code sample:

    <%@ Page Language="C#" %>

<script runat="server">
    protected void SubmitHandler(object sender, DirectEventArgs e)
    {
    }
</script>

<!DOCTYPE html>

<html>
<head runat="server">
    <title>TagField v4 - Ext.NET Examples</title>
</head>
<body>
    <form runat="server">
        <ext:ResourceManager runat="server" />

        <h1>TagField</h1>

        <h2>Basic</h2>

        <p>Custom values  allowed, input can be moved with left/right arrows</p>

        <ext:TagField runat="server" ID="TFRecipient" TypeAhead="true" HideSelected="true" FieldLabel="An" Width="650" AllowBlank="false" Padding="5" IndicatorIcon="Help" IndicatorTip="Mehrere E-Mail-Empfänger durch Komma oder Leerzeichen getrennt eingeben">
            <Tags>
            </Tags>
            <Items>
                <ext:Tag Value="2" Text="George (boc@nog.org)" />
            </Items>
        </ext:TagField>
    </form>
</body>
</html>
    Then I tested as you can see in this animated gif shot: Test gifv.

    So I am most likely missing something that would be required to reproduce the issue. So now you have two options, elaborate on this test sample to reproduce the issue, or simplify the one you already produced so that we can run it by our side.
    Fabrício Murta
    Developer & Support Expert
    Ext.NETASP.NET UI Component framework
    RetypeDocumentation website generator
    MojeeLightning fast Emoji library for .NET
    Ext.NET Examples|Ext.NET API Docs|ExtJS API Docs|Twitter
  4. #4
    Mar 22, 2018, 1:15 PM
    I hope this works

    <%@ Page Language="VB" AutoEventWireup="false" CodeFile="Forum.aspx.vb" Inherits="EMail_Forum" Title="E-Mail" %>

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <asp:PlaceHolder ID="PlaceHolder1" runat="server">      
    </asp:PlaceHolder>
    <title>E-Mail</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


    <style type="text/css">

        #FormPanelEMail table.x-table-layout {
            width: 60%;
        }

        .smallButton .x-btn-inner-default-small {
            font-size: 9px;
        }
    </style>
</head>

<body>
    <form>
        <ext:ResourceManager ID="ResourceManager1" runat="server" />
        <ext:Viewport ID="Viewport1" runat="server" Layout="BorderLayout" AutoScroll="true">
            <Items>
                <ext:Panel ID="PanelHeader" runat="server" Region="North" Split="false" Height="64"
                    Collapsible="false" Padding="0" Margins="0" Border="false">
                    <Items>                        
                    </Items>
                </ext:Panel>
                <ext:Panel runat="server" Layout="AnchorLayout" Region="Center" AutoScroll="True" ID="FormPanelEMail">
                    <Items>
                        <ext:Label runat="server" ID="NotificationLabel" Padding="5" Hidden="true" Text="Die E-Mail konnte nicht geladen werden."></ext:Label>
                        <ext:Hidden runat="server" ID="HiddenRecipient"></ext:Hidden>
                        <ext:Hidden runat="server" ID="HiddenCc"></ext:Hidden>
                        <ext:Hidden runat="server" ID="HiddenBcc"></ext:Hidden>
                        <ext:DisplayField runat="server" ID="DFFrom" FieldLabel="Von" ColSpan="12" Padding="5" IndicatorIcon="Help">                            
                        </ext:DisplayField>
                        <ext:DisplayField runat="server" ID="DFReplyTo" FieldLabel="Antwort an" ColSpan="12" Padding="5"></ext:DisplayField>
                        <ext:Container runat="server" Layout="TableLayout">
                            <LayoutConfig>
                                <ext:TableLayoutConfig Columns="2"></ext:TableLayoutConfig>
                            </LayoutConfig>
                            <Items>
                                <ext:TagField runat="server" ID="TFRecipient" TypeAhead="true" FieldLabel="An" Width="650" AllowBlank="false" Padding="5" IndicatorIcon="Help" IndicatorTip="Mehrere E-Mail-Empfänger durch Komma oder Leerzeichen getrennt eingeben">                                    
                                    <Tags></Tags>
                                    <Items></Items>
                                </ext:TagField>                                
                                <ext:Button runat="server" Text="Cc/Bcc" ToolTip="Öffnet bzw. schließt die Textfelder zur Eingabe von Cc und Bcc" HeightSpec="">                                    
                                </ext:Button>
                            </Items>
                        </ext:Container>
                        <ext:Container runat="server" Layout="TableLayout" ID="ContainerCc" Hidden="true">
                            <LayoutConfig>
                                <ext:TableLayoutConfig Columns="3"></ext:TableLayoutConfig>
                            </LayoutConfig>
                            <Items>
                                <ext:TagField runat="server" ID="TFCc" FieldLabel="Cc" Padding="5" Width="650" IndicatorIcon="Help" IndicatorTip="Mehrere E-Mail-Empfänger durch Komma oder Leerzeichen getrennt eingeben">                                    
                                </ext:TagField>                                
                            </Items>
                        </ext:Container>
                        <ext:Container runat="server" Layout="TableLayout" ID="ContainerBcc" Hidden="true"> 
                            <LayoutConfig>
                                <ext:TableLayoutConfig Columns="3"></ext:TableLayoutConfig>
                            </LayoutConfig>
                            <Items>
                                <ext:TagField runat="server" ID="TFBcc" FieldLabel="Bcc" Padding="5" Width="650" IndicatorIcon="Help" IndicatorTip="Mehrere E-Mail-Empfänger durch Komma oder Leerzeichen getrennt eingeben">                                    
                                </ext:TagField>                               
                            </Items>
                        </ext:Container>
                        <ext:TextField runat="server" ID="TFSubject" FieldLabel="Betreff" EmptyText="Betreff" ColSpan="12" Padding="5" Width="650"></ext:TextField>
                        <ext:TextArea runat="server" ID="TAEMailBody" Height="150" ColSpan="12" Padding="5" Width="650"></ext:TextArea>                        
                        <ext:Container runat="server" MarginSpec="0 0 10 0">
                            <Items>
                                <ext:Button runat="server" Text="Verwerfen" Icon="Cancel" ColSpan="6" MarginSpec="0 0 0 5" ID="ButtonCancelEMail">
                                   
                                </ext:Button>
                                <ext:Button runat="server" Text="Senden" Icon="Accept" ColSpan="6" ID="ButtonSendEMail" Disabled="true" MarginSpec="0 0 0 505">
                                    
                                </ext:Button>
                            </Items>
                        </ext:Container>   
                    </Items>
            </ext:Panel>                
            </Items>           
        </ext:Viewport>



    </form>
</body>

<script type="text/javascript">
    var extReady = false;
    var jqueryReady = false;

    var isEverythingReady = function () { return extReady && jqueryReady }

    Ext.onReady(function () {
        extReady = true;
        if (isEverythingReady())
            eMailContactManager.loadContactsForTagField("EMail");
    });

    $(document).ready(function () {
        jqueryReady = true;
        if (isEverythingReady())
            eMailContactManager.loadContactsForTagField("EMail");
    });

    var eMailContactManager;
    eMailContactManager = {

        loadContactsForTagField: function (source) {

            App.TFRecipient.addItem("Test", 1);
            App.TFBcc.addItem("Test", 1);
            App.TFCc.addItem("Test", 1);
             App.TFRecipient.addItem("Meier", 2);
            App.TFBcc.addItem("Meier", 2);
            App.TFCc.addItem("Meier", 2);
             App.TFRecipient.addItem("Schmitz", 3);
            App.TFBcc.addItem("Schmitz", 3);
            App.TFCc.addItem("Schmitz", 3);
        }


    };
</script>

</html>
  5. #5
    Mar 22, 2018, 2:09 PM
    Hello @stupp!

    I got good and bad news.

    Good news the test case runs. Runs so well, I can't reproduce the issue -- that would be the bad news.

    Take a look in a run, maybe I missed something. Couldn't trigger an exception at any moment.

    - Test run.

    As you could probably notice, I'm testing with google chrome.
    Fabrício Murta
    Developer & Support Expert
    Ext.NETASP.NET UI Component framework
    RetypeDocumentation website generator
    MojeeLightning fast Emoji library for .NET
    Ext.NET Examples|Ext.NET API Docs|ExtJS API Docs|Twitter
  6. #6
    Mar 29, 2018, 7:59 AM
    Hello @fabricio.murta,

    sorry for my late reply.

    I also created a gif:

    https://gph.is/2IZNAUy


    Too bad that you can not reproduce the mistake.
    Unfortunately, I see no difference. I also debug in google chrome.

    Maybe I have to look for an other solution.
    Thanks for your investigations!!
  7. #7
    Mar 29, 2018, 9:48 AM
    I'm using
    Ext.net Version: 3.2.1
    and Ext.js version: 5.1.1.451

    maybe this could be the difference.
  8. #8
    Mar 29, 2018, 4:12 PM
    Hello @stupp!

    Yes, that definitively must be the reason. Please upgrade to the latest Ext.NET 3.x (currently 3.3.0) and you should be good.

    Unfortunately we don't have much we can do to help with outdated versions, especially when a newer version addresses the issue. After all, the next version is there to fix issues with previous ones.

    I hope this helps!
    Fabrício Murta
    Developer & Support Expert
    Ext.NETASP.NET UI Component framework
    RetypeDocumentation website generator
    MojeeLightning fast Emoji library for .NET
    Ext.NET Examples|Ext.NET API Docs|ExtJS API Docs|Twitter
  9. #9
    Apr 03, 2018, 1:38 PM
    @fabricio.murta: I updated to 3.3.0 and now it works!

    Thank's for your support!

    The Thread can be closed.
  10. #10
    Apr 03, 2018, 3:58 PM
    Awesome, @stupp! Glad it works for you now, and thanks for the feedback!

Similar Threads

  1. [FIXED] [#1582] [4.5.2] TagField, paste of multiple items produce one SINGLE item into the TagField
    By adrianot in forum Bugs
    Replies: 2
    Last Post: Mar 21, 2018, 3:16 PM
  2. TagField does not use InputField and DisplayField
    By rtic in forum 4.x Help
    Replies: 3
    Last Post: Sep 09, 2017, 8:45 PM
  3. [CLOSED] TagField MaxHeight
    By pgodwin in forum 2.x Legacy Premium Help
    Replies: 5
    Last Post: Jun 30, 2015, 2:54 PM
  4. [CLOSED] TagField : CallOuts
    By matrixwebtech in forum 2.x Legacy Premium Help
    Replies: 12
    Last Post: Feb 19, 2015, 12:04 PM
  5. [CLOSED] TagField : How to allow duplicate Tag in TagField
    By matrixwebtech in forum 2.x Legacy Premium Help
    Replies: 13
    Last Post: Dec 31, 2014, 2:51 PM

Posting Permissions