How to refresh data with filter editor and search form

[wallytax]

Building further on this example https://www-demos.smartclient.com/sm...GridComponents, I was wondering what is the approach if I want to add extra filters in the toolbar grid component? Eg. I want to add a "global" search field that searches in all fields and associated records (eg. search for an user by his address).

I've compared this example with the 12.1 version (change "13.0" in the URL to "12.1") and I notice that changing the header filters immediately leads to a new request in 13.0 and not in 12.1 (you need to press Enter first). I have compared the code and couldn't find a setting that triggers this change, so I assume it's in the code.

The reason I'm mentioning this difference is that I'm wondering were I need to "add" the extra "global search" field when I change a header filter. And vice versa: changing the global search field, press Submit in the toolbar would also need to include the current header filters. Is it a solution to use setCriteria() with the filter values and global search value as values and then call refreshData()?

Hope this question is clear and makes sense. I'm still trying to figure out the best way to refresh (filtered) data since there are (too many) options: filterData(), fetchData(), invalidateCache(), filterByEditor(), etc.

[Blama]

Hi wallytax,

I have a similar setup. I think in theory this should "just work". Your extra global filter goes into implicitCriteria and a change to either implicitCriteria or the filterRow just does the proper refetch.
Also, the global filter should go into setImplicitCriteria(...) / setProperty("implicitCriteria", ...) and not into fetchData(crit), as otherwise it would be displayed in the filterRow for that field.

Please see the code from #4 here in this 12.1p sample. 12.0p and 13.0p have problems here right now (see the whole thread), but also there it should work I think.

Best regards
Blama

[wallytax]

Blama,

What a coincidence! We're more or less trying to do the same. I have a hard time giving stand-alone, "plain SmartClient" examples, but let me try with this "bare minimum":

isc.ListGrid.create({
    autoFetchData: true,
    dataSource: supplyItem,
    height: 500,
    init: function () {
        this.Super('init', arguments);
        var toolStrip = isc.ToolStrip.create({
            members: [
                isc.SearchForm.create({
                    grid: this,
                    fields: [{ name: 'search', showTitle: false, type: 'text' }],
                    numCols: 1,
                    saveOnEnter: true,
                    submit: function () {
                      this.grid.setCriteria(isc.addProperties(
                        {},
                        this.getValuesAsCriteria(),
                        this.grid.getFilterEditorCriteria(true)
                      ));
                    }
                }),
                isc.ToolStripButton.create({
                    grid: this,
                    icon: '[SKIN]/actions/clearFilter.png',
                    prompt: 'Clear Filter',
                    click: function () {
                        this.grid.setFilterEditorCriteria({});
                        this.grid.filterByEditor();
                    }
                }),
                isc.ToolStripButton.create({
                    grid: this,
                    icon: '[SKIN]/actions/refresh.png',
                    prompt: 'Refresh',
                    click: function () {
                        this.grid.refreshData();
                    }
                })
            ]
        });
        this.setProperty("gridComponents", ["filterEditor", "header", "body", "summaryRow", toolStrip]);
    },
    showFilterEditor: true,
    width:"100%"
});

Is this more or less the way to go? I'm especially interested in what to put in the submit() method of the search form and the click() method of both buttons. I tried several things, but sometimes I get two request (one requesting rows 0-74 and the other 0-75), then I only get the criteria from the filter, then only the ones of the form, then no fetch at all... so I'm kind of lost in what's best to do.

Thanks in advance!

[Blama]

Hi wallytax

depends on what your searchForm should search. You say all fields. I don't know how to solve this in a generic way for any ListGrid, but if you are happy to list all fields what you will need is a FormItem.getCriterion function that returns a big field1=val or field2=val or .... You then apply this via setImplicitCriteria(...) / setProperty("implicitCriteria", ...). Here the latter for 12.0p and the former for 12.1p+.

Best regards
Blama

[wallytax]

