Our blazing fast Grid component built with pure JavaScript


Post by jintech »

  1. Is there a way to remove the delete icon from the filter picker?

    Delete icon.png
    Delete icon.png (50.46 KiB) Viewed 541 times
  2. To remove the 'Add Filter' button from the filter picker, we set showAddFilterButton: false. However, this also removes the filter itself. Is there another way to configure the picker to remove the 'Add Filter' button (configuring it at the column's filterable level is also fine)?

    Picker icon removed.png
    Picker icon removed.png (12.58 KiB) Viewed 541 times
  1. Is there a way to remove the filter icon from the filter and add a checkbox functionality positioned on the right side, similar to the date filter?

    Filter field.png
    Filter field.png (11.99 KiB) Viewed 541 times
    Delete icon.png
    Delete icon.png (50.46 KiB) Viewed 541 times
  2. Additionally, when we open any filter picker, the filter icon from the selected header is hidden.

import { WidgetHelper, StringHelper, Grid, DataGenerator } from '../../build/grid.module.js?476097';
import shared from '../_shared/shared.module.js?476097';

const grid = new Grid({

appendTo: 'container',

features: {
    filter: {
        pickerConfig: {
          //  canDeleteFilter: false,
            showAddFilterButton: false,
            listeners: {


            },
            operators: {
                date: [
					{ value: "isToday", text: "Today", argCount: 0 },
					{ value: "isYesterday", text: "Yesterday", argCount: 0 },
					{ value: "isTomorrow", text: "Tomorrow", argCount: 0 },
					{ value: "between", text: "Between", argCount: 2 }
				]
            }
        }



    },
    stripe: true,
    quickFind: true
},

tbar: [{
    ref: 'removeAll',
    text: 'Remove all filters',
    onAction: () => grid.store.clearFilters()
}],

columns: [{
        type: 'rownumber'
    },
    {
        text: 'Name',
        field: 'name',
        flex: 1,
        filterable: {

            filterField: {
                type: 'text',
            },

        }
    },
	{ text : 'Age', field : 'age', width : 100, type : 'number' },
    {
        text: 'City',
        field: 'city',
		filterable: {
            filterField: {
                type: 'text',
            },
        }
    },
    {
        text: 'When',
        field: 'start',
        width: 200,
        type: 'date'
    },
],

data: DataGenerator.generateData(20)
});

Post by tasnim »

Thanks for reaching, I've created a demo with your requirement in code, please check it here https://codepen.io/dv-auntik/pen/WNBwQGm?editors=0010

Hope it helps.

Best regards,
Tasnim


Post by jintech »

Tasnim, thank you for your solution. However, we need the listeners and operations included in the picker configuration. Additionally, we require the checkbox functionality on the right side of the input field filter. Could you please check the below code and let us know which of these are possible in bryntum and which are not?

Text filter.png
Text filter.png (9.79 KiB) Viewed 493 times
const grid = new Grid({

appendTo: document.body,

features: {
    filter: {
        pickerConfig: {
            // remove 'Add Filter' button
            showAddFilterButton: false,
            // Remove the trash icon
            canDeleteFilter: () => false,
            listeners: {
                beforeAddFilter: ({
                    filter
                }) => {
                    if ((filter.property === 'start') && filter.operator === '=') {
                        filter.operator = 'isToday'; // Change to an allowed default operator
                    }
                }
            },
         operators: {
                date: [
				{ value: "isToday", text: "Today", argCount: 0 },
				{ value: "isYesterday", text: "Yesterday", argCount: 0 },
				{ value: "isTomorrow", text: "Tomorrow", argCount: 0 },
				{ value: "isLastWeek", text: "Last Week", argCount: 0 },
				{ value: "isLastMonth", text: "Last Month", argCount: 0 },
				{ value: "isNextWeek", text: "Next Week", argCount: 0 },
				{ value: "isNextMonth", text: "Next Month", argCount: 0 },
				{ value: "between", text: "Between", argCount: 2 }
		]
            }
        }
    },
    stripe: true,
    quickFind: true
},

tbar: [{
    ref: 'removeAll',
    text: 'Remove all filters',
    onAction: () => grid.store.clearFilters()
}],

columns: [{
        type: 'rownumber'
    },
    {
        text: 'Name',
        field: 'name',
        flex: 1,
        filterable: {
            filterField: {
                type: 'text',
            },
        }
    },
    {
        text: 'Age',
        field: 'age',
        width: 100,
        type: 'number'
    },
    {
        text: 'City',
        field: 'city',
        filterable: {
            filterField: {
                type: 'text',
            },
        }
    },
    {
        text: 'When',
        field: 'start',
        width: 200,
        type: 'date'
    },
    // This column has filtering turned off
    {
        text: 'Team (no filter)',
        field: 'team',
        flex: 1,
        filterable: false
    }
],

data: DataGenerator.generateData(100)
});

Post by emil »

Hi, the easiest way to put the checkbox at the right would be to override the CSS:

.b-fieldfilterpickergroup-row {
    flex-direction: row-reverse;
}

.b-fieldfilterpickergroup-filter-active {
    padding-inline-start: 0.4em;
}

(For example.)


Post by jintech »

tasnim wrote: Mon May 20, 2024 4:39 pm

Thanks for reaching, I've created a demo with your requirement in code, please check it here https://codepen.io/dv-auntik/pen/WNBwQGm?editors=0010

Hope it helps.

Best regards,
Tasnim

Thanks for the reply. Could you please answer the below question? Can we add an enabled/disabled checkbox for a custom filter? Please see the attached image for an example (on the name column). I want to use and configure a custom filter. Is this possible?
1.
This is the custom filter:

filter field 01.png
filter field 01.png (32.23 KiB) Viewed 419 times

and I want this

Text filter.png
Text filter.png (9.79 KiB) Viewed 419 times

Example reference:
https://bryntum.com/products/grid/examples/filtering/

2.The same goes for filterField type: 'combo'. We also want to control this using an enabled/disabled checkbox for the filter, like I want in the above for the filter filed. Does Bryntum support this?

drop-down.png
drop-down.png (47.88 KiB) Viewed 419 times
{
	
filterType: 'combo',
filterable: {
	filterField : {
		type: 'combo',  
		width: 300,
		height: 40,
		multiSelect: true,
		placeholder: 'All Users',
		validateFilter: false,
		clearable: true,
		listItemTpl(resourceRecord) {
			var htmlContent = '';

		
			return htmlContent;
		},
		picker: {
			cls: 'b-resources-picker'
		},
		chipView: {
			cls : 'b-avatar-chip',
			scrollable: null,
			iconTpl(resourceRecord) {
				var htmlContent = '';
				return htmlContent;
			},
		}
	}
}
}

Post by emil »

Hi jintech,

No, the legacy filterField UI does not support enabled/disabled checkboxes. I'd suggest using the new default UI with a predefined filter with operator set to 'isIncludedIn', and hide the operator combo by adding a custom CSS class like this:

features : {
    filter    : {
        pickerConfig :
            {
                getFieldFilterPickerConfig : () => ({
                    operatorFieldConfig : {
                        cls : 'hidden-operator'
                    }
                }),
                showAddFilterButton : false
            }
        // ...

in your pickerConfig.

The CSS would be something like

.hidden-operator {
    display: none;
}

You can hide the "add filter" button using showAddFilterButton (also in pickerConfig).


Post Reply