[CLOSED] Refreshing stores during tree panel cell editing

  1. #1

    [CLOSED] Refreshing stores during tree panel cell editing

    Hi,

    I'm using a tree panel to show list of categories along with sub categories.
    It has 2 columns, both are editable combo boxes.
    The first column is a main category, the second column contains the sub category. The sub category is specific to the first.
    So the second combo store needs updating based on the selected first column.

    I tried updating the second store using a select listener on the first combo. But this relies on the user editing the first column, first. However if a user randomly edits the second column on any other row, the store will be out of date with the incorrect sub category list.

    I have a directmethod that updates the store based on a given parameter, but I don't know how to call it.
    I also looked at using the beforeRender listener on the second combo but I need a way of getting the 1st column field value for that row.

    Any suggestions?



    Regards

    Andy
    Last edited by fabricio.murta; Feb 27, 2017 at 11:30 AM.
  2. #2
    Hello Andy!

    I got lost on your description when you jumped from the tree to the combos and can't really visualize your scenario here.

    If you are willing to draw a runnable test case and describe over that test case what you need (and maybe show something you tried but didn't really work) I'm sure it would get much easier for us to understand and help you with the issue. Overall it sounds pretty possible, but just need to know what you really need and how.
    Fabrício Murta
    Developer & Support Expert
  3. #3
    Hi Fabricio,
    sorry for the confusion. Here is my sample code:

    <%@ 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]
        protected 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;
            }
        }
    </script>
    
    
    <!DOCTYPE html>
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
    </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">
                                    <Listeners>
                                        <Select Handler="App.direct.FilterByCategory(this.getValue());" />
                                    </Listeners>
                                </ext:ComboBox>
                            </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">
                                     <Listeners>
    
                                     </Listeners>                                   
                                </ext:ComboBox>
    
                            </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" />
                </Plugins>
    
        </ext:TreePanel>
    
    </body>
    </html>
    You can see on line 96, I'm calling the directmethod to update the subcategory store once the category item has been selected:
    <Select Handler="App.direct.FilterByCategory(this.getValue());" />
    But I want is to trigger this directmethod when the user edits the subcategory. That way the subcategory list will be up to date for the appropriate row category.
    I've tried using beforeRender listener, but how can I find the category value for that row?

    Does this make more sense?
  4. #4
    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!
    Fabrício Murta
    Developer & Support Expert
  5. #5
    Many thanks Fabricio, this is exactly what I wanted.
  6. #6
    Hello Andy! Glad it helped, the code sample really helped here!
    Fabrício Murta
    Developer & Support Expert

Similar Threads

  1. [CLOSED] Grid Panel Continuous Cell Editing in v1.x not in v2.x?
    By garyawalker in forum 2.x Legacy Premium Help
    Replies: 7
    Last Post: Jun 15, 2015, 4:33 PM
  2. Editing grid panel cell to modify other.
    By Lisseth in forum 1.x Help
    Replies: 0
    Last Post: Feb 10, 2015, 2:18 PM
  3. Grid Panel Cell Editing focus in CheckColumn
    By shaileshsakaria in forum 2.x Help
    Replies: 3
    Last Post: Apr 27, 2013, 11:58 AM
  4. Grid Panel Cell Editing focus
    By shaileshsakaria in forum 2.x Help
    Replies: 0
    Last Post: Jan 13, 2013, 9:14 AM
  5. [CLOSED] Tree Panel add Node and Start Editing
    By FpNetWorth in forum 2.x Legacy Premium Help
    Replies: 4
    Last Post: Dec 14, 2012, 6:51 AM

Posting Permissions