Our blazing fast Grid component built with pure JavaScript


Post by sipi41 »

Dear friends at bryntum. sorry to bother "again" but we have a question that you may know, as we look into the docs and could not find a solution. We have a column like this:

                {
                    text: 'Employee<br/>Type', field: 'employeeId', width: '6em', editor: false, htmlEncodeHeaderText: false,
                    renderer({ value }) {
                        if (value)
                            return employeeStore.getById(value).employeeType;
                        else
                            return '';
                    },
                    }

And it basically, depends on the field: 'employeeId' which is numeric. The value displayed using the renderer, takes the Id and looks for the value in another store called "employeeStore" like this, in other words, take the id, look for the value of the ID and send it back to cell...

Now we are building a custom filter option, as we only have the Id here (employeeId) the problem we are facing is that after creating a custom combo, when opening the filter, 3 fields are open, EQUALS, LESS THAN & MORE THAN, and we would like this combo instead.
Image

In the docs, it says I can replace the default field type when creating the combo, but this obviously is not working, as the combo appears in each of the 3 options instead. In other words, we would like NOT to have these 3 options, instead we would like to display our combo, which will contain the 2 options we want, then with a custom function filter. Please check our code below:

{
                    text: 'Employee<br/>Type', field: 'employeeId', width: '6em', editor: false, htmlEncodeHeaderText: false,
                    renderer({ value }) {
                        if (value)
                            return employeeStore.getById(value).employeeType;
                        else
                            return '';
                    },
                    filterable: {

                    filterField: {                            
                        type: 'combo',
                        multiSelect: true,
                        editable: false,
                        items: [...new Set(gridSourceData.employees.map(emp => emp.employeeType))],
                        pickerWidth: 150,
                    },
                    filterFn: ({ record, value, operator }) => {

                        //more logic... 
                        return true; //all valid
                    }
                }
            },

Thank you for all your help.


Post by alex.l »

Try to set https://bryntum.com/docs/grid/api/Grid/column/Column#config-filterType to 'string'
By default, filterType is applied by model field type. In your case an id is an integer, so filter fields are generated for number.
If you want to use just a combo, you need to specify custom filterType as well.

{
                    text: 'Employee<br/>Type', field: 'employeeId', width: '6em', editor: false, htmlEncodeHeaderText: false,
                    renderer({ value }) {
                        if (value)
                            return employeeStore.getById(value).employeeType;
                        else
                            return '';
                    },
                    filterType : 'string',
                    filterable: {
                        filterField: {                            
type: 'combo', multiSelect: true,

All the best,
Alex


Post by sipi41 »

Thank you so much mr Alex for your kind answer, just straight to the point. It did work, thank you so much.

PD. It would be nice if we could add a mention of this in the docs, would help a lot, as there are hundreds of properties and sometimes we get lost if not available in the examples. Thank you again!


Post by sipi41 »

Mr Alex, may I ask something else? please let me know if you still reviewing this msg to proceed, thank you!


Post by alex.l »

Feel free to ask! But if it's not related to the current thread please create a new one! Our rule: one thread - one question.
Here is a full guide how to ask for help viewtopic.php?f=1&t=772

All the best,
Alex


Post Reply