Our pure JavaScript Scheduler component


Post by shaveta »

Hi,

I am getting attached issue when trying to use multi select filter

columns : [
       {
           id         : 'name',
           field      : 'name',
           text       : 'Name',
           filterable : {
               filterField : {
                   type         : 'combo',
                   multiSelect  : true,
                   valueField   : 'name',
                   displayField : 'name'
               }
           }
       }
   ]
   
err..png
err..png (27.92 KiB) Viewed 1011 times

Post by Animal »

Using this code in our basic example:

    columns          : [
        {
            width      : 200,
            id         : 'name',
            field      : 'name',
            text       : 'Name',
            filterable : {
                filterField : {
                    type         : 'combo',
                    multiSelect  : true,
                    valueField   : 'name',
                    displayField : 'name',
                    // We want the ChipView to scroll horizontally with no wrapping.
                    chipView : {
                        scrollable : {
                            overflowX : 'hidden-scroll',
                            overflowY : false
                        },
                        style : {
                            flexWrap : 'nowrap'
                        }
                    }
                }
            }
        }
    ]

It works very well:

Screenshot 2021-12-21 at 11.55.18.png
Screenshot 2021-12-21 at 11.55.18.png (38.18 KiB) Viewed 1004 times

Is there some other part of your app?


Post by shaveta »

Animal wrote: Tue Dec 21, 2021 12:56 pm

Using this code in our basic example:

    columns          : [
        {
            width      : 200,
            id         : 'name',
            field      : 'name',
            text       : 'Name',
            filterable : {
                filterField : {
                    type         : 'combo',
                    multiSelect  : true,
                    valueField   : 'name',
                    displayField : 'name',
                    // We want the ChipView to scroll horizontally with no wrapping.
                    chipView : {
                        scrollable : {
                            overflowX : 'hidden-scroll',
                            overflowY : false
                        },
                        style : {
                            flexWrap : 'nowrap'
                        }
                    }
                }
            }
        }
    ]

It works very well:

Screenshot 2021-12-21 at 11.55.18.png

Is there some other part of your app?

Can you please try this is your tree scheduler example, the error is with expanded/collapsed nodes

err-1.png
err-1.png (42.43 KiB) Viewed 995 times

Post by alex.l »

Reproduced. There is a bug then using for tree column. Thank you for the report, here is a ticket: https://github.com/bryntum/support/issues/3933

All the best,
Alex


Post by shaveta »

alex.l wrote: Wed Dec 22, 2021 10:18 am

Reproduced. There is a bug then using for tree column. Thank you for the report, here is a ticket: https://github.com/bryntum/support/issues/3933

Any patch to fix it??


Post by alex.l »

Better to wait for an official fix. You could try to override fillFromMaster method for the StoreChained mixin with the next code

    fillFromMaster() {
        const
            me                      = this,
            { masterStore, isTree } = me,
            // the || is for BW compat since we had public demos using store.chain(() => true)
            isRecordFilter          = me.chainedFilterFn.length > 0 || me.chainedFilterFn.toString().length <= 10;

    let records;

    if (!me.isChained) {
        throw new Error('fillFromMaster only allowed on chained store');
    }

    if (me.keepUncommittedChanges) {
        if (isTree) {
            throw new Error('Cannot use keepUncommittedChanges on a chained tree store');
        }

        if (isRecordFilter) {
            records = masterStore.allRecords.filter(r => !me.removed.includes(r) && !me.added.includes(r) && me.chainedFilterFn(r));
        }
        else {
            records = me.chainedFilterFn().filter(r => !me.removed.includes(r) && !me.added.includes(r));
        }
        me.data = me.added.values.filter(r => !me.removed.includes(r)).concat(records);
    }
    else {
        if (isRecordFilter) {
            records = masterStore.allRecords.filter(me.chainedFilterFn);
        }
        else {
            records = me.chainedFilterFn();
        }

        if (isTree) {
            // All nodes will be registered
            me.idRegister = {};
            me.internalIdRegister = {};

            // *all* owned records have to join, as they would have done if they'd all gone through
            // the appendChild route for this store.
            records.forEach(r => {
                if (r.isModel) {
                    if (r.stores.includes(me)) {
                        me.register(r);
                    }
                    else {
                        r.joinStore(me);
                    }
                }
            });

            // We exclude collapsed records by default. It's used in Columns Store.
            // Because grid columns is a tree store when subgrid columns is just a chained store of the columns store.
            // And we don't need to include collapsed column.
            // If we need to show collapsed nodes in Combo we need to chain tree store and set `excludeCollapsedRecords` to `false`.
            if (me.excludeCollapsedRecords) {
                const children = me.getChildren(me.rootNode);
                records = me.doIncludeExclude(children, true);
            }
        }

        me.data = records;
    }
}

