[CLOSED] How to provide filter option for CheckboxSelectionModel in GridPanel to filter Selected/Unselected rows

**Tarun_Chand** · Mar 02, 2013, 5:25 PM

Team,

I am to challenges in GridPanel filters.

1. I have a GridPanel with CheckboxSelectionModel.

I want to provide the filter option on this CheckboxSelectionModel column which helps me to filter the rows which are Selected/Unselected.

Please refer the attached screenshot.

Click image for larger version.

Name: FilterForCheckBoxSelectionModelColumn.JPG
Views: 113
Size: 52.7 KB
ID: 5747

2. Giving ALL and (Blank) for NumericFilter and ListFilter.
ALL -> to select all the data in ListFilter
(Blank) -> to filter only the rows which has null/blank values in the filtered column.

**Baidaly** · Mar 02, 2013, 11:34 PM

Hello!

Originally Posted by Tarun Chand

Team,

I am to challenges in GridPanel filters.

1. I have a GridPanel with CheckboxSelectionModel.

I want to provide the filter option on this CheckboxSelectionModel column which helps me to filter the rows which are Selected/Unselected.

Please refer the attached screenshot.

How do you want to display this filter options? Add button in Grid's toolbar or add menu to the header:

Click image for larger version.

Name: 1.JPG
Views: 60
Size: 13.6 KB
ID: 5748

Originally Posted by Tarun Chand

2. Giving ALL and (Blank) for NumericFilter and ListFilter.
ALL -> to select all the data in ListFilter
(Blank) -> to filter only the rows which has null/blank values in the filtered column.

You can implement this using http://docs.sencha.com/ext-js/4-1/#!...ethod-filterBy and by extending http://docs.sencha.com/ext-js/4-1/#!....NumericFilter and http://docs.sencha.com/ext-js/4-1/#!...ter.ListFilter

**Tarun_Chand** · Mar 04, 2013, 9:52 AM

Originally Posted by Baidaly

Hello!

How do you want to display this filter options? Add button in Grid's toolbar or add menu to the header:

You can implement this using http://docs.sencha.com/ext-js/4-1/#!...ethod-filterBy and by extending http://docs.sencha.com/ext-js/4-1/#!....NumericFilter and http://docs.sencha.com/ext-js/4-1/#!...ter.ListFilter

Baidaly,

Thanks for your response,

1. For the first problem,

I want very similar to the screenshot which you have attached, I want the filter at the CheckBoxSelection column header level.

2. For the the second problem.
I went through the links you have provided, it would have been great if i get a link/code for a sample.

**Daniil** · Mar 04, 2013, 2:21 PM

Hello,

Unfortunately, we have no such an example.

But we can help you to start.

I would start from enabling a menu for a column with checkboxes. Probably, overriding the getHeaderConfig function is the simplest way.

Secondly, I would go this way - remove all default items and add some custom one (ones) to apply filtering.

I feel that trying to get it working with GridFilters may be more complicated.

Example

<%@ Page Language="C#" %>
 
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>

<script runat="server">
    protected void Page_Load(object sender, EventArgs e)
    {
        if (!X.IsAjaxRequest)
        {
            Store store = this.GridPanel1.GetStore();
            store.DataSource = new object[] 
            { 
                new object[] { "test1", "test2", "test3" },
                new object[] { "test4", "test5", "test6" },
                new object[] { "test7", "test8", "test9" }
            };
            store.DataBind();
        }
    }
</script>

<!DOCTYPE html>

<html>
<head runat="server">
    <title>Ext.NET v2 Example</title>

    <script>
        var myGetHeaderConfig = function() {
            var me = this,
                showCheck = me.showHeaderCheckbox !== false;

            return {
                isCheckerHd: showCheck,
                text : '*',
                width: me.headerWidth,
                sortable: false,
                draggable: false,
                resizable: false,
                hideable: false,
                //menuDisabled: true,
                menuDisabled: false,
                dataIndex: '',
                cls: showCheck ? Ext.baseCSSPrefix + 'column-header-checkbox ' : '',
                renderer: Ext.Function.bind(me.renderer, me),
                editRenderer: me.editRenderer || me.renderEmpty,
                locked: me.hasLockedHeader()
            };
        };
    </script>
</head>
<body>
    <form runat="server">
        <ext:ResourceManager runat="server" />
        <ext:GridPanel ID="GridPanel1" runat="server">
            <Store>
                <ext:Store runat="server">
                    <Model>
                        <ext:Model runat="server">
                            <Fields>
                                <ext:ModelField Name="test1" />
                                <ext:ModelField Name="test2" />
                                <ext:ModelField Name="test3" />
                            </Fields>
                        </ext:Model>
                    </Model>
                </ext:Store>
            </Store>
            <ColumnModel runat="server">
                <Columns>
                    <ext:Column runat="server" Text="Test1" DataIndex="test1" />
                    <ext:Column runat="server" Text="Test2" DataIndex="test2" />
                    <ext:Column runat="server" Text="Test3" DataIndex="test3" />
                </Columns>
            </ColumnModel>
            <SelectionModel>
                <ext:CheckboxSelectionModel runat="server">
                    <CustomConfig>
                        <ext:ConfigItem Name="getHeaderConfig" Value="myGetHeaderConfig" Mode="Raw" />
                    </CustomConfig>
                </ext:CheckboxSelectionModel>
            </SelectionModel>
        </ext:GridPanel>
    </form>
