[CLOSED] Not able to save the selected value from Combo box

  1. #1

    [CLOSED] Not able to save the selected value from Combo box

    Hello,
    I have two ComboBox controls inside a ComponentColumn. Please see my attached screen shot for reference... As my screen shot shows that I have selected Item2 in the 1st ComboBox and Item8Click image for larger version. 

Name:	gridpanelNotSavingValues.JPG 
Views:	41 
Size:	34.5 KB 
ID:	24300 for the 2nd ComboBox. However, in my btnSave_DirectClick method,
    when I loop the GridPanel control trying to save the new values(for the 1st row, which is "Name 1" in my example), the adjustTypeID always has value=1 and routeID always has value=3 no matter what I selected on the screen. Can you please show me how to fix it?
    Many thanks in advance.
    Below is my code:
    <%@ Page Language="C#" %>
    
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    <%@ Import Namespace="System.Collections.Generic" %>
    <%@ Import Namespace="Newtonsoft.Json" %>
    <%@ Import Namespace="System.Data" %>
    <script runat="server">
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!X.IsAjaxRequest || !IsPostBack)
            {
                this.Store1.DataSource = new object[]
                {
                    new object[] { "Name 1", 1,3 },
                    new object[] { "Name 2", 2,3 },
                    new object[] { "Name 3", 2,3 },
                    new object[] { "Name 4", 2,3},
                    new object[] { "Name 5", 2,3 },
                    new object[] { "Name 6",8,3},
                    new object[] { "Name 7", 8,3 },
                    new object[] { "Name 8", 8,3},
                    new object[] { "Name 9", 9,3}
                };
    
                this.Store1.DataBind();
            }
    
        }
    
        protected void btnSave_DirectClick(object sender, DirectEventArgs e)
        {
            try
            {
                string jsonIng = e.ExtraParams["BulkEntryValues"];
                List<Dictionary<string, object>> rows = JSON.Deserialize<List<Dictionary<string, object>>>(jsonIng);
    
                foreach (Dictionary<string, object> row in rows)
                {
                    var employeeID = row["EmployeeName"];
                    var adjustTypeID = row["AdjustmentTypeID"];
                    var routeID = row["RouteID"];
    
                }
            }
            catch (Exception ex)
            {
                X.Msg.Alert("Bulk Entry", "Error Occured: " + ex.Message).Show();
            }
        }
    </script>
    <!DOCTYPE html>
    <html>
    <head id="Head1" runat="server">
        <title>ComponentColumn Over Editor - Ext.NET Examples</title>
        <link href="/resources/css/examples.css" rel="stylesheet" />
        <script type="text/javascript" language="javascript">
    
            var test = function (combo) {
    
    
            }
        
        </script>
        <style>
            .x-over-editor-grid tr.x-grid-row
            {
                height: 22px;
            }
        </style>
    </head>
    <body>
        <form id="Form1" runat="server">
        <ext:ResourceManager ID="ResourceManager1" runat="server" />
        <h1>
            ComponentColumn multi controls</h1>
        <ext:GridPanel ID="GridPanel1" runat="server" Title="Setup Adjustments" Width="1200"
            Height="300">
            <Store>
                <ext:Store ID="Store1" runat="server">
                    <Model>
                        <ext:Model ID="Model1" runat="server">
                            <Fields>
                                <ext:ModelField Name="EmployeeName" Type="String" />
                                <ext:ModelField Name="AdjustmentTypeID" Type="Int" />
                                <ext:ModelField Name="RouteID" Type="Int" />
                            </Fields>
                        </ext:Model>
                    </Model>
                </ext:Store>
            </Store>
            <ColumnModel ID="ColumnModel1" runat="server">
                <Columns>
                    <ext:Column ID="Column1" runat="server" DataIndex="EmployeeName" Text="Adjustment Type">
                    </ext:Column>
                    <ext:ComponentColumn ID="ComponentColumn2" runat="server" Editor="true" Text="Adjustment"
                        Width="600">
                        <Component>
                            <ext:Container runat="server">
                                <Items>
                                    <ext:ComboBox ID="ComboBox1" runat="server" DataIndex="AdjustmentTypeID" EmptyText="Select Adjustment">
                                        <Listeners>
                                            <Render Fn="test">
                                            </Render>
                                        </Listeners>
                                        <Items>
                                            <ext:ListItem Text="Item 1" Value="1" Mode="Raw" />
                                            <ext:ListItem Text="Item 2" Value="2" Mode="Raw" />
                                            <ext:ListItem Text="Item 3" Value="3" Mode="Raw" />
                                            <ext:ListItem Text="Item 4" Value="4" Mode="Raw" />
                                            <ext:ListItem Text="Item 5" Value="5" Mode="Raw" />
                                            <ext:ListItem Text="Item 6" Value="6" Mode="Raw" />
                                            <ext:ListItem Text="Item 7" Value="7" Mode="Raw" />
                                            <ext:ListItem Text="Item 8" Value="8" Mode="Raw" />
                                            <ext:ListItem Text="Item 9" Value="9" Mode="Raw" />
                                        </Items>
                                    </ext:ComboBox>
                                    <ext:ComboBox ID="ComboBox2" runat="server" DataIndex="RouteID" EmptyText="Select Route">
                                        <Items>
                                            <ext:ListItem Text="Item 1" Value="1" Mode="Raw" />
                                            <ext:ListItem Text="Item 2" Value="2" Mode="Raw" />
                                            <ext:ListItem Text="Item 3" Value="3" Mode="Raw" />
                                            <ext:ListItem Text="Item 4" Value="4" Mode="Raw" />
                                            <ext:ListItem Text="Item 5" Value="5" Mode="Raw" />
                                            <ext:ListItem Text="Item 6" Value="6" Mode="Raw" />
                                            <ext:ListItem Text="Item 7" Value="7" Mode="Raw" />
                                            <ext:ListItem Text="Item 8" Value="8" Mode="Raw" />
                                            <ext:ListItem Text="Item 9" Value="9" Mode="Raw" />
                                        </Items>
                                    </ext:ComboBox>
                                </Items>
                            </ext:Container>
                        </Component>
                    </ext:ComponentColumn>
                </Columns>
            </ColumnModel>
        </ext:GridPanel>
        <ext:Button ID="btnSave" runat="server" Text="Save" Icon="Disk">
            <DirectEvents>
                <Click OnEvent="btnSave_DirectClick">
                    <EventMask ShowMask="true" Msg="Saving" />
                    <ExtraParams>
                        <ext:Parameter Name="BulkEntryValues" Value="Ext.encode(#{GridPanel1}.getRowsValues())"
                            Mode="Raw" />
                    </ExtraParams>
                </Click>
            </DirectEvents>
        </ext:Button>
        </form>
    </body>
    </html>
    Last edited by Daniil; Nov 10, 2015 at 11:59 AM. Reason: [CLOSED]
  2. #2
    Hi @Fahd,

    A ComponentColumn's Editor="true" is not going to work with a Container. It expects a field in a ComponentColumn's Component.

    With your setup you have to manage editing manually. You could listen to a ComboBox's Change event and update a record accordingly.

    An easier solution would be splitting the ComboBoxes into individual ComponentColumns.
    Last edited by Daniil; Oct 27, 2015 at 1:58 PM.
  3. #3
    Thanks for your response. Can you please provide an example to save the values by using a Listener?
  4. #4
    I would try this:
    <ext:ComboBox ID="ComboBox1" runat="server" DataIndex="AdjustmentTypeID" ...>
        <Listeners>
            <Change Handler="this.up().record.data.AdjustmentTypeID = newValue;" />
        </Listeners>
        ...
    </ext:ComboBox>
  5. #5
    tried your suggestion, still not working.
    <ext:ComboBox ID="ComboBox1" runat="server" DataIndex="AdjustmentTypeID" ...>
        <Listeners>
            <Change Handler="this.up().record.data.AdjustmentTypeID = newValue;" />
        </Listeners>
        ...
    </ext:ComboBox>
  6. #6
    That works for me. #{GridPanel1}.getRowsValues() returns a value with a new AdjustmentTypeID. Please clarify what does happen for you?
  7. #7
    the adjustTypeID and routeID are always 1 and 3 regardless when I selected in the dropdown.
    You can see this when you click the Save button, the button's DirectEvent fires:

    Please see details below:
    
     protected void btnSave_DirectClick(object sender, DirectEventArgs e)
        {
            try
            {
                string jsonIng = e.ExtraParams["BulkEntryValues"];
                List<Dictionary<string, object>> rows = JSON.Deserialize<List<Dictionary<string, object>>>(jsonIng);
    
                foreach (Dictionary<string, object> row in rows)
                {
                    var employeeID = row["EmployeeName"];
                    var adjustTypeID = row["AdjustmentTypeID"];
                    var routeID = row["RouteID"];
    
                }
            }
            catch (Exception ex)
            {
                X.Msg.Alert("Bulk Entry", "Error Occured: " + ex.Message).Show();
            }
        }
  8. #8
    It would be better to deal with a full test case.

    Steps:

    1. Click Save => "1" appears in the alert box
    2. Choose any item except "Item 1" in the first ComboBox of the first row
    3. Click Save => the new value appears in the alert box

    Example
    <%@ Page Language="C#" %>
    
    <script runat="server">
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!X.IsAjaxRequest)
            {
                this.Store1.DataSource = new object[]
                {
                    new object[] { "Name 1", 1,3 },
                    new object[] { "Name 2", 2,3 },
                    new object[] { "Name 3", 2,3 },
                    new object[] { "Name 4", 2,3},
                    new object[] { "Name 5", 2,3 },
                    new object[] { "Name 6",8,3},
                    new object[] { "Name 7", 8,3 },
                    new object[] { "Name 8", 8,3},
                    new object[] { "Name 9", 9,3}
                };
            }
        }
    
        protected void Save(object sender, DirectEventArgs e)
        {
            try
            {
                string jsonIng = e.ExtraParams["BulkEntryValues"];
                List<Dictionary<string, object>> rows = JSON.Deserialize<List<Dictionary<string, object>>>(jsonIng);
    
                X.Msg.Alert("First row's AdjustmentTypeID", rows[0]["AdjustmentTypeID"]).Show();
            }
            catch (Exception ex)
            {
                X.Msg.Alert("Bulk Entry", "Error Occured: " + ex.Message).Show();
            }
        }
    </script>
    <!DOCTYPE html>
    <html>
    <head runat="server">
        <title>Ext.NET v3 Example</title>
    </head>
    <body>
        <form runat="server">
            <ext:ResourceManager runat="server" />
    
            <ext:GridPanel
                ID="GridPanel1"
                runat="server"
                Title="Setup Adjustments"
                Width="500"
                Height="300">
                <Store>
                    <ext:Store ID="Store1" runat="server">
                        <Model>
                            <ext:Model runat="server">
                                <Fields>
                                    <ext:ModelField Name="EmployeeName" Type="String" />
                                    <ext:ModelField Name="AdjustmentTypeID" Type="Int" />
                                    <ext:ModelField Name="RouteID" Type="Int" />
                                </Fields>
                            </ext:Model>
                        </Model>
                    </ext:Store>
                </Store>
                <ColumnModel runat="server">
                    <Columns>
                        <ext:Column runat="server" DataIndex="EmployeeName" Text="Adjustment Type" />
                        <ext:ComponentColumn runat="server" Editor="true" Text="Adjustment" Width="600">
                            <Component>
                                <ext:Container runat="server">
                                    <Items>
                                        <ext:ComboBox runat="server" DataIndex="AdjustmentTypeID" EmptyText="Select Adjustment">
                                            <Listeners>
                                                <Change Handler="this.up().record.data.AdjustmentTypeID = newValue;" />
                                            </Listeners>
                                            <Items>
                                                <ext:ListItem Text="Item 1" Value="1" Mode="Raw" />
                                                <ext:ListItem Text="Item 2" Value="2" Mode="Raw" />
                                                <ext:ListItem Text="Item 3" Value="3" Mode="Raw" />
                                                <ext:ListItem Text="Item 4" Value="4" Mode="Raw" />
                                                <ext:ListItem Text="Item 5" Value="5" Mode="Raw" />
                                                <ext:ListItem Text="Item 6" Value="6" Mode="Raw" />
                                                <ext:ListItem Text="Item 7" Value="7" Mode="Raw" />
                                                <ext:ListItem Text="Item 8" Value="8" Mode="Raw" />
                                                <ext:ListItem Text="Item 9" Value="9" Mode="Raw" />
                                            </Items>
                                        </ext:ComboBox>
                                        <ext:ComboBox runat="server" DataIndex="RouteID" EmptyText="Select Route">
                                            <Items>
                                                <ext:ListItem Text="Item 1" Value="1" Mode="Raw" />
                                                <ext:ListItem Text="Item 2" Value="2" Mode="Raw" />
                                                <ext:ListItem Text="Item 3" Value="3" Mode="Raw" />
                                                <ext:ListItem Text="Item 4" Value="4" Mode="Raw" />
                                                <ext:ListItem Text="Item 5" Value="5" Mode="Raw" />
                                                <ext:ListItem Text="Item 6" Value="6" Mode="Raw" />
                                                <ext:ListItem Text="Item 7" Value="7" Mode="Raw" />
                                                <ext:ListItem Text="Item 8" Value="8" Mode="Raw" />
                                                <ext:ListItem Text="Item 9" Value="9" Mode="Raw" />
                                            </Items>
                                        </ext:ComboBox>
                                    </Items>
                                </ext:Container>
                            </Component>
                        </ext:ComponentColumn>
                    </Columns>
                </ColumnModel>
            </ext:GridPanel>
    
            <ext:Button runat="server" Text="Save" Icon="Disk">
                <DirectEvents>
                    <Click OnEvent="Save">
                        <ExtraParams>
                            <ext:Parameter 
                                Name="BulkEntryValues" 
                                Value="Ext.encode(#{GridPanel1}.getRowsValues())"
                                Mode="Raw" />
                        </ExtraParams>
                    </Click>
                </DirectEvents>
            </ext:Button>
        </form>
    </body>
    </html>
  9. #9
    Thank you very much!! This worked! But I still do not know why it did not work for me as I do not see what I was doing differently from your suggestion.
  10. #10
    Only a full test case to reproduce could clarify:)

Similar Threads

  1. [CLOSED] set combo selected value
    By susanz in forum 2.x Legacy Premium Help
    Replies: 2
    Last Post: Nov 11, 2014, 6:00 PM
  2. [CLOSED] Grid Panel unable to save the values selected across the pages
    By MarginPoint in forum 1.x Legacy Premium Help
    Replies: 3
    Last Post: Dec 06, 2013, 12:22 PM
  3. [CLOSED] Get Selected Combo Box without selected first
    By redi in forum 2.x Legacy Premium Help
    Replies: 3
    Last Post: Nov 29, 2013, 3:18 AM
  4. Replies: 6
    Last Post: Aug 25, 2011, 2:13 PM
  5. Replies: 3
    Last Post: Aug 21, 2010, 5:26 AM

Tags for this Thread

Posting Permissions