Hi,
I have been investigating the grid filters in Bryntum. We can define the store, field, and filtering functionality based on our requirements. However, I don't see any property or function to customize what we show in those filters.
For example, if I have an assignee/project manager column, I can make a separate store for those members and set that in the filterable field so that when I click on the filter icon, I see the dropdown containing all the assignee names. However, I cannot customize that dropdown to show assignee avatar and name for each row and then be able to filter based on user's selection
The same goes for the date filter. If the column type is set to date, I can see the date filter I want i.e.
date_filter.png (120.93 KiB) Viewed 422 times
However, in my case I have set the date column type to template as I am doing some custom rendering and formatting which cannot be achieved if I use type: date.
Main Objective.
Be able to customize filters so that I can display what I want in those filters. For example for assignee I should be able to show the avatar and name in dropdown menu.
Be able to view the date filter as shown in the above screenshot if column type is set to template
Customize what options I want to show in the first field of the date filter
date_filter_options.png (133.75 KiB) Viewed 422 times
However, in my case I have set the date column type to template as I am doing some custom rendering and formatting which cannot be achieved if I use type: date.
Let's start with this one, could you please share your objective and what didn't work regarding custom rendering / format?
The below code is a reference from bryntum of how I am defining the date folumn
{
text: "Deadline",
field: 'start',
type: 'template',
editor: false,
minWidth: 80,
width: 80,
align: 'left',
hideable: true, // Set to false to prevent the user from hiding the column
resizable: false,
filterable: true,
groupable: true,
headerRenderer: ({ column, headerElement }) => {
headerElement.setAttribute('data-btip', column.text);
return column.text;
},
template: ({value}) => `${value}`,
filterable: {
filterField : {
type : 'date'
}
}
},
As a result, when I click on the filter icon on this column I get the following filter view
current_date_filter.png (131.65 KiB) Viewed 381 times
My desired date filter for this column while keeping the column type as template and keeping other properties as is should be like this. Also I want to modify the options that are visible in the first dropdown of the below filter
desired_date_filter.png (133.92 KiB) Viewed 381 times
To use the new filter UI you cannot have filterField in your column config.
You can provide FieldFilterPicker configuration to the Filter feature by passing a getFieldFilterPickerConfig function as shown in the code for the "Field Filters" example app: https://bryntum.com/products/grid/examples/fieldfilters/
In this case your getFieldFilterPickerConfig function would return a config object that includes, e.g., getValueFieldConfig or operators.
I was able to show the date filter I wanted by simply removing the filterFn and setting filterType to date. However, when I select a date from the filter and apply that filter, no records are shown even though I have records with the same dates present.
In the custom template function for the dates, I am performing custom date rendering which also involves changing the date format.
On the frontend the HTML rendered is something like this
The filtering should be using the data values from the underlying Model, using the field defined for your column (in your code snippet above it's called start), so the custom renderer should not be involved at all. Are the values in your start field JavaScript Dates? Could you provide an example of your data?
From what you wrote, it sounds like the filter gets applied and then rows disappear (get filtered out), so something is happening, we just need to understand why the filter is not matching. Is that correct?
The start field name was just a reference from the Bryntum grid examples. On my grid, I have two date columns where I want to apply the desired date filter
Thanks. When I take the fieldfilters example app and change the start column to type template and filterType to date the date filtering seems to work, so I'm not sure what might be happening in your app. Are you able to create a reduced test case with a row or two of data that you can share so I can look into it?
is there a way we can show the avatar as well along with the name in the dropdown
For this you would need to use filterable : { filterField : { type : 'combo', ... }} in your column definition. This will use the legacy filter UI as shown in your screenshot. You would provide the necessary config for the combo field. Here's an example:
Thanks, emil. I was able to implement the avatar as I wanted and filter the records as expected.
For the date filter issue, I believe it has to do with the date format. On the bryntum example, the format of the start field is as follows
"2019-01-25T19:00:00.000Z"
While I am getting the date value from my database in the following format
"2024-02-08 05:58:00+00"
When I add filterFn inside the filterable config for the date column, the date type changes.
Morover, I am not able to limit the options I have to show the first dropdown for the date. You did share the following link https://www.bryntum.com/products/gantt/docs/api/Core/widget/FieldFilterPicker#config-operators but I cant see any practical implementation for a grid column. Can you provide some example reference code which I can modify according to my requirements?
