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

Hybrid View

Previous Post Previous Post   Next Post Next Post
  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 });

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