How To: Setup Cascaded Editors

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

    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 attribute on all of them:

    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.     {
    20.         get { return Fields.CountryId[this]; }
    22.     }
    24. }

    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.     public Int32? DistrictId { get; set; }

    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.

    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.     });

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