May 03, 2013, 7:34 AM
[CLOSED] Issues with linked comboboxes in edit form
Hello,
Description:
We are having issues with linked comboboxes in an edit form. The page is a simple CRUD, with a grid and an edit formpanel.
The form controls are loaded via the loadRecord function on the form. In the form we have two comboboxes which need to be linked to eachother. Only the value of the second combobox is stored in the database.
Issue:
We don't seem to get the two comboboxes working together.
Issue 1: When filling the form via loadRecord, the select listeners on the first combo is not fired to load the second.
Issue 2: The second combo never gets selected on the correct value.
Here is the code:
.ASPX
Kind regards,
Reno
Description:
We are having issues with linked comboboxes in an edit form. The page is a simple CRUD, with a grid and an edit formpanel.
The form controls are loaded via the loadRecord function on the form. In the form we have two comboboxes which need to be linked to eachother. Only the value of the second combobox is stored in the database.
Issue:
We don't seem to get the two comboboxes working together.
Issue 1: When filling the form via loadRecord, the select listeners on the first combo is not fired to load the second.
Issue 2: The second combo never gets selected on the correct value.
Here is the code:
.ASPX
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Users.aspx.cs" Inherits="Users" %>
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title>Users</title>
<ext:ResourcePlaceHolder ID="ResourcePlaceHolder1" runat="server" Mode="Script" />
<ext:ResourcePlaceHolder ID="ResourcePlaceHolder2" runat="server" Mode="Style" />
</head>
<body>
<form id="formGridTabs" runat="server">
<ext:ResourceManager ID="scriptmanagerGridTabs" runat="server" CleanResourceUrl="false" />
<ext:Viewport ID="viewportOverview" runat="server" Layout="FitLayout">
<Items>
<ext:GridPanel runat="server" ID="gridpanelOverview" Border="false">
<Store>
<ext:Store runat="server" ID="storeOverview" OnReadData="storeOverview_Refresh" RemoteSort="true" PageSize="20" AutoLoad="true">
<Proxy>
<ext:PageProxy>
<Reader>
<ext:JsonReader Root="data" />
</Reader>
</ext:PageProxy>
</Proxy>
<Model>
<ext:Model runat="server" ID="modelOverview" IDProperty="GUID">
<Fields>
<ext:ModelField Name="UserName" />
<ext:ModelField Name="NTUserName" />
<ext:ModelField Name="UserFullName" />
<ext:ModelField Name="SETTINGS_Departments__GUID" ServerMapping="SETTINGS_Departments.GUID" />
<ext:ModelField Name="SETTINGS_Departments__DepartmentName" ServerMapping="SETTINGS_Departments.DepartmentName" />
<ext:ModelField Name="SETTINGS_Departments__SETTINGS_Sites__GUID" ServerMapping="SETTINGS_Departments.SETTINGS_Sites.GUID" />
<ext:ModelField Name="SETTINGS_Departments__SETTINGS_Sites__SiteName" ServerMapping="SETTINGS_Departments.SETTINGS_Sites.SiteName" />
<ext:ModelField Name="UserTel" />
<ext:ModelField Name="UserEmail" />
<ext:ModelField Name="UserPassword" />
<ext:ModelField Name="SETTINGS_UserRoles__GUID" ServerMapping="SETTINGS_UserRoles.GUID" />
<ext:ModelField Name="SETTINGS_UserRoles__UserRoleName" ServerMapping="SETTINGS_UserRoles.UserRoleName" />
</Fields>
</ext:Model>
</Model>
</ext:Store>
</Store>
<ColumnModel>
<Columns>
<ext:Column runat="server" ID="UserName" Text="Username" DataIndex="UserName" Width="200"></ext:Column>
<ext:Column runat="server" ID="SETTINGS_Departments__DepartmentName" Text="Department" DataIndex="SETTINGS_Departments__DepartmentName" Width="200"></ext:Column>
<ext:Column runat="server" ID="SETTINGS_Departments__SETTINGS_Sites__SiteName" Text="Site" DataIndex="SETTINGS_Departments__SETTINGS_Sites__SiteName" Width="200"></ext:Column>
<ext:Column runat="server" ID="SETTINGS_UserRoles__UserRoleName" Text="User Role" DataIndex="SETTINGS_UserRoles__UserRoleName" Width="200"></ext:Column>
</Columns>
</ColumnModel>
<View>
<ext:GridView runat="server" ID="gridviewOverview" TrackOver="true" />
</View>
<SelectionModel>
<ext:RowSelectionModel runat="server" ID="rowselectionmodelOverview" EnableKeyNav="true" Mode="Multi"></ext:RowSelectionModel>
</SelectionModel>
<Features>
<ext:GridFilters ID="gridfiltersOverview" runat="server" Local="false">
<Filters>
<ext:StringFilter DataIndex="UserName" />
<ext:StringFilter DataIndex="SETTINGS_Departments__DepartmentName" />
<ext:StringFilter DataIndex="SETTINGS_Departments__SETTINGS_Sites__SiteName" />
<ext:StringFilter DataIndex="SETTINGS_UserRoles__UserRoleName" />
</Filters>
</ext:GridFilters>
</Features>
<Listeners>
<ItemDblClick Handler="if(#{rowselectionmodelOverview}.hasSelection()) { var record = #{rowselectionmodelOverview}.selected.first();#{formpanelEditRecord}.getForm().loadRecord(record);#{isNew}.setValue('NO');#{formpanelEditRecord}.clearInvalid();#{windowEditRecord}.setTitle('Edit Record');#{windowEditRecord}.show(); }"></ItemDblClick>
<ItemContextMenu Handler="if(#{rowselectionmodelOverview}.hasSelection()) { e.preventDefault(); #{menuOverview}.showAt(e.getXY()); }"></ItemContextMenu>
</Listeners>
<TopBar>
<ext:Toolbar runat="server" ID="toolbarOverview">
<Items>
<ext:Button runat="server" ID="buttonNew" Text="New" Icon="ApplicationAdd" OnClientClick="#{formpanelEditRecord}.getForm().reset();#{isNew}.setValue('YES');#{formpanelEditRecord}.clearInvalid();#{windowEditRecord}.setTitle('New Record');#{windowEditRecord}.show();"></ext:Button>
<ext:Button runat="server" ID="buttonDuplicate" Text="Duplicate" Icon="ApplicationDouble" OnClientClick="if(#{rowselectionmodelOverview}.hasSelection()) { var record = #{rowselectionmodelOverview}.selected.first();#{formpanelEditRecord}.getForm().loadRecord(record);#{isNew}.setValue('YES');#{formpanelEditRecord}.clearInvalid();#{windowEditRecord}.setTitle('Duplicate Record');#{windowEditRecord}.show(); }"></ext:Button>
<ext:Button runat="server" ID="buttonEdit" Text="Edit" Icon="ApplicationEdit" OnClientClick="if(#{rowselectionmodelOverview}.hasSelection()) { var record = #{rowselectionmodelOverview}.selected.first();#{formpanelEditRecord}.getForm().loadRecord(record);#{isNew}.setValue('NO');#{formpanelEditRecord}.clearInvalid();#{windowEditRecord}.setTitle('Edit Record');#{windowEditRecord}.show(); }"></ext:Button>
<ext:Button runat="server" ID="buttonDelete" Text="Delete" Icon="ApplicationDelete" OnClientClick="if(#{rowselectionmodelOverview}.hasSelection()) {Ext.Msg.confirm('Delete Rows', 'Are you sure?', function(btn) { if (btn == 'yes') { App.direct.DeleteRecord({eventMask: {showMask: true, msg: 'Deleting...'}}); }})}"></ext:Button>
</Items>
</ext:Toolbar>
</TopBar>
<BottomBar>
<ext:PagingToolbar runat="server" ID="pagingtoolbarOverview">
<Items>
<ext:ToolbarSeparator runat="server" ID="toobarseparatorOverview" />
<ext:ToolbarSpacer runat="server" ID="toolbarspacerOverview1" Width="5" />
<ext:Label runat="server" ID="labelOverviewPaging" Text="Records per page:" />
<ext:ToolbarSpacer runat="server" ID="toolbarspacerOverview2" Width="10" />
<ext:ComboBox runat="server" ID="comboboxOverviewPaging" Width="80">
<Items>
<ext:ListItem Text="20" />
<ext:ListItem Text="50" />
<ext:ListItem Text="100" />
<ext:ListItem Text="200" />
</Items>
<SelectedItems>
<ext:ListItem Value="20" />
</SelectedItems>
<Listeners>
<Select Handler="#{storeOverview}.pageSize = parseInt(this.getValue(), 10); #{storeOverview}.load();" />
</Listeners>
</ext:ComboBox>
</Items>
</ext:PagingToolbar>
</BottomBar>
</ext:GridPanel>
</Items>
</ext:Viewport>
<ext:Menu runat="server" ID="menuOverview">
<Items>
<ext:MenuItem runat="server" ID="menuitemDuplicate" Text="Duplicate" Icon="ApplicationDouble" OnClientClick="if(#{rowselectionmodelOverview}.hasSelection()) { var record = #{rowselectionmodelOverview}.selected.first();#{formpanelEditRecord}.getForm().loadRecord(record);#{isNew}.setValue('YES');#{formpanelEditRecord}.clearInvalid();#{windowEditRecord}.setTitle('Duplicate Record');#{windowEditRecord}.show(); }"></ext:MenuItem>
<ext:MenuItem runat="server" ID="menuitemEdit" Text="Edit" Icon="ApplicationEdit" OnClientClick="if(#{rowselectionmodelOverview}.hasSelection()) { var record = #{rowselectionmodelOverview}.selected.first();#{formpanelEditRecord}.getForm().loadRecord(record);#{isNew}.setValue('NO');#{formpanelEditRecord}.clearInvalid();#{windowEditRecord}.setTitle('Edit Record');#{windowEditRecord}.show(); }"></ext:MenuItem>
<ext:MenuItem runat="server" ID="menuitemDelete" Text="Delete" Icon="ApplicationDelete" OnClientClick="if(#{rowselectionmodelOverview}.hasSelection()) {Ext.Msg.confirm('Delete Rows', 'Are you sure?', function(btn) { if (btn == 'yes') { App.direct.DeleteRecord({eventMask: {showMask: true, msg: 'Deleting...'}}); }})}"></ext:MenuItem>
</Items>
</ext:Menu>
<ext:Window runat="server" ID="windowEditRecord" Width="400" Height="210" Modal="true" Title="Edit Record" AutoShow="false" Padding="5" BodyPadding="5" Hidden="true" Layout="FitLayout" DefaultButton="buttonEditRecordSave">
<Items>
<ext:FormPanel runat="server" ID="formpanelEditRecord" Layout="AnchorLayout" BodyPadding="5">
<Items>
<ext:Hidden runat="server" ID="isNew"></ext:Hidden>
<ext:Hidden runat="server" ID="editGUID" Name="GUID"></ext:Hidden>
<ext:Hidden runat="server" ID="loadDepartmentGUID" Name="SETTINGS_Departments__GUID"></ext:Hidden>
<ext:TextField runat="server" ID="textfieldEditRecordUserName" FieldLabel="Username" AllowBlank="false" Name="UserName" AnchorHorizontal="100%"></ext:TextField> <%-- TODO Set correct fields --%>
<ext:ComboBox runat="server" ID="comboboxEditRecordSite" FieldLabel="Site" ForceSelection="true" Name="SETTINGS_Departments__SETTINGS_Sites__GUID" AnchorHorizontal="100%" AllowBlank="false" DisplayField="SiteName" ValueField="GUID" Editable="false">
<Store>
<ext:Store runat="server" ID="storeSites" OnReadData="storeSites_Refresh" RemoteSort="false" AutoLoad="true">
<Proxy>
<ext:PageProxy>
<Reader>
<ext:JsonReader Root="data" />
</Reader>
</ext:PageProxy>
</Proxy>
<Model>
<ext:Model runat="server" ID="modelSites" IDProperty="GUID">
<Fields>
<ext:ModelField Name="GUID"></ext:ModelField>
<ext:ModelField Name="SiteName"></ext:ModelField>
</Fields>
</ext:Model>
</Model>
</ext:Store>
</Store>
<SelectedItems>
<ext:ListItem Index="0"></ext:ListItem>
</SelectedItems>
<Listeners>
<Select Handler="#{comboboxEditRecordDepartment}.clearValue();#{storeDepartments}.reload();"></Select>
</Listeners>
</ext:ComboBox>
<ext:ComboBox runat="server" ID="comboboxEditRecordDepartment" FieldLabel="Department" ForceSelection="true" AnchorHorizontal="100%" AllowBlank="false" DisplayField="DepartmentName" ValueField="GUID" Editable="false">
<Store>
<ext:Store runat="server" ID="storeDepartments" OnReadData="storeDepartments_Refresh" RemoteSort="false" AutoLoad="false">
<Proxy>
<ext:PageProxy>
<Reader>
<ext:JsonReader Root="data" />
</Reader>
</ext:PageProxy>
</Proxy>
<Model>
<ext:Model runat="server" ID="modelDepartments" IDProperty="GUID">
<Fields>
<ext:ModelField Name="GUID"></ext:ModelField>
<ext:ModelField Name="DepartmentName"></ext:ModelField>
</Fields>
</ext:Model>
</Model>
<Listeners>
<Load Handler="if ((#{loadDepartmentGUID}.value != '') && (#{storeDepartments}.getCount()>0)) { #{comboboxEditRecordDepartment}.setValue(#{loadDepartmentGUID}.value); #{loadDepartmentGUID}.value = ''; };" />
</Listeners>
</ext:Store>
</Store>
</ext:ComboBox>
<ext:ComboBox runat="server" ID="comboboxEditRecordUserRole" FieldLabel="User Role" ForceSelection="true" Name="SETTINGS_UserRoles__GUID" AnchorHorizontal="100%" AllowBlank="false" DisplayField="UserRoleName" ValueField="GUID" Editable="false">
<Store>
<ext:Store runat="server" ID="storeUserRoles" OnReadData="storeUserRoles_Refresh" RemoteSort="false" AutoLoad="true">
<Proxy>
<ext:PageProxy>
<Reader>
<ext:JsonReader Root="data" />
</Reader>
</ext:PageProxy>
</Proxy>
<Model>
<ext:Model runat="server" ID="modelUserRoles" IDProperty="GUID">
<Fields>
<ext:ModelField Name="GUID"></ext:ModelField>
<ext:ModelField Name="UserRoleName"></ext:ModelField>
</Fields>
</ext:Model>
</Model>
</ext:Store>
</Store>
</ext:ComboBox>
</Items>
</ext:FormPanel>
</Items>
<Buttons>
<ext:Button runat="server" ID="buttonEditRecordSave" Text="Save" Icon="Accept" OnClientClick="if(#{formpanelEditRecord}.getForm().isValid()){App.direct.SaveRecord({eventMask: {showMask: true, msg: 'Saving...'}});}"></ext:Button>
<ext:Button runat="server" ID="buttonEditRecordCancel" Text="Cancel" Icon="Cancel" OnClientClick="#{windowEditRecord}.close();"></ext:Button>
</Buttons>
<Listeners>
<Render Handler="#{formpanelEditRecord}.getForm().isValid();" />
</Listeners>
</ext:Window>
</form>
</body>
</html>using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using Ext.Net;
namespace Security
{
public partial class Users : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (!X.IsAjaxRequest)
{
}
}
protected void storeOverview_Refresh(object sender, StoreReadDataEventArgs e)
{
try
{
using (Durability_Entities dcData = new Durability_Entities())
{
var records = from record in dcData.SETTINGS_Users.Include("SETTINGS_Departments").Include("SETTINGS_Departments.SETTINGS_Sites") select record;
Common.HelperMethods.ApplyFilters(ref records, e.Parameters[this.gridfiltersOverview.ParamPrefix]);
if (e.Sort.Length > 0) { for (int i = 0; i < e.Sort.Length; i++) { Common.HelperMethods.ApplySorting(ref records, e.Sort[i].Property + " " + e.Sort[i].Direction); } } else { Common.HelperMethods.ApplySorting(ref records, "UserName ASC"); }
e.Total = records.Count();
Common.HelperMethods.ApplyPaging(ref records, e.Start, e.Limit);
this.storeOverview.DataSource = records;
this.storeOverview.DataBind();
this.gridpanelOverview.GetSelectionModel().ClearSelection();
this.gridpanelOverview.Call("clearMemory");
}
}
catch (Exception error)
{
Common.HelperMethods.TrapError(error);
}
}
protected void storeUserRoles_Refresh(object sender, StoreReadDataEventArgs e)
{
try
{
using (Durability_Entities dcData = new Durability_Entities())
{
var records = from record in dcData.SETTINGS_UserRoles select record;
if (e.Sort.Length > 0) { for (int i = 0; i < e.Sort.Length; i++) { Common.HelperMethods.ApplySorting(ref records, e.Sort[i].Property + " " + e.Sort[i].Direction); } } else { Common.HelperMethods.ApplySorting(ref records, "UserRoleName ASC"); }
this.storeUserRoles.DataSource = records;
this.storeUserRoles.DataBind();
}
}
catch (Exception error)
{
Common.HelperMethods.TrapError(error);
}
}
protected void storeSites_Refresh(object sender, StoreReadDataEventArgs e)
{
try
{
using (Durability_Entities dcData = new Durability_Entities())
{
var records = from record in dcData.SETTINGS_Sites select record;
if (e.Sort.Length > 0) { for (int i = 0; i < e.Sort.Length; i++) { Common.HelperMethods.ApplySorting(ref records, e.Sort[i].Property + " " + e.Sort[i].Direction); } } else { Common.HelperMethods.ApplySorting(ref records, "SiteName ASC"); }
this.storeSites.DataSource = records;
this.storeSites.DataBind();
}
}
catch (Exception error)
{
Common.HelperMethods.TrapError(error);
}
}
protected void storeDepartments_Refresh(object sender, StoreReadDataEventArgs e)
{
try
{
using (Durability_Entities dcData = new Durability_Entities())
{
Guid SiteGUID;
if (Guid.TryParse(this.comboboxEditRecordSite.SelectedItem.Value, out SiteGUID))
{
var records = from record in dcData.SETTINGS_Departments where record.SiteGUID == SiteGUID select record;
if (e.Sort.Length > 0) { for (int i = 0; i < e.Sort.Length; i++) { Common.HelperMethods.ApplySorting(ref records, e.Sort[i].Property + " " + e.Sort[i].Direction); } } else { Common.HelperMethods.ApplySorting(ref records, "DepartmentName ASC"); }
this.storeDepartments.DataSource = records;
this.storeDepartments.DataBind();
}
}
}
catch (Exception error)
{
Common.HelperMethods.TrapError(error);
}
}
[DirectMethod]
public void SaveRecord()
{
try
{
using (Durability_Entities dcData = new Durability_Entities())
{
if (this.isNew.Value.ToString() == "YES")
{
Guid rowGUID = Guid.NewGuid();
SETTINGS_Users newRecord = new SETTINGS_Users();
newRecord.GUID = rowGUID;
//newRecord.UserRoleName = this.textfieldEditRecordUserRoleName.Text; // TODO Set correct fields
//dcData.SETTINGS_Users.Add(newRecord);
}
else
{
Guid rowGUID = new Guid(this.editGUID.Value.ToString());
var selectedRecord = (from record in dcData.SETTINGS_Users where record.GUID == rowGUID select record).FirstOrDefault(); // TODO Set correct Entity Object
if (selectedRecord != null)
{
selectedRecord.GUID = rowGUID;
//selectedRecord.UserRoleName = this.textfieldEditRecordUserRoleName.Text; // TODO Set correct fields
}
}
//dcData.SaveChanges();
this.windowEditRecord.Close();
this.storeOverview.Reload();
}
}
catch (Exception error)
{
Common.HelperMethods.TrapError(error);
}
}
[DirectMethod]
public void DeleteRecord()
{
try
{
SelectedRowCollection selectedRows = this.rowselectionmodelOverview.SelectedRows;
using (Durability_Entities dcData = new Durability_Entities())
{
foreach (SelectedRow selectedRow in selectedRows)
{
Guid rowGUID = new Guid(selectedRow.RecordID);
var selectedRecord = (from record in dcData.SETTINGS_Users where record.GUID == rowGUID select record).FirstOrDefault();
if (selectedRecord != null) dcData.SETTINGS_Users.Remove(selectedRecord);
}
dcData.SaveChanges();
this.storeOverview.Reload();
}
}
catch (Exception error)
{
Common.HelperMethods.TrapError(error);
}
}
}
}Kind regards,
Reno
Last edited by Daniil; May 03, 2013 at 1:06 PM.
Reason: [CLOSED]
Originally Posted by reno@renoproductions.com
