[CLOSED] Populate TagField From Multiselect and Remove Item from Multiselect

Page 1 of 2 12 LastLast
  1. #1

    [CLOSED] Populate TagField From Multiselect and Remove Item from Multiselect

    I have 2 MultiSelect and a TagField,I am tring to add item in tag field on select MultiSelect item as well as remove the item from MultiSelect which is add to TagField.
    here I face some difficulty on selecting items from Multiselect.

    1.Click on "Basic" from "List 1" and then click on "+" from "List 2"
    the "+" not added to TagField.and add items in TagField is very uncertain.add item in TagField not happen simultaneously.

    2.Also I try to remove item from "List 1" after adding to TagFiled.I am getting a javascript error,don't understand why?that's why I comment out this line.
    TypeError: this.getSubmitArray(...)[0] is undefined
    bellow is my sample code,plz help

    View

    @{
        Layout = null;
        var X = Html.X();
    }
    <script>
    
        var populateTag = function (value,text) {
           
            App.tag.addItem(text, value)
            App.tag.addTag(value)
          
           
        }
    
    </script>
    @X.ResourceManager()
    
    @( X.Panel().Layout(LayoutType.VBox).Items
    (
    
    X.FieldContainer()
    
    
                    .Layout(LayoutType.Table)
                    .LayoutConfig(new TableLayoutConfig() { Columns = 2 })
                    .Items(
                        X.Label().Html("<div class='label'>List 1</div>"),
                        X.Label().Html("<div class='label'>List 2</div>"),
    
    
                                        X.MultiSelect()
                                            .Height(260)
                                            .ID("MS1")
                                            .Width(300)
                                            .Border(true)
                                           .DisplayField("opText")
                                           .ValueField("opValue")
                                           .MaxSelections(1)
                                           .SingleSelect(true)
                                           .Listeners(l =>
                                           {
                                               l.Change.Handler = @"populateTag(this.getSubmitArray()[0]['value'],this.getSubmitArray()[0]['text'])  
                                                                                
                                                                    ";
                                           })
                                              .Store(X.Store()
                                            .ID("Store1")
                                            .Data(ViewBag.op)
                                            .Model(X.Model()
    
                                            .IDProperty("opValue")
                                                .Fields(
                                                     Html.X().ModelField().Name("opValue").Mapping("opValue").Type(ModelFieldType.Int),
                                                      Html.X().ModelField().Name("opText").Mapping("opText").Type(ModelFieldType.String)
                                                )
                                            )
    
    
    
                            ),
    
    
                                    X.MultiSelect()
                                    .ID("MS2")
                                     .Width(300)
                                    .Height(260)
                                    .SingleSelect(true)
                                      .DisplayField("componentText")
                                        .ValueField("componentValue")
                                        .Listeners(l =>
                                           {
                                               l.Change.Handler = @"populateTag(this.getSubmitArray()[0]['value'],this.getSubmitArray()[0]['text'])
                                                                  // this.getStore().removeAt(this.getSubmitArray()[0]['index'])
                                                                    
                                                                    ";
                                               
                                           })
                                              .Store(X.Store()
                                            .ID("Store2")
                                            .Data(ViewBag.Component)
                                            .Model(X.Model()
    
                                            .IDProperty("componentValue")
                                                .Fields(
                                                     Html.X().ModelField().Name("componentValue").Mapping("componentValue").Type(ModelFieldType.Int),
                                                      Html.X().ModelField().Name("componentText").Mapping("componentText").Type(ModelFieldType.String)
                                                )
                                            )
                                        )
                            )
    
    
               ,
              X.TagField()
                .ID("tag")
                .HideSelected(true)
                .Width(800)
                .HideTrigger(true)
                .Editable(true)
                .DisplayField("tagtext")
                .ValueField("tagvalue")
                .MultiSelect(true)
                .Store(X.Store()
               .ID("Store3")
                .Model(X.Model()
                    .Fields(
                            Html.X().ModelField().Name("tagvalue").Mapping("tagvalue").Type(ModelFieldType.Int),
                            Html.X().ModelField().Name("tagtext").Mapping("tagtext").Type(ModelFieldType.String)
                    )
                )
            )
    
    
    
                    )
    
                    )
    Controller

    public class formulaController : Controller
        {
            //
            // GET: /formula/
    
            public ActionResult Index()
            {
              
                ViewBag.op = Getoperator();
                ViewBag.Component = GetComponent();
                return View();
            }
    
            public List<OP> Getoperator()
            {
                List<OP> _op = new List<OP>();
                _op.Add(new OP
                {
    
                    opValue=1,
                    opText="+",
                   
                });
                _op.Add(new OP
                {
    
                    opValue = 2,
                    opText = "-",
    
                });
                _op.Add(new OP
                {
    
                    opValue = 3,
                    opText = "*",
    
                });
                _op.Add(new OP
                {
    
                    opValue = 4,
                    opText = "/",
    
                });
                _op.Add(new OP
                {
    
                    opValue = 4,
                    opText = "%",
    
                });
    
                return _op;
            }
            public List<Component> GetComponent()
            {
                List<Component> _Component = new List<Component>();
                _Component.Add(new Component
                {
    
                    componentValue = 1,
                    componentText = "Basic",
    
                });
                _Component.Add(new Component
                {
    
                    componentValue = 2,
                    componentText = "HRA",
    
                });
                _Component.Add(new Component
                {
    
                    componentValue = 3,
                    componentText = "PF",
    
                });
                _Component.Add(new Component
                {
    
                    componentValue = 4,
                    componentText = "ESI",
    
                });
    
                return _Component;
            }
        }
    
        public class OP
        {
            public int opValue { get; set; }
            public string opText { get; set; }
        }
    
        public class Component
        {
            public int componentValue { get; set; }
            public string componentText { get; set; }
        }
    Last edited by Daniil; Oct 03, 2014 at 1:42 PM. Reason: [CLOSED]
  2. #2
    Hi @matrixwebtech,

    1. A TagField's tags are supposed to have unique values.

    "+" value is 1 and "Basic" value is 1. So, the only one can be added.

    You can make the values unique somehow.

    Or add tags by text only:
    var populateTag = function (value,text) {
        App.tag.addTag(text);
    };
    and add items in TagField is very uncertain.add item in TagField not happen simultaneously.
    I don't understand what you mean. Please clarify.

    2. The error can happen is a .getSubmitArray() call returns an empty array. It might happen if a MultiSelect has no value.
  3. #3
    Hi Daniil
    Is there any way to allow TagField with duplicate value?

    How I add duplicate Item(like + twice or - twice) in tag with
    var populateTag = function (value,text) {
        App.tag.addTag(text);
    };
    I try but not adding.
    Last edited by matrixwebtech; Sep 29, 2014 at 11:43 AM.
  4. #4
    Is there any way to allow TagField with duplicate value?
    You can override/extend the TagField and/or TagLabel JavaScript classes.

    How I add duplicate Item(like + twice or - twice) in tag with
    There is an option to have duplicates with same text. Please set this for the TagField:
    .TagLabelConfig(X.TagLabel().AllowDuplicates(true))
  5. #5
    Can you please give some example ,how to override/extend the TagField and/or TagLabel JavaScript classes.

    and also I use
    .TagLabelConfig(X.TagLabel().AllowDuplicates(true))
    but not working,duplicate text not allowed.
  6. #6
    Can you please give some example ,how to override/extend the TagField and/or TagLabel JavaScript classes.
    Unfortunately, I don't have such an example.

    and also I use
    .TagLabelConfig(X.TagLabel().AllowDuplicates(true))
    but not working,duplicate text not allowed.
    Indeed. If use
    App.tag.addTag(text);
    a tag's value will be created automatically and it will match its text. So, on a subsequent call there will be the tag with such a value.

    Please try with:
    App.tag.addTag({ text: text });
  7. #7
    Hi daniil
    App.tag.addTag({ text: text });
    works.
    But I need to allow duplicate value in tag field ,because calculation one operator can be use multiple times.and also i have to save the value in database.
    please refer me some links or forum post or some hint will help me.
  8. #8
    Hello,

    As mentioned earlier, the component does not support the functionality you require. You are free to inspect the source code and extend or override to meet your requirements.
    Geoffrey McGill
    Founder
  9. #9
    Hi
    I don't have any previous experience for extend or override javascript in ext.net.If possible can you please let me steps to override a script.
  10. #10
    The Sencha documentation, samples and forums are great places to look for examples and tutorials on extending the JavaScript of components.

    Another great option would be just reviewing the .js source in the /trunk/Ext.Net/Build/Ext.Net/extnet/src/ and /trunk/Ext.Net/Build/Ext.Net/ux/ folders. Within Ext.NET extend and override dozens of components and I'm sure there's lots of code in there to help get you started.
    Geoffrey McGill
    Founder
Page 1 of 2 12 LastLast

Similar Threads

  1. Replies: 0
    Last Post: Oct 12, 2012, 10:45 AM
  2. Replies: 4
    Last Post: May 09, 2012, 9:24 PM
  3. Populate Multiselect
    By ddolan in forum 1.x Help
    Replies: 1
    Last Post: Apr 13, 2011, 1:09 PM
  4. Replies: 0
    Last Post: Mar 09, 2010, 7:28 AM
  5. Replies: 3
    Last Post: Aug 12, 2009, 9:57 AM

Posting Permissions