Jan 29, 2013, 10:10 AM
[CLOSED] [#31] ComboBox item not getting selected when Used inside the panel in Editor Functionality of Grid
I have hard coded lstObject which is set as Data Source of the Grid Store.
In DestComponentColumn I have used Panel which contain two component that is DestCombo and DestText.
Code is running sucessfully and getting the desired User Interface as you can see in the attachment.
ISSUE:- Items of SourceComboBox is getting selected properly but item is not getting selected for the DestCombo which I have highlighted in the attached screen.
Its getting selected when I remove panel from the Component column.But my need is to show either text box or combo box based on some condition.For achieving this I have used panel inside component column as Component column doesnt allow more than one component in it.
In DestComponentColumn I have used Panel which contain two component that is DestCombo and DestText.
Code is running sucessfully and getting the desired User Interface as you can see in the attachment.
ISSUE:- Items of SourceComboBox is getting selected properly but item is not getting selected for the DestCombo which I have highlighted in the attached screen.
Its getting selected when I remove panel from the Component column.But my need is to show either text box or combo box based on some condition.For achieving this I have used panel inside component column as Component column doesnt allow more than one component in it.
<%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage<dynamic>" %>
<script runat="server">
protected void Page_Load(object sender, EventArgs e)
{
if (!X.IsAjaxRequest)
{
List<object[]> lstObject = new List<object[]>();
lstObject.Add(new object[] {1,1});
lstObject.Add(new object[] {2,2});
lstObject.Add(new object[] {3,3});
this.GridStore.DataSource = lstObject;
this.GridStore.DataBind();
}
}
</script>
<script type="text/javascript">
var DestinationRenderer= function (column, cmp, record) {
if (record.get('DestComboField') == '0') {
cmp.componentLayout.owner.items.items[0].hide();
} else {
cmp.componentLayout.owner.items.items[1].hide();
}
};
var InsertRecord = function (e) {
var grid = <%= MapFieldGridPanel.ClientID %>;
var position = 0;
position = (grid.store.data.items.length);
grid.store.insert(position, {});
grid.getView().focusRow(position);
}
var DeleteRecord = function (column, cmp, record) {
//debugger;
var grid = <%= MapFieldGridPanel.ClientID %>;
grid.store.remove(record);
}
</script>
<!DOCTYPE html>
<html>
<head runat="server">
<meta name="viewport" content="width=device-width" />
<title>MapFieldValues</title>
</head>
<body>
<div>
<ext:ResourceManager runat="server" />
<ext:GridPanel ID="MapFieldGridPanel"
runat="server"
Title="ComponentColumn Editor"
Width="600"
Height="400">
<Store>
<ext:Store ID="GridStore" runat="server">
<Model>
<ext:Model ID="MapModel" runat="server">
<Fields>
<ext:ModelField Name="SourceComboField" Type="Int" />
<ext:ModelField Name="DestComboField" Type="Int" />
</Fields>
</ext:Model>
</Model>
</ext:Store>
</Store>
<ColumnModel ID="SourceColumnModel" runat="server">
<Columns>
<ext:ComponentColumn ID="SourceComponentColumn"
runat="server"
Editor="true"
DataIndex="SourceComboField"
Flex="1"
Text="Source Field Value">
<Component>
<ext:ComboBox ID="SourceComboBox" runat="server">
<Items>
<ext:ListItem Text="1" Value="1" Mode="Raw" />
<ext:ListItem Text="2" Value="2" Mode="Raw" />
<ext:ListItem Text="3" Value="3" Mode="Raw" />
<ext:ListItem Text="4" Value="4" Mode="Raw" />
<ext:ListItem Text="5" Value="5" Mode="Raw" />
</Items>
</ext:ComboBox>
</Component>
</ext:ComponentColumn>
<ext:ComponentColumn ID="DestComponentColumn"
runat="server"
Editor="true"
DataIndex="DestComboField"
Flex="1"
Text="Destination Field Value" Visible="true">
<Component>
<ext:Panel ID="DestinationPanel" runat="server">
<Items>
<ext:ComboBox ID="DestCombo" runat="server">
<Items>
<ext:ListItem Text="1" Value="1" Mode="Raw" />
<ext:ListItem Text="2" Value="2" Mode="Raw" />
<ext:ListItem Text="3" Value="3" Mode="Raw" />
</Items>
</ext:ComboBox>
<ext:TextField ID="DestText" runat="server" />
</Items>
</ext:Panel>
</Component>
<Listeners >
<Bind Fn="DestinationRenderer"></Bind>
</Listeners>
</ext:ComponentColumn>
<ext:CommandColumn ID="AddCommandColumn" runat="server">
<Commands>
<ext:GridCommand CommandName="add" Icon="Add">
</ext:GridCommand>
</Commands>
<Listeners>
<Command Fn="InsertRecord"></Command>
</Listeners>
</ext:CommandColumn>
<ext:CommandColumn ID="DeleteCommandColumn" runat="server">
<Commands>
<ext:GridCommand CommandName="delete" Icon="Delete">
</ext:GridCommand>
</Commands>
<Listeners>
<Command Fn="DeleteRecord"></Command>
</Listeners>
</ext:CommandColumn>
</Columns>
</ColumnModel>
</ext:GridPanel>
</div>
</body>
</html>
Last edited by Daniil; Feb 14, 2013 at 9:37 AM.
Reason: [CLOSED] [#31]
Originally Posted by Vladimir
