PDA

View Full Version : [CLOSED] ComboBox : Selected value disappear after button click



matrixwebtech
Mar 27, 2015, 5:00 AM
Hi this post related to http://forums.ext.net/showthread.php?49141-CLOSED-combobox-value-disappear-after-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.

EnZo
Mar 27, 2015, 9:19 AM
Hi matrixwebtech

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

If not, then consider removing it.

matrixwebtech
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?48301-CLOSED-Setup-SSRS-report-with-EXT-Net-web-form&p=220661&viewfull=1#post220661

EnZo
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 });
}

matrixwebtech
Mar 27, 2015, 4:59 PM
Hi @ EnZo your code works and fix my problem.but is it possible to do this with markup?

EnZo
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.