[CLOSED] How to update a combo bound value and text in a master/detail record?

  1. #1

    [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):

                // 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]
  2. #2
    Hi,

    Generally, your solution is good and working, but I would implement it in a different way.

    1. Set up an additional Hidden field in FormPanel items.
    <ext:Hidden 
        ID="HiddenGenderDesc" 
        runat="server" 
        DataIndex="GenderDesc" 
        SubmitValue="false" />
    2. Set up the following Select listener for the ComboBox.
    <Select Handler="HiddenGenderDesc.setValue(record.data.text);" />
  3. #3
    Thanks Daniil!

    It works properly in the simplistic example from this thread. However, on the real page, my ComboBox is populated from the Store having DisplayField and ValueField set in the markup along with DataIndex. In that situation, record.data.text evaluates to undefined. What I did to make it work was the following:

                                    
    <Listeners>
          <Select Handler="#{HiddenGenderDesc}.setValue(#{Combo1}.getSelectedItem().text);" />
    </Listeners>
    Please let me know if it's a viable proposition.

    Vadym
  4. #4
    Please use:
    <Select Handler="#{HiddenGenderDesc}.setValue(record.get(this.displayField));" />
  5. #5
    Quote Originally Posted by Daniil View Post
    Please use:
    <Select Handler="#{HiddenGenderDesc}.setValue(record.get(this.displayField));" />
    Awesome!

    Thanks,

    Vadym

Similar Threads

  1. Replies: 2
    Last Post: Apr 25, 2012, 1:11 PM
  2. Replies: 8
    Last Post: Mar 13, 2012, 5:54 PM
  3. Finish master-detail
    By andrefreitasjr in forum 1.x Help
    Replies: 2
    Last Post: Dec 02, 2011, 12:06 AM
  4. Edit master detail with LinqDataSource
    By andrefreitasjr in forum 1.x Help
    Replies: 1
    Last Post: Dec 01, 2011, 8:16 PM
  5. Looking For Master Detail Form example
    By kumarxlnt in forum Examples and Extras
    Replies: 1
    Last Post: Nov 01, 2009, 5:17 PM

Posting Permissions