Listgrid search threshold

[arturas.tvaronas]

Hi, could someone advise on how to set a threshold for text field filter searches in a ListGrid? I would like the search to be triggered only after a minimum of N characters have been typed. I tried to override getCriterion, but if I return null or undefined, my typed search value has been cleared.

Thanks!

[Blama]

Try this on the filterEditor autoChild of the respective ListGridField: https://smartclient.com/smartgwt/jav...iterionGetter-

Best regards
Blama

[arturas.tvaronas]

What method is the alternative for "setCriterionGetter" if I were using SmartClient?

[Blama]

Hi arturas.tvaronas,

I think it's FormItem.getCriterion on the filterEditor autoChild (filterEditorProperties) of the respective ListGridField.
The docs there match the SmartGWT docs linked in #2.

Best regards
Blama

[Blama]

Hi arturas.tvaronas,

I had a gut feeling this might not work, after you said in #1 "but if I return null or undefined, my typed search value has been cleared".
I assume this is because of filterEditor.setCriterion() being called in the process with null and I'm not sure if this is correct (and if so, how to solve your use case), so I prepared a testcase out of interest based on this sample (SNAPSHOT_v13.1d_2024-10-08).

Isomorphic, I'm not sure the behavior of nulling the TextItem is correct for a search term like "Ha", or if it is, how to cancel filtering for this field without updating the text displayed. This is similar to your existing ComboBoxItem.minimumSearchLength.

Also, this test case only filters as expected for e.g. "Ott" with useAdvancedCriteria:true. It this correct behavior?
I'd expected only "Ottawa" as a result with and without useAdvancedCriteria:true (last line in the test case).

Best regards
Blama

isc.ListGrid.create({
    ID: "countryList",
    width: 500,
    height: 300,
    dataSource: worldDS,
    fields: [{
            name: "countryCode",
            title: "Code",
            width: 60
        },
        {
            name: "countryName",
            title: "Country"
        },
        {
            name: "capital",
            title: "Capital",
            filterEditorProperties: {
                getCriterion: function() {
                    var val = this.getValue();
                    if (val == null) {
                        return null;
                    }
                    isc.logWarn("Entered:" + val);
                    isc.logWarn("Length:" + val.length);
                    if (val.length >= 3) {
                        var criterion;
                        criterion = {
                            fieldName: "capital",
                            operator: "iStartsWith",
                            value: val
                        };
                        isc.logWarn("Before return 1");
                        return criterion;
                    } else {
                        isc.logWarn("Before return 2");
                        return null;
                }
            }
        }
    },
    {
        name: "continent",
        title: "Continent"
    }
],
autoFetchData: true,
showFilterEditor: true,
useAdvancedCriteria:true
})

[arturas.tvaronas]

I also get the same behavior as your provided example and also need to set useAdvancedCriteria to true to be able to adjust getCriterion.

[Isomorphic]

Hi Arturas Tvaronas and Blama
A few things to consider in this discussion:

Firstly - why is "useAdvancedCriteria" required when you override 'getCriterion' to ensure that method fires?
As you know, DynamicForm.getValuesAsCriteria() [which is ultimately used by the filterEditor to produce criteria] can return simple or advanced criteria, depending on the items within the form and how they are configured.

Individual formItems indicate that they will return advanced criteria [requiring the form as a whole to return advancedCriteria] if formItem.hasAdvancedCriteria() returns true. If any item returns advanced criteria, each item will return advanced criteria, produced by evaluating item.getCriterion(), rather than just putting their current value into a simple criterion object.
By setting 'listGrid.useAdvancedCriteria' to true you're forcing the filter form to always produce advanced criteria by calling the getCriterion() method, which causes your override to be called. This is a valid approach, or you could set useAdvancedCriteria directly on the item, which would cause hasAdvancedCriteria() to always return true for the item.

Secondly - why does the text field value get cleared out when the criterion with a null value is applied to the field?
When the system performs a filter in a grid, a round-trip occurs where each item generates a criterion and applies it to the grid, and then the form is effectively refreshed to display the criteria currently applied to the grid. In this case a text value like "Ot" is converted into a null field value, and then when the text item is refreshed to display the new criteria, the original text value is cleared out.

Ultimately it might be possible to get this working with the approach you've started to take by
- overriding getCriterion() as you have
- setting the useAdvancedCriteria flag to true on the item
- overriding formItem.setCriterion() to effectively be a no-op if the criterion value for the field is null

But taking this approach would mean that if your application code called 'listGrid.filterData()' passing in empty criteria it would fail to clear the field value - the item would be unable to distinguish between the null that came from the user typing a too-short string and this case where the criterion was explicitly being cleared.

A better approach is probably to leverage filterEditorSubmit(), getFilterEditorCriteria() and setFilterEditorCriteria() to map from the criteria produced by the editor to the ones you actually want to apply to the data.

Something like this should probably work:

    filterEditorSubmit : function () {
        var criteria = this.getFilterEditorCriteria();
        var modifiedCriteria = {...criteria};
        if (criteria.capital != null && criteria.capital.length < 3) {
            modifiedCriteria.capital = null;
        }
        // filter data without the stripped fields
        this.filterData(modifiedCriteria);
        // re-display the original criteria in the filter editor
        this.setFilterEditorCriteria(criteria);
        // suppress default behavior
        return false;
    },
    ...

Note that the ComboBoxItem minimum search length uses a different mechanism and doesn't really have a bearing on your case.

Regards
Isomorphic Software