</body>
</html>

**Tarun_Chand** · Mar 08, 2013, 5:29 PM

Originally Posted by Daniil

Hello,

Unfortunately, we have no such an example.

But we can help you to start.

I would start from enabling a menu for a column with checkboxes. Probably, overriding the getHeaderConfig function is the simplest way.

Secondly, I would go this way - remove all default items and add some custom one (ones) to apply filtering.

I feel that trying to get it working with GridFilters may be more complicated.

Daniil,

Thank you for your support and suggestion.
I tried the sample which you have given in the previous post, but I did not understand, how to add the items to the menu for fitering like (Selected/Unselected to that menu).

I appreciate If you can help me in understanding the approach you have explained.

**Baidaly** · Mar 09, 2013, 4:49 AM

I think Daniil meant some like this:

<%@ Page Language="C#" %>
  
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
 
<script runat="server">
    protected void Page_Load(object sender, EventArgs e)
    {
        if (!X.IsAjaxRequest)
        {
            Store store = this.GridPanel1.GetStore();
            store.DataSource = new object[] 
            { 
                new object[] { "test1", "test2", "test3" },
                new object[] { "test4", "test5", "test6" },
                new object[] { "test7", "test8", "test9" }
            };
            store.DataBind();
        }
    }
</script>
 
<!DOCTYPE html>
 
<html>
<head runat="server">
    <title>Ext.NET v2 Example</title>
 
    <script>
        var myGetHeaderConfig = function() {
            var me = this,
                showCheck = me.showHeaderCheckbox !== false;
            
            this.view.headerCt.on('menucreate', function(menu) {
                menu.menu.add({
                    text: 'Filter selected',
                    menu: Ext.create('Ext.menu.Menu', {
                        items: [{
                            text: 'Selected',
                            handler: function() {
                                var selected = this.view.getSelectionModel().getSelection(); 
                                this.view.getStore().filterBy(function(record) {
                                    return this.indexOf(record) != -1;
                                }, selected);
                            },
                            view: me.view
                        }, {
                            text: 'Not selected',
                            handler: function() {
                                var selected = this.view.getSelectionModel().getSelection(); 
                                this.view.getStore().filterBy(function(record) {
                                    return this.indexOf(record) == -1;
                                }, selected);
                            },
                            view: me.view
                        }, {
                            text: 'Clear',
                            handler: function() {
                                this.view.getStore().clearFilter();
                            },
                            view: me.view
                        }]
                    })
                });
            }, me);
            
            return {
                isCheckerHd: showCheck,
                text : '&#160;',
                width: me.headerWidth,
                sortable: false,
                draggable: false,
                resizable: false,
                hideable: false,
                menuDisabled: false,
                dataIndex: '',
                dataIndex: 'test',
                cls: showCheck ? Ext.baseCSSPrefix + 'column-header-checkbox ' : '',
                renderer: Ext.Function.bind(me.renderer, me),
                editRenderer: me.editRenderer || me.renderEmpty,
                locked: me.hasLockedHeader()
            };
        };
    </script>
</head>
<body>
    <form runat="server">
        <ext:ResourceManager runat="server" />
        <ext:GridPanel ID="GridPanel1" runat="server">
            <Store>
                <ext:Store runat="server">
                    <Model>
                        <ext:Model runat="server">
                            <Fields>
                                <ext:ModelField Name="test1" />
                                <ext:ModelField Name="test2" />
                                <ext:ModelField Name="test3" />
                            </Fields>
                        </ext:Model>
                    </Model>
                </ext:Store>
            </Store>
            <ColumnModel runat="server">
                <Columns>
                    <ext:Column runat="server" Text="Test1" DataIndex="test1" />
                    <ext:Column runat="server" Text="Test2" DataIndex="test2" />
                    <ext:Column runat="server" Text="Test3" DataIndex="test3" />
                </Columns>
            </ColumnModel>
            <SelectionModel>
                <ext:CheckboxSelectionModel runat="server">
                    <CustomConfig>
                        <ext:ConfigItem Name="getHeaderConfig" Value="myGetHeaderConfig" Mode="Raw" />
                    </CustomConfig>
                </ext:CheckboxSelectionModel>
            </SelectionModel>
        </ext:GridPanel>
    </form>
</body>
</html>

**Tarun_Chand** · Mar 09, 2013, 7:29 AM

Originally Posted by Baidaly

I think Daniil meant some like this:

