Must selecting an item in a ComboBox really be so difficult?

[Martijn]

Using 2.1 revision 4492
Windows 7 Professional SP1
IIS 7.5
Visual Studio 2010

Want one function with which I can select a item in a combox in all situations.
So during page load, directevents and with or without store or storeid.
After looking at not very helpfull basic examples and finding nothing exactly about this in the forum I start this thread.
Maybe filter for version 1 or 2 would be helpfull in the quicksearch?

This is what I came up with after lot of trying:

    private void ChangeComboBoxValue(ComboBox cb, string value)
    {
        if (cb.Store.Count > 0 || !string.IsNullOrEmpty(cb.StoreID))
            // Returns 'App.cbFive.select(3);App.cbSix.select(3);'
            // Only works with Store and StoreID
            ResourceManager.AddInstanceScript(string.Format("{0}.select({1});", cb.ClientID, value));
        else
        {
            if (X.IsAjaxRequest)
                // Returns 'App.cbOne.select(\"3\");App.cbTwo.select(\"3\");App.cbThree.select(\"3\");App.cbFour.select(\"3\");'
                // Doesn't work for Store and StoreID
                cb.Select(value);
            else
                // Returns 'selectedItems:[{value:"2"}]'
                // Doesn't work for Store and StoreID
                cb.SelectedItems.Add(new Ext.Net.ListItem { Value = value });
        }
    }

This is all I needed in version 1:

    private void ChangeComboBoxValue(ComboBox cb, string value)
    {
        cb.SelectedItem.Value = value;
    }

Must be overlooking something.
This is my testpage:

<%@ Page Language="C#" %>

<script runat="server" type="text/C#">
    protected void Page_Load(object sender, EventArgs e)
    {
        if (X.IsAjaxRequest || IsPostBack) return;

        var data = new []
        {
            new ComboItem(1, "Item1"),
            new ComboItem(2, "Item2"),
            new ComboItem(3, "Item3"),
            new ComboItem(4, "Item4"),
        };

        dsOne.DataSource = data;
        dsOne.DataBind();

        foreach (var cItem in data)
        {
            cbOne.Items.Add(new Ext.Net.ListItem(cItem.Name, cItem.ComboItemId.ToString()));
            cbTwo.Items.Add(new Ext.Net.ListItem { Text = cItem.Name, Value = cItem.ComboItemId.ToString() });
            cbThree.Items.Add(new Ext.Net.ListItem { Text = cItem.Name, Value = cItem.ComboItemId.ToString() });
            cbFour.Items.Add(new Ext.Net.ListItem { Text = cItem.Name, Value = cItem.ComboItemId.ToString() });
        }

        ChangeComboBoxValue(cbOne, "2");
        ChangeComboBoxValue(cbTwo, "2");
        ChangeComboBoxValue(cbThree, "2");
        // Four set in Markup
        ChangeComboBoxValue(cbFive, "2");
        ChangeComboBoxValue(cbSix, "2");
    }

    protected void ChangeSelection(object sender, DirectEventArgs e)
    {
        ChangeComboBoxValue(cbOne, "3");
        ChangeComboBoxValue(cbTwo, "3");
        ChangeComboBoxValue(cbThree, "3");
        ChangeComboBoxValue(cbFour, "3");
        ChangeComboBoxValue(cbFive, "3");
        ChangeComboBoxValue(cbSix, "3");

        //ResourceManager.AddInstanceScript("var index = App.dsOne.find('ComboItemId', '3', false); alert('Index: ' + index); var recordId = App.dsOne.getAt(index).internalId; alert('RecordId: ' + recordId);");
    }
    
    private void ChangeComboBoxValue(ComboBox cb, string value)
    {
        if (cb.Store.Count > 0 || !string.IsNullOrEmpty(cb.StoreID))
            // Returns 'App.cbFive.select(3);App.cbSix.select(3);'
            // Only works with Store and StoreID
            ResourceManager.AddInstanceScript(string.Format("{0}.select({1});", cb.ClientID, value));
        else
        {
            if (X.IsAjaxRequest)
                // Returns 'App.cbOne.select(\"3\");App.cbTwo.select(\"3\");App.cbThree.select(\"3\");App.cbFour.select(\"3\");'
                // Doesn't work for Store and StoreID
                cb.Select(value);
            else
                // Returns 'selectedItems:[{value:"2"}]'
                // Doesn't work for Store and StoreID
                cb.SelectedItems.Add(new Ext.Net.ListItem { Value = value });
        }
        //if (X.IsAjaxRequest)
        //{
        //    if (cb.Store.Count == 0 && string.IsNullOrEmpty(cb.StoreID))
        //        cb.Select(value);
        //    else
        //        ResourceManager.AddInstanceScript(string.Format("{0}.select({1});", cb.ClientID, value));
        //    //cb.Select(value); // <-- Doesn't work for store
        //    //cb.SetValue(value); // <-- Doesn't work for store
        //    //cb.SetValueAndFireSelect(value); // <-- Doesn't work for store
        //    //cb.Select(2); // <-- Works for all but is index
        //    //cb.SelectedItems.Add(new Ext.Net.ListItem { Value = value }); //<-- Doesn't work
        //    //cb.SelectedItems.Add(new Ext.Net.ListItem { Index = 2 }); //<-- Doesn't work
        //}
        //else
        //{
        //    if (cb.Store.Count == 0 && string.IsNullOrEmpty(cb.StoreID))
        //        cb.SelectedItems.Add(new Ext.Net.ListItem { Value = value });
        //    else
        //        ResourceManager.AddInstanceScript(string.Format("{0}.select({1});", cb.ClientID, value));
        //    //cb.SelectedItems.Add(new Ext.Net.ListItem { Value = value }); //<-- Doesn't work for store
        //    //cb.SelectedItems.Add(new Ext.Net.ListItem { Index = 1 }); //<-- Works for all also store but is index
        //    //cb.Select(value); // <-- Doesn't work for store
        //}
            
    }
    
    public class ComboItem
    {
        public ComboItem(int id, string name) { ComboItemId = id; Name = name; }
        public int ComboItemId { get; set; }
        public string Name { get; set; }
    }
