EXT Grid panel grid filters - EXT.net Classic v 7.2

Dear,

Please note that I am using a Grid panel, all I need that is showing the column grid filter.
I am trying to add the following:

Code:

---

    <plugins>
        <ext-gridFilters  />
    </plugins>

---

but I didn't works, can anyone help or provide me an example about the above problem?

thank you.

Hello @Geovision!

Looks like we are missing a piece of the GridFilters plug-in where the filter block is part of the ext-column component.

But you can easily overcome this by using the customConfig block.

Here's an example adding the GridFilters functionality to the Simple Array Grid Example:

Code:

---

<ext-section target="Main">
    <ext-gridPanel title="Array Grid"
        width="960"
        height="640"
        frame="true"
        store="companyStore2">
        <plugins>
            <ext-gridFilters />
        </plugins>
        <columns>
            <ext-column text="Company" dataIndex="company" flex="1">
                <customConfig>
                    <ext-add key="filter">
                        <ext-add key="type" value="string" />
                    </ext-add>
                </customConfig>
            </ext-column>
            <ext-column text="Price" dataIndex="price" renderer="Ext.util.Format.usMoney">
                <customConfig>
                    <ext-add key="filter">
                        <ext-add key="type" value="number" />
                    </ext-add>
                </customConfig>
            </ext-column>
            <ext-column text="Change" dataIndex="change" renderer="change">
                <customConfig>
                    <ext-add key="filter">
                        <ext-add key="type" value="number" />
                    </ext-add>
                </customConfig>
            </ext-column>
            <ext-column text="Change %" dataIndex="pctChange" renderer="pctChange">
                <customConfig>
                    <ext-add key="filter">
                        <ext-add key="type" value="number" />
                    </ext-add>
                </customConfig>
            </ext-column>
            <ext-dateColumn text="Last Updated"
                dataIndex="lastChange"
                width="140"
                format="yyyy-MM-dd">
                <customConfig>
                    <ext-add key="filter">
                        <ext-add key="type" value="date" />
                        <ext-add key="dateFormat" value="n/j/Y" />
                        <ext-add key="pickerDefaults">
                            <ext-add key="ariaTitleDateFormat" value="F d" />
                            <ext-add key="format" value="n/j/Y" />
                            <ext-add key="longDayFormat" value="l, F j, Y" />
                            <ext-add key="todayText" value="Now" />
                        </ext-add>
                    </ext-add>
                </customConfig>
            </ext-dateColumn>
        </columns>
        <store>
            <ext-store data="Model.GridData" storeId="companyStore2">
                <fields>
                    <ext-dataField name="company" />
                    <ext-numberDataField name="price" />
                    <ext-numberDataField name="change" />
                    <ext-numberDataField name="pctChange" />
                    <ext-dateDataField name="lastChange" dateFormat="yyyy-MM-dd hh:mm:tt" />
                </fields>
            </ext-store>
        </store>
        <bbar>
            <ext-toolbar>
                <items>
                    <ext-button text="Print" iconCls="x-md md-icon-print" handler="this.up('grid').print();" />
                </items>
            </ext-toolbar>
        </bbar>
    </ext-gridPanel>
</ext-section>

---

The model code is the same in the example pointed.

The missing grid filter type here is the list one, so based in the Local Grid Filters at Ext.NET 5 Examples Explorer, I come up with (besides the elaborate date filter above):

Code:

---

<customConfig>
    <ext-add key="filter">
        <ext-add key="type" value="list" />
        <ext-add key="options" value="[1.01, 1.02, 1.28, 1.39, 2.4]" mode="Raw" />
    </ext-add>
</customConfig>

---

Notice the contents of options is Raw, that means javascript code; and it should describe a JavaScript Array (thus wrapped in brackets -- []).

This means when you need to pass strings as the list of options, you need to properly quote them. Switching the markup quotes to single quotes works well, and you can also single-quote strings in JavaScript while you keep the outer quotes as double ones, among other possible syntaxes to attain the same result. Below, a list of string, double quoted, wrapped in single quotes:

Code:

---

<customConfig>
    <ext-add key="filter">
        <ext-add key="type" value="list" />
        <ext-add key="options" value='["extra small", "small", "medium", "large", "extra large"]' mode="Raw" />
    </ext-add>
</customConfig>

---

We have logged issue #1854 to track the missing feature, but you should be good for the time being with this alternative.

If you are interested in going even deeper in the grid filters plugin capabilities and options, please refer to the client-side documentation available at Ext.grid.filters.Filters documentation at Sencha Docs

Hope this helps!

Hello,

It works.
Another question, how we can add a column filter dynamically from code behind using C#?

Thank you.