How To: Setup Cascaded Editors

You might need multi-level cascaded editors like Country => City, Course => Class Name => Subject.

Starting with Serenity 1.8.2, it’s rather simple. Lookup editors have this integrated functionality.

For versions before 1.8.2, it was also possible, and there was some samples in Serene, but you had to define some editor classes to make it work.

Let’s say we have a database with three tables, Country, City, District:

  • Country Table: CountryId, CountryName
  • City Table: CityId, CityName, CountryId
  • District Table: DistrictId, DistrictName, CityId

First make sure you generate code for all three tables using Sergen, and you have a [LookupScript] attribute on all of them:

  1. [LookupScript("MyModule.Country")]
  2. public sealed class CountryRow : Row...
  3. {
  4.     [DisplayName("Country Id"), Identity]
  5.     public Int32? CountryId
  6.     {
  7.         get { return Fields.CountryId[this]; }
  8.         set { Fields.CountryId[this] = value; }
  9.     }
  11.     [DisplayName("Country Name"), Size(50), NotNull, QuickSearch]
  12.     public String CountryName
  13.     {
  14.         get { return Fields.CountryName[this]; }
  15.         set { Fields.CountryName[this] = value; }
  16.     }
  17. }
  1. [LookupScript("MyModule.City")]
  2. public sealed class CityRow : Row...
  3. {
  4.     [DisplayName("City Id"), Identity]
  5.     public Int32? CityId
  6.     {
  7.         get { return Fields.CityId[this]; }
  8.         set { Fields.CityId[this] = value; }
  9.     }
  11.     [DisplayName("City Name"), Size(50), NotNull, QuickSearch]
  12.     public String CityName
  13.     {
  14.         get { return Fields.CityName[this]; }
  15.         set { Fields.CityName[this] = value; }
  16.     }
  18.     [DisplayName("Country"), ForeignKey("Country", "CountryId"), LookupInclude]
  19.     public Int32? CountryId
  20.     {
  21.         get { return Fields.CountryId[this]; }
  22.         set { Fields.CountryId[this] = value; }
  23.     }
  25. }
  1. [LookupScript("MyModule.District")]
  2. public sealed class DistrictRow : Row...
  3. {
  4.     [DisplayName("District Id"), Identity]
  5.     public Int32? DistrictId
  6.     {
  7.         get { return Fields.DistrictId[this]; }
  8.         set { Fields.DistrictId[this] = value; }
  9.     }
  11.     [DisplayName("District Name"), Size(50), NotNull, QuickSearch]
  12.     public String DistrictName
  13.     {
  14.         get { return Fields.DistrictName[this]; }
  15.         set { Fields.DistrictName[this] = value; }
  16.     }
  18.     [DisplayName("City"), ForeignKey("City", "CityId"), LookupInclude]
  19.     public Int32? CityId
  20.     {
  21.         get { return Fields.CityId[this]; }
  22.         set { Fields.CityId[this] = value; }
  23.     }
  25. }

Make sure you add LookupInclude attribute to CityId field of DistrictRow, and CountryId field of CityRow. We need them to be available at client side, otherwise they are not included by default in lookup scripts.

If you wanted to edit these fields as cascaded lookup editors in a form, e.g. CustomerForm, you would set them up like this:

  1. [FormScript("MyModule.Customer")]
  2. [BasedOnRow(typeof(Entities.CustomerRow))]
  3. public class CustomerForm
  4. {
  5.     public String CustomerID { get; set; }
  6.     public String CustomeraName { get; set; }
  8.     [LookupEditor(typeof(Entities.CountryRow))]
  9.     public Int32? CountryId { get; set; }
  11.     [LookupEditor(typeof(Entities.CityRow), 
  12.         CascadeFrom = "CountryId", CascadeField = "CountryId")]
  13.     public Int32? CityId { get; set; }
  15.     [LookupEditor(typeof(Entities.DistrictRow), 
  16.         CascadeFrom = "CityId", CascadeField = "CityId")]
  17.     public Int32? DistrictId { get; set; }
  18. }

You could also set these attributes in CustomerRow

Here, CascadeFrom attribute tells city editor, ID of the parent editor that it will bind to (cascade).

When this form is generated, CountryId field will be handled with an editor with ID CountryId, so we set CascadeFrom attribute of CityId lookup editor to that ID.

CascadeField determines the field to filter cities on. Thus, when country editor value changes, city editor items will be filtered on their CountryId properties like this:

  1.    this.Items.Where(x => x.CountryId == CountryEditorValue)

If CascadeFrom and CascadeField attributes are same, you only need to specify CascadeFrom, but i wanted to be explicit here.

If you wanted to add these cascaded editors to filter bar of customer grid, in CreateToolbarExtensions method of CustomerGrid.cs, do this:

  1. AddEqualityFilter<LookupEditor>("CountryId",
  2.     options: new LookupEditorOptions 
  3.     { 
  4.         LookupKey = "MyModule.Country" 
  5.     });
  7. AddEqualityFilter<LookupEditor>("CityId", 
  8.     options: new LookupEditorOptions 
  9.     {
  10.         LookupKey = "MyModule.City", 
  11.         CascadeFrom = "CountryId",
  12.         CascadeField = "CountryId"
  13.     });
  15. AddEqualityFilter<LookupEditor>("DistrictId", 
  16.     options: new LookupEditorOptions 
  17.     {
  18.         LookupKey = "MyModule.District", 
  19.         CascadeFrom = "CityId",
  20.         CascadeField = "CityId"
  21.     });

Here i suppose you have CountryId, CityId and DistrictId fields in CustomerRow.

Now you have useful cascaded editors for both editing and filtering.