PDA

View Full Version : [CLOSED] ItemSelector Control with ComboBox selection



vmehta
May 26, 2014, 1:41 PM
Hello,

I am using a combobox control & ItemSelector control in my application.
On combobox selection change, the selected items on the right side container of item selector should be loaded.

Say I have combobox values as Combo1, combo2, combo3 and Available items in itemselector be as item1, iteam2, item3, item4, item5.

Step 1: Selecting combo1 in combobox and item1,item2 in item selector and move it to right side box of the itemselector.
Step 2: Changing the combo box selection to combo2 and items as item3,item4,item5 and move it to right side box.
Step 3: Now, selecting combo1 again should display/load item1, item2 (selections made previously).Similarly on every combo item change, the respective selection should be displayed on the right side box.

Please let me know how this can be achieved.

Daniil
May 26, 2014, 2:38 PM
Hi @vmehta,

To catch selecting a ComboBox's item you can listen to its Select event.
http://docs.sencha.com/extjs/4.2.1/#!/api/Ext.form.field.ComboBox-event-select

As for moving items from right to left and otherwise, I can suggest you to investigate the ItemSelector's sources.
http://svn.ext.net/premium/trunk/Ext.Net/Build/Ext.Net/ux/multiselect/multiselect-debug.js

For example, search for "onAddBtnCLick". This function is being called when a user click the "Add to Selected" button.

vmehta
May 27, 2014, 5:57 AM
Thanks for thr response but i am unable to access the provided link "http://svn.ext.net/premium/trunk/Ext...elect-debug.js".
Can you please provide the content over here.

geoffrey.mcgill
May 27, 2014, 6:23 AM
You Svn credentials have been resent. You should have now.

vmehta
May 27, 2014, 2:46 PM
Thank You !!

I need to access/Bind the ToTitle part in Itemselector control(the place where the selected items are been displayed) based on the change in selection of combobox.
Is there any way I can bind only the ToTitle part of the Itemselector Control??

Any help is appreciated.


Thanks In advance.

Daniil
May 27, 2014, 5:17 PM
Is there any way I can bind only the ToTitle part of the Itemselector Control??

If I correctly understand the requirement, you can change it on the fly in JavaScript:

App.ItemSelector1.toField.child("panel").setTitle("New Title")

vmehta
May 28, 2014, 2:39 PM
If I correctly understand the requirement, you can change it on the fly in JavaScript:

App.ItemSelector1.toField.child("panel").setTitle("New Title")

The ItemselectorSnapshot1 displays the "SelectID" combobox where the text is "SCR01" and the selected values in itemselector are "Three","Four","Six", on Save button click it gets saved to database. Similarly ItemselectorSnapshot2 & ItemselectorSnapshot3 displays selections for the combobox SelectID "scr02" & "scr03" on click of save button,combobox selection id and the selectedReports ids would get saved in the db.

My requirement is whenever there is a change in combobox selection say "scr01" is changed to "scr03" the relative reports of "scr03" should be displayed in the selected reports of itemselector. The concern is how it can be set for the selectedreports only as it is a part of itemselector control and not a separate list box.

Thank You !

115411155111561

Daniil
May 29, 2014, 4:54 AM
The concern is how it can be set for the selectedreports only as it is a part of itemselector control and not a separate list box.

Sorry, I don't understand what you need. Please elaborate on that. Probably, the best is providing us with a sample to demonstrate the problem.

vmehta
May 30, 2014, 10:48 AM
Sorry, I don't understand what you need. Please elaborate on that. Probably, the best is providing us with a sample to demonstrate the problem.

Hi,

Please look at the sample below :

Step 1: Selecting scr1 in combobox and items "Zero"&"One" in item selector and move it to right side box of the itemselector. Click save
Step 2: Changing the combo box selection to scr2 and items as two,three,four and move it to right side box. Save.
Step 3: Now, selecting scr1 again should display/load zero,One (selections made previously).
Similarly On every combo item change, the respective selection should be displayed on the right side box(selected reports).

Please let me know how this can be achieved.


<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>


<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>


<script runat="server">
protected void ShowValue(object sender, DirectEventArgs e)
{
StringBuilder sb = new StringBuilder(256);

foreach (Ext.Net.ListItem item in ItemSelector1.SelectedItems)
{
sb.AppendFormat("Value={0}, Index={1}, Text={2} <br/>", item.Value, item.Index, item.Text);
}

X.Msg.Alert("Selection", sb.ToString()).Show();
}
</script>

<!DOCTYPE html>

<html>
<head id="Head1" runat="server">
<title>Overview of MultiSelect - Ext.NET Examples</title>
<link href="/resources/css/examples.css" rel="stylesheet" />

<style>
.label {
font : bold 11px tahoma,arial,sans-serif;
width : 300px;
height : 25px;
padding : 5px 0;
border : 1px dotted #99bbe8;
color : #15428b;
cursor : default;
margin : 10px;
background : #dfe8f6;
text-align : center;
margin-left : 0px;
}
</style>
</head>
<body>

