Serenity: Grid header filter

[Febriantos]

Is there anyone implement this kind of filter ?
https://mleibman.github.io/SlickGrid/examples/example-header-row.html
https://github.com/mleibman/SlickGrid/blob/master/examples/example-header-row.html

[brunobola]

Serenity has samples of:
-> Quick Filter (http://serenity.is/demo/BasicSamples/QuickFilterCustomization/)
-> Custom Filter (http://serenity.is/demo/BasicSamples/CustomLinksInGrid/)

(more samples....)

[Febriantos]

I'm looking something like this:
[Updated]

This is what I've done:

...
<style>
    .slick-header-icon {
        position: absolute;
        right: 0px;
        padding: 3px 7px;
        pointer-events: none;
    }

    .slick-headerrow-column {
        background: #fff;
        text-overflow: clip;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
    }

    .slick-header-column, .slick-header-column.ui-state-default {
        border-bottom: 2px solid #fff;
    }

    .slick-headerrow-column, .slick-headerrow-column.ui-state-default {
        border-bottom: 2px solid #ddd;
    }

    .slick-headerrow-column input {
        margin: 0;
        padding: 0 15px 0 0;
        width: 100%;
        height: 100%;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
    }
</style>
...

...
        private columnFilters?: { [key: string]: any };

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

            this.initHeaderRowFilter();
        }

        private initHeaderRowFilter() {
            this.slickGrid.onHeaderRowCellRendered = new Slick.Event();
            this.slickGrid.onHeaderRowCellRendered.subscribe((e, args) => {
                let fld = CustomerRow.Fields;

                if (args.column.id == fld.CompanyName || args.column.id == fld.ContactName || args.column.id == fld.Country ||
                    args.column.id == fld.City || args.column.id == fld.Phone) {
                    $(args.node).empty();
                    $("<i class='fa fa-search slick-header-icon' aria-hidden='true'></i>")
                        .data("columnId", args.column.id)
                        .appendTo(args.node);
                    $("<input type='text' class='slick-header-input'>")
                        .data("columnId", args.column.id)
                        .appendTo(args.node);
                }
            }
            );


            $(this.slickGrid.getHeaderRow()).on('keyup', ':input', e => {
                var value = Q.trimToNull($(e.target).val());
                if (value === '') {
                    value = null;
                }

                let columnId: string;
                columnId = $(e.target).data('columnId').toString();

                if (this.columnFilters == null)
                    this.columnFilters = {};

                this.columnFilters[columnId] = value;
                this.refresh();
            });

            this.slickGrid.init();
        }

        protected getSlickOptions(): Slick.GridOptions {
            var opt = super.getSlickOptions();
            opt.enableCellNavigation = true;
            opt.showHeaderRow = true;
            opt.headerRowHeight = 30;
            opt.explicitInitialization = true;

            return opt;
        }

        protected onViewSubmit(): boolean {
            if (!super.onViewSubmit()) {
                return false;
            }

            let request = this.view.params as Serenity.ListRequest;

            for (let key in this.columnFilters) {
                let value = this.columnFilters[key];

                if (value != null && value.length > 2) {
                    request.Criteria = Serenity.Criteria.and(request.Criteria,
                        [[key], 'like', '%' + value + '%']);

                }
                else if ($.inArray(key, request.Criteria) > -1) {
                    request.Criteria.splice($.inArray(key, request.Criteria), 1);
                }
            }

            return true;
        }
...

...

declare namespace Slick {
    interface Grid {
        onHeaderRowCellRendered?: Slick.Event;
    }
}

The correct way to do it is using Attribute, probably [HeaderRowFilter].
Just wait for someone to create it or use the example above for temporary workaround.

[volkanceylan]

Nice sample, thanks for sharing

[Febriantos]

I found this:
https://ghiscoding.github.io/Angular-Slickgrid
https://github.com/ghiscoding/Angular-Slickgrid