PDA

View Full Version : [CLOSED] Not able to save the selected value from Combo box



Fahd
Oct 26, 2015, 8:25 PM
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 Item824300 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>

Daniil
Oct 27, 2015, 1:54 PM
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.

Fahd
Oct 27, 2015, 2:09 PM
Thanks for your response. Can you please provide an example to save the values by using a Listener?

Daniil
Oct 27, 2015, 2:50 PM
I would try this:

<ext:ComboBox ID="ComboBox1" runat="server" DataIndex="AdjustmentTypeID" ...>
<Listeners>
<Change Handler="this.up().record.data.AdjustmentTypeID = newValue;" />
</Listeners>
...
</ext:ComboBox>

Fahd
Oct 27, 2015, 8:44 PM
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>

Daniil
Oct 28, 2015, 5:56 AM
That works for me. #{GridPanel1}.getRowsValues() returns a value with a new AdjustmentTypeID. Please clarify what does happen for you?

Fahd
Oct 28, 2015, 7:17 PM
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();
}
}

Daniil
Oct 29, 2015, 1:21 PM
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>

Fahd
Oct 29, 2015, 1:51 PM
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.

Daniil
Oct 29, 2015, 1:57 PM
Only a full test case to reproduce could clarify:)