JavaScript UI Libraries & Blazor Components Suite – Smart UI › Forums › Data Grid › Contains "this" And "this"
- This topic has 1 reply, 2 voices, and was last updated 3 years, 7 months ago by yavordashew.
-
AuthorPosts
-
March 19, 2021 at 1:01 pm #101639Dark BeccioMember
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.
March 19, 2021 at 3:14 pm #101641yavordashewMemberHi 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/ -
AuthorPosts
- You must be logged in to reply to this topic.