AutoComplete Demonstration After PostBack Problem [Archive]

Calesh

Oct 28, 2009, 7:27 PM

After post back combobox loose displaytext

thanks

<!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>ComboBox with Template - Coolite Toolkit Example</title>
<style type="text/css">
.search-item {
font: normal 11px tahoma, arial, helvetica, sans-serif;
padding: 3px 10px 3px 10px;
border: 1px solid #fff;
border-bottom: 1px solid #eeeeee;
white-space: normal;
color: #555;
}

.search-item h3 {
display: block;
font: inherit;
font-weight: bold;
color: #222;
}

.search-item h3 span {
float: right;
font-weight: normal;
margin: 0 0 5px 5px;
width: 100px;
display: block;
clear: none;
}

p { width: 650px; }

.ext-ie .x-form-text { position: static !important; }
</style>
<link href="../../../../resources/css/examples.css" rel="stylesheet" type="text/css" />
</head>
<body>
<form id="form1" runat="server">
<ext:ScriptManager ID="ScriptManager1" runat="server" />

<p>
<ext:Button ID="Button1" AutoPostBack="true" runat="server" Text="Submit">
</ext:Button>
Combo with Templates and Ajax<br />
This is a more advanced example that shows how you can combine paging, Template to create a "live search" feature.
</p>

<ext:Store ID="Store1" runat="server" AutoLoad="false">
<Proxy>
<ext:HttpProxy Method="POST" Url="Plants.ashx" />
</Proxy>
<Reader>
<ext:JsonReader Root="plants" TotalProperty="totalCount" >
<Fields>
<ext:RecordField Name="Common" />
<ext:RecordField Name="Botanical" />
<ext:RecordField Name="Light" />
<ext:RecordField Name="Price" Type="Float" />
<ext:RecordField Name="Indoor" Type="Boolean" />
</Fields>
</ext:JsonReader>
</Reader>
</ext:Store>

<div style="width:600px;">
<div class="x-box-tl"><div class="x-box-tr"><div class="x-box-tc">

<div class="x-box-ml"><div class="x-box-mr"><div class="x-box-mc">
<h3 style="margin-bottom:5px;">Search the plants</h3>

<ext:ComboBox
ID="ComboBox1"
runat="server"
StoreID="Store1"
DisplayField="Common"
ValueField="Botanical"
TypeAhead="false"
LoadingText="Searching..."
Width="570"
PageSize="10"
HideTrigger="true"
ItemSelector="div.search-item"
MinChars="1">
<Template runat="server">
<tpl for=".">
<div class="search-item">
<h3>${Price}{Common}</h3>
{Botanical}

</tpl>
</Template>
</ext:ComboBox>

<div style="padding-top:4px;">
Plants search (type '*' (asterisk) for showing all)

<div class="x-box-bl"><div class="x-box-br"><div class="x-box-bc">

<br />
<br />
<br />

<div style="width:600px;">
<div class="x-box-tl">
<div class="x-box-tr">
<div class="x-box-tc">

<div class="x-box-ml">
<div class="x-box-mr">
<div class="x-box-mc">
<h3 style="margin-bottom:5px;">Search the plants (controls dynamically created)</h3>
<asp:PlaceHolder ID="Placeholder1" runat="server" />
<div style="padding-top:4px;">
Plants search (type '*' (asterisk) for showing all)

<div class="x-box-bl">
<div class="x-box-br">
<div class="x-box-bc">

</form>
</body>
</html>

Vladimir

Oct 28, 2009, 7:34 PM

Hi,

It is correct. Combobox gets display text from Store (mapping value - text). After postback you need repopulate Store by required data to display text instead value because the store doesn't maintance data

Calesh

Oct 29, 2009, 1:28 AM

Can you give me a example?

Thanks,
Cagri.

fpw2377

Mar 31, 2010, 11:40 AM

Any word on an example for this problem, I am trying to do the same thing and cannot get it working. I have tried to refill the store after a postback but it still does not seem to work. here is my control. I am trying to make self contained combo boxes for common lookups in my app. I have tried storing the query values in viewstate and then on postback only refilling the store using these values. I have checked the outputed ext javascript and it appears the store is getting filled but the combo box still only shows the value, not the display text. Please help.

