Modal window display all filters for all fields (including hidden fields)

[mcallegario]

@ghiscoding

Hello
I need to create a modal window that displays all filters for all fields, I couldn't find any method in the API that returns the html elements of the filters.
Could you give me some hint on how I can get these html elements from the API and redirect to my modal window.
Type like this: a method that returns all html elements from filters from all fields (including hidden fields) into an array.
See example image below.

Att.
Marcos Callegario

[ghiscoding]

There is no method for that, there's other similar thing that might help you or give you idea but there is nothing exactly like you want.

• Angular-Slickgrid Example 23 which demonstrate an external global search
• Example 12 which is similar to what you want in a modal window but it's for Editors not Filters

I think the biggest problem you'll encounter is that all Filters are created as DOM elements and then inserted into the Header Row and that target is encoded into every Filter for example if we take the inputFilter

slickgrid-universal/packages/common/src/filters/inputFilter.ts

Lines 215 to 216 in a8755c0

	headerElm.appendChild(inputElm);
	headerElm.appendChild(document.createElement('span'));

I think what you want to do is doable but you'll have to modify each Filters, you could maybe add an extra option into ColumnFilter interface, something like container which would accept a string or an HTM Element (probably the later is better) and then modify each Filters to use the container when provided or else keep using header row container, it would look something like this in your code

this.columnDefinitions = [
  { 
     id: 'firstName', field: 'firstName', 
     filter: { 
       model: Filters.input,
       container: document.querySelector('#modal-body'),
    }
  }
];

and in each Filters, something like this

let filterContainer;
if (this.columnFilter?.container) {
      filterContainer = typeof this.columnFilter.container === 'string' ? document.querySelect(this.columnFilter.container) : this.columnFilter.container; // accept a query selector string or an html element
} else {
  filterContainer = this.grid.getHeaderRowColumn(columnId);
  emptyElement(filterContainer);
}

// append the new DOM element to the header row & an empty span
filterContainer.appendChild(inputElm);
filterContainer.appendChild(document.createElement('span'));

For adding this code, you have 2 options
1- contribute to the lib by adding that piece of code (with proper unit testing) to each Filters
2- extend each Filters that you need in your own code (each Filter have protected usage, so you can easily extend them with OOP and TypeScript)

I wouldn't mind getting contribution on this, so if you want to go for option 1) then great, it's up to you. On another note, I did add a Modal component (like Example 12) for the Composite Editor Modal but I don't really want to add another modal for this one here though, I think you can create your own modal window and just target its modal body content as container to where you want to add each filter (for the filter labels, you can get them simply by looping though your column definitions this.columnDefinitions.map(col => col.name)).

The Composite Editor Modal work in a similar fashion, it loops through all column definitions to build its list of Editors in the modal, I also added the property disabled in the ColumnEditor interface, but it's not available in the Filters so so you might need to add that to the ColumnFilter interface to deal with hidden fields. I guess the next problem you'll encounter is "How to loop and Create each Filters?", that part is done in the Filter Service via addFilterTemplateToHeaderRow which itself is called by the SlickGrid event onHeaderRowCellRendered and addFilterTemplateToHeaderRow is a protected method, perhaps we can make it a public method. I think you could fill the container option in each Filters then create each Filters by looping through the column definitions and call addFilterTemplateToHeaderRow on each filter, this should populate them in your modal window. You might need dynamic code logic if you want to use Filters in the grid and in the modal container: this.isFilterModalOpen ? document.querySelector('#modal-body') : undefined

So there's a lot of info here, it should get you started, have fun and feel free to contribute 😉

[mcallegario]

Once again, thank you so much for your attention.
You helped me a lot with these tips, I will try to implement option 1.