Grid filter submit button

[ambruslaco]

Hello,
In my Ext.Net GridPanel I am using GridFilters Plugin. The problem is, that the operation that binds data to Store is complicated and I dont want to refresh Store after every character typed into a StringFilter. So the result is, I need manual submit on filter. I know I could use StringFilter Update Listner and after ENTER reload the Store, but I prefer to show users a button so they know what to do. Is there any possibility to add submit button to grid filter?
For example, this would be great:

<ext:StringFilter DataIndex="Name" ShowSubmit="true" UpdateOnSubmit="true">
       <Listeners>
              <Submit />
        </Listeners>
</ext:StringFilter>

(UpdateOnSubmit property and Submit event are alternatives)

Thanks for reply.

[Daniil]

Hi @ambruslaco,

Unfortunately, there is no such built-in functionality.

I would override or extend the StringFilter JavaScript class to get the functionality that you need.

I believe it should not a problem for you.

If you will be in trouble to get it working, please ask.

[ambruslaco]

I solved my problem with this:

/* GridFilters submit button extension */
var GridFiltersSubmit = {
    filterButtonText: "Filter",
    addButtons: function (gf) {
        if (GridFiltersSubmit.onAfterGridRefresh) {
            gf.store.on("load", GridFiltersSubmit.onAfterGridRefresh);
        }
        for (var i in gf.filters.filters.items) {
            var filter = gf.filters.filters.items[i];
            if (typeof (filter.type) != "undefined") {
                if (filter.type === "string") {
                    GridFiltersSubmit.addButton(filter.menu);
                    GridFiltersSubmit.addEnterHandler(filter.inputItem, filter);
                } else if (filter.type === "numeric") {
                    GridFiltersSubmit.addButton(filter.menu);
                    GridFiltersSubmit.addEnterHandler(filter.menu.fields.eq, filter);
                    GridFiltersSubmit.addEnterHandler(filter.menu.fields.gt, filter);
                    GridFiltersSubmit.addEnterHandler(filter.menu.fields.lt, filter);
                } else if (filter.type === "list") {
                    GridFiltersSubmit.addButton(filter.menu);
                } else if (filter.type === "date") {
                    filter.on("update", function () {
                        GridFiltersSubmit.refreshGrid();
                    });
                } else if (filter.type === "boolean") {
                    filter.options[0].on("checkchange", function (a, b) {
                        GridFiltersSubmit.refreshGrid();
                    });
                }
            }
        }
    },
    addButton: function (menu) {
        menu.addSeparator();
        menu.add(new Ext.Button({
            text: GridFiltersSubmit.filterButtonText,
            width: "100%",
            listeners: {
                click: function () { this.parentMenu.hide(); GridFiltersSubmit.refreshGrid(); },
                scope: menu
            }
        }));
    },
    addEnterHandler: function (input, filter) {
        input.on("keyup", function (field, e) {
            var k = e.getKey();
            if (k == e.RETURN && field.isValid()) { // e.keyCode === 13
                GridFiltersSubmit.refreshGrid();
            }
        }, filter);
    },
    onAfterGridRefresh: null,
    refreshGrid: function() { console.log("it is necessary to override GridFiltersSubmit.refreshGrid function ") }
    /* it is necessary to override refreshGrid function on page, eg:

        GridFiltersSubmit.refreshGrid = function() {
            var store = Ext.ComponentMgr.get('<%= this.gridXXXXX.ClientID %>').getStore();
            Ext.apply(store.proxy.ro.params, {
                submitted: true, // additional parameter, that indicates on server, if store reload was initiated by submit button (and not paging...)
                gridfilters: {} // resets filter, fixes issue with wrong behavior if filter value is empty
            });
            store.reload(store.proxy.ro);
        }
    */
}

Grid look like this:

                    <Plugins>
                        <ext:GridFilters runat="server" ID="filterGridUsers" Local="false" AutoReload="false" >
                            <Filters>
                                <ext:NumericFilter DataIndex="ID" />
                                <ext:StringFilter DataIndex="Name" />
                                <ext:StringFilter DataIndex="Email" />
                            </Filters>
                        </ext:GridFilters>                         
                    </Plugins> 
                    <Listeners>
                        <AfterRender Fn="GridFiltersSubmit.addButtons" />
                    </Listeners>

You have to implement action after button click:

        <script type="text/javascript">
            GridFiltersSubmit.refreshGrid = function () {
                var store = Ext.ComponentMgr.get('<%= this.gridUsers.ClientID %>').getStore();
                Ext.apply(store.proxy.ro.params, {
                    submitted: true,
                    gridfilters: {} 
                });
                store.reload(store.proxy.ro);
            }
        </script>

I know, itis not the best solution, but I prefer not to mess with Ext.JS code.
Hope it will help someone. I will post any improvement I will do on it.

[Daniil]

Looks good. Thank you for sharing!