[CLOSED] Grid Panel Column Filtering?

  1. #1

    [CLOSED] Grid Panel Column Filtering?

    Can we override text Field/Numeric Fields in FilterMenu in Column Header's Toolbar/Menu with Combo box for Column6 in grid ? Is it possible?
    <%@ 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[] { 1,"1group", "1", "1" },
                    new object[] { 1,"1group", "11", "11" },
                    new object[] { 1,"1group", "111", "111" },
                    new object[] { 2,"2group", "2", "2" },
                    new object[] { 2,"2group", "22", "22" },
                    new object[] { 2,"2group", "222", "222" },
                    new object[] { 3,"3group", "3", "3" },
                    new object[] { 3,"3group", "33", "33" },
                    new object[] { 3,"3group", "333", "333" },
                    new object[] { 11,"11group", "11", "11" },
                    new object[] { 11,"11group", "1111", "1111" },
                    new object[] { 11,"11group", "11111", "11111" }
                };
                storeCombo.DataSource = new object[]
                {
                    new object[] { 1,"1group"},
                    new object[] { 2,"2group" },
                    new object[] { 3,"3group" },
                    new object[] { 11,"11group"},
                };
            }
        }
    </script>
        
    <!DOCTYPE html>
        
    <html>
    <head runat="server">
        <title>Ext.NET v2 Example</title>
        <script>
            var comboRenderer = function (value) {
                var r = App.storeCombo.getById(value);
                if (Ext.isEmpty(r)) {
                    return value;
                }
                return r.data.GroupName;
            };
        </script>
    </head>
    <body>
        <form id="Form1" runat="server">
            <ext:ResourceManager ID="ResourceManager1" runat="server" />
            <ext:Store ID="storeCombo" runat="server">
                <Model>
                    <ext:Model ID="Model1" runat="server" IDProperty="GroupId">
                        <Fields>
                            <ext:ModelField Name="GroupId" />
                            <ext:ModelField Name="GroupName" />
                        </Fields>
                    </ext:Model>
                </Model>
            </ext:Store>
            <ext:Store ID="storeGrid" runat="server">
                <Model>
                    <ext:Model ID="Model2" runat="server">
                        <Fields>
                            <ext:ModelField Name="GroupId" Type="Int" />
                            <ext:ModelField Name="GroupName" />
                            <ext:ModelField Name="TestCol1" />
                            <ext:ModelField Name="TestCol2" />
                        </Fields>
                    </ext:Model>
                </Model>
            </ext:Store>
            <ext:GridPanel ID="GridPanel1" runat="server" StoreID="storeGrid">
                <Features>
                    <ext:Grouping ID="Grouping1" runat="server">
                        <GroupHeaderTpl ID="GroupHeaderTpl1" runat="server">
                            <Html>
                                <tpl if="groupField === 'GroupId'">
                    {columnName}: {[ values.children[0].data.GroupName ]}
                <tpl else>
                    {columnName}: {name}
                </tpl>
                            </Html>
                        </GroupHeaderTpl>
                    </ext:Grouping>
                    <ext:GridFilters Local="True">
                                <Filters>
                                    <ext:StringFilter DataIndex="GroupName" />
                                    <ext:StringFilter DataIndex="GroupId" />
                                </Filters>
                            </ext:GridFilters>
                </Features>
                <ColumnModel ID="ColumnModel1" runat="server">
                    <Columns>
                        <ext:Column ID="Column6" runat="server" Text="Group Select" DataIndex="GroupId" Sortable="true"  Filterable="true">
                            <CustomConfig>
                                <ext:ConfigItem Name="getSortParam" Value="function() { return 'GroupName'; }" Mode="Raw" />
                                <ext:ConfigItem Name="getFilterParam" Value="function() { return 'GroupName'; }" Mode="Raw" />
                            </CustomConfig>                        
                            <Renderer Fn="comboRenderer" />
                            <Editor>
                                <ext:ComboBox ID="ComboBox1" runat="server" StoreID="storeCombo" DisplayField="GroupName" ValueField="GroupId"   Editable="False">
                                </ext:ComboBox>
                            </Editor>
                        </ext:Column>
                        <ext:Column ID="Column3" runat="server" Text="Test Col1" DataIndex="TestCol1" />
                        <ext:Column ID="Column4" runat="server" Text="Test Col2" DataIndex="TestCol2" />
                    </Columns>
                </ColumnModel>
                <Plugins>
                    <ext:CellEditing ID="CellEditing1" runat="server" ClicksToEdit="1" />
                </Plugins>
            </ext:GridPanel>
        </form>
    </body>
    </html>
    Last edited by Daniil; Feb 21, 2014 at 4:42 AM. Reason: [CLOSED]
  2. #2
    Hi @aditya,

    It should be possible to achieve setting up a custom ValidateRecord function.
    <ext:StringFilter DataIndex="GroupId">
        <ValidateRecord Fn="yourValidateRecordFunction" />
    </ext:StringFilter>
    The default one is:
    function (record) {
        var val = record.get(this.dataIndex);
    
        if(typeof val != 'string') {
            return (this.getValue().length === 0);
        }
    
        return val.toLowerCase().indexOf(this.getValue().toLowerCase()) > -1;
    }
  3. #3
    Quote Originally Posted by Daniil View Post
    Hi @aditya,

    It should be possible to achieve setting up a custom ValidateRecord function.
    <ext:StringFilter DataIndex="GroupId">
        <ValidateRecord Fn="yourValidateRecordFunction" />
    </ext:StringFilter>
    The default one is:
    function (record) {
        var val = record.get(this.dataIndex);
    
        if(typeof val != 'string') {
            return (this.getValue().length === 0);
        }
    
        return val.toLowerCase().indexOf(this.getValue().toLowerCase()) > -1;
    }
    Hi @Daniil i try this code but not working. I think this is not the solution for problem i asked above. I want when user try to filter GroupId Column, user go to Header Menu then Open Filter Menu there it shows filters for integer datatype but i want text filter bcoz we show GroupName to user.
  4. #4
    Please remove
    Filterable="true"
    of the Column6.

    It takes precedence over the GridFilter's Filters and creates a filter basing on a ModelField's Type.
  5. #5
    Quote Originally Posted by Daniil View Post
    Please remove
    Filterable="true"
    of the Column6.

    It takes precedence over the GridFilter's Filters and creates a filter basing on a ModelField's Type.
    thanks @Daniil it worked.

    but We can not put Combo boc in place of Exiting Filter Control(TextField/Numeric Field/DateField etc as their Column Data index) in Column Header Menu any way?
  6. #6
    There is no such the functionality in the context of the GridFilters plugin. But you can implement your custom filter.

    Also you might be interested in the FilterHeader feature.
    https://examples2.ext.net/#/search/FilterHeader
  7. #7
    Quote Originally Posted by Daniil View Post
    There is no such the functionality in the context of the GridFilters plugin. But you can implement your custom filter.

    Also you might be interested in the FilterHeader feature.
    https://examples2.ext.net/#/search/FilterHeader
    Thanks @Daniil please close this thread. Your suggestions are really helpful.

Similar Threads

  1. Replies: 5
    Last Post: Dec 26, 2011, 5:39 AM
  2. Replies: 1
    Last Post: Jul 27, 2011, 10:19 AM
  3. Replies: 16
    Last Post: Feb 23, 2011, 10:03 AM
  4. filtering by header column
    By lordofthexings in forum 1.x Help
    Replies: 0
    Last Post: Apr 26, 2010, 11:42 AM

Tags for this Thread

Posting Permissions