[CLOSED] ItemSelector data binding

  1. #1

    [CLOSED] ItemSelector data binding

    Hi,

    I'm using the itemselector control but I need to bind the selected and unselected to a store... is there an example of how to do this?

    Thanks,


                            <ext:ItemSelector ID="ItemSelector1" runat="server" FieldLabel="ItemSelector" AllowBlank="false"
                                MsgTarget="Side" FromTitle="Available" ToTitle="Selected" Reorderable="False"
                                Height="360">
                                <Store>
                                    
                                </Store>
                                <Items>
                                    <ext:ListItem Text="One Hundred Twenty Three" Value="123" />
                                    <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>
                            </ext:ItemSelector>
    Last edited by Daniil; Mar 14, 2014 at 8:26 AM. Reason: [CLOSED]
  2. #2
    Hi @paulc,

    Thank you for the request. We are investigating.
  3. #3
    An ItemSelector's Store should work instead of Items.

    As for SelectedItems. Currently, there is no way to define a Store for that. We will investigate such a possibility.
  4. #4
    Hi, is there any update on this issue?

    I need to set the selected items on an ItemSelector, but I simply can't!

    I've tried as it is usually done with comboboxes i.e. by calling itemSelector.SelectedItems.Add(new ListItem...) and then itemSelector.UpdateSelectedItems(), but without success.

    Any help is welcome!

    Quote Originally Posted by Daniil View Post
    An ItemSelector's Store should work instead of Items.

    As for SelectedItems. Currently, there is no way to define a Store for that. We will investigate such a possibility.
  5. #5
    Hi @talb,

    It appears to be working in this example.

    Example
    <%@ Page Language="C#" %>
    
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    
    <script runat="server">
        protected void Select(object sender, DirectEventArgs e)
        {
            this.ItemSelector1.SelectedItems.Clear();
            this.ItemSelector1.SelectedItems.Add(new Ext.Net.ListItem() { Value = "1" });
            this.ItemSelector1.SelectedItems.Add(new Ext.Net.ListItem() { Value = "2" });
            this.ItemSelector1.UpdateSelectedItems();
        }
    </script>
    
    <!DOCTYPE html>
    <html>
    <head runat="server">
        <title>Ext.NET v2 Example</title>
    </head>
    <body>
        <form runat="server">
            <ext:ResourceManager runat="server" />
    
            <ext:Button runat="server" Text="Test" OnDirectClick="Select" />
            
            <ext:ItemSelector 
                ID="ItemSelector1" 
                runat="server"
                FromTitle="Available"
                ToTitle="Selected"
                Height="300"
                Width="700">
                <Items>
                    <ext:ListItem Text="One Hundred Twenty Three" Value="123" />
                    <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>
            </ext:ItemSelector>
        </form>
    </body>
    </html>
  6. #6
    Hi @Daniil,

    Thank you for your sample. It really works for static items, indeed.

    However, when I load the items dynamically to the store (using the OnReadData) I'm not able to set the selected Items (even after the data binding) as I show in the sample below. Perhaps am I missing something or doing something wrong?

    Even so, based on your sample I was able to get a workaround to this problem that was using the OnReadData event exclusively to load the data (without setting the selected items) and then using a listener to the store's Load event to set the selected items. It is not the ideal solution, but for now it is doing the job.

    Cheeers,

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Test.aspx.cs" Inherits="Web.Test" %>
    
    <script runat="server">
    
        protected void strItemSelector1_OnReadData(object sender, StoreReadDataEventArgs e)
        {
            LoadItems();
        }
        
        private void LoadItems()
        {
            var availableItems = new List<object>();
    
            for (int i = 0; i < 10; i++)
            {
                var item = new
                {
                    Value = i.ToString(),
                    Text = "item " + i
                };
    
                availableItems.Add(item);
            }
    
            ItemSelector1.Clear();
            
            strItemSelector1.DataSource = availableItems;
            strItemSelector1.DataBind();
    
            //Not working...
            ItemSelector1.SelectedItems.Clear();
            ItemSelector1.SelectedItems.Add(new Ext.Net.ListItem() { Value = "1" });
            ItemSelector1.SelectedItems.Add(new Ext.Net.ListItem() { Value = "2" });
            ItemSelector1.UpdateSelectedItems();
        }
    
        protected void Select(object sender, DirectEventArgs e)
        {
            //Works ok
            this.ItemSelector1.SelectedItems.Clear();
            this.ItemSelector1.SelectedItems.Add(new Ext.Net.ListItem() { Value = "1" });
            this.ItemSelector1.SelectedItems.Add(new Ext.Net.ListItem() { Value = "2" });
            this.ItemSelector1.UpdateSelectedItems();
        }
    </script>
    <!DOCTYPE html>
    <html>
    <head id="Head1" runat="server">
        <title>Ext.NET v2 Example</title>
    </head>
    <body>
        <form id="Form1" runat="server">
        <ext:ResourceManager ID="ResourceManager1" runat="server" />
        <ext:Button ID="Button1" runat="server" Text="Test" OnDirectClick="Select" />
        <ext:Button ID="Button2" runat="server" Text="Load Data" Handler="#{strItemSelector1}.removeAll(); #{strItemSelector1}.reload();" />
    
        <ext:ItemSelector ID="ItemSelector1" runat="server" FromTitle="Available" ToTitle="Selected"
            DisplayField="Text" ValueField="Value" Height="300" Width="700">
            <Store>
                <ext:Store runat="server" ID="strItemSelector1" OnReadData="strItemSelector1_OnReadData">
                    <Model>
                        <ext:Model ID="Model1" runat="server" IDProperty="Value">
                            <Fields>
                                <ext:ModelField Name="Text" />
                                <ext:ModelField Name="Value" />
                            </Fields>
                        </ext:Model>
                    </Model>
                </ext:Store>
            </Store>
        </ext:ItemSelector>
        </form>
    </body>
    </html>
  7. #7
    Yes, there is a problem that it selects the items before loading the data to the Store.

    I can suggest one of the following solutions.

    Solution #1
    Ext.Net.ListItemCollection itemsToSelect = new Ext.Net.ListItemCollection()
    {
            new Ext.Net.ListItem() { Value = "1" },
            new Ext.Net.ListItem() { Value = "2" }
    };
    
    string handler = string.Format("function() {{ {0}.setSelectedItems({1}); }}", this.ItemSelector1.ClientID, JRawValue.From(itemsToSelect.Serialize()));
    
    strItemSelector1.On("load", handler, null, new HandlerConfig() { Single = true });
    Solution #2
    <script>
        Ext.define("MyOverrides", {
            override: "Ext.ux.form.ItemSelector",
    
            setSelectedItemsAfterLoad: function(values) {
                this.getStore().on("load", function() {
                    this.setSelectedItems(values);
                }, this, { single: true });
            }
        });
    </script>
    Ext.Net.ListItemCollection itemsToSelect = new Ext.Net.ListItemCollection()
    {
            new Ext.Net.ListItem() { Value = "1" },
            new Ext.Net.ListItem() { Value = "2" }
    };
    
    ItemSelector1.Call("setSelectedItemsAfterLoad", JRawValue.From(itemsToSelect.Serialize()));
    Last edited by Daniil; Mar 11, 2014 at 4:13 AM.

Similar Threads

  1. ComboBox data binding
    By AlexMaslakov in forum 1.x Help
    Replies: 3
    Last Post: Jun 13, 2013, 9:04 AM
  2. Combo Box data not binding
    By humayoun kabir in forum 1.x Help
    Replies: 1
    Last Post: Jan 09, 2013, 6:41 AM
  3. [CLOSED] Data binding to NetTiers data entity objects
    By vadym.f in forum 1.x Premium Help
    Replies: 7
    Last Post: Apr 09, 2012, 3:35 PM
  4. Data Binding
    By Deepak in forum 1.x Help
    Replies: 3
    Last Post: Nov 04, 2010, 10:27 AM
  5. How to Binding data to Treegird
    By shinichi1210 in forum 1.x Help
    Replies: 1
    Last Post: Oct 22, 2010, 5:28 AM

Posting Permissions