[CLOSED] Fill Combo-box store client side based on another Combo-box selection

  1. #1

    [CLOSED] Fill Combo-box store client side based on another Combo-box selection

    Hi,

    The requirement is we need to load a Combobox store and fill the values based on another combobox selection.
    Please go through the code and help us to get through this.

    Please not that we need to do all the process Client side.

    As you see in the attached screen shot, while select the System Combo it's related values must be loaded in Organisation Combo.
    For eg: If we select System Combo as Sample 2 (as it's id = 2), the value from Organisation Combo which is having SystemId = 2 must be loaded and filled into the Organisation Combo's store.


    .aspx page
    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="ComboBox.aspx.cs" Inherits="SSTM.WebApp.Setup.ComboBox" %>
     
    <!DOCTYPE html>
     
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
    </head>
    <body>
        <form id="form1" runat="server">
            <div>
                <ext:ResourceManager ID="ResourceManager" runat="server" Namespace="SSTM"></ext:ResourceManager>
                <ext:Store ID="storeOrganisation" runat="server" ShowWarningOnFailure="false">
                    <Model>
                        <ext:Model ID="Model2" runat="server" IDProperty="OrganisationId">
                            <Fields>
                                <ext:ModelField Name="Description" />
                                <ext:ModelField Name="OrganisationId" />
                                <ext:ModelField Name="SystemId" />
                            </Fields>
                        </ext:Model>
                    </Model>
                </ext:Store>
                <ext:Viewport ID="ViewPort1" runat="server" Layout="FitLayout">
                    <Content>
                        <ext:Container ID="Container1" runat="server" Layout="BorderLayout">
                            <Items>
                                <ext:GridPanel runat="server" ID="gridPanel" Region="Center" ForceFit="true" StyleSpec="padding-bottom:10px;">
                                    <Store>
                                        <ext:Store runat="server" ID="storeGrid" ShowWarningOnFailure="false">
                                            <Model>
                                                <ext:Model ID="Model1" runat="server" IDProperty="ContactKindId" Name="ContactKind">
                                                    <Fields>
                                                        <ext:ModelField Name="ContactKindId" />
                                                        <ext:ModelField Name="SystemId" />
                                                        <ext:ModelField Name="OrganisationId" />
                                                    </Fields>
                                                </ext:Model>
                                            </Model>
                                        </ext:Store>
                                    </Store>
                                    <ColumnModel runat="server" ID="colModel">
                                        <Columns>
                                            <ext:Column ID="SystemId" runat="server" DataIndex="SystemId" Align="Left" Header="System" Width="80">
                                                <Editor>
                                                    <ext:ComboBox ID="cmbSystem" runat="server" DisplayField="Name" ValueField="SystemId" QueryMode="Local">
                                                        <Store>
                                                            <ext:Store ID="storeSystem" runat="server">
                                                                <Model>
                                                                    <ext:Model ID="Model3" runat="server" IDProperty="SystemId">
                                                                        <Fields>
                                                                            <ext:ModelField Name="SystemId" />
                                                                            <ext:ModelField Name="Name" />
                                                                        </Fields>
                                                                    </ext:Model>
                                                                </Model>
                                                            </ext:Store>
                                                        </Store>
                                                        <Listeners>
                                                            <Select Fn="FillOrgCombo" />
                                                        </Listeners>
                                                    </ext:ComboBox>
                                                </Editor>
                                                <Renderer Fn="systemRenderer" />
                                            </ext:Column>
                                            <ext:Column ID="Organisation" runat="server" DataIndex="OrganisationId" Align="Left" Header="Organisation" Width="100">
                                                <Editor>
                                                    <ext:ComboBox ID="cmbOrganisation" runat="server" DisplayField="Description" ValueField="OrganisationId" QueryMode="Local">
                                                    </ext:ComboBox>
                                                </Editor>
                                                <Renderer Fn="organisationRenderer" />
                                            </ext:Column>
                                        </Columns>
                                    </ColumnModel>
                                    <Plugins>
                                        <ext:CellEditing ID="CellEditing1" runat="server">
                                            <Listeners>
                                                <BeforeEdit Fn="ValidateBeforeEdit" />
                                            </Listeners>
                                        </ext:CellEditing>
                                    </Plugins>
                                    <Buttons>
                                        <ext:Button ID="btnAdd" runat="server" Text="Add">
                                            <Listeners>
                                                <Click Handler="NewRow();"></Click>
                                            </Listeners>
                                        </ext:Button>
                                        <ext:Button ID="btnSave" runat="server" Text="Save">
                                            <Listeners>
                                                <Click Handler="Save();"></Click>
                                            </Listeners>
                                        </ext:Button>
                                    </Buttons>
                                    <BottomBar>
                                        <ext:PagingToolbar ID="ptbGrid" runat="server" StoreID="storeGrid"
                                            DisplayInfo="true" Weight="100">
                                        </ext:PagingToolbar>
                                    </BottomBar>
                                </ext:GridPanel>
                            </Items>
                        </ext:Container>
                    </Content>
                </ext:Viewport>
                <script type="text/javascript">
                    var editRecord = false;
                    var currentRowIndex = -1;
     
                    function NewRow() {
                        if (editRecord) return;
                        editRecord = true;
                        var rowIndex = SSTM.gridPanel.store.getCount();
                        SSTM.gridPanel.store.insert(rowIndex, {});
                        currentRowIndex = rowIndex;
                        SSTM.btnAdd.setDisabled(true);
                        SSTM.btnSave.setDisabled(false);
                        SSTM.gridPanel.editingPlugin.startEdit(parseInt(rowIndex), 0);
                    }
     
                    function Save() {
                        SSTM.btnAdd.setDisabled(false);
                        SSTM.btnSave.setDisabled(true);
                    }
     
                    function ValidateBeforeEdit(item, e) {
                        if (!editRecord || e.rowIdx != currentRowIndex) e.cancel = true;
     
                        if (!e.cancel) {
                            if (e.field == "OrganisationId") {
                                var store1 = Ext.create('Ext.data.Store', {
                                    fields: ['OrganisationId', 'Description', 'SystemId'],
                                    data: orgCombo
                                });
                                Ext.getCmp("cmbOrganisation").bindStore(store1);
                                Ext.getCmp("cmbOrganisation").displayField = "Description";
                                Ext.getCmp("cmbOrganisation").valueField = "OrganisationId";
                            }
                        }
                    }
     
                    var systemRenderer = function (value) {
                        var r = SSTM.storeSystem.getById(value);
                        if (Ext.isEmpty(r)) {
                            return "";
                        }
                        return r.data.Name;
                    };
     
                    var organisationRenderer = function (value) {
                        var rec = SSTM.storeOrganisation.getById(value);
                        if (Ext.isEmpty(rec)) {
                            return "";
                        }
                        return rec.data.Description;
                    }
     
                    var orgCombo = new Array();
     
                    function FillOrgCombo(e, editor) {
                        var systemId = editor[0].data.SystemId;
                        var tempCount = SSTM.storeOrganisation.data.items.length;
                        if (tempCount > 0) {
                            var temp = SSTM.storeOrganisation.data.items;
                            for (var i = 0; i < tempCount; i++) {
                                if (temp[i].data.SystemId == systemId) {
                                    orgCombo[i] = temp[i].data;
                                }
                            }
                        }
                    }
     
                </script>
            </div>
        </form>
    </body>
    </html>
    .cs page

    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Web;
    using System.Web.UI;
    using System.Web.UI.WebControls;
     
    namespace SSTM.WebApp.Setup
    {
        public partial class ComboBox : System.Web.UI.Page
        {
            protected void Page_Load(object sender, EventArgs e)
            {
                FillSystemCombo();
                FillOrganisationCombo();
            }
     
            public void FillSystemCombo()
            {
                List<SystemCombo> system = new List<SystemCombo>();
                system.Add(new SystemCombo { SystemId = 1, Name = "Sample1" });
                system.Add(new SystemCombo { SystemId = 2, Name = "Sample2" });
                system.Add(new SystemCombo { SystemId = 3, Name = "Sample3" });
                storeSystem.DataSource = system;
                storeSystem.DataBind();
            }
     
            public void FillOrganisationCombo()
            {
                List<OrganisationCombo> organisations = new List<OrganisationCombo>();
                organisations.Add(new OrganisationCombo { OrganisationId = 1, Description = "Test1", SystemId = 1 });
                organisations.Add(new OrganisationCombo { OrganisationId = 2, Description = "Test2", SystemId = 2 });
                organisations.Add(new OrganisationCombo { OrganisationId = 3, Description = "Test3", SystemId = 3 });
                storeOrganisation.DataSource = organisations;
                storeOrganisation.DataBind();
            }
     
            public class SystemCombo
            {
                public int SystemId { get; set; }
                public string Name { get; set; }
            }
     
            public class OrganisationCombo
            {
                public int OrganisationId { get; set; }
                public string Description { get; set; }
                public int SystemId { get; set; }
            }
        }
    }

    Hope u can understand the explained scenario!!!!
    Attached Thumbnails Click image for larger version. 

Name:	Combobox issue.jpg 
Views:	9 
Size:	35.0 KB 
ID:	18411  
    Last edited by Daniil; Jan 20, 2015 at 5:49 AM. Reason: [CLOSED]
  2. #2
    Hi @speedstepmem4,

    Please clarify have you seen this example?
    http://mvc.ext.net/#/Form_ComboBox/Ajax_Linked_Combos
  3. #3

    Linked combo box

    Hi Daniil,

    We have already verified the LinkedCombobox section in Examples explorer.

    This is the link which we refer:
    https://examples3.ext.net/#/Form/Com...ombos_In_Grid/

    For your information we are not using mvc. instead we are using web form.

    As also we are not sure whether you noticed our quote in the previous post that we have mentioned

    Please note that we need to do all the process in client side.
    Instead in your provided sample, the process is in server side. Please refer the screenshot.

    If you could please have a look at the sample which we provided in the above sample and provide us a solution.
    Attached Thumbnails Click image for larger version. 

Name:	Model validation request Server side.jpg 
Views:	5 
Size:	81.0 KB 
ID:	18522  
  4. #4

    Linked combo box

    Hi Team,


    We made the post on past Jan 08, 2015, 11:01 AM, but till now we haven't received any reply post from you regarding the issue asked.
    We are extremely unhappy with this. We are awaiting for the reply from your side to fix the issue. So please help us!!!
    Last edited by speedstepmem4; Jan 12, 2015 at 4:25 AM.
  5. #5
    Apologize for the delay in answering. Somehow we missed your reply. Please feel free to bump (posting a follow-up) a thread in such cases.

    Regarding your sample code.

    Please define an empty Store for the ComboBox to this one. The key point is introducing the "j" variable.
    <ext:ComboBox 
        ID="cmbOrganisation" 
        runat="server" 
        DisplayField="Description" 
        ValueField="OrganisationId" 
        QueryMode="Local">
        <Store>
            <ext:Store runat="server" />
        </Store>
    </ext:ComboBox>
    Please change the FillOrgCombo function to:
    function FillOrgCombo(e, editor) {
        var systemId = editor[0].data.SystemId,
            tempCount = SSTM.storeOrganisation.data.items.length,
            j = 0,
            temp,
            i;
    
        if (tempCount > 0) {
            temp = SSTM.storeOrganisation.data.items;
    
            for (i = 0; i < tempCount; i++) {
                if (temp[i].data.SystemId === systemId) {
                    orgCombo[j++] = temp[i].data;
                }
            }
        }
    }

Similar Threads

  1. [CLOSED] Combo query issue when using same store on two combo boxes
    By FpNetWorth in forum 2.x Legacy Premium Help
    Replies: 1
    Last Post: Feb 05, 2013, 10:53 PM
  2. Fill dependent combo box
    By Vaishali in forum 1.x Help
    Replies: 1
    Last Post: Jan 10, 2012, 7:36 AM
  3. Replies: 2
    Last Post: Dec 29, 2011, 10:05 PM
  4. Replies: 4
    Last Post: Sep 18, 2009, 9:49 AM
  5. Replies: 6
    Last Post: Sep 01, 2009, 1:06 PM

Posting Permissions