But this is just a temp fix that is not tested.

All the best,
Alex


Post by shaveta »

alex.l wrote: Thu Dec 23, 2021 2:10 pm

Better to wait for an official fix. You could try to override fillFromMaster method for the StoreChained mixin with the next code

    fillFromMaster() {
        const
            me                      = this,
            { masterStore, isTree } = me,
            // the || is for BW compat since we had public demos using store.chain(() => true)
            isRecordFilter          = me.chainedFilterFn.length > 0 || me.chainedFilterFn.toString().length <= 10;

    let records;

    if (!me.isChained) {
        throw new Error('fillFromMaster only allowed on chained store');
    }

    if (me.keepUncommittedChanges) {
        if (isTree) {
            throw new Error('Cannot use keepUncommittedChanges on a chained tree store');
        }

        if (isRecordFilter) {
            records = masterStore.allRecords.filter(r => !me.removed.includes(r) && !me.added.includes(r) && me.chainedFilterFn(r));
        }
        else {
            records = me.chainedFilterFn().filter(r => !me.removed.includes(r) && !me.added.includes(r));
        }
        me.data = me.added.values.filter(r => !me.removed.includes(r)).concat(records);
    }
    else {
        if (isRecordFilter) {
            records = masterStore.allRecords.filter(me.chainedFilterFn);
        }
        else {
            records = me.chainedFilterFn();
        }

        if (isTree) {
            // All nodes will be registered
            me.idRegister = {};
            me.internalIdRegister = {};

            // *all* owned records have to join, as they would have done if they'd all gone through
            // the appendChild route for this store.
            records.forEach(r => {
                if (r.isModel) {
                    if (r.stores.includes(me)) {
                        me.register(r);
                    }
                    else {
                        r.joinStore(me);
                    }
                }
            });

            // We exclude collapsed records by default. It's used in Columns Store.
            // Because grid columns is a tree store when subgrid columns is just a chained store of the columns store.
            // And we don't need to include collapsed column.
            // If we need to show collapsed nodes in Combo we need to chain tree store and set `excludeCollapsedRecords` to `false`.
            if (me.excludeCollapsedRecords) {
                const children = me.getChildren(me.rootNode);
                records = me.doIncludeExclude(children, true);
            }
        }

        me.data = records;
    }
}

But this is just a temp fix that is not tested.

Is this fix available in V4.3.5?


Post by mats »

Not afraid not


Post by shaveta »

alex.l wrote: Thu Dec 23, 2021 2:10 pm

Better to wait for an official fix. You could try to override fillFromMaster method for the StoreChained mixin with the next code

    fillFromMaster() {
        const
            me                      = this,
            { masterStore, isTree } = me,
            // the || is for BW compat since we had public demos using store.chain(() => true)
            isRecordFilter          = me.chainedFilterFn.length > 0 || me.chainedFilterFn.toString().length <= 10;

    let records;

    if (!me.isChained) {
        throw new Error('fillFromMaster only allowed on chained store');
    }

    if (me.keepUncommittedChanges) {
        if (isTree) {
            throw new Error('Cannot use keepUncommittedChanges on a chained tree store');
        }

        if (isRecordFilter) {
            records = masterStore.allRecords.filter(r => !me.removed.includes(r) && !me.added.includes(r) && me.chainedFilterFn(r));
        }
        else {
            records = me.chainedFilterFn().filter(r => !me.removed.includes(r) && !me.added.includes(r));
        }
        me.data = me.added.values.filter(r => !me.removed.includes(r)).concat(records);
    }
    else {
        if (isRecordFilter) {
            records = masterStore.allRecords.filter(me.chainedFilterFn);
        }
        else {
            records = me.chainedFilterFn();
        }

        if (isTree) {
            // All nodes will be registered
            me.idRegister = {};
            me.internalIdRegister = {};

            // *all* owned records have to join, as they would have done if they'd all gone through
            // the appendChild route for this store.
            records.forEach(r => {
                if (r.isModel) {
                    if (r.stores.includes(me)) {
                        me.register(r);
                    }
                    else {
                        r.joinStore(me);
                    }
                }
            });

            // We exclude collapsed records by default. It's used in Columns Store.
            // Because grid columns is a tree store when subgrid columns is just a chained store of the columns store.
            // And we don't need to include collapsed column.
            // If we need to show collapsed nodes in Combo we need to chain tree store and set `excludeCollapsedRecords` to `false`.
            if (me.excludeCollapsedRecords) {
                const children = me.getChildren(me.rootNode);
                records = me.doIncludeExclude(children, true);
            }
        }

        me.data = records;
    }
}

But this is just a temp fix that is not tested.

How and where should I call the new class that overrides above method? I guess official next release is going to take 2 to 3 weeks


Post by mats »

You can download nightly build now, which has the fix!


Post Reply