</script>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <ext:ResourceManager runat="server" />
    <ext:Viewport runat="server" Layout="FormLayout">
        <Items>
            <ext:ComboBox runat="server" ID="cbOne" EmptyText="No selection" Editable="False" />
            <ext:ComboBox runat="server" ID="cbTwo" EmptyText="No selection" Editable="False" />
            <ext:ComboBox runat="server" ID="cbThree" EmptyText="No selection" Editable="False" />
            <ext:ComboBox runat="server" ID="cbFour" EmptyText="No selection" Editable="False">
                <SelectedItems>
                    <ext:ListItem Value="2" />
                </SelectedItems>
            </ext:ComboBox>
            <ext:ComboBox runat="server" ID="cbFive" ValueField="ComboItemId" DisplayField="Name" EmptyText="No selection" Editable="False">
                <Store>
                    <ext:Store runat="server" ID="dsOne">
                        <Model>
                            <ext:Model runat="server" IDProperty="ComboItemId">
                                <Fields>
                                    <ext:ModelField Name="ComboItemId" Type="Int" />
                                    <ext:ModelField Name="Name" />
                                </Fields>
                            </ext:Model>
                        </Model>
                    </ext:Store>
                </Store>
            </ext:ComboBox>
            <ext:ComboBox runat="server" ID="cbSix" StoreID="dsOne" ValueField="ComboItemId" DisplayField="Name" EmptyText="No selection" Editable="False" />
            
            <ext:Button runat="server" Text="Change to Item3">
                <DirectEvents>
                    <Click OnEvent="ChangeSelection" />
                </DirectEvents>
            </ext:Button>
        </Items>
    </ext:Viewport>
    </form>
</body>
</html>

[RCN]

Please, let me know whether the following example helps you to achieve it

<!DOCTYPE html>
<html>
<head runat="server">
    <title>Index</title>
    <script type="text/javascript">
        var setSelectedValue = function (value) {
            App._cb.select(value);
        }
    </script>
</head>
<body>
    <ext:ResourceManager ID="ResourceManager1" runat="server" />
    <ext:ComboBox ID="_cb" runat="server">
        <SelectedItems>
            <ext:ListItem Value="2" />
        </SelectedItems>
        <Items>
            <ext:ListItem Text="Ext" Value="1" />
            <ext:ListItem Text="Net" Value="2" />
            <ext:ListItem Text="Ext.Net" Value="3" />
        </Items>
    </ext:ComboBox>
    <ext:Button Text="Select A - 1" runat="server">
        <Listeners>
            <Click Handler="setSelectedValue('1');" />
        </Listeners>
    </ext:Button>
    <ext:Button Text="Select B - 2" runat="server">
        <Listeners>
            <Click Handler="setSelectedValue('2');" />
        </Listeners>
    </ext:Button>
    <ext:Button Text="Select C - 3" runat="server">
        <Listeners>
            <Click Handler="setSelectedValue('3');" />
        </Listeners>
    </ext:Button>
</body>
</html>

[RCN]

And pay attention on the following scenario:

The ComboItem's ComboItemId property is defined as int, but when you select, you pass an string, so the value is not selected correctly (internal invoke to findRecordByValue returns false)

[Vladimir]

The ComboItem's ComboItemId property is defined as int, but when you select, you pass an string, so the value is not selected correctly (internal invoke to findRecordByValue returns false)

In this case, you can set Mode="Raw" for ListItem

[Martijn]

The example doesn't use any Store, DirectEvents and uses only markup code.
The content and selected value is not always the same so cannot just define everything in markup.
I want one C# function in which I can select a item in a combobox in all situations.
So at PageLoad, DirectEvents, DirectMethods, with and without Store.
With version 1 this was ComboBox.SelectedItem.Value, this worked in all situations.
What can I use with version 2?

