• DECEMBER 9, 2022
  • New Delhi, INDIA
Serenity

How to Build and Customizing Search or Filter on Senerity Listing Page

  • by Deepak Talwar
  • January 14, 2023
  • 0 Comments
  • 8 minute read
  • 259 Views
  • 0 Likes
How to Build and Customizing Search or Filter on Senerity Listing Page

Search in Senerity

Senerity Use Text box ( ) to search / filter records on listing page


Which Field will be used for searching on listing page?

By default, Sergen designates a table's first text field as the name field. For Example ProductName in Product Table


What if we want to use any other field for searching or multiple fields for searching on listing page?

Sometimes, the name field may not be in the first text column. In such sitation, we have to instruct sergen to use other field or fields for searching on listing page by decorating those fields(s) on ProductRow file by QuickSearch Tag

In below case, ProductName serves as the name field, so we leave it alone. Serenity should look in the Description and SKU areas as well, though. You must do this by include the QuickSearch attribute in these field


public class ProductRow : Row, IIdRow, INameRow
{
    [DisplayName("ProductName"), Size(200), NotNull, QuickSearch]
    public String ProductName
    {
        get { return Fields.ProductName[this]; }
        set { Fields.ProductName[this] = value; }
    }

    [DisplayName("Description"), Size(1000), QuickSearch]
    public String Description
    {
        get { return Fields.Description[this]; }
        set { Fields.Description[this] = value; }
    }

    [DisplayName("SKU"), QuickSearch]
    public String Storyline
    {
        get { return Fields.SKU[this]; }
        set { Fields.SKU[this] = value; }
    }
}

Here
- We added Quick Search Tag on Description and SKU fields



How Senerity Match Serach String?

By default, the QuickSearch attribute uses the contains filter. There are options to make it match only precise values or match by starting with a filter.


public class PurchasesRow : Row, IIdRow, INameRow
{    
//match by starts with filter
[DisplayName("ProductName"), Size(200), NotNull, QuickSearch(SearchType.StartsWith)]
    public String ProductName
    {
        get { return Fields.ProductName[this]; }
        set { Fields.ProductName[this] = value; }
    }


//match numeric value only
   [DisplayName("Year"), QuickSearch(SearchType.Equals, numericOnly: 1)]
    public Int32? Year
    {
        get { return Fields.Year[this]; }
        set { Fields.Year[this] = value; }
    }
}


It is also feasible to provide the user the choice of the search field she wishes to use.


@Serenity.Decorators.registerClass()
export class ProudctGrid extends Serenity.EntityGrid<ProductRow, any> {

    constructor(container: JQuery) {
        super(container);
    }

    protected getQuickSearchFields():
            Serenity.QuickSearchField[] {
        return [
            { name: "", title: "all" },
            { name: "Description", title: "description" },
            { name: "SKU", title: "sku" },
            { name: "Year", title: "year" }
        ];
    }
}

Here
- Senerity Provide a dropdown in quick search input (all above 4 fields)



Instead of hardcode field name, we can use field names with compile time checked versions
protected getQuickSearchFields(): Serenity.QuickSearchField[]
    {
        let fld = MovieRow.Fields;
        return [
            { name: "", title: "all" },
            { name: fld.Description, title: "description" },
            { name: fld.SKU, title: "sku" },
            { name: fld.Year, title: "year" }
        ];
    }



We can provide Field Titles (usefull in case of localization)
protected getQuickSearchFields(): Serenity.QuickSearchField[] {
        let fld = MovieRow.Fields;
        let txt = (s) => Q.text("Db." +
            MovieRow.localTextPrefix + "." + s).toLowerCase();
        return [
            { name: "", title: "all" },
            { name: fld.Description, title: txt(fld.Description) },
            { name: fld.SKU, title: txt(fld.sku) },
            { name: fld.Year, title: txt(fld.Year) }
        ];
    }












Deepak Talwar

Deepak Talwar

Technical Architect and Full Stack Developer with 18+ years of Professional Experience in Microsoft Technologies & PHP Platform. Hands on experience with C#, VB, ASP.NET, ASP.NET MVC, ASP.NET Core, ASP.NET Web API, Linq, ADO.NET, Entity Framework, Entity Framework Core, Sql Server, MYSQL, NoSql, Javascript, Angular, jQuery, AWS, Azure, React, Angular, Laravel, Codeingiter, Serenity, VBA, Cloud Computing, Microservices, Design Patterns, Software Architecture, Web Design and Development.

Previous Article

How to Add Date Editor in Form in Senerity

January 7, 2023
Next Article

Sql Server | Find String | CHARINDEX, LIKE

January 20, 2023


Related Post

post
Design

How to Add Link in Grid or Listing Page in Senerity

January 7, 2023
 

The Most Powerful

.

Stay Connected

Popular

post
Serenity

How to Add Date Editor in Form in Senerity

January 7, 2023
post
Serenity

How to Use Joins in Serenity Using ForeignKey Attribute

January 4, 2023
post
Serenity

How to Build and Customizing Search or Filter on Senerity Listing Page

January 14, 2023
post
Serenity

Use Expression Attribute in Serenity

January 4, 2023
post
Serenity

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

January 4, 2023

Hot Categories

Tags

Default (4) Routing (23) Promise (4) Observable (7) Error-Handling (5) Forms (9) LinkedIn (1) Datastream (1) FormControl (1) FormGroup (1) FormArray (1) Validation (1) Linq (2) SEO (1) Visual Studio Code (1) Date (2) XML (1) Operators (2) Data Binding (3) Search String (1) Function (4) Create App (8) Installation (3) Project Structure (1) Introduction (6) Join (2) Expression (3) Filter (3) Link / Button (1) State Hook (1) Cursor (1) Stored Procedure (3) Features (1) Rendering (2) Setup Environment (3) Project Setup (2) Architecture (5) Version History (1) Life Cycle (3) File Folder Structure (6) Controller (1) Comparision (3) Bundling (1) Module (5) Injectors (1) Bootstrap (1) Fundamentals (5) Best Practices (1) Result Type (2) Class Types (2) Override (1) Polymorphism (2) Overloading (1) Method Hide (1) State management (1) Project Templates (1) Razor Pages (1) Model Binding (5) Commands (1) Views (11) Transaction (1) Property (2) Check Null (1) Temporary Table (2) Statement (1) Sequence (1) Trigger (3) Constraint (6) Indexes (10) Normalisation (1) Events Notifications (1) Statistics (1) Data Capture (1) Environment (1) Language Constructs (5) Input/Output (1) File Handling (3) Class & Objects (1) Delegate (1) Exception Handling (2) Event Handling (1) Middleware (3) Hosting Model (3) CLI (2) Tag Helpers (4) HTML Helpers (5) Dependency Injection (3) Data Passing (3) Client-Side Packages (1) Action Result (10) Data Validation (2) JavaScript Extension (1) Constructs (1) ECMAScript (4) Component (2) Styling (2) Hooks (8)

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

gallery1
gallery2
gallery3
gallery4
gallery5
gallery6

Contact Info