[CLOSED] Implement filters on the command column

  1. #1

    [CLOSED] Implement filters on the command column

    Hi Team,

    I have around 10 columns in my grid. In that the first one is a command column. This column is a status column. It displays a "tick" icon if the record is active, else it shows "cross" if the record is inactive. Till here it works fine. But i want to implement filtering and sorting on this column. For eg: the filters for this column have two options, 1) Active 2) Inactive. On either of the selection, the corresponding records will be displayed. I am unable to see the filter option itself. Can you please suggest what is the best way to implement the filtering and sorting on this command column

    Please find my screenshot attached for this column. Also find another screenshot wherein i have implemented filtering on normal columns


    <ext:CommandColumn Width="10" Header="Status" Tooltip="Status" Align="Center" DataIndex="Status" Sortable="true" >
                                    <Commands>
                                        <ext:GridCommand CommandName="Icon" Text="" IconCls="icon-status"/>
                                    </Commands>
                                    <PrepareToolbar Fn="PrepareIcon" />
                                </ext:CommandColumn>
    [ATTACH=CONFIG]7218[/ATTClick image for larger version. 

Name:	NameFilter.png 
Views:	21 
Size:	26.0 KB 
ID:	7219ACH]
    Attached Thumbnails Click image for larger version. 

Name:	statusImage.png 
Views:	16 
Size:	4.3 KB 
ID:	7218  
    Last edited by Daniil; Nov 29, 2013 at 3:21 PM. Reason: [CLOSED]
  2. #2
    Hi @MarginPoint,

    Here is an example.

    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[] { "test", "test", true },
                    new object[] { "test", "test", false },
                    new object[] { "test", "test", true }
                };
            }
        }
    </script>
    
    <!DOCTYPE html>
    
    <html>
    <head runat="server">
        <title>Ext.NET v2 Example</title>
    
        <script>
            var prepareToolbar = function (grid, toolbar, rowIndex, record) {
                var firstButton = toolbar.items.get(0);
    
                firstButton.setIcon(record.data.test3 ? "#Tick" : "#Cross");
            };
        </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="Test 1" DataIndex="test1" />
                        <ext:Column runat="server" Text="Test 2" DataIndex="test2" />
                        <ext:CommandColumn 
                            runat="server" 
                            Text="Commands" 
                            DataIndex="test3" 
                            MenuDisabled="false">
                            <Commands>
                                <ext:GridCommand CommandName="testCommand" />
                            </Commands>
                            <PrepareToolbar Fn="prepareToolbar" />
                        </ext:CommandColumn>
                    </Columns>
                </ColumnModel>
                <Features>
                    <ext:GridFilters runat="server" Local="true">
                        <Filters>
                            <ext:BooleanFilter DataIndex="test3" />
                        </Filters>
                    </ext:GridFilters>
                </Features>
            </ext:GridPanel>
        </form>
    </body>
    </html>
  3. #3

    Unable to view it

    Unable to view it
  4. #4
    Hello!

    Quote Originally Posted by MarginPoint View Post
    Unable to view it
    Sorry, what do you mean? I was able to sort and filter using Daniil's example. Could you say, what exactly is wrong with this sample?

    Click image for larger version. 

Name:	1.jpg 
Views:	6 
Size:	82.9 KB 
ID:	7275

Similar Threads

  1. [CLOSED] grid column filters - need to scroll menu!
    By ecko in forum 1.x Legacy Premium Help
    Replies: 6
    Last Post: Jul 17, 2013, 12:33 AM
  2. [CLOSED] How to implement GridPanel column resize on double-click?
    By vadym.f in forum 1.x Legacy Premium Help
    Replies: 9
    Last Post: Feb 15, 2013, 7:21 AM
  3. Replies: 1
    Last Post: May 14, 2012, 2:40 PM
  4. [CLOSED] MultiHeader filters get mixed up when column is moved
    By georgek in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: Jul 06, 2011, 5:55 PM
  5. command column messing up grid column
    By wp_joju in forum 1.x Help
    Replies: 2
    Last Post: Dec 08, 2010, 7:40 AM

Posting Permissions