PDA

View Full Version : [CLOSED] ItemSelector questions



cwolcott
Mar 19, 2016, 8:36 PM
I am using the ItemSelector control for the first time in 4 years and have some questions.


How to set the ButtonsText for the ItemSelector?
Can the Items list and SelectedItems list be swapped? SelectedItems on the left and Items on the right.
Can I add my own navigation button? I would like to add a clear.
Can the SelectedItems list be resorted after adding items from the Items list?
Can the Items list be resorted after removing items from the SelectedItems list?


When the user types a new tag in the textfield and presses the add button I need to:

Add the new tag to the store;
Update the ItemSelector Items list with the updated store;
Add the entered tag to SelectedItems list and update


Finally when the user presses the save button I need to:

Gather the SelectedItems list and call a direct method.




<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="Sandbox.Code.ItemSelector.Default" %>

<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<script runat="server">
protected void Page_Load(object sender, EventArgs e)
{
// A list of available tags will be pulled from the database.
List<object> availableTags = new List<object>();
availableTags.Add(new { Tag = "DEF" });
availableTags.Add(new { Tag = "GHI" });
availableTags.Add(new { Tag = "JKL" });
availableTags.Add(new { Tag = "MNO" });
availableTags.Add(new { Tag = "PQR" });
availableTags.Add(new { Tag = "STU" });
availableTags.Add(new { Tag = "VWX" });
availableTags.Add(new { Tag = "YZ" });
availableTags.Add(new { Tag = "ABC" });
eamEtgAvailableTagsStore.DataSource = availableTags;
eamEtgAvailableTagsStore.DataBind();

// A list of associated tags will be pulled from the database.
eamEtgTags.SelectedItems.Clear();
eamEtgTags.SelectedItems.Add(new Ext.Net.ListItem() { Value = "DEF" });
eamEtgTags.UpdateSelectedItems();

}

</script>
<!DOCTYPE html>
<html>
<head id="Head1" runat="server">
<title>ItemSelector Question</title>
</head>
<body>
<form runat="server">
<ext:ResourceManager runat="server" />
<ext:Window ID="TagsDialog" runat="server" ClientIDMode="Static" Title="Edit: Tags" Icon="TagBlueEdit" Width="500" Layout="FitLayout"
Resizable="false" Modal="true" Border="false" DefaultFocus="eamEtgNewTag">
<HtmlBin>
<script type="text/javascript">
Routines = {

addNewTag: function () {

// How to add the new tag:
// 1) To the store
// 2) Update the ItemSelector items with the updated store
// 3) Add it to SelectedItems and update
App.eamEtgNewTag.reset();
ctrl.disable();
},

saveTags: function () {

// Need to gather the selectedItems add call a direct method.
Ext.Msg.alert("Save", "Saving the tags");
Routines.close();
},

close: function () {

App.TagsDialog.close();
}
}
</script>
</HtmlBin>
<Items>
<ext:FormPanel runat="server" BodyPadding="5">
<Items>
<ext:ItemSelector ID="eamEtgTags" runat="server" ClientIDMode="Static" FromTitle="Available Tags"
ToTitle="Associated Tags" Buttons="add,remove" DisplayField="Tag" ValueField="Tag" Height="120">
<Store>
<ext:Store ID="eamEtgAvailableTagsStore" runat="server">
<Model>
<ext:Model runat="server">
<Fields>
<ext:ModelField Name="Tag" Type="String" />
</Fields>
</ext:Model>
</Model>
<Sorters>
<ext:DataSorter Property="Tag" Direction="ASC" />
</Sorters>
</ext:Store>
</Store>
</ext:ItemSelector>
<ext:FieldContainer runat="server" Layout="HBoxLayout" AnchorHorizontal="100%">
<Items>
<ext:Container runat="server" Flex="1" />
<ext:TextField ID="eamEtgNewTag" runat="server" ClientIDMode="Static" MaxLength="63"
EnforceMaxLength="true" Width="170">
<Listeners>
<Change Handler="App.eamEtgddBtn.setDisabled(!this.isDirty());" />
</Listeners>
</ext:TextField>
<ext:Button ID="eamEtgddBtn" runat="server" ClientIDMode="Static" Text="Add" Icon="Add"
MarginSpec="0 0 0 5" Disabled="true">
<Listeners>
<Click Fn="Routines.addNewTag" />
</Listeners>
</ext:Button>
</Items>
</ext:FieldContainer>
</Items>
</ext:FormPanel>
</Items>
<Buttons>
<ext:Button runat="server" Text="Save" Icon="BookGo" OnClientClick="Routines.saveTags" />
<ext:Button runat="server" Text="Cancel" Icon="BulletCross" OnClientClick="Routines.close" />
</Buttons>
</ext:Window>
</form>
</body>
</html>

Daniil
Mar 22, 2016, 2:25 PM
Hello Chris,

I am sorry for such the delay in answering.


1. How to set the ButtonsText for the ItemSelector?

Please use:

Example

protected void Page_Load(object sender, EventArgs e)
{
eamEtgTags.ButtonsText = new ItemSelectorButtonsText
{
Add = "My Add Text",
Remove = "My Remove Text"
};
}

In markup it can look like that:

<ext:ItemSelector
...
ButtonsText='<%# new ItemSelectorButtonsText { Add = "My Add Text", Remove = "My Remove Text" } %>'
AutoDataBind="true">

I'll look if we can improve a way of setting it via markup in Ext.NET v4. Thank you for the question!


2. Can the Items list and SelectedItems list be swapped? SelectedItems on the left and Items on the right.
...


Please start new forum threads. If answer all the questions in one thread, it might quickly become a mess that is difficult to maintain:)