ListGrid FilterEditor removing the filter button

[johnboy]

ListGrid FilterEditor removing the filter button

I would like to remove the filter button from the ListGrid FilterEditor but I can't see a good way to do this. Is this possible?

Using SmartGWT 2.0.

Johnboy

[Isomorphic]

Why would you do this? There's just going to be a gap there, and it will be less obvious how to trigger filtering.

[johnboy]

I would like to trigger filtering from a tool bar on the grid rather than from the filter editor. This fits in with other actions on the grid. This is simple to achieve but pointless if the filter button cannot be removed from the filter editor.

As for the gap it is not really noticeable once you have are using a scroll bar on the grid.

[Isomorphic]

An extra filter button seems harmless, and note that you can right click on the filter button for further actions that you would also have to put in your toolbar.

If you're trying to run additional code when a filter occurs, there are APIs on the ListGird to allow this.

Finally, if you want to just get rid of it anyway, we'd recommend replacing the icon with a blank image, which will have the least bad visual result.

[pkelley]

Our program would also like to have this option available without coming up with a blank image, if possible.

For our ListGrids they are set to autofilter so the button is confusing and misleading to the user (we have already had questions come up about this).

[Isomorphic]

This button offers other functionality (such as clearing all criteria). If you still want to get rid of it, what appearance are you hoping for? To clarify, we recommend a blank *icon*. The button will still look like part of the header (gradient background) which you presumably do want.

[pkelley]

Any method of removing the button, even if it is just hidden. Maybe a transparent spacer or something along those lines.

[Isomorphic]

We'd suggest you mock up how this would look - it looks very bad, much worse than just not having the filter icon there.

[pkelley]

That is a good idea. Sorry if I am not being clear.

What I am talking about would look exactly like the image I have included, except that where the small apply filter icon button (the image in the shape of a funnel) is you would just see the background color (as if it was completely transparent). Other than that it would look exactly the same... just no button to click.

This makes the most sense with our displays since the filter is automatically applied.

[Isomorphic]

That's what will happen if, as recommended, you just replace the filter icon with a blank (transparent) image.

[pkelley]

ok, thank you. I will give that a shot.

If you don't mind could you add an example here on how to get to this button/image? It would help me and anyone else that needs to do this in the future.

Thank you again for the help.

[Isomorphic]

Looking into this, we realize the property is not currently actually exposed for customization, and therefore not wrapped with a SmartGWT setter method.

However the customization is easy to perform. Here's a line of javascript that will show a blank image rather than the filter image for all ListGrids:

    isc.ListGrid.changeDefaults("filterEditorDefaults", {filterImg:"[SKINIMG]/blank.gif"});
    isc.RecordEditor.changeDefaults("actionButtonDefaults", {title:""});

You could add this to your load_skin.js file or if you prefer make a little JSNI method that does the same thing:

public native void hideFilterImg() /*-{
        $wnd.isc.ListGrid.changeDefaults("filterEditorDefaults", {filterImg:"[SKINIMG]/blank.gif"});
        $wnd.isc.RecordEditor.changeDefaults("actionButtonDefaults", {title:""});
    }-*/;

Since this is an unexposed property we can't guarantee it won't be replaced with a different property name in the future. However we will be sure to update this thread to let you know how to customize this attribute should we make a change in this area.

[caleb.mayer]

You could add this to your load_skin.js file or if you prefer make a little JSNI method that does the same thing:

public native void hideFilterImg() /*-{
        $wnd.isc.ListGrid.changeDefaults("filterEditorDefaults", {filterImg:"[SKINIMG]/blank.gif"});
        $wnd.isc.RecordEditor.changeDefaults("actionButtonDefaults", {title:""});
    }-*/;

This works great. I've also found that using ListGrid.setFilterButtonPrompt("") will hide the tooltip when hovering over the hidden button. However, the mouse cursor still changes to the button click icon when I hover over the button. Is there a way to change this, maybe via css?

Also, when I try to replace the filter image with a gray image instead of a blank image, I can't get it to work. I placed the image in my war/images folder - it seems like the jsni function isn't able to find it.

public native void hideFilterImg() /*-{
        $wnd.isc.ListGrid.changeDefaults("filterEditorDefaults", {filterImg:"images/gray.gif"});
        $wnd.isc.RecordEditor.changeDefaults("actionButtonDefaults", {title:""});
    }-*/;

[Isomorphic]

Use listGrid.setFilterButtonProperties(...) to disable the "hand" cursor (via 'setCursor()' on the button you pass into that method).
On the image - SmartClient / SmartGWT has a concept of the default application image directory (set via Page.setAppImgDir()). This defaults to an "images" subdirectory of the application.
By using "images/gray.gif" as your URL, the system is actually pre-pending this appImgDir - so it'll look in essentially "images/images/gray.gif".
You can resolve this by
- using an absolute URL "/myapp/images/gray.gif"
- using the special keyword "[APP]" to refer to the application directory- relying on the appImgDir (so specifying "gray.gif", and ensuring the app image dir is set to "[APP]images/")

[amcculley]

I wanted to add my support for giving some sort of option to disabling this filter button. We use a toolbar for all of our ListGrids as well and we have added buttons for : Refresh Data, Clear Filter, Filter Data to all of them.

In general, we avoid Context Menus so the Right Click Menu for the filter button isn't that useful - nor do any of our customers even realize you can right click on it. Also, having 10 commands on a tool bar and then 1 hidden and tucked away isn't obvious either.

We can use the stuff provided here as a work around but I think it would be worth investing a little time to make this customizable - especially when you guys have done such an awesome job of making everything else customizable.