Jan 31, 2012, 7:26 PM
[CLOSED] How to update a combo bound value and text in a master/detail record?
Hi,
I have a master-detail association between a GridPanel and a FormPanel. On the form, there's a ComboBox control containing two gender entries for the sake of this example. When I modify the form, I want to update the corresponding row in the Master GridPanel. It's simple for TextField and DateField. However, a ComboBox can only have one DataIndex. In my case, it's GenderCode, which is the Value for the combobox. For the GridPanel display, the GenderDesc is used and GenderCode should be hidden.
What's the correct way of updating the form record so that both GenderCode and GenderDesc get updated in the record and the GridPanel row? In my code, the workaround is as follows (probably, wrong):
Thanks,
Vadym
I have a master-detail association between a GridPanel and a FormPanel. On the form, there's a ComboBox control containing two gender entries for the sake of this example. When I modify the form, I want to update the corresponding row in the Master GridPanel. It's simple for TextField and DateField. However, a ComboBox can only have one DataIndex. In my case, it's GenderCode, which is the Value for the combobox. For the GridPanel display, the GenderDesc is used and GenderCode should be hidden.
What's the correct way of updating the form record so that both GenderCode and GenderDesc get updated in the record and the GridPanel row? In my code, the workaround is as follows (probably, wrong):
// How to do this update transparently ??
var combo = Ext.getCmp('Combo1');
var selItemText = combo.getSelectedItem().text;
form.record.data["GenderDesc"] = selItemText;
///////////////////////////////////////////////
Please refer to the full sample below.Thanks,
Vadym
<%@ Page Language="C#" %>
<script runat="server">
protected void Page_Load(object sender, EventArgs e)
{
bool useConfirmation;
if (bool.TryParse(UseConfirmation.Text, out useConfirmation))
{
this.Store1.SuspendScripting();
this.Store1.UseIdConfirmation = useConfirmation;
this.Store1.ResumeScripting();
}
this.BindData();
}
public class TestPerson
{
public int Id
{
get;
set;
}
public string Email
{
get;
set;
}
public string First
{
get;
set;
}
public string Last
{
get;
set;
}
public DateTime DOB
{
get;
set;
}
public string GenderCode
{
get;
set;
}
public string GenderDesc
{
get;
set;
}
}
//----------------Page------------------------
private List<TestPerson> TestPersons
{
get
{
return new List<TestPerson>
{
new TestPerson{Id=1, Email="fred@flintstone.com", First="Fred", Last="Flintstone", DOB=Convert.ToDateTime("10/10/1980"), GenderCode="M", GenderDesc="Male"},
new TestPerson{Id=2, Email="wilma@flintstone.com", First="Wilma", Last="Flintstone",DOB=Convert.ToDateTime("11/11/1975"), GenderCode="F", GenderDesc="Female"},
new TestPerson{Id=3, Email="pebbles@flintstone.com", First="Pebbles", Last="Flintstone",DOB=Convert.ToDateTime("12/12/1968"), GenderCode="F", GenderDesc="Female"},
new TestPerson{Id=4, Email="barney@rubble.com", First="Barney", Last="Rubble",DOB=Convert.ToDateTime("1/5/1987"), GenderCode="F", GenderDesc="Female"},
new TestPerson{Id=5, Email="betty@rubble.com", First="Betty", Last="Rubble",DOB=Convert.ToDateTime("1/9/1976"), GenderCode="M", GenderDesc="Male"},
new TestPerson{Id=6, Email="bambam@rubble.com", First="BamBam", Last="Rubble",DOB=Convert.ToDateTime("10/11/1981"), GenderCode="M", GenderDesc="Male"}
};
}
}
private static int curId = 7;
private static object lockObj = new object();
private int NewId
{
get
{
return System.Threading.Interlocked.Increment(ref curId);
}
}
private List<TestPerson> CurrentData
{
get
{
var persons = this.Session["TestPersons"];
if (persons == null)
{
persons = this.TestPersons;
this.Session["TestPersons"] = persons;
}
return (List<TestPerson>)persons;
}
}
private void BindData()
{
if (X.IsAjaxRequest)
{
return;
}
this.Store1.DataSource = this.CurrentData;
this.Store1.DataBind();
}
</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 id="Head1" runat="server">
<title>Grid with AutoSave - Ext.NET Examples</title>
<link href="../../../../resources/css/examples.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
var updateRecord = function (form) {
if (form.record == null) {
return;
}
if (!form.getForm().isValid()) {
Ext.net.Notification.show({
iconCls: "icon-exclamation",
html: "Form is invalid",
title: "Error"
});
return false;
}
// How to do this update transparently??
var combo = Ext.getCmp('Combo1');
var selItemText = combo.getSelectedItem().text;
form.record.data["GenderDesc"] = selItemText;
///////////////////////////////////////////////
form.getForm().updateRecord(form.record);
};
</script>
</head>
<body>
<form id="Form1" runat="server">
<ext:ResourceManager ID="ResourceManager1" runat="server" />
<ext:Hidden ID="UseConfirmation" runat="server" Text="false" />
<ext:FormPanel ID="UserForm" runat="server" Icon="User" Frame="true" LabelAlign="Right"
Title="User -- All fields are required" Width="600">
<Items>
<ext:TextField ID="TextField1" runat="server" FieldLabel="Email" DataIndex="Email"
AllowBlank="false" Vtype="email" AnchorHorizontal="100%" />
<ext:TextField ID="TextField2" runat="server" FieldLabel="First" DataIndex="First"
AllowBlank="false" AnchorHorizontal="100%" />
<ext:TextField ID="TextField3" runat="server" FieldLabel="Last" DataIndex="Last"
AllowBlank="false" AnchorHorizontal="100%" />
<ext:DateField ID="DOB" runat="server" FieldLabel="DOB" DataIndex="DOB" AllowBlank="false"
AnchorHorizontal="100%" />
<ext:ComboBox ID="Combo1" runat="server" FieldLabel="Gender" Editable="false" TypeAhead="true"
SelectOnFocus="true" DataIndex="GenderCode" AllowBlank="false" AnchorHorizontal="100%">
<Items>
<ext:ListItem Text="Male" Value="M" />
<ext:ListItem Text="Female" Value="F" />
</Items>
</ext:ComboBox>
</Items>
<Buttons>
<ext:Button ID="Button1" runat="server" Text="Save" Icon="Disk">
<Listeners>
<Click Handler="updateRecord(#{UserForm});" />
</Listeners>
</ext:Button>
<ext:Button ID="Button3" runat="server" Text="Reset">
<Listeners>
<Click Handler="#{UserForm}.getForm().loadRecord(#{UserForm}.record);" />
</Listeners>
</ext:Button>
</Buttons>
</ext:FormPanel>
<ext:GridPanel ID="GridPanel1" runat="server" Icon="Table" Frame="true" Title="Users"
Height="400" Width="600" StyleSpec="margin-top: 10px">
<Store>
<ext:Store ID="Store1" runat="server" AutoSave="true" ShowWarningOnFailure="false"
SkipIdForNewRecords="false" RefreshAfterSaving="None">
<Reader>
<ext:JsonReader IDProperty="Id">
<Fields>
<ext:RecordField Name="Id" />
<ext:RecordField Name="Email" AllowBlank="false" />
<ext:RecordField Name="First" AllowBlank="false" />
<ext:RecordField Name="Last" AllowBlank="false" />
<ext:RecordField Name="DOB" AllowBlank="false" Type="Date" />
<ext:RecordField Name="GenderCode" AllowBlank="false" />
<ext:RecordField Name="GenderDesc" AllowBlank="false" />
</Fields>
</ext:JsonReader>
</Reader>
</ext:Store>
</Store>
<ColumnModel>
<Columns>
<ext:Column Header="ID" Width="40" DataIndex="Id" />
<ext:Column Header="Email" Width="100" DataIndex="Email">
<Editor>
<ext:TextField ID="TextField4" runat="server" />
</Editor>
</ext:Column>
<ext:Column Header="First" Width="50" DataIndex="First">
<Editor>
<ext:TextField ID="TextField5" runat="server" />
</Editor>
</ext:Column>
<ext:Column Header="Last" Width="50" DataIndex="Last">
<Editor>
<ext:TextField ID="TextField6" runat="server" />
</Editor>
</ext:Column>
<ext:DateColumn Header="DOB" Width="50" DataIndex="DOB">
<Editor>
<ext:TextField ID="TextField7" runat="server" />
</Editor>
</ext:DateColumn>
<ext:Column Header="Gender Code" Width="50" DataIndex="GenderCode" Hidden="true">
</ext:Column>
<ext:Column Header="Gender Desc" Width="50" DataIndex="GenderDesc">
</ext:Column>
</Columns>
</ColumnModel>
<View>
<ext:GridView ID="GridView1" runat="server" ForceFit="true">
</ext:GridView>
</View>
<SelectionModel>
<ext:RowSelectionModel runat="server" SingleSelect="true">
<Listeners>
<RowSelect Handler="#{UserForm}.getForm().loadRecord(record);#{UserForm}.record = record;" />
</Listeners>
</ext:RowSelectionModel>
</SelectionModel>
</ext:GridPanel>
</form>
</body>
</html>
Last edited by Daniil; Feb 01, 2012 at 2:43 PM.
Reason: [CLOSED]