What's New?

[CLOSED] ComboBox : Selected value disappear after button click

  1. #1
    Mar 27, 2015, 5:00 AM

    [CLOSED] ComboBox : Selected value disappear after button click

    Hi this post related to http://forums.ext.net/showthread.php...r-button-click
    I do bellow code 

    public partial class delayed_event : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!X.IsAjaxRequest)
            {
                LoadCombo();
            }
        }

        private void LoadCombo()
        {
            Department d ;
            List<Department> _d = new List<Department>();
            for (int i = 0; i <= 4; i++)
            {
                d = new Department();
                d.DepartmentID = i;
                d.DepartmentName = "Department - " + i.ToString();
                _d.Add(d);
            }

            DepartmentStore.DataSource = _d;
            DepartmentStore.DataBind();
            this.cmpDepartment.SelectedItems.Clear();
            this.cmpDepartment.Items.Insert(0, new Ext.Net.ListItem { Text = "All", Value = "0" });
            this.cmpDepartment.SelectedItems.Add(new Ext.Net.ListItem { Index = 0 });
        }

        protected void btn_Click(object sender, EventArgs e)
        {

        }

       

    }

    public class Department
    {
        public int DepartmentID { get; set; }
        public string DepartmentName { get; set; }
    }
    <body>
    <form id="Form1" runat="server">
        <ext:ResourceManager ID="ResourceManager1" runat="server" DisableViewState="false" />

        <ext:ComboBox runat="server" ID="cmpDepartment" Editable="true" DisplayField="DepartmentName" ValueField="DepartmentID" TypeAhead="true"
            EmptyText="All" FireSelectOnLoad="true" QueryMode="Local">
            <Triggers>
                <ext:FieldTrigger Icon="Clear" HideTrigger="true">
                </ext:FieldTrigger>

            </Triggers>
            <Listeners>
                <Select Handler="this.getTrigger(0).show();" />
                <BeforeQuery Handler="this.getTrigger(0)[this.getRawValue().toString().length == 0 ? 'hide' : 'show']();" />
                <TriggerClick Handler="if (index == 0) {
                                           this.clearValue();
                                           this.getTrigger(0).hide();
                                       }" />
            </Listeners>
            <Store>
                <ext:Store
                    runat="server"
                    ID="DepartmentStore">

                    <Model>
                        <ext:Model ID="Model1" runat="server" IDProperty="DepartmentID">
                            <Fields>
                                <ext:ModelField Name="DepartmentID" Type="Int" />
                                <ext:ModelField Name="DepartmentName" Type="String" />
                            </Fields>
                        </ext:Model>
                    </Model>
                </ext:Store>
            </Store>

        </ext:ComboBox>
        <ext:DisplayField runat="server" ID="df" PaddingSpec="0 0 0 25" Html="&nbsp;"></ext:DisplayField>
        <ext:Button runat="server" ID="btn" OnClick="btn_Click" Text="Click" AutoPostBack="true"></ext:Button>
    </form>
</body>
    select any option expect All then click the button ,
    selected option lost and All get selected.
    Last edited by Daniil; Apr 07, 2015 at 12:26 PM. Reason: [CLOSED]
  2. #2
    Mar 27, 2015, 9:19 AM
    Hi matrixwebtech

    Do you need AutoPostBack="true" for the button?

    If not, then consider removing it.
    Last edited by EnZo; Mar 27, 2015 at 9:50 AM.
  3. #3
    Mar 27, 2015, 9:58 AM
    Yes I need AutoPostBack="true" for the button ,because in my page I show a SSRS report if if AutoPostBack set to false then then report not showing .

    http://forums.ext.net/showthread.php...l=1#post220661
  4. #4
    Mar 27, 2015, 11:18 AM
    Hi matrixwebtech

    Please review the below code

            protected void Page_Load(object sender, EventArgs e)
        {
            if (!X.IsAjaxRequest)
            {
                LoadCombo();
            }
            if (!IsPostBack)
            {
                //To automatically select 'All' when the page first loads
                this.cmpDepartment.SelectedItems.Add(new Ext.Net.ListItem { Index = 0 });
            }
        }

        private void LoadCombo()
        {
            Department d;
            List<Department> _d = new List<Department>();
            for (int i = 0; i <= 4; i++)
            {
                d = new Department();
                d.DepartmentID = i;
                d.DepartmentName = "Department - " + i.ToString();
                _d.Add(d);
            }

            DepartmentStore.DataSource = _d;
            DepartmentStore.DataBind();
            //this.cmpDepartment.SelectedItems.Clear();
            this.cmpDepartment.Items.Insert(0, new Ext.Net.ListItem { Text = "All", Value = "0" });
            //this.cmpDepartment.SelectedItems.Add(new Ext.Net.ListItem { Index = 0 });
        }
    Last edited by EnZo; Mar 27, 2015 at 11:21 AM.
  5. #5
    Mar 27, 2015, 4:59 PM
    Hi @ EnZo your code works and fix my problem.but is it possible to do this with markup?
  6. #6
    Mar 30, 2015, 7:50 AM
    Hi matrixwebtech

    The problem originally was that the LoadCombo function was clearing the ComboBox and loading the store every time a PostBack happens.

    Unless you need to update the ComboBox's store every time the button is clicked, you can move the call to LoadCombo into the following block as such

            protected void Page_Load(object sender, EventArgs e)
        {
            if (!X.IsAjaxRequest && !IsPostBack)
            {
               LoadCombo();
               this.cmpDepartment.SelectedItems.Add(new Ext.Net.ListItem { Index = 0 });
            }
        }
    The store and the selected value will remain even after PostBack.

    If you need to load the ComboBox's store through JavaScript, it can be done this way

            function loadStore() {
            var data = [
            { 'DepartmentID': 0, 'DepartmentName': 'All' },
            { 'DepartmentID': 1, 'DepartmentName': 'Department 1' },
            { 'DepartmentID': 2, 'DepartmentName': 'Department 2' },
            { 'DepartmentID': 3, 'DepartmentName': 'Department 3' },
            { 'DepartmentID': 4, 'DepartmentName': 'Department 4' }];

            App.cmpDepartment.getStore().loadData(data);
            App.cmpDepartment.setValue(0); //To select 'All' at first load
        }
    However, I don't think the value will remain selected if you use this method.

Similar Threads

  1. [CLOSED] combobox value disappear after button click
    By matrixwebtech in forum 2.x Legacy Premium Help
    Replies: 9
    Last Post: Feb 16, 2015, 6:09 AM
  2. how to get radio button group selected values just like textbox in button click
    By sundarsureshin in forum 2.x Help
    Replies: 8
    Last Post: Jul 16, 2014, 12:37 PM
  3. Selected GridPanel row value on click of a button
    By rashidsiddique in forum 2.x Help
    Replies: 1
    Last Post: Jun 19, 2014, 8:56 AM
  4. how to get selected row id from gridpanel in code behind file(c#) at button click
    By eldhose in forum 1.x Help
    Replies: 3
    Last Post: Oct 21, 2011, 4:35 AM
  5. ComboBox selected index on button click event.
    By jmilton in forum 1.x Help
    Replies: 9
    Last Post: Mar 25, 2009, 7:06 PM

Posting Permissions