Thanks you Baidaly and Daniil. It works, but It fails to to consider the filters applied on the other columns.

Example:
- Grid contains 100 rows and after a filter is applied on some other column it leaves behind only 10 rows in the grid.
- Then when we apply filter on CheckboxSelectionModel column, say I want to see the Not Selected Columns, it will also fetch not selected rows from the initial 100 rows, it won't consider the filter applied on the other columns.

Baidaly,

Thanks for your response and the snippet of code, I request you to guide me how can I retain the filters applied on other columns when we use filter on CheckboxSelectionModel column.

Cheers...

**Daniil** · Mar 12, 2013, 8:15 AM

I didn't think about it. I think it is possible to get it working.

Then I have another suggestion which should be easier to implement.

Example

<%@ Page Language="C#" %>
  
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
 
<script runat="server">
    protected void Page_Load(object sender, EventArgs e)
    {
        if (!X.IsAjaxRequest)
        {
            Store store = this.GridPanel1.GetStore();
            store.DataSource = new object[] 
            { 
                new object[] { "test1", "test2", "test3" },
                new object[] { "test4", "test5", "test6" },
                new object[] { "test7", "test8", "test9" }
            };
            store.DataBind();
        }
    }
</script>
 
<!DOCTYPE html>
 
<html>
<head runat="server">
    <title>Ext.NET v2 Example</title>
 
    <script>
        var myGetHeaderConfig = function() {
            var me = this,
                showCheck = me.showHeaderCheckbox !== false;
 
            return {
                isCheckerHd: showCheck,
                text : '&#160;',
                width: me.headerWidth,
                sortable: false,
                draggable: false,
                resizable: false,
                hideable: false,
                menuDisabled: false, // was true
                dataIndex: 'selected', // was ''
                cls: showCheck ? Ext.baseCSSPrefix + 'column-header-checkbox ' : '',
                renderer: Ext.Function.bind(me.renderer, me),
                editRenderer: me.editRenderer || me.renderEmpty,
                locked: me.hasLockedHeader()
            };
        };
    </script>
</head>
<body>
    <form runat="server">
        <ext:ResourceManager runat="server" />
        <ext:GridPanel ID="GridPanel1" runat="server">
            <Store>
                <ext:Store runat="server">
                    <Model>
                        <ext:Model runat="server">
                            <Fields>
                                <ext:ModelField Name="test1" />
                                <ext:ModelField Name="test2" />
                                <ext:ModelField Name="test3" />
                                <ext:ModelField Name="selected" Type="Boolean" />
                            </Fields>
                        </ext:Model>
                    </Model>
                </ext:Store>
            </Store>
            <ColumnModel runat="server">
                <Columns>
                    <ext:Column runat="server" Text="Test1" DataIndex="test1" />
                    <ext:Column runat="server" Text="Test2" DataIndex="test2" />
                    <ext:Column runat="server" Text="Test3" DataIndex="test3" />
                </Columns>
            </ColumnModel>
            <SelectionModel>
                <ext:CheckboxSelectionModel runat="server" PruneRemoved="false">
                    <CustomConfig>
                        <ext:ConfigItem Name="getHeaderConfig" Value="myGetHeaderConfig" Mode="Raw" />
                    </CustomConfig>
                    <Listeners>
                        <Select Handler="record.data.selected = true;" />
                        <Deselect Handler="record.data.selected = false;" />
                    </Listeners>
                </ext:CheckboxSelectionModel>
            </SelectionModel>
            <Features>
                <ext:GridFilters runat="server" Local="true">
                    <Filters>
                        <ext:BooleanFilter DataIndex="selected" YesText="Selected" NoText="Not selected" />
                        <ext:StringFilter DataIndex="test1" />
                    </Filters>
                </ext:GridFilters>
            </Features>
        </ext:GridPanel>
    </form>
</body>
</html>

Thread: [CLOSED] How to provide filter option for CheckboxSelectionModel in GridPanel to filter Selected/Unselected rows

Thread Tools

Search Thread

Display

[CLOSED] How to provide filter option for CheckboxSelectionModel in GridPanel to filter Selected/Unselected rows

Similar Threads

[CLOSED] How to access the original data/rows bound to the GridPanel which are invisible after applying filter.

Having trouble to filter options on a GridPanel column list filter, databound event never fires

Filter Grid Panel by Selected Rows

[CLOSED] [1.0] Re-ordering rows in GridPanel and removing filter on Store

[CLOSED] Storing the unselected filter in the grid panel in my database....

Tags for this Thread

Posting Permissions

Sitemap

Downloads

Resources

Thread: [CLOSED] How to provide filter option for CheckboxSelectionModel in GridPanel to filter Selected/Unselected rows

[CLOSED] How to provide filter option for CheckboxSelectionModel in GridPanel to filter Selected/Unselected rows

Similar Threads

Tags for this Thread

Posting Permissions

Sitemap

Downloads

Resources

Stay connected with us