The function I use in my first post works but there must be a nicer solution?

    private void ChangeComboBoxValue(ComboBox cb, string value)
    {
        if (cb.Store.Count > 0 || !string.IsNullOrEmpty(cb.StoreID))
            // Returns 'App.cbFive.select(3);App.cbSix.select(3);'
            // Only works with Store and StoreID
            ResourceManager.AddInstanceScript(string.Format("{0}.select({1});", cb.ClientID, value));
        else
        {
            if (X.IsAjaxRequest)
                // Returns 'App.cbOne.select(\"3\");App.cbTwo.select(\"3\");App.cbThree.select(\"3\");App.cbFour.select(\"3\");'
                // Doesn't work for Store and StoreID
                cb.Select(value);
            else
                // Returns 'selectedItems:[{value:"2"}]'
                // Doesn't work for Store and StoreID
                cb.SelectedItems.Add(new Ext.Net.ListItem { Value = value });
        }
    }

ComboBox.Select(2);
When pass Int:
- Selects by Index
- With PageLoad it works for ComboBox without store but otherwise it selects nothing
- Works for all at DirectEvent but still selects by Index

ComboBox.Select("2");
When pass String:
- Selects by Value
- With PageLoad it works for ComboBox without store but otherwise it showes the value as text
- With DirectEvent it works for ComboBox without store but otherwise it showes the value as text

ExtJs:
select(r : Object)
Selects an item by a Model, or by a key value.

For some reason it doesn't select by key value when I use the C# Select function with a Int.

When I use Mode Raw it selects nothing when passing a string it only shows the value as text.
And with int still same problems as described above.

[Martijn]

Update:

    private void ChangeComboBoxValue(ComboBox cb, int value)
    {
        if (cb.Store.Count == 0 && string.IsNullOrEmpty(cb.StoreID))
        {
            cb.SelectedItems.Clear();
            cb.SelectedItems.Add(new Ext.Net.ListItem { Value = value.ToString() });
            cb.UpdateSelectedItems();
        }
        else
            cb.SetValue(value);
    }

[Martijn]

Update:

    private void ChangeComboBoxValue(ComboBox cb, int value)
    {
        ParameterMode mode = 
            (cb.Store.Count == 0 && string.IsNullOrEmpty(cb.StoreID))
                ? ParameterMode.Value
                : ParameterMode.Raw;
        
        cb.SelectedItems.Clear();
        cb.SelectedItems.Add(new Ext.Net.ListItem { Value = value.ToString(), Mode = mode});
        cb.UpdateSelectedItems();
    }

Looks reasonable.
More information about ParameterMode

Thanks for the help!

[Martijn]

Perhaps these methods could be included in Ext.Net?

    public static class ExtNetExtentions
    {
        #region ComboBox extentions

        public static void SelectByValue(this ComboBox cb, int? value)
        {
            cb.Reset(); // random typed in text will prevent you from changing item
            cb.SelectedItems.Clear();

            if (value.HasValue)
            {
                ParameterMode mode =
                    (cb.Store.Count == 0 && string.IsNullOrEmpty(cb.StoreID))
                        ? ParameterMode.Value
                        : ParameterMode.Raw;
                cb.SelectedItems.Add(new ListItem { Value = value.ToString(), Mode = mode });
            }

            cb.UpdateSelectedItems();
        }

        public static void SelectByText(this ComboBox cb, string text)
        {
            cb.Reset();
            cb.SelectedItems.Clear();
            if (!string.IsNullOrEmpty(text))
                cb.SelectedItems.Add(new ListItem { Text = text });
            cb.UpdateSelectedItems();
        }

        public static void SelectByIndex(this ComboBox cb, int index)
        {
            cb.Reset();
            cb.SelectedItems.Clear();
            cb.SelectedItems.Add(new ListItem { Index = index });
            cb.UpdateSelectedItems();
        }

        public static bool HasValue(this ComboBox cb)
        {
            return cb.SelectedItems.Any() && !string.IsNullOrEmpty(cb.SelectedItems[0].Value);
        }

        public static string GetValue(this ComboBox cb)
        {
            return cb.SelectedItems.Any() ? cb.SelectedItems[0].Value : null;
        }

        public static string GetText(this ComboBox cb)
        {
            return cb.SelectedItems.Any() ? cb.SelectedItems[0].Text : null;
        }

        public static int GetIndex(this ComboBox cb)
        {
            return cb.SelectedItems.Any() ? cb.SelectedItems[0].Index : -1;
        }

        #endregion
    }

[Fergus]

I too am finding Combobox in V2 very difficult. It was so easy in V1.
With store, without store, page load, client side all producing different results for setvalue, setvalueandfireselect, .value, selecteditems.add etc. etc. all producing different results

[howardyin]

Perhaps these methods could be included in Ext.Net?

Good suggestion,i'm on your side.