Simply put: when I type something in the search form, the only thing that needs to be done, is send a request parameter "search=<typed value>" along with the filters from the filter editor. If you change something in the form (in this example, there's only one field) or something in the filter editor, their values should be combined and send to the server.

Another example could be an "active" field that I don't show by default, but use to style records (eg. with a strike-through effect). To give users the option to filter out only (in)active records, I might add this "active" field to the search form.

Do you understand what I mean?

I did take a look at the implicit criteria and the docs suggest that it should not be used for user editable criteria.

SmartClient is great, but for me the ListGrid and its criteria are way to complex. There are probably good reasons that I can't oversee that makes the implementation as it is, but I would like to know what I need. Summing up things that I've seen, it's very overwhelming for me to know what properties to use or set and in which case.

For (re)retrieval of data, I've seen these methods:

• fetchData()
• filterData()
• filterByEditor()
• refreshData()
• invalidateCache()

For setting of criteria, I've seen these properties/methods:

• autoFetchTextMatchStyle
• fetchData() with arguments
• filterData() with arguments
• implicitCriteria
• initialCriteria
• setImplicitCriteria()

I would really like to know what's best to use and of course this totally depends on the application's needs, but maybe my initial example is a good starting point.

[Blama]

Hi wallytax,

pretty sure implicitCriteria is the way to go, but you can wait for Isomorphic to chime in.

Regarding your search http param I'm pretty sure this is not the way to go as you should not "smuggle" data to the server.
Assuming your setup is a "normal .ds.xml backed by IDACall and a relational database" and you want to handle the search thing yourself in a serverside DMI you should at least create a myfield-.ds.xml field with customSelectExpression="nothingToSee" and then send a "myfield notEqual search"-criterion via the implicitCriteria.
But again, I don't think that's necessary. FormItem.getCriterion + implicitCriteria should do what you want without any hacks.

Best regards
Blama

[wallytax]

I use a RubyOnRails server thus only the JavaScript part of SmartClient.

Am I understanding you correctly if I think I should call this.grid.setImplicitCriteria() in the search form's submit()? And what argument should I give it? Please help me with an example, because everytime that last detail is taking me hours. I don't think the platform is intuitive on this point, I'm sorry to say that.

[Blama]

Hi,

like this in your code from #3.

submit: function () {
                      this.grid.setImplicitCriteria(this.getValuesAsCriteria());
                    }

Best regards
Blama

[wallytax]

Thanks! Will try that right now.

[wallytax]

Looks quite promising, but I still need to add my search criteria whenever something changes in the filter editor...

BUT... In the investigation process of this, I discovered the "searchForm" option of ListGrid. No idea if it's new, but in handleFilterEditorSubmit() of the grid, it combines the criteria of this search form with the filter values. But now I'm trying to find out how to add this search form to the grid.

But sure looks promising, any help/tips would be appreciated in how to use this.

[wallytax]

It looks like I'm getting there, so maybe this post will help others. I think basically this is what needs to be done (I've changed my initial example to this)

isc.ListGrid.create({
    autoFetchData: true,
    dataSource: supplyItem,
    height: 500,
    init: function () {
        this.Super('init', arguments);
        var toolStrip = isc.ToolStrip.create({
            members: [
                isc.SearchForm.create({
                    fields: [{ name: 'search', showTitle: false, type: 'text' }],
                    numCols: 1
                }),
                isc.ToolStripButton.create({
                    grid: this,
                    icon: '[SKIN]/actions/clearFilter.png',
                    prompt: 'Clear Filter',
                    click: function () {
                        this.grid.setFilterEditorCriteria({});
                        this.grid.filterByEditor();
                    }
                }),
                isc.ToolStripButton.create({
                    grid: this,
                    icon: '[SKIN]/actions/refresh.png',
                    prompt: 'Refresh',
                    click: function () {
                        this.grid.refreshData();
                    }
                })
            ]
        });
        this.setProperty('gridComponents', ['filterEditor', 'header', 'body', 'summaryRow', toolStrip]);
        this.setProperty('searchForm', toolStrip.members[0]);
    },
    showFilterEditor: true,
    width:"100%"
});

[Blama]

Hi wallytax ,

using the change from #8 and your code in the sample I see two criteria in every request when filling out the item name filter row and your search field - like expected.
Change one, then the new value here and the old value of the other is used - as expected.
E.g.:

 data:{
        itemName:"Adding",
        search:"TEST2"
    },

ListGrid.searchForm is new in 13.0 and seems to be an easier (no submit handler needed, fully declarative) way of doing what you want. Note the docs: "That is, they are treated much like implicitCriteria."

To find a sample using it (if it exists) download the SmartClient SDK and file search the showcase project for "searchForm".

Best regards
Blama

[wallytax]

I can't find an example, so it's probably not there yet. But that search form is not an auto child if I'm not mistaken. I assigned my earlier defined search form to it and it works. Is this correct? This seems to be a bit different from other situations.