Contains "this" And "this"

[Dark Beccio]

hi, is it possible to add such option in default filter row for string? (Contains “this” And “this”)
actual options are:
Contains
Does not contain
Starts with
Ends with
Equal
Clear Filter
ty.
 

[yavordashew]

Hi Dark Beccion,
The default filter row does not support the functionality you want to achieve.
However you can add similar functionality in several ways.
You can do it programmatically for example like this :

filtering: {
    enabled: true,
    filter: [
        ['firstName', 'contains Andrew or contains Nancy'],
    ]
}

Or one way is to have filter panel enabled like in this demo https://www.htmlelements.com/demos/grid/filtering-panel/.
And third solution is to have custom filterEditor in the column to achive this.
I have used this demo for base example https://www.htmlelements.com/demos/grid/filtering-row-custom-editor/
And add the filterEditor in the column :

  columns: [
                {
                    label: 'First Name', dataField: 'firstName',filterEditor: {
                        template: '<smart-input drop-down-button-position="right" placeholder="Azienda" style="border-radius: 0px; border: none; width: 100%; height:100%"></smart-input>',
                        onInit(column, editor) {
                        const input = editor.querySelector('smart-input');
                        input.addEventListener('change', () => {
                        if (input.value === '') {
                            grid.clearFilter(); // if the use enters empy value the filtering is cleared
                        } else {
                            if ( input.value.indexOf(' ') >= 0 ){
                                let inputValue = input.value.split(' '); //split the values where the whitespase is
                                grid.addFilter('firstName' , "contains "+inputValue[0]+" or equal "+inputValue[1]+"")
                            }else {
                                column.filter = 'equal "' + input.value.trim() + '"';
                            }
                        }
                        });
                        }
                        }},

Hope one of these solutions suits you.
Please, do not hesitate to contact us if you have any additional questions.
Best regards,
Yavor Dashev
Smart UI Team
https://www.htmlelements.com/

[Author]

Posts