Serenity: Grid: QuickFilter with a Boolean Field not working

[edson]

Hi!

I've added quickfilter to a BooleanField on xxyzrow.cs:

[Width(70), BooleanFiltering, QuickFilter] public Boolean IsEnabled { get; set; }

But it is not working... It renders an input text field instead of a checkbox:

As this is something ordinary, I've searched the wiki and issues page, but didn't find an answer...
Would anybody help me pointing out the right way to do it? I've started coding with Serene a couple days ago...

Thanks!
Great job at Serene! Thanks for sharing.

Best Regards

[jdready5]

I think what you are looking for is a row selection column which is in the guide here:
[https://volkanceylan.gitbooks.io/serenity-guide/content/howto/how_to_add_a_row_selection_column.html]
Quick Filter as an input text field is normal. I believe you'll find what you need in the above link

[jdready5]

TypeScript version of that link in the guide is:

    protected createToolbarExtensions() {
        super.createToolbarExtensions();
        this.rowSelection = new Serenity.GridRowSelectionMixin(this);
    }

    protected getColumns() {
        var columns = super.getColumns();
        columns.splice(0, 0, Serenity.GridRowSelectionMixin.createSelectColumn(() => this.rowSelection));
        return columns;
    }

[linpiero]

I think this noto work beacuse… tour property IsEnabled is not a table field!

[volkanceylan]

It doesn't work because there is no quick filter support for boolean fields :)

[volkanceylan]

Yet...

[edson]

Hi. Thanks for the link, @jdready5 . But actually I wanted to filter the value out.. I wilk try a workaround with that. Will update with the results.

@linpiero... Actually it is a table Field..

@volkanceylan thank you. Great job at this template. Still learning but already living your ideas to this. I will study the core code só maybe I can help someway.

Best regards.
Have a nice weekend.

[ramveersgh]

I have done it using Salttarelle in following way -

1. Create a following custom editor named TrueFalseEditor

    [Editor]
    public class TrueFalseEditor : Select2Editor<object, object>
    {
        public TrueFalseEditor(jQueryObject hidden)
            : base(hidden, null)
        {
            AddItem("True", "Yes");
            AddItem("False", "No");
        }
    }

1. then use this editor with your quick filter in grid -

 protected override void CreateToolbarExtensions()
        {
            base.CreateToolbarExtensions();
            lkeVoucherType = AddEqualityFilter<LookupEditor>(Fields.VoucherType.ToLower(), title: "Voucher Type",
             options: new LookupEditorOptions { LookupKey = VoucherTypeRow.LookupKey, MinimumResultsForSearch = 10 });

            AddEqualityFilter<LookupEditor>(Fields.RefType.ToLower(), title: "Reference Type",
               options: new LookupEditorOptions { LookupKey = VoucherRefTypeRow.LookupKey, MinimumResultsForSearch = 10 });

            AddEqualityFilter<StringEditor>(Fields.ReferenceNo.ToLower(), title: "Reference No");

            AddDateRangeFilter(Fields.VoucherDate, "Voucher Period");
            lkeVoucherStatus = AddEqualityFilter<LookupEditor>(Fields.Status.ToLower(), title: "Voucher Status",
             options: new LookupEditorOptions { LookupKey = ApprovalStatusRow.LookupKey, MinimumResultsForSearch = 10 });

            lkeVoucherMismatch = AddEqualityFilter<EnumEditor>(Fields.IsAmountMatch,
                options: new EnumEditorOptions { EnumKey = "Enum.Accounting.MismatchAmount" });

            AddEqualityFilter<LookupEditor>(Fields.UserBranchId, title: "Branch Name",
               options: new LookupEditorOptions { LookupKey = BranchRow.LookupKey, MinimumResultsForSearch = 10 });

            **AddEqualityFilter<TrueFalseEditor>(Fields.IsAutoGenerated, title: "Autogenerated");**

        }

But i don't know how to do this in TypeScript :-(

Hope this will give you an idea to implement this feature on your grid. Here is screen shot of the filter -

[edson]

Hi, there. Back again.

Thanks @ramveersgh . I aprecciate it. Thanks for sharing.

Based on that, here goes the typescript version:

1. TrueFalseEditor.ts - I have put it in Common.Enums as this will be a common use for my project.

namespace YourProject.Common.Enums {
    @Serenity.Decorators.registerEditor()
    export class TrueFalseEditor extends Serenity.Select2Editor<Serenity.SelectEditorOptions, Serenity.Select2Item> {

        constructor(hidden: JQuery, opt: Serenity.SelectEditorOptions) {
            super(hidden, opt);

            super.addItem({ id: "true", text: "Yes", disabled: false, source: "common" });
            super.addItem({ id: "false", text: "No", disabled: false, source: "common" });
        }
    }

}

1. In your xwzGrid.ts, override createQuickFilters:

 protected createQuickFilters() {
            super.createQuickFilters();
            this.addQuickFilter({
                let fld = YourRow.Fields;
                type: YourProject.Common.Enums.TrueFalseEditor,
                field: fld.YourField
            });
        }

Thanks.
Have a nice weekend.

[edson]

Ok. I figured it out there was already a BooleanEditor, so all I needed to do is:
(But, as @ramveersgh pointed out, keep in mind that this will not show all records as it has only two states for the field.)

1) In your xwzGrid.ts, override createQuickFilters:

protected createQuickFilters() {
            super.createQuickFilters();

            this.addQuickFilter({
                type: Serenity.BooleanEditor,
                field: "isEnabled",
                title: "Ativo"
            }).value = true;
        }

And it worked like a charm:

Best Regards

[ramveersgh]

Welcome @edson
Yes, there is already BooleanEditor but that work to show records either true or false, but if you would like to see all then this filter gets failed.

[edson]

@ramveersgh Yeah. You're absolutely right. Well, it´s a binary thing but it suits my needs for some use cases.

Have a nice weekend.
Regards.

[rolembergfilho]

Hey @edson

how you set the default value in your filter (with the Select2Editor example).

[edson]

Hi, @rolembergfilho .

At xyzGrid.ts, just add the .value="true" or "false"

protected createQuickFilters() {
            super.createQuickFilters();
            this.addQuickFilter({
                type: Yourproject.Common.Enums.TrueFalseEditor,
                field: "YourField",
                title: "Enabled"
            }).value = "true";

        }