[CLOSED] ComboBox within GridPanel within a RowExpander

  1. #1

    [CLOSED] ComboBox within GridPanel within a RowExpander

    I have a GridPanel (GridPanel A) which has several rows. Each row has a RowExpander associated with it which when expanded contains another GridPanel (GridPanel B). Within each GridPanel B I have a column which contains a ComboBox editor. The ComboBox editor does not allow you to select a value for the first two rows of the GridPanel A but it does work for all the other rows. I am putting together a test case but in the mean time is there anything you can suggest?
    Last edited by Daniil; Jul 06, 2015 at 3:18 PM. Reason: [CLOSED]
  2. #2
    Hi @Sobhia,

    I don't quite have any idea what might be wrong. Yes, please provide a test case.
  3. #3
    Hi Daniil,

    I have produced a test case similar to the issue I was having as producing a test case with the whole functionality will take a long time. I hope this is okay. In this test case the ComboBoxes within each row expander do not work.

    <%@ Page Language="C#" %>
    
    <%@ Import Namespace="System.Collections.Generic" %>
    
    <script runat="server">
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!X.IsAjaxRequest)
            {
                List<object> data = new List<object>
                {
                    new {Country = "C1", State = "C1_S1"},
                    new {Country = "C2", State = "C2_S1"},
                    new {Country = "C3", State = "C3_S1"},
                };
    
                Store1.DataSource = data;
    
                List<object> countries = new List<object>(10);
                for (int i = 1; i <= 10; i++)
                {
                    countries.Add(new { Text = "C" + i });
                }
    
                CountryStore.DataSource = countries;
    
                List<object> test = new List<object>
                {
                    new {City = "C1_S1_C1"},
                    new {City = "C2_S1_C1"},
                    new {City = "C3_S1_C1"},
                };
    
                Store2.DataSource = test;
            }
        }
    
        protected void StatesRefresh(object sender, StoreReadDataEventArgs e)
        {
            string country = e.Parameters["query"];
    
            List<object> states = new List<object>(10);
            for (int i = 1; i <= 10; i++)
            {
                states.Add(new { Text = country + "_S" + i });
            }
    
            StateStore.DataSource = states;
            StateStore.DataBind();
        }
    
        protected void CitiesRefresh(object sender, StoreReadDataEventArgs e)
        {
            string state = e.Parameters["query"];
    
            List<object> cities = new List<object>(10);
            for (int i = 1; i <= 10; i++)
            {
                cities.Add(new { Text = state + "_C" + i });
            }
    
            CityStore.DataSource = cities;
            CityStore.DataBind();
        }
    
        protected void Edit(object sender, DirectEventArgs e)
        {
            List<string> fields = new List<string> { "country", "state", "city" };
            int startIndex = fields.IndexOf(e.ExtraParams["field"]);
            JsonObject data = JSON.Deserialize<JsonObject>(e.ExtraParams["record"]);
            ModelProxy record = this.Store1.GetAt(int.Parse(e.ExtraParams["index"]));
    
            for (int i = startIndex + 1; i < 4; i++)
            {
                switch (fields[i])
                {
                    case "state":
                        record.Set(fields[i], data["country"] + "_S1");
                        data["state"] = data["country"] + "_S1";
                        break;
                    case "city":
                        record.Set(fields[i], data["state"] + "_C1");
                        data["city"] = data["state"] + "_C1";
                        break;
                }
            }
        }
    
       
    </script>
    
    <!DOCTYPE html>
    
    <html>
    <head id="Head1" runat="server">
        <title>Ext.NET Examples</title>
        <link href="/resources/css/examples.css" rel="stylesheet" />
    
        <script>
            var beforeEdit = function (ed, e) {
    
                var field = this.getEditor(e.record, e.column).field;
    
                switch (e.field) {
                    case "state":
                        field.allQuery = e.record.get('country');
                        break;
                    case "city":
                        field.allQuery = e.record.get('state');
                        break;
                }
            };
        </script>
    </head>
    <body>
        <form id="Form1" runat="server">
            <ext:ResourceManager ID="ResourceManager1" runat="server" />
    
            <ext:Store ID="CountryStore" runat="server">
                <Model>
                    <ext:Model ID="Model1" runat="server">
                        <Fields>
                            <ext:ModelField Name="text" Type="String" ServerMapping="Text" />
                        </Fields>
                    </ext:Model>
                </Model>
            </ext:Store>
    
            <ext:Store ID="StateStore" runat="server" OnReadData="StatesRefresh">
                <Proxy>
                    <ext:PageProxy />
                </Proxy>
                <Model>
                    <ext:Model ID="Model2" runat="server">
                        <Fields>
                            <ext:ModelField Name="text" Type="String" ServerMapping="Text" />
                        </Fields>
                    </ext:Model>
                </Model>
            </ext:Store>
    
            <ext:Store ID="CityStore" runat="server" OnReadData="CitiesRefresh">
                <Proxy>
                    <ext:PageProxy />
                </Proxy>
                <Model>
                    <ext:Model ID="Model3" runat="server">
                        <Fields>
                            <ext:ModelField Name="text" Type="String" ServerMapping="Text" />
                        </Fields>
                    </ext:Model>
                </Model>
            </ext:Store>
    
    
            <ext:GridPanel
                ID="GridPanel1"
                runat="server"
                Height="300"
                Width="600"
                Title="Grid"
                ForceFit="true">
                <Store>
                    <ext:Store ID="Store1" runat="server">
                        <Model>
                            <ext:Model ID="Model5" runat="server">
                                <Fields>
                                    <ext:ModelField Name="country" Type="String" ServerMapping="Country" />
                                    <ext:ModelField Name="state" Type="String" ServerMapping="State" />
                                </Fields>
                            </ext:Model>
                        </Model>
                    </ext:Store>
                </Store>
                <ColumnModel>
                    <Columns>
                        <ext:Column ID="Column1" runat="server" DataIndex="country" Text="Country">
                            <Editor>
                                <ext:ComboBox
                                    ID="CountryCombo"
                                    runat="server"
                                    QueryMode="Local"
                                    TriggerAction="All"
                                    StoreID="CountryStore"
                                    ValueField="text"
                                    DisplayField="text">
                                </ext:ComboBox>
                            </Editor>
                        </ext:Column>
    
                        <ext:Column ID="Column2" runat="server" DataIndex="state" Text="State">
                            <Editor>
                                <ext:ComboBox
                                    ID="StateCombo"
                                    runat="server"
                                    StoreID="StateStore"
                                    ValueField="text"
                                    DisplayField="text">
                                    <CustomConfig>
                                        <ext:ConfigItem Name="initQuery" Value="Ext.emptyFn" Mode="Raw" />
                                    </CustomConfig>
                                </ext:ComboBox>
                            </Editor>
                        </ext:Column>
                    </Columns>
                </ColumnModel>
    
                <Plugins>
                    <ext:RowExpander ID="RowExpander1" runat="server">
                        <Component>
                            <ext:GridPanel
                                ID="GridPanel2"
                                runat="server"
                                Height="300"
                                Width="600"
                                Title="Grid"
                                ForceFit="true">
                                <Store>
                                    <ext:Store ID="Store2" runat="server">
                                        <Model>
                                            <ext:Model ID="Model6" runat="server">
                                                <Fields>
                                                    <ext:ModelField Name="city" Type="String" ServerMapping="City" />
                                                </Fields>
                                            </ext:Model>
                                        </Model>
                                    </ext:Store>
                                </Store>
                                <ColumnModel>
                                    <Columns>
                                        <ext:Column ID="Column3" runat="server" DataIndex="city" Text="City">
                                            <Editor>
                                                <ext:ComboBox
                                                    ID="CityCombo"
                                                    runat="server"
                                                    QueryMode="Remote"
                                                    StoreID="CityStore"
                                                    ValueField="text"
                                                    DisplayField="text">
                                                    <CustomConfig>
                                                        <ext:ConfigItem Name="initQuery" Value="Ext.emptyFn" Mode="Raw" />
                                                    </CustomConfig>
                                                </ext:ComboBox>
                                            </Editor>
                                        </ext:Column>
                                    </Columns>
                                </ColumnModel>
                                <Plugins>
                                    <ext:CellEditing>
                                        <Listeners>
                                            <BeforeEdit Fn="beforeEdit" />
                                        </Listeners>
                                        <DirectEvents>
                                            <Edit OnEvent="Edit" Before="return e.value !== e.originalValue;">
                                                <EventMask ShowMask="true" Target="CustomTarget" CustomTarget="App.GridPanel2" />
                                                <ExtraParams>
                                                    <ext:Parameter Name="field" Value="e.field" Mode="Raw" />
                                                    <ext:Parameter Name="index" Value="e.rowIdx" Mode="Raw" />
                                                    <ext:Parameter Name="record" Value="e.record.data" Mode="Raw" Encode="true" />
                                                </ExtraParams>
                                            </Edit>
                                        </DirectEvents>
                                    </ext:CellEditing>
                                </Plugins>
                     </ext:GridPanel>
                    </Component>
                    </ext:RowExpander>
                    <ext:CellEditing>
                        <Listeners>
                            <BeforeEdit Fn="beforeEdit" />
                        </Listeners>
                        <DirectEvents>
                            <Edit OnEvent="Edit" Before="return e.value !== e.originalValue;">
                                <EventMask ShowMask="true" Target="CustomTarget" CustomTarget="App.GridPanel1" />
                                <ExtraParams>
                                    <ext:Parameter Name="field" Value="e.field" Mode="Raw" />
                                    <ext:Parameter Name="index" Value="e.rowIdx" Mode="Raw" />
                                    <ext:Parameter Name="record" Value="e.record.data" Mode="Raw" Encode="true" />
                                </ExtraParams>
                            </Edit>
                        </DirectEvents>
                    </ext:CellEditing>
                </Plugins>
            </ext:GridPanel>
    
        </form>
    </body>
    </html>
    Last edited by Sobhia; May 28, 2015 at 9:26 AM.
  4. #4
    Thank you for the test case!

    I've reproduced the problem, but I could not find a solution/workaround so far. I'll try again later.
  5. #5
    Hi Danill,

    Any luck finding a solution for this?

    I need it for a client project as the deadline is approaching soon.

    Thanks,

    Sobhia
  6. #6
    I was not able to find a solution so far. I will try again.
  7. #7
    Hello,

    I run a few tests and it seems this is not a problem specific to the ComboBox. Same thing happens if you have a ModelField of Date type and you were using a DateField as the cell editor.

    On another note, since the two grids use different stores that are not associated, the following code will not work as expected:

    case "city":
        field.allQuery = e.record.get('state');     // undefined for Store2
        break;
    You can define all fields in the model of Store1 and have it used by both grids:

    <ext:Store ID="Store1" runat="server">
        <Model>
            <ext:Model ID="Model5" runat="server">
                <Fields>
                    <ext:ModelField Name="country" Type="String" ServerMapping="Country" />
                    <ext:ModelField Name="state" Type="String" ServerMapping="State" />
                    <ext:ModelField Name="city" Type="String" ServerMapping="City" />
                </Fields>
            </ext:Model>
        </Model>
    </ext:Store>
    Please, note that the inner grid will not be automatically filled with the cities filtered by the country and state of the expanded row. You can try it for yourself if you change data to:

    List<object> data = new List<object>
    {
        new {Country = "C1", State = "C1_S1", City = "C1_S1_C1" },
        new {Country = "C2", State = "C2_S1", City = "C2_S1_C1" },
        new {Country = "C3", State = "C3_S1", City = "C3_S1_C1" },
    };
    Store1.DataSource = data;
    Whatever row you expand, you will see all three cities in the inner grid. Furthermore, whatever change you make (assuming there was no problem with the combobox editor) will be reflected for all rows of the outer grid. Essentially, this is the same inner grid being used in all cases.

    Bottom line is, I am not sure if this the right way to go if what you want is to have cities of a certain country and state listed as the contents of an inner grid.
  8. #8
    There is a possible fix for the issue reported in the first post.
    http://forums.ext.net/showthread.php?59708

    I added the current thread link to the GitHub issue. So, if ever fixed in SVN, we'll post a follow up here.
  9. #9
    The issue has been fixed in the revision #6465 (trunk). It goes to the upcoming Ext.NET 3.2.0 release.

    The fix is added on the level of Ext.view.View. There was already a check to make an outer GridPanel ignoring events from its inner GridPanel, but it was not enough for this scenario. So, I added an additional check and it appears to behave fine. Please let me know if you find a scenario where it breaks.

    @Sobhia, thank you very much for the report!

Similar Threads

  1. Replies: 15
    Last Post: Sep 19, 2017, 6:15 PM
  2. Replies: 4
    Last Post: Jan 18, 2015, 5:51 PM
  3. [CLOSED] Layout issue: Show Gridpanel in gridpanel with rowexpander
    By rmelancon in forum 2.x Legacy Premium Help
    Replies: 15
    Last Post: Mar 05, 2014, 3:01 AM
  4. [CLOSED] Combobox submit value in RowExpander
    By tanky65 in forum 2.x Legacy Premium Help
    Replies: 2
    Last Post: Jan 24, 2013, 12:17 PM
  5. Replies: 1
    Last Post: Jun 15, 2011, 9:01 AM

Tags for this Thread

Posting Permissions