PDA

View Full Version : [CLOSED] TagField : Remove.Handler not fire



matrixwebtech
Dec 26, 2014, 11:45 AM
Hi,

I am trying to implement a functionality .
Please try code bellow

View


@{
Layout = null;
var X = Html.X();
}
<script>

var populateTag = function (value,text) {
console.log(value)
console.log(text)
var tagStore = App.tag.getStore(); //
var tagStoreCount = tagStore.getCount();
//console.log(tagStore.getCount())
//tagStore.insert(tagStoreCount + 1, { tagvalue: value, tagtext: text })

// App.tag.addItem(text, tagStoreCount + 1)
App.tag.addTag({ tagtext : text });
// console.log(tagStore.getCount())

}

</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)
)
)
.Listeners(l=>{
l.Remove.Handler = "alert('hi')";
})
)



)

)
@(X.Button().Text("Click")
.Listeners(l =>
{
l.Click.Handler = "console.log(#{tag}.getRawValue());console.log(Ext. Array.pluck(#{tag}.getRawValue(), 'text').join(','))";
})
.DirectEvents(d =>
{
d.Click.Action = "getatgvalue";
d.Click.ExtraParams.Add(new Parameter
{
Name = "val",
Value = "Ext.Array.pluck(#{tag}.getRawValue(), 'text').join('')",
Mode = ParameterMode.Raw
});
})
)


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 void getatgvalue(string val)
{

}
}

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; }


}

I want after remove a tag which is added from List 2 , go back to the list.but unfortunately Remove.Handler not fire.can you please look once and help me with necessary code.

Daniil
Dec 26, 2014, 12:15 PM
Hi @matrixwebtech,


I want after remove a tag which is added from List 2

Please clarify/point out how you remove a tag.

matrixwebtech
Dec 26, 2014, 12:28 PM
Hi,
If you run the code then and play with it I think you will understand the functionality.if not please let me know.there are some field in List 2 like BASIC,HRA...etc,on click on item in List 2 that particular item removed from the List 2 an and add to tag field.
Now if I remove the a field from tag field which is belongs to List 2,I want that item again add to List 2.


Please clarify/point out how you remove a tag.
I want to remove a tag from tag field on click on [x] of tag item.
Hope now its clear to you.

Daniil
Dec 29, 2014, 5:09 AM
Please try this:

@(Html.X().TagField()
.TagLabelConfig(X.TagLabel()
.Listeners(events =>
events.TagRemove.Handler = "alert('TagRemove');"
)
)
)

matrixwebtech
Dec 29, 2014, 8:27 AM
Hi,working fine but just one thing want to know, how can I get removed item's information ,like text ,value from the handler .

Daniil
Dec 29, 2014, 3:35 PM
The "tag" argument is passed to a TagRemove handler.

You can determine the arguments of any handler using this example.
http://examples2.ext.net/#/Events/Listeners/Arguments/