PDA

View Full Version : [CLOSED] MultiSelect : Clear Selection



matrixwebtech
Dec 30, 2014, 2:17 PM
Hi,
I use MultiSelect ,I select a item from the multiselect and try to clear selection after click on the item ,but not found any suitable method http://docs-origin.sencha.com/extjs/4.2.1/#!/api/Ext.ux.form.MultiSelect . can you please let me know how do I do this?

Daniil
Dec 31, 2014, 1:47 PM
Hi @matrixwebtech,

Please clarify do you need to clear the selection programmatically?

Just if click on some item it gets selected, if click again it gets deselected.
http://examples2.ext.net/#/Form/MultiSelect/Overview

matrixwebtech
Dec 31, 2014, 2:30 PM
Please clarify do you need to clear the selection programmatically?

Please run the sample


@(X.MultiSelect()
.ID("MS2")
.Width(300)
.Height(260)
.SingleSelect(false)
.MultiSelect(false)
.Items(
X.ListItem().Text("Item 1").Value("1"),
X.ListItem().Text("Item 2").Value("2"),
X.ListItem().Text("Item 3").Value("3"),
X.ListItem().Text("Item 4").Value("4"),
X.ListItem().Text("Item 5").Value("5")
)

.Listeners(l =>
{

l.Change.Handler = "alert(this.getSubmitArray()[0]['text'])";

})

))

Step
1. Click Item 1,in alert bot it will show Item 1 .
2 .then again Click Item 1 ,a javascript error happens but selection gone.
3 If you click on Item 1 for 3rd time then again it will works.

I need on every click the alert box show the text.for that I think previously if after click I can change the selection may be this will work.

Daniil
Dec 31, 2014, 2:35 PM
I guess then you deselect an item and there is no selection anymore, this throws a JavaScript exception, because an array returned by .getSubmitArray() call is empty.

this.getSubmitArray()[0]["text"]

matrixwebtech
Dec 31, 2014, 2:39 PM
yes.can you please tell me how do I deselect the item after execute
l.Change.Handler = "alert(this.getSubmitArray()[0]['text'])";

Daniil
Dec 31, 2014, 2:49 PM
Well, the Change event fires after deselection. It might be problematic to change that.

Please clarify what is the requirement that you need to achieve?

matrixwebtech
Dec 31, 2014, 3:00 PM
I have 2 multiselect one contain some operators and another contain some field .I select any item from list 1 then (+) from List 2 then another from List 2 but the (+) still selected in List 2 then the problem arise ,if I click on (+) nothing happen for this click .for this I need to select another item and then click on (+). please see attached image

18071

Daniil
Dec 31, 2014, 3:51 PM
I have not quite comprehended the scenario yet. I will re-visit that early in the next year.

If you can provide a runnable test case and step-by-step scenario I would appreciate.

1. Do this.
2. Do that.
3. ...

matrixwebtech
Jan 01, 2015, 5:23 AM
hi daniil,Happy new year.hope you are doing well.please run the sample..

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


<script>
var populateTag = function (value, text) {

var t = { text: text, value: App.tag.getValue().length + 1 }
App.tag.addTag(t)
}
</script>
@X.ResourceManager()
@( 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()
.ID("MS2")
.Width(300)
.Height(260)
.SingleSelect(true)
.PaddingSpec("0 10 0 0")
.Items(
X.ListItem().Text("Item 1").Value("1"),
X.ListItem().Text("Item 2").Value("2"),
X.ListItem().Text("Item 3").Value("3"),
X.ListItem().Text("Item 4").Value("4"),
X.ListItem().Text("Item 5").Value("5")
)
.Listeners(l =>
{
l.Change.Handler = @"populateTag(this.getSubmitArray()[0]['value'],this.getSubmitArray()[0]['text'])";

})
,

X.MultiSelect()
.Height(260)
.ID("MS1")
.Width(50)
.Border(true)
.DisplayField("opText")
.ValueField("opValue")
.MaxSelections(1)
.SingleSelect(true)
.Items(
X.ListItem().Text("+").Value("1"),
X.ListItem().Text("-").Value("2"),
X.ListItem().Text("*").Value("3"),
X.ListItem().Text("/").Value("4"),
X.ListItem().Text("%").Value("5")
)

.Listeners(l =>
{
l.Change.Handler = @"populateTag(this.getSubmitArray()[0]['value'],this.getSubmitArray()[0]['text'])";

})

,
X.TagField()
.ID("tag")
.HideSelected(true)
.Width(375)

.HideTrigger(true)
.Editable(true)

.MultiSelect(true)
.TagLabelConfig(X.TagLabel()
.AllowDuplicates(true)
.Listeners(events =>
{
events.TagRemove.Handler = "removeTag(tag.text)";

}
)
)
)
)


