Serenity: WIKI - Implementation for EntityGrid (in-Memory) with ordering and filtering capabilities (drag'n drop implementation in progress)

[brunobola]

Anyone know a way to implement EntityGrid with order capabilities and drag'n drop support?
I've got to make a ERP Editor with header (customer details) and lines of orders.

Before I try to make huge change to the gridbase can someone make this behaviour already or something similar?

Thanks.

[ga5tan]

In premium samples there is drag and drop grouping and sorting is in EntityGrid already.
Are u talking about Detail (in memory) grid ? (Cause sorting does not seem to work there)...
Or consider using DataTable.js ?
https://serenity.is/demo/AdvancedSamples/BasicInit

[brunobola]

I'm talking about the memory grid off course, the sample I want must be like this interface, so no simple DataTable can be used...

Example:

[brunobola]

I've successfully managed to implement simple sort functionality in editor grids (in-memory), will try to implement filter behaviour also.

[brunobola]

I've almost done the Filter behaviour also using the panel, nevertheless the code to make the same behaviour for any editor is this:

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

            //...

            this.slickGrid.onSort.subscribe(function (e, args) {
                sortGridFunction((args.grid as Slick.Grid), args.sortCols[0], args.sortCols[0].sortCol.field);

                //(args.grid as Slick.Grid).init();
                (args.grid as Slick.Grid).invalidateAllRows();
                (args.grid as Slick.Grid).invalidate();
                (args.grid as Slick.Grid).render();
                (args.grid as Slick.Grid).resizeCanvas();
            });

            //...
        }
//...

//...
protected layout() {
            super.layout();

            var sortCols = this.slickGrid.getSortColumns();

            sortGridFunction(this.slickGrid, sortCols[0], sortCols[0].columnId);
        }
//...

//...        
    protected enableFiltering() {
            return true;
        }
//...

//...
protected getDefaultSortBy() {
            //Columns to apply first sort on layout
            return ["CduCodigo"];
        }
//...

[dfaruque]

what/where is the sortGridFunction?

[brunobola]

@dfaruque sorry, here it is

function sortGridFunction(grid: Slick.Grid, column: any, field: any) {
    grid.getData().sort(function (a, b) {
        var result = a[field] > b[field] ? 1 :
            a[field] < b[field] ? -1 :
                0;
        return column.sortAsc ? result : -result;
    });
}

:wink:

[dfaruque]

Thank you @brunobola

[brunobola]

I've got the filter behaviour almost done for a wiki or a simple step instructions for you guys to use, will reply ASAP.

:)

[dfaruque]

Good job man @brunobola

[brunobola]

I've successfully managed to implement simple filter behaviour in editor grids (in-memory), will post how to ASAP, here is a sample.

[dfaruque]

What about quick filters?

[brunobola]

@dfaruque QuickFilters should be more easy to implement will post more info when done.

[dfaruque]

Thanks for your work man. @brunobola

[brunobola]

Sorry for posting this only now but i've been in vacations with my family.

Anyway the code needed to implement the simple filter behaviour in editor grids (in-memory) is as follows:

For any editor file just add this:

1 - Add the decorator for filtering

...
@Serenity.Decorators.filterable()
...

2 - Force enable filtering

protected enableFiltering() {
    return true;
}

3 - Override the onViewSubmit method

...
protected onViewSubmit() {

    this.view.beginUpdate();

    let filter = function filter(item, args) {
        var linha = (item as TduLinhasConfiguracaoArticuladoRow);

        // filter logic
        //Sample filter (if the Value for column "CduCodigo" equals 3)
        if (item["CduCodigo"] == "3")
            return true;

        return false;
    }

    this.view.setFilter(filter);

    this.view.endUpdate();

    return true;
}
...

PS. This is a little sample only, i've got a lot more work already done making the filter working with all the of serenity types of fields, types of conditions and even logic operators.

Nevertheless this is a good start for anyone who wants to make their own implementation of a working filter panel
implementation.

Best regards and don't forget to thanks @volkanceylan for this awesome platform with great extensibility capabilities.

[amrgDev]

@brunobola how we can get the filter columns and filter values ,which entered by the user.

[brunobola]

@amrgDev You have to try to think a bit using the function filter as stated above I believe you can discover that on your own ;)

[jabirmoolur]

@brunobola @volkanceylan
How to refresh the Gridedior after changing value (date feild) in in memory detials editor

[Shraddha996]

hello @brunobola Thanks a lot for filtering and ordering
But I really want to implement QuickSearch option on my memory grid and in the one of my previous issue you ask me to find in the OLD Issues but unfortunately, am unable to find one
Please, Please help me ASAP!