[CLOSED] Store ID not found in TreeGrid

  1. #1

    [CLOSED] Store ID not found in TreeGrid

    Hi,

    i have an Treegrid with 2 Comboboxes. After selecting a value from the first, the values from the second should be refreshed. But it appears an error App.Store2 is undefined.

    How can i fix this?

    best regards
    I.


    <%@ Page Language="C#" AutoEventWireup="true" Inherits="TestTreeGrid1.Default" %>
    
    <!DOCTYPE html>
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    
        <title></title>
    
        <script runat="server">
    
            protected void Page_Load(object sender, EventArgs e)
            {
    
                if (!X.IsAjaxRequest)
                {
    
                    Store1.Data = Data1;
                    Store2.Data = Data2;
                }
                
            }
    
            private object Data1
            {
                get
                {
                    return new object[]
                    {
                    new object[] {"1", "HR"},
                    new object[] {"2", "IT"},
                    new object[] {"3", "Sales"},
                    };
                }
            }
    
            private object Data2
            {
                get
                {
                    return new object[]
                    {
                    new object[] {"1", "Peter"},
                    new object[] {"2", "Paul"}
                    };
                }
            }
    
            protected void cboUser_BeforeQuery(object sender, DirectEventArgs e)
            {
    
                if (e.ExtraParams["Param1"] == "IT")
                {
    
                    System.Data.DataTable dt = new System.Data.DataTable();
                    dt.Clear();
                    dt.Columns.Add("ID");
                    dt.Columns.Add("Name");
                    System.Data.DataRow row = dt.NewRow();
                    row["ID"] = "1";
                    row["Name"] = "Peter";
                    dt.Rows.Add(row);
                    row = dt.NewRow();
                    row["ID"] = "2";
                    row["Name"] = "Paul";
                    dt.Rows.Add(row);
    
    
                    Store1.DataSource = dt;
                    Store1.DataBind();
                }
                else
                {
                    System.Data.DataTable dt = new System.Data.DataTable();
                    dt.Clear();
                    dt.Columns.Add("ID");
                    dt.Columns.Add("Name");
                    System.Data.DataRow row = dt.NewRow();
                    row["ID"] = "1";
                    row["Name"] = "Marie";
                    dt.Rows.Add(row);
                    row = dt.NewRow();
                    row["ID"] = "2";
                    row["Name"] = "Kitty";
                    dt.Rows.Add(row);
    
    
                    Store1.DataSource = dt;
                    Store1.DataBind();
                }
    
            }
    
    
        </script>
        
        <script>
            var beforeCellEditHandler = function (e) {
                return true;
            }
        </script>
    
    </head>
    <body>
    
        <form id="form1" runat="server">
    
            <ext:ResourceManager runat="server" InitScriptMode="Inline"/>
    
            <ext:TreePanel
                runat="server"
                Height="800"
                SortableColumns="false"
                ID="TreePanel1"
                Title="Employees"
                AutoScroll="true"
                Animate="true"
                UseArrows="true"
                RootVisible="false"
                MultiSelect="false"
                Border="false"
                SingleExpand="true"
                FolderSort="false">
                <Store>
                    <ext:TreeStore runat="server" ID="Store0">
                        <Model>
                            <ext:Model runat="server" IDProperty="fldID">
                                <Fields>
                                    <ext:ModelField Name="fldID" Type="String" />
                                    <ext:ModelField Name="fldDepartment2" Type="String" />
                                    <ext:ModelField Name="fldEmployee2" Type="String" />
                                    <ext:ModelField Name="fldType" Type="String" />
                                </Fields>
                            </ext:Model>
                        </Model>
                    </ext:TreeStore>
                </Store>
                <Plugins>
                    <ext:CellEditing runat="server" ClicksToEdit="1">
                        <Listeners>
                            <BeforeEdit Handler="return beforeCellEditHandler(e);"></BeforeEdit>
                        </Listeners>
                    </ext:CellEditing>
                </Plugins>
                <Root>
                    <ext:Node Text="Employees">
                        <Children>
                            <ext:Node Icon="Folder" Expanded="true">
                                <CustomAttributes>
                                    <ext:ConfigItem Name="fldID" Value="1" Mode="Value" />
                                    <ext:ConfigItem Name="fldStructure" Value="Location: USA" Mode="Value" />
                                    <ext:ConfigItem Name="fldDepartment2" Value="" />
                                    <ext:ConfigItem Name="fldEmployee2" Value="" Mode="Value" />
                                    <ext:ConfigItem Name="fldType" Value="Location" Mode="Value" />
                                </CustomAttributes>
                                <Children>
                                    <ext:Node Icon="Folder" Expanded="true">
                                        <CustomAttributes>
                                            <ext:ConfigItem Name="fldID" Value="2" Mode="Value" />
                                            <ext:ConfigItem Name="fldStructure" Value="Department" Mode="Value" />
                                            <ext:ConfigItem Name="fldDepartment2" Value="HR" />
                                            <ext:ConfigItem Name="fldEmployee2" Value="" Mode="Value" />
                                            <ext:ConfigItem Name="fldType" Value="Department" Mode="Value" />
                                        </CustomAttributes>
                                        <Children>
                                            <ext:Node Leaf="true">
                                                <CustomAttributes>
                                                    <ext:ConfigItem Name="fldID" Value="3" Mode="Value" />
                                                    <ext:ConfigItem Name="fldStructure" Value="Employee" Mode="Value" />
                                                    <ext:ConfigItem Name="fldDepartment2" Value="HR" />
                                                    <ext:ConfigItem Name="fldEmployee2" Value="Rita" Mode="Value" />
                                                    <ext:ConfigItem Name="fldType" Value="Employee" Mode="Value" />
                                                </CustomAttributes>
                                            </ext:Node>
                                            <ext:Node Leaf="true">
                                                <CustomAttributes>
                                                    <ext:ConfigItem Name="fldID" Value="4" Mode="Value" />
                                                    <ext:ConfigItem Name="fldStructure" Value="Employee" Mode="Value" />
                                                    <ext:ConfigItem Name="fldDepartment2" Value="HR" />
                                                    <ext:ConfigItem Name="fldEmployee2" Value="Peter" Mode="Value" />
                                                    <ext:ConfigItem Name="fldType" Value="Employee" Mode="Value" />
                                                </CustomAttributes>
                                            </ext:Node>
                                        </Children>
                                    </ext:Node>
                                </Children>
                            </ext:Node>
                        </Children>
                    </ext:Node>
                </Root>
                <Plugins>
                    <ext:CellEditing runat="server" />
                </Plugins>
                <ColumnModel>
                    <Columns>
                        <ext:TreeColumn
                            runat="server"
                            Text="Task"
                            Width="300"
                            Lockable="true"
                            Locked="true"
                            Sortable="false"
                            DataIndex="fldStructure" />
                        <ext:ComponentColumn runat="server" ID="cDep" Text="Department" DataIndex="fldDepartment2" Width="100" Editor="true" Lockable="true" ToolTip="Department">
                            <Component>
                                <ext:ComboBox runat="server" ID="eDep" DisplayField="Name" Editable="False" TriggerAction="All" AllowBlank="false" ValueField="Name" ForceSelection="true">
                                    <Store>
                                        <ext:Store runat="server" ID="Store1">
                                            <Model>
                                                <ext:Model runat="server">
                                                    <Fields>
                                                        <ext:ModelField Name="ID" />
                                                        <ext:ModelField Name="Name" />
                                                    </Fields>
                                                </ext:Model>
                                            </Model>
                                        </ext:Store>
                                    </Store>
                                    <Listeners>
                                         <Select Handler="#{Store2}.reload( { Param1: 'IT'});"></Select>
                                    </Listeners>
                                    <%--<DirectEvents>
                                        <BeforeQuery OnEvent="cboUser_BeforeQuery">
                                            <ExtraParams>
                                                <ext:Parameter Name="Param1" Value="#{TreePanel1}.normalGrid.editingPlugin.context.record.data.fldDepartment2" Mode="Raw" />
                                            </ExtraParams>
                                        </BeforeQuery>
                                    </DirectEvents>--%>
                                </ext:ComboBox>
                            </Component>
                        </ext:ComponentColumn>
                        <ext:ComponentColumn runat="server" Text="Employee" DataIndex="fldEmployee2" Width="100" Editor="true" Lockable="true" ToolTip="Employee">
                            <Component>
                                <ext:ComboBox runat="server" ID="edtEmployee" DisplayField="Name" TriggerAction="All" AllowBlank="false" ValueField="ID">
                                    <Store>
                                        <ext:Store runat="server" ID="Store2">
                                            <Model>
                                                <ext:Model runat="server">
                                                    <Fields>
                                                        <ext:ModelField Name="ID" />
                                                        <ext:ModelField Name="Name" />
                                                    </Fields>
                                                </ext:Model>
                                            </Model>
                                        </ext:Store>
                                    </Store>
                                </ext:ComboBox>
                            </Component>
                        </ext:ComponentColumn>
                    </Columns>
    
                </ColumnModel>
                <SelectionModel>
                    <ext:TreeSelectionModel runat="server" Mode="Single" />
                </SelectionModel>
                <View>
                    <ext:TreeView runat="server" LoadMask="true" LoadingText="Loading data..." />
                </View>
            </ext:TreePanel>
    
        </form>
    </body>
    </html>
    Last edited by Daniil; Sep 22, 2015 at 9:01 AM. Reason: [CLOSED]
  2. #2
    Hi @IMehl,

    A ComponentColumn renders a new component into each row. So, there is a separate ComboBox in each row. Each ComboBox has its own Store. The IDs of these components (ComboBoxes and Stores) are ignored on client side. Therefore, #{Store2} or App.Store2 are not going to work. Also, the entire approach with Store.DataSource is not going to work with your scenario.

    I re-worked your sample to demonstrate how I would start implementing it. Sure, there is some work to be done yet, but I hope this sample is a good starting point for you.

    Example
    <%@ Page Language="C#" %>
    
    <script runat="server">
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!X.IsAjaxRequest)
            {
                this.Store1.DataSource = this.Data1;
            }
        }
    
        private object Data1
        {
            get
            {
                return new object[]
                {
                    new object[] {"1", "HR"},
                    new object[] {"2", "IT"},
                    new object[] {"3", "Sales"},
                };
            }
        }
    
        private object Data2
        {
            get
            {
                return new object[]
                {
                    new object[] {"1", "Peter"},
                    new object[] {"2", "Paul"}
                };
            }
        }
    
        /// <summary>
        /// Possible arguments: 
        ///     - string action
        ///     - string action, Dictionary<string, object> extraParams
        ///     - string action, Dictionary<string, object> extraParams, object serviceParams
        /// </summary>
        /// <returns></returns>
        [DirectMethod]
        public static object BindData(string action, Dictionary<string, object> extraParams)
        {
            System.Data.DataTable dt = new System.Data.DataTable();
            dt.Columns.Add("ID");
            dt.Columns.Add("Name");
    
            if (extraParams["department"].ToString() == "IT")
            {
                System.Data.DataRow row = dt.NewRow();
                row["ID"] = "1";
                row["Name"] = "Peter";
                dt.Rows.Add(row);
                row = dt.NewRow();
                row["ID"] = "2";
                row["Name"] = "Paul";
                dt.Rows.Add(row);
            }
            else
            {
                System.Data.DataRow row = dt.NewRow();
                row["ID"] = "1";
                row["Name"] = "Marie";
                dt.Rows.Add(row);
                row = dt.NewRow();
                row["ID"] = "2";
                row["Name"] = "Kitty";
                dt.Rows.Add(row);
            }
    
            return dt;
        }
    </script>
    
    <!DOCTYPE html>
    
    <html>
    <head runat="server">
        <title>Ext.NET v3 Example</title>
    
        <script>
            var onEdit = function (componentColumn, e) {
                var employeeComboBox = App.ComponentColumn2.getComponent(e.record);
    
                employeeComboBox.getStore().reload({
                    params: {
                        department: e.value
                    }
                });
            };
        </script>
    </head>
    <body>
        <form runat="server">
            <ext:ResourceManager runat="server" />
    
            <ext:TreePanel
                runat="server"
                Height="800"
                SortableColumns="false"
                RootVisible="false">
                <Store>
                    <ext:TreeStore runat="server">
                        <Model>
                            <ext:Model runat="server" IDProperty="fldID">
                                <Fields>
                                    <ext:ModelField Name="fldID" Type="String" />
                                    <ext:ModelField Name="fldDepartment2" Type="String" />
                                    <ext:ModelField Name="fldEmployee2" Type="String" />
                                    <ext:ModelField Name="fldType" Type="String" />
                                </Fields>
                            </ext:Model>
                        </Model>
                    </ext:TreeStore>
                </Store>
                <Plugins>
                    <ext:CellEditing runat="server" ClicksToEdit="1" />
                </Plugins>
                <Root>
                    <ext:Node Text="Employees">
                        <Children>
                            <ext:Node Icon="Folder" Expanded="true">
                                <CustomAttributes>
                                    <ext:ConfigItem Name="fldID" Value="1" Mode="Value" />
                                    <ext:ConfigItem Name="fldStructure" Value="Location: USA" Mode="Value" />
                                    <ext:ConfigItem Name="fldDepartment2" Value="" />
                                    <ext:ConfigItem Name="fldEmployee2" Value="" Mode="Value" />
                                    <ext:ConfigItem Name="fldType" Value="Location" Mode="Value" />
                                </CustomAttributes>
                                <Children>
                                    <ext:Node Icon="Folder" Expanded="true">
                                        <CustomAttributes>
                                            <ext:ConfigItem Name="fldID" Value="2" Mode="Value" />
                                            <ext:ConfigItem Name="fldStructure" Value="Department" Mode="Value" />
                                            <ext:ConfigItem Name="fldDepartment2" Value="HR" />
                                            <ext:ConfigItem Name="fldEmployee2" Value="" Mode="Value" />
                                            <ext:ConfigItem Name="fldType" Value="Department" Mode="Value" />
                                        </CustomAttributes>
                                        <Children>
                                            <ext:Node Leaf="true">
                                                <CustomAttributes>
                                                    <ext:ConfigItem Name="fldID" Value="3" Mode="Value" />
                                                    <ext:ConfigItem Name="fldStructure" Value="Employee" Mode="Value" />
                                                    <ext:ConfigItem Name="fldDepartment2" Value="HR" />
                                                    <ext:ConfigItem Name="fldEmployee2" Value="Rita" Mode="Value" />
                                                    <ext:ConfigItem Name="fldType" Value="Employee" Mode="Value" />
                                                </CustomAttributes>
                                            </ext:Node>
                                            <ext:Node Leaf="true">
                                                <CustomAttributes>
                                                    <ext:ConfigItem Name="fldID" Value="4" Mode="Value" />
                                                    <ext:ConfigItem Name="fldStructure" Value="Employee" Mode="Value" />
                                                    <ext:ConfigItem Name="fldDepartment2" Value="HR" />
                                                    <ext:ConfigItem Name="fldEmployee2" Value="Peter" Mode="Value" />
                                                    <ext:ConfigItem Name="fldType" Value="Employee" Mode="Value" />
                                                </CustomAttributes>
                                            </ext:Node>
                                        </Children>
                                    </ext:Node>
                                </Children>
                            </ext:Node>
                        </Children>
                    </ext:Node>
                </Root>
                <Plugins>
                    <ext:CellEditing runat="server" />
                </Plugins>
                <ColumnModel>
                    <Columns>
                        <ext:TreeColumn
                            runat="server"
                            Text="Task"
                            Width="300"
                            DataIndex="fldStructure" />
    
                        <ext:ComponentColumn
                            ID="ComponentColumn1"
                            runat="server"
                            Text="Department"
                            DataIndex="fldDepartment2"
                            Editor="true">
                            <Component>
                                <ext:ComboBox
                                    runat="server"
                                    DisplayField="Name"
                                    ValueField="Name"
                                    Editable="False"
                                    TriggerAction="All"
                                    AllowBlank="false"
                                    ForceSelection="true">
                                    <Store>
                                        <ext:Store ID="Store1" runat="server">
                                            <Model>
                                                <ext:Model runat="server">
                                                    <Fields>
                                                        <ext:ModelField Name="ID" />
                                                        <ext:ModelField Name="Name" />
                                                    </Fields>
                                                </ext:Model>
                                            </Model>
                                        </ext:Store>
                                    </Store>
                                </ext:ComboBox>
                            </Component>
                            <Listeners>
                                <Edit Fn="onEdit" />
                            </Listeners>
                        </ext:ComponentColumn>
    
                        <ext:ComponentColumn
                            ID="ComponentColumn2"
                            runat="server"
                            Text="Employee"
                            DataIndex="fldEmployee2"
                            Editor="true">
                            <Component>
                                <ext:ComboBox
                                    runat="server"
                                    DisplayField="Name"
                                    TriggerAction="All"
                                    ValueField="ID"
                                    AllowBlank="false"
                                    QueryMode="Local">
                                    <Store>
                                        <ext:Store runat="server" AutoLoad="false">
                                            <Model>
                                                <ext:Model runat="server">
                                                    <Fields>
                                                        <ext:ModelField Name="ID" />
                                                        <ext:ModelField Name="Name" />
                                                    </Fields>
                                                </ext:Model>
                                            </Model>
                                            <Proxy>
                                                <ext:PageProxy DirectFn="App.direct.BindData" />
                                            </Proxy>
                                        </ext:Store>
                                    </Store>
                                </ext:ComboBox>
                            </Component>
                            <Listeners>
                                <Bind Handler="cmp.getStore().load({ params: { department: record.data.fldDepartment2 }});" />
                            </Listeners>
                        </ext:ComponentColumn>
                    </Columns>
                </ColumnModel>
            </ext:TreePanel>
        </form>
    </body>
    </html>
  3. #3

    Record not set dirty

    Hi Daniil,

    thanks a lot, it works fine. The next step is how to mark the record as dirty.

    After setting the fldintReason Field with some text, the fldEmployee Combobox is empty

    var onEdit = function (componentColumn, e) {
        var employeeComboBox = App.cEmp.getComponent(e.record);
    
        employeeComboBox.getStore().reload({
            params: {
                department: e.value
            }
        });
    
        e.record.set("fldintReason", "some Text");
    };
    If i don`t set the reason field, the record will not mark as dirty. How can i set this?

    best regards
    Thorsten
  4. #4
    I think calling a record's .set() in a ComponentColumn's Edit handler should be avoided. It causes re-rendering of the editing row. Re-rendering means recreating all the components in ComponentColumns. But the ComboBox's Store loads its data. So, the Store initiates a load request, but when a response arrives, the Store has been removed already (i.e. replaced with another one).

    You could try moving the record.set() in a load success handler.
    var onEdit = function (componentColumn, e) {
        var employeeComboBox = App.cEmp.getComponent(e.record);
    
        employeeComboBox.getStore().reload({
            params: {
                department: e.value
            },
            success: function () {
                e.record.set("fldintReason", "some Text");
            }
        });
    };
  5. #5

    Record not marked as dirty

    Hi Daniil,

    sorry, the problem still exists.

    It seems the success function will not be executed. so the "fldintReason" field is always empty.

    Whats about other Components like TextFiles, DateFields, Checkboxes, etc. If i change that component the record is also not marked as dirty.

    best regards
    I.
  6. #6
    Please replace "success" with "callback".
    employeeComboBox.getStore().reload({
        params: {
            department: e.value
        },
        callback: function () {
            e.record.set("fldintReason", "some Text");
        }
    });
  7. #7

    Initial StoreParameter of ComponentColumn

    Hi,

    thanks so far. The last question is how can i get an initial StoreParameter with the value from the Component or from an other record field?

    The component store should load data with a parameter which holds the combobox value.

    best regards
    I.

    <ext:ComponentColumn
                            ID="ComponentColumn2"
                            runat="server"
                            Text="Employee"
                            DataIndex="fldEmployee2"
                            Editor="true">
                            <Component>
                                <ext:ComboBox
                                    runat="server"
                                    DisplayField="Name"
                                    TriggerAction="All"
                                    ValueField="ID"
                                    AllowBlank="false"
                                    QueryMode="Local">
                                    <Store>
                                        <ext:Store runat="server" AutoLoad="false">
                                            <Model>
                                                <ext:Model runat="server">
                                                    <Fields>
                                                        <ext:ModelField Name="ID" />
                                                        <ext:ModelField Name="Name" />
                                                    </Fields>
                                                </ext:Model>
                                            </Model>
                                            <Proxy>
                                                <ext:PageProxy DirectFn="App.direct.BindData" />
                                            </Proxy>
                                            <Paremeter>
                                               <ext:StoreParameter Name="A" Value="cmp.getValue()" Mode="Raw" />
                                               <ext:StoreParameter Name="B" Value="record.fldDepartment2" Mode="Raw" />
                                           </Parameter>
                                        </ext:Store>
                                    </Store>
                                </ext:ComboBox>
                            </Component>
                            <Listeners>
                                <Bind Handler="cmp.getStore().load({ params: { department: record.data.fldDepartment2 }});" />
                            </Listeners>
                        </ext:ComponentColumn>
  8. #8
    Please pass the parameters in the .load() call inside the Bind handler:
    <Bind Handler="cmp.getStore().load({ params: { department: record.data.fldDepartment2 }});" />
  9. #9
    Thanks a lot, now it works

    please mark this thread as closed!

    best regards
    I.

Similar Threads

  1. [CLOSED] TreeGrid : get TreeGrid store data in JSON format
    By matrixwebtech in forum 2.x Legacy Premium Help
    Replies: 9
    Last Post: Jan 14, 2015, 1:28 PM
  2. this.Store(...) not found
    By woernsn in forum 2.x Help
    Replies: 2
    Last Post: Jan 13, 2015, 4:16 PM
  3. Store not Found
    By camazorro in forum 1.x Help
    Replies: 1
    Last Post: Jan 17, 2012, 6:47 AM
  4. Store can't be found
    By ulrikn in forum 1.x Help
    Replies: 2
    Last Post: Nov 25, 2009, 8:35 AM
  5. Replies: 3
    Last Post: Nov 03, 2008, 1:35 PM

Posting Permissions