[ToolboxData(@"<{0}:EmployeeComboBox runat=""server""></{0}:EmployeeComboBox>")]
[Description("A combobox that looks up employee names.")]
public class EmployeeComboBox : ComboBox
{
#region LocalStore

private Store _LocalStore = null;

public Store LocalStore
{
get
{
return this._LocalStore;
}
set
{
this._LocalStore = value;
}
}

#endregion

#region QueryText

protected string QueryText
{
get
{
if (this.ViewState["QueryText"] == null)
{
return string.Empty;
}
else
{
return this.ViewState["QueryText"] as string;
}
}
set
{
this.ViewState["QueryText"] = value;
}
}

#endregion

#region LastPageIndex

protected int LastPageIndex
{
get
{
if (this.ViewState["LastPageIndex"] == null)
{
return -1;
}
else
{
return (int)this.ViewState["LastPageIndex"];
}
}
set
{
this.ViewState["LastPageIndex"] = value;
}
}

#endregion

#region Refresh Data

protected void RefreshData(object sender, StoreRefreshDataEventArgs e)
{
this.QueryText = this.SelectedItem.Text;
this.LastPageIndex = e.Start;
Store s = sender as Store;

HHWebDataContext dc = ConnectionManager.GetDataContext();

IQueryable<EmployeeLookupData> data = this.GetLookupQuery(dc, e.Start, e.Limit, this.QueryText);

if (data != null)
{
e.Total = data.Count();
s.DataSource = data;
}
else
{
s.DataSource = new List<EmployeeLookupData>();
e.Total = 0;
}

s.DataBind();
}

#endregion

#region Get Lookup Query

private IQueryable<EmployeeLookupData> GetLookupQuery(HHWebDataContext dc, int start, int limit, string queryText)
{
IQueryable<EmployeeLookupData> ret = null;

if (!string.IsNullOrEmpty(queryText))
{
ret = dc.Account
.Where(c => c.FirstName.StartsWith(queryText) || c.LastName.StartsWith(queryText))
.Select(c => new EmployeeLookupData()
{
Id = c.UserId,
FirstName = c.FirstName,
LastName = c.LastName,
DisplayName = string.Format("{0}, {1}", c.LastName, c.FirstName)
});
if (limit > 0)
{
ret = ret.Skip(start).Take(limit);
}
}

return ret;
}
#endregion

#region On Load
protected override void OnLoad(EventArgs e)
{
if (this.Page.IsPostBack & !Ext.Net.RequestManager.IsAjaxRequest)
{
HHWebDataContext dc = ConnectionManager.GetDataContext();

IQueryable<EmployeeLookupData> data = this.GetLookupQuery(dc, this.LastPageIndex, this.PageSize, this.QueryText);

if (data != null)
{
//foreach (EmployeeLookupData emp in data)
//{

// this.Store[0].InsertRecord(0, emp);
//}
this._LocalStore.DataSource = data;
}
this._LocalStore.DataBind();
}

base.OnInit(e);
}
#endregion

#region Create Child Controls

protected override void CreateChildControls()
{
this._LocalStore = new Store();

JsonReader reader = new JsonReader();
reader.IDProperty = "Id";
reader.Fields.Add("Id");
reader.Fields.Add("FirstName");
reader.Fields.Add("LastName");
reader.Fields.Add("DisplayName");

this._LocalStore.Reader.Add(reader);
this._LocalStore.RemotePaging = true;
this._LocalStore.AutoLoad = false;
this._LocalStore.Proxy.Add(new PageProxy() { AutoDataBind = false });
this._LocalStore.RefreshData += new Store.AjaxRefreshDataEventHandler(RefreshData);
this._LocalStore.DirectEventConfig.ViewStateMode = ViewStateMode.Enabled;

this.Controls.Add(this._LocalStore);

this.EmptyText = "[Type Employee Name Here]";
this.DisplayField = "DisplayName";
this.ValueField = "Id";
this.PageSize = 30;
this.StoreID = this._LocalStore.ID;
this.ForceSelection = true;
this.Mode = DataLoadMode.Remote;
this.HideTrigger = true;
this.TypeAhead = true;
this.ListWidth = 200;
this.LoadingText = "Searching...";
this.MinChars = 1;
this.ItemSelector = "div.search-item";
this.Template.Html = @"
<tpl for=""."">
<div class=""search-item"">
{DisplayName}

</tpl>";
this.Triggers.Add(new FieldTrigger(new FieldTrigger.Config()
{
HideTrigger = false,
Icon = TriggerIcon.Clear,
Qtip = "Clear"
}));
this.On("TriggerClick", new JFunction("this.removeByValue(this.getValue());this.clearValu e();"));
base.CreateChildControls();
}

#endregion

#region On Pre Render

protected override void OnPreRender(EventArgs e)
{
base.OnPreRender(e);
}
#endregion
}

public class EmployeeLookupData
{
#region FirstName

private string _FirstName = null;

public string FirstName
{
get
{
return this._FirstName;
}
set
{
this._FirstName = value;
}
}

#endregion

#region LastName

private string _LastName = null;

public string LastName
{
get
{
return this._LastName;
}
set
{
this._LastName = value;
}
}

#endregion

#region Id

private int _Id = -1;

public int Id
{
get
{
return this._Id;
}
set
{
this._Id = value;
}
}

#endregion

#region DisplayName

private string _DisplayName = null;

public string DisplayName
{
get
{
return this._DisplayName;
}
set
{
this._DisplayName = value;
}
}

#endregion
}

okutbay

May 05, 2010, 1:43 PM

i have the same problem... populated all data but nothing is changed...

lookin for a solution...

alexkay

May 06, 2010, 11:37 AM

Try refilling the combo/select or backing store in the "on init" event of the page every time.

okutbay

May 06, 2010, 12:44 PM

Thanks for your response.

I thought i was doing those... Seems something done wrong. Can you provide me a basic sample?

Thanks in advance...