<ext:ComboBox ID="cb1" runat="server" FieldLabel="Select ID" >
<Items>
<ext:ListItem Text="scr1" Value="1"></ext:ListItem>
<ext:ListItem Text="scr2" Value="2"></ext:ListItem>
<ext:ListItem Text="scr3" Value="3"></ext:ListItem>
</Items>
</ext:ComboBox>
<form id="Form1" runat="server">
<ext:ResourceManager ID="ResourceManager1" runat="server" />

<%--<ext:ResourceManager ID="ResourceManager2" runat="server" />
--%>
<ext:FormPanel ID="FormPanel1"
runat="server"
Title="ItemSelector Test"
Width="700"
BodyPadding="10"
Height="300"
Layout="FitLayout">
<Items>
<ext:ItemSelector
ID="ItemSelector1"
runat="server"
FieldLabel="ItemSelector"
AllowBlank="false"
MsgTarget="Side"
FromTitle="List of Reports" ToTitle="Selected Reports">

<Items>
<ext:ListItem Text="Zero" Value="0" />
<ext:ListItem Text="One" Value="1" />
<ext:ListItem Text="Two" Value="2" />
<ext:ListItem Text="Three" Value="3" />
<ext:ListItem Text="Four" Value="4" />
<ext:ListItem Text="Five" Value="5" />
<ext:ListItem Text="Six" Value="6" />
<ext:ListItem Text="Seven" Value="7" />
<ext:ListItem Text="Eight" Value="8" />
<ext:ListItem Text="Nine" Value="9" />
</Items>
<SelectedItems>
<ext:ListItem Value="3" />
<ext:ListItem Value="4" />
<ext:ListItem Value="6" />
</SelectedItems>
<%--<Listeners>
<Change Handler="alert('Change');" />
</Listeners>--%>
</ext:ItemSelector>
</Items>
<DockedItems>

<ext:Toolbar ID="Toolbar2" runat="server" Dock="Bottom">
<Defaults>
<ext:Parameter Name="minWidth" Value="75" />
</Defaults>
<Items>
<ext:ToolbarFill />
<ext:Button ID="Button2" runat="server" Text="Clear" Handler="if (!App.ItemSelector1.disabled) { App.ItemSelector1.clearValue(); }" />
<ext:Button ID="Button3" runat="server" Text="Reset" Handler="App.ItemSelector1.reset();" />
<ext:Button ID="Button4" runat="server" Text="Save" OnDirectClick="ShowValue" />
</Items>
</ext:Toolbar>
</DockedItems>
</ext:FormPanel>

</form>
</body>
</html>

Daniil
May 30, 2014, 11:08 AM
Ok, let's consider "Step 1".



Step 1: Selecting scr1 in combobox and items "Zero"&"One" in item selector and move it to right side box of the itemselector.


The first step is to listen to the ComboBox's Select event, as I suggested here:



To catch selecting a ComboBox's item you can listen to its Select event.
http://docs.sencha.com/extjs/4.2.1/#!/api/Ext.form.field.ComboBox-event-select (http://docs.sencha.com/extjs/4.2.1/#%21/api/Ext.form.field.ComboBox-event-select)

Going further, you should move items from left to right. Could you, please, clarify there is any result on that:




As for moving items from right to left and otherwise, I can suggest you to investigate the ItemSelector's sources.
http://svn.ext.net/premium/trunk/Ext.Net/Build/Ext.Net/ux/multiselect/multiselect-debug.js

For example, search for "onAddBtnCLick". This function is being called when a user click the "Add to Selected" button.

vmehta
May 30, 2014, 6:49 PM
Hello Daniil,

Thanks for the responses. But I will try to be more clear so we can get the accurate answer that I am looking for.

I am currently using ItemSelector control. On the page I have dropdown with options: Option A, Option B and Option C.

In my ItemSelector control, I have the following options in left hand side List Box: Item 1, Item 2, Item 3, Item 4 and Item 5.

Until now everything is working fine.

Now I select Option A from the dropdown and Move Item 1 and Item 2 to right hand side list box and click Save button. On save button click I save into my database Option A selection. Now I change the dropdown to Option B and select Item 2, Item 3 and Item 4. Again I save that to the database.

Requirement: When I select Option A again from the dropdown, I want the right hand side list box to display Item 1 and Item 2. Currently when changing the dropdown values, the right hand side list box is always empty. I have the data from my database that shows Option A with Item 1 and Item 2 but not sure how to use that information and populate the right hand side list box. My code is exactly same as posted earlier.

Hope this gives a more clear picture of my requirement.

Thanks a lot.



Ok, let's consider "Step 1".



The first step is to listen to the ComboBox's Select event, as I suggested here:



Going further, you should move items from left to right. Could you, please, clarify there is any result on that:

Daniil
Jun 02, 2014, 7:30 AM
Now I select Option A from the dropdown and Move Item 1 and Item 2 to right hand side list box and click Save button.

...

My code is exactly same as posted earlier.


In the sample that you posted earlier I don't see "Option 1", "Item 1", "Item 2". Also nothing happens if I select any options in the ComboBox, I mean that no items are being moved from left to right. I have a strong feel that code that you are working with differs from the sample that you posted before.