Serenity

How to Show Filters Dropdown or LookUp Script on Listing Page in Senerity

How to Show Filters Dropdown or LookUp Script on Listing Page in Senerity

Filters on Listing in Senerity

The idea behind dynamic scripts in Serenity is to provide dynamic data to the script side in the form of scripts that are generated at runtime.
Web services and dynamic scripts both produce dynamic javascript files that can be cached on the client side.


Lets Show Category Dropdown on Product Listing Page, so that we can see category wise product


Step 1. Lets Instruct Category Row to show Category Name in Drop down - for any other Modules


[LookupScript("Products.Category")]
public sealed class CategoryRow : SmartERP.LoggingRow<CategoryRow.RowFields>, IIdRow        
{

    [DisplayName("Category Name"), Column("Name"), Size(50), QuickSearch, NameProperty]
    public String CategoryName
    {
        get => fields.CategoryName[this];
        set => fields.CategoryName[this] = value;
    }
}

Here
- We added line with [LookupScript("Products.Category")]
- This step merely demonstrated how to see if a client-side lookup script is accessible.




Step 2. Using LookupEditor for Category Field
There are two places to set editor type for CategoryId field. One is ProductForm.cs, other is ProductRow.cs.

I normally prefer the latter because it is the focal point, but if the editor type is unique to that form only, you can choose to set it there.


A. Display Filter Dropdown on Form


public sealed class ProductsRow : SmartERP.LoggingRow<ProductsRow.RowFields>, IIdRow
{

   [DisplayName("Category Name"), ForeignKey("[dbo].Category", "CategoryId"), LeftJoin("jCategory")]
   [LookupEditor(typeof(CategoryRow))]
   public Int32? CategoryId
   {
        get { return Fields.CategoryId[this]; }
        set { Fields.CategoryId[this] = value; }
   }


[DisplayName("CategoryName"), Expression("jCategory.Name")]
   public String CategoryName
   {
        get { return Fields.CategoryName[this]; }
        set { Fields.CategoryName[this] = value; }
   }
}

After we build and launch our project, we’ll now have a searchable dropdown (Select2.js) on our Category field.


B. Display Filter Dropdown on Grid/Listing Page


public class ProductColumns
{
    [Width(200)]
    public String CategoryName { get; set; }
}

- Now Category Name Dropdown is shown in the grid.


Allow To Create/Add A New Category Inplace i.e. right from the Category Dropdown inside Product Form / Product Grid, instead of Additing through Category Form itself

public sealed class ProductsRow : SmartERP.LoggingRow<ProductsRow.RowFields>, IIdRow
{

   [DisplayName("Category Name"), ForeignKey("[dbo].Category", "CategoryId"), LeftJoin("jCategory")]
   [LookupEditor(typeof(CategoryRow)), InplaceAdd = true)]
   public Int32? CategoryId
   {
        get { return Fields.CategoryId[this]; }
        set { Fields.CategoryId[this] = value; }
   }
}

- Now we can define a new Category by clicking star/pen icon next to genre field.






Related Post

About Us

Community of IT Professionals

A Complete IT knowledgebase for any kind of Software Language, Development, Programming, Coding, Designing, Networking, Hardware and Digital Marketing.

Instagram