PDA

View Full Version : [CLOSED] Populate TagField From Multiselect and Remove Item from Multiselect



matrixwebtech
Sep 29, 2014, 8:49 AM
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; }
}

Daniil
Sep 29, 2014, 12:25 PM
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.

matrixwebtech
Sep 29, 2014, 12:33 PM
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.

Daniil
Sep 29, 2014, 1:13 PM
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) )

matrixwebtech
Sep 29, 2014, 1:22 PM
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.

Daniil
Sep 29, 2014, 1:41 PM
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 });

matrixwebtech
Sep 29, 2014, 2:08 PM
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.

geoffrey.mcgill
Sep 29, 2014, 3:20 PM
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.

matrixwebtech
Sep 30, 2014, 6:59 AM
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.

geoffrey.mcgill
Sep 30, 2014, 7:59 AM
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.

matrixwebtech
Sep 30, 2014, 8:05 AM
Ok,I will try and let you know the result,till then please close this thread .

matrixwebtech
Oct 13, 2014, 10:19 AM
How do I get Selected tag value on direct event?
How I pass values on button click with any deliminator.


@(X.Button().Text("Click")
.DirectEvents(d =>
{
d.Click.Action = "getatgvalue";
d.Click.ExtraParams.Add(new Parameter
{
Name = "val",
Value = "#{tag}.getValue()",
Mode = ParameterMode.Raw
});
})
)

Daniil
Oct 13, 2014, 3:44 PM
This a good question for a new thread.