Jan 07, 2015, 4:39 AM
[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.
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
Hope u can understand the explained scenario!!!!
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 pageusing 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!!!!
Last edited by Daniil; Jan 20, 2015 at 5:49 AM.
Reason: [CLOSED]