Yes, yes! It now makes sense, Andy! Awesome test case! I hope you appreciate the reply!
Alright, if I really get your intention here, the two problems I seen in your test case are:
- you set the direct method private/protected. It won't get exported to
App.direct at all.
- you are trying to populate the combo box from the combo box. Yes, this makes sense, but you actually want to update the combo box from the cell editor's
BeforeEdit event!..
That said, here's the reviewed version of your test case. Of course I left some "trimmings" for simplicity.
For example, if you change the category from the first column, the second is not updated to reflect the change and also it is possible to choose nothing from the second column's combo box and leave nothing in the cell. But I think with what I'll provide you with it will be straightforward to corner all edge cases that might be relevant to you.
<%@ Page Language="C#"%>
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<script runat="server">
protected void Page_Load(object sender, EventArgs e)
{
storeCategory.DataSource = new List<object>
{
new { Value = "Electronics" },
new { Value = "Groceries" },
new { Value = "Alcohol" }
};
storeCategory.DataBind();
}
[DirectMethod]
public void FilterByCategory(string category)
{
// Populate the subcategory store
switch (category)
{
case "Electronics":
storeSubCategory.DataSource = new List<object> {
new { Value = "Television" },
new { Value = "Computer" },
new { Value = "Microwave" }
};
break;
case "Groceries":
storeSubCategory.DataSource = new List<object> {
new { Value = "Bread" },
new { Value = "Milk" },
new { Value = "Cereal" }
};
break;
case "Alcohol":
storeSubCategory.DataSource = new List<object> {
new { Value = "Beer" },
new { Value = "Wine" },
new { Value = "Spirits" }
};
break;
default:
storeSubCategory.DataSource = new List<object>();
break;
}
// just setting the datasource is not enough. You have to order client side to
// refresh the data/view of the component with the new contents.
storeSubCategory.DataBind();
}
</script>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script type="text/javascript">
var handleBeforeEdit = function (item, context) {
var category = context.record.data.category;
// We only want to update the combo box's store if we are editing the
// subcategory column.
if (context.column.dataIndex == "subcategory") { // or just context.colIdx == 1
App.direct.FilterByCategory(category);
}
}
</script>
</head>
<body>
<ext:ResourceManager runat="server" Namespace="App" />
<ext:TreePanel runat="server" Title="Categories" Width="500" Height="300" ID="treeCategories"
Collapsible="false" UseArrows="true" RootVisible="false" MultiSelect="true" SingleExpand="false" FolderSort="true">
<Bin>
<ext:Store ID="storeCategory" runat="server">
<Model>
<ext:Model runat="server" IDProperty="Value">
<Fields>
<ext:ModelField Name="Value" Type="String" />
</Fields>
</ext:Model>
</Model>
</ext:Store>
<ext:Store ID="storeSubCategory" runat="server" AutoDataBind="false">
<Model>
<ext:Model runat="server" IDProperty="Value">
<Fields>
<ext:ModelField Name="Value" Type="String" />
</Fields>
</ext:Model>
</Model>
</ext:Store>
</Bin>
<Fields>
<ext:ModelField Name="category" />
<ext:ModelField Name="subcategory" />
</Fields>
<ColumnModel>
<Columns>
<ext:TreeColumn runat="server" Text="Task" Flex="2" Sortable="true" DataIndex="category" >
<Editor>
<ext:ComboBox ID="ComboBox1" runat="server" QueryMode="Local" ForceSelection="true" Editable="false" ValueField="Value" DisplayField="Value" StoreID="storeCategory" />
</Editor>
</ext:TreeColumn>
<ext:Column runat="server" Text="Parameter" Flex="1" Sortable="true" DataIndex="subcategory">
<Editor>
<ext:ComboBox ID="ComboBox2" QueryMode="Local" runat="server" ForceSelection="true" TypeAhead="true" ValueField="Value" DisplayField="Value" StoreID="storeSubCategory" />
</Editor>
</ext:Column>
</Columns>
</ColumnModel>
<Root>
<ext:Node Text="Categories">
<Children>
<ext:Node leaf="true">
<CustomAttributes>
<ext:ConfigItem Name="category" Value="Electronics" Mode="Value" />
<ext:ConfigItem Name="subcategory" Value="Television" Mode="Value" />
</CustomAttributes>
</ext:Node>
<ext:Node leaf="true">
<CustomAttributes>
<ext:ConfigItem Name="category" Value="Groceries" Mode="Value" />
<ext:ConfigItem Name="subcategory" Value="Cereal" Mode="Value" />
</CustomAttributes>
</ext:Node>
<ext:Node leaf="true">
<CustomAttributes>
<ext:ConfigItem Name="category" Value="Alcohol" Mode="Value" />
<ext:ConfigItem Name="subcategory" Value="Wine" Mode="Value" />
</CustomAttributes>
</ext:Node>
</Children>
</ext:Node>
</Root>
<Plugins>
<ext:CellEditing runat="server" ClicksToEdit="2">
<Listeners>
<BeforeEdit Fn="handleBeforeEdit" />
</Listeners>
</ext:CellEditing>
</Plugins>
</ext:TreePanel>
</body>
</html>
Hope this helps!