PDA

View Full Version : [CLOSED] Issues with linked comboboxes in edit form



reinout.mechant@imprss.be
May 03, 2013, 8:34 AM
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


<%@ 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();#{fo rmpanelEditRecord}.getForm().loadRecord(record);#{ isNew}.setValue('NO');#{formpanelEditRecord}.clear Invalid();#{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}.clearInvali d();#{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();#{fo rmpanelEditRecord}.getForm().loadRecord(record);#{ isNew}.setValue('YES');#{formpanelEditRecord}.clea rInvalid();#{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();#{fo rmpanelEditRecord}.getForm().loadRecord(record);#{ isNew}.setValue('NO');#{formpanelEditRecord}.clear Invalid();#{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();#{fo rmpanelEditRecord}.getForm().loadRecord(record);#{ isNew}.setValue('YES');#{formpanelEditRecord}.clea rInvalid();#{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();#{fo rmpanelEditRecord}.getForm().loadRecord(record);#{ isNew}.setValue('NO');#{formpanelEditRecord}.clear Invalid();#{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();#{sto reDepartments}.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(#{loadDep artmentGUID}.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>




.ASPX.CS


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().ClearSe lection();
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.Selecte dItem.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);
}
}
}
}


Thanks for your swift help,

Kind regards,

Reno

Daniil
May 03, 2013, 10:04 AM
Hi Reno,



Issue 1: When filling the form via loadRecord, the select listeners on the first combo is not fired to load the second.


Setting a ComboBox's value this way doesn't fire the Select event.

You can trigger loading data to the second ComboBox manually after a loadRecord call.



Issue 2: The second combo never gets selected on the correct value.


Please provide more details here.

Unfortunately, I can't run your sample since it throws errors. "Durability_Entities", "Common.HelperMethods", "SETTINGS_Users" could not be found.

reinout.mechant@imprss.be
May 03, 2013, 10:39 AM
Hello,

In regards to issue 1:
- ok, how do I do that?

In regards to issue 2:
that makes sense, because it is linked to an entity framework.
the second combobox never gets a value selected.

The question is really simple, how I have done it in the code, is that the correct way or not? Probably not because it doesn't work, but what is the suggested practice here?

Kind regards,

Reno

reinout.mechant@imprss.be
May 03, 2013, 1:02 PM
Hello,

I have figured out a way and now it works.

Thanks,

Reno