Mar 12, 2013, 11:06 AM
[CLOSED] Expand Dropdown/Combobox on Click - Within Gridpanel
Hi,
i m using ext.net v2.0.
i have a 2 Columns in my grid panel, 1 is column without any editor and another column with combo box Editor in it. What i want to do is, whenever the user enters or clicks this column, the dropdown should automatically get expanded. i found example for the same, which is attached herewith.
the problem i am facing is, whenever i click on the combobox column, the list gets displayed at some wrong position (for details please refer images attached below) Problem with identifying Top property. when we first time click the column, it shows list somewhere at odd place (1.png), if we click on second row of that column, then the list gets populated under first row of the column (2.png), and when we click on first row then it shows the list at the bottom of row 2. in short it is not identifying at the current cell location. it displays the list at previous cell location.
Code Snippet
i m using ext.net v2.0.
i have a 2 Columns in my grid panel, 1 is column without any editor and another column with combo box Editor in it. What i want to do is, whenever the user enters or clicks this column, the dropdown should automatically get expanded. i found example for the same, which is attached herewith.
the problem i am facing is, whenever i click on the combobox column, the list gets displayed at some wrong position (for details please refer images attached below) Problem with identifying Top property. when we first time click the column, it shows list somewhere at odd place (1.png), if we click on second row of that column, then the list gets populated under first row of the column (2.png), and when we click on first row then it shows the list at the bottom of row 2. in short it is not identifying at the current cell location. it displays the list at previous cell location.
Code Snippet
<%@ Page Language="C#" %>
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<script runat="server">
protected void Page_Load(object sender, EventArgs e)
{
if (!X.IsAjaxRequest)
{
Store store = this.GridPanel1.GetStore();
store.DataSource = new object[]
{
new object[] { "test1", 1 },
new object[] { "test2", 2 }
};
store.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>Ext.NET Example</title>
<script type="text/javascript">
var myRenderer = function (value) {
return value === 1 ? "Item 1" : "Item 2";
};
</script>
</head>
<body>
<form id="Form1" runat="server">
<ext:ResourceManager ID="ResourceManager1" runat="server" />
<ext:GridPanel
ID="GridPanel1"
runat="server"
AutoHeight="true"
ClicksToEdit="1">
<Store>
<ext:Store ID="Store1" runat="server">
<Model>
<ext:Model ID="Model1" runat="server">
<Fields>
<ext:ModelField Name="test1" />
<ext:ModelField Name="test2" />
</Fields>
</ext:Model>
</Model>
</ext:Store>
</Store>
<ColumnModel ID="ColumnModel1" runat="server">
<Columns>
<ext:Column Header="Test1" DataIndex="test1" runat="server"/>
<ext:Column Header="Test2" DataIndex="test2" runat="server">
<Renderer Fn="myRenderer" />
<Editor>
<ext:ComboBox ID="ComboBox1" runat="server">
<Items>
<ext:ListItem Text="Item 1" Value="1" />
<ext:ListItem Text="Item 2" Value="2" />
</Items>
</ext:ComboBox>
</Editor>
<EditorOptions>
<Listeners>
<StartEdit Handler="this.field.onTriggerClick();" />
</Listeners>
</EditorOptions>
</ext:Column>
</Columns>
</ColumnModel>
<Plugins>
<ext:CellEditing ID="CellEditing1" runat="server" />
</Plugins>
</ext:GridPanel>
</form>
</body>
</html>
Last edited by Daniil; Mar 13, 2013 at 5:47 AM.
Reason: [CLOSED]