you can see 2 lists List 1 and List 2 .from this I need (Item 1+ Item 2+Item 3) in bellow tag field.
step
1.click on Item 1
2. click on +
3.click on Item 2
up to this is ok
4. now you need to click again on + at list 2,which is on selected mode.in that case I have to click outside to deselect and then click to select.which I think not proper.thats why I am asking ,If I clear selection after each click ,then this works properly.


I have not quite comprehended the scenario yet. I will re-visit that early in the next year.
If you can provide a runnable test case and step-by-step scenario I would appreciate.
hope I make you understand this.

matrixwebtech
Jan 05, 2015, 6:16 AM
Hi Daniil,can you please test my code and give some comment on that.

Daniil
Jan 05, 2015, 2:25 PM
Apologize for the delay in answering.

Deselecting an item would fire the Change event again.

I would recommend you to replace:

.Listeners(l =>
{
l.Change.Handler = @"populateTag(this.getSubmitArray()[0]['value'],this.getSubmitArray()[0]['text'])"

})
with

.ListConfig(
X.BoundList()
.Listeners(events =>
events.ItemClick.Handler = @"var multiSelect = this.ownerCt;
populateTag(record.data[multiSelect.valueField], record.data[multiSelect.displayField]);"

)
)

matrixwebtech
Jan 05, 2015, 2:54 PM
Hi danill,Thanks for help. and now on this post I have to say something more .we not use any 3rd party control for our previous any project.this is our 1st experience.and I say the experience is great.every time you came up a with solution for each problem,and I would say I don't know much about EXT js but the way ext.net team produce the .net version is very handy,may be we face difficulties with this but then support team always with us. and
Supports our friendly and hard working team mentioned at http://ext.net/store/ is relay very true.you guys are very polite,gentle and also hard working.my good wishes always with Ext.net team ,individual .god bless.

Daniil
Jan 06, 2015, 1:08 AM
Thank you for the excellent feedback! It motivates us to work better:)

matrixwebtech
Jan 06, 2015, 6:07 AM
Hi daniil ,I put your code and works fine.


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


<script>
var populateTag = function (value, text) {

var t = { text: text, value: App.tag.getValue().length + 1 }
App.tag.addTag(t)
}
</script>
@X.ResourceManager()
@( 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()
.ID("MS2")
.Width(300)
.Height(260)
.SingleSelect(true)
.DisplayField("componentText")
.ValueField("componentValue")

.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)
)
)
)

.ListConfig(
X.BoundList()
.Listeners(events =>
events.ItemClick.Handler = @"var multiSelect = this.ownerCt;
populateTag(record.data[multiSelect.valueField], record.data[multiSelect.displayField]);
"

)
)
,

X.MultiSelect()
.Height(260)
.ID("MS1")
.Width(50)
.Border(true)
.DisplayField("opText")
.ValueField("opValue")
.MaxSelections(1)
.SingleSelect(true)
.Items(
X.ListItem().Text("+").Value("1"),
X.ListItem().Text("-").Value("2"),
X.ListItem().Text("*").Value("3"),
X.ListItem().Text("/").Value("4"),
X.ListItem().Text("%").Value("5")
)


.ListConfig(
X.BoundList()
.Listeners(events =>
events.ItemClick.Handler = @"var multiSelect = this.ownerCt;
populateTag(record.data[multiSelect.valueField], record.data[multiSelect.displayField]);"

)
)

,
X.TagField()
.ID("tag")
.HideSelected(true)
.Width(375)

.HideTrigger(true)
.Editable(true)

.MultiSelect(true)
.TagLabelConfig(X.TagLabel()
.AllowDuplicates(true)

)
)
)


Controller


public class tagfield2Controller : Controller
{
//
// GET: /tagfield2/

public ActionResult Index()
{

ViewBag.Component = GetComponent();
return View();
}


public List<Component1> GetComponent()
{
List<Component1> _Component = new List<Component1>();
_Component.Add(new Component1
{

componentValue = 1,
componentText = "Basic",

});
_Component.Add(new Component1
{

componentValue = 2,
componentText = "HRA",

});
_Component.Add(new Component1
{

componentValue = 3,
componentText = "PF",

});
_Component.Add(new Component1
{

componentValue = 4,
componentText = "ESI",

});

return _Component;
}
}



public class Component1
{
public int componentValue { get; set; }
public string componentText { get; set; }
}

I just want to add one more functionality is,If you run the code then you can see there are 2 list List 1 and List 2,now I want after click on any item in List 1 added to tag field and then remove the item from the list(List 1)please assist me.

Update
previous code
this.getStore().removeAt(this.getSubmitArray()[0]['index']) not working.

Daniil
Jan 07, 2015, 2:48 PM
The index of clicked item is passed to an ItemClick handler.

events.ItemClick.Handler = @"var multiSelect = this.ownerCt;
populateTag(record.data[multiSelect.valueField], record.data[multiSelect.displayField]);
multiSelect.getStore().removeAt(index);"

matrixwebtech
Jan 08, 2015, 11:03 AM
Please close this as of now.