[CLOSED] GridFilter Remote ComboBox filter

  1. #1

    [CLOSED] GridFilter Remote ComboBox filter

    Hi,

    I am using GridPanel with Remote Filtering, Sorting and Paging. But, I need ComboBox control as filter control. You can see sample picture as below. Instead of that filtering control, I should add ComboBox control. So, Users can select. How can I achieve?

    Click image for larger version. 

Name:	1.jpg 
Views:	301 
Size:	102.7 KB 
ID:	2884

    This is my GridPanel codes.

                                                            <ext:GridPanel ID="GridPanel_CustomerForms" runat="server" StoreID="Store_CustomerForms"
                                                                AutoExpandColumn="IndividualFullName" TrackMouseOver="true" StripeRows="true"
                                                                Header="false" Border="false">
                                                                <TopBar>
                                                                    <ext:Toolbar ID="Toolbar_TopBar" runat="server" Hidden="false">
                                                                        <Items>
                                                                            <ext:ToolbarFill ID="ToolbarFill1" runat="server" />
                                                                            <ext:Button ID="Button_PrintRegistrationForm" runat="server" Text="Print Registration Form"
                                                                                Icon="Printer">
                                                                                <Listeners>
                                                                                    <Click Handler="Button_PrintRegistrationForm_Click();" />
                                                                                </Listeners>
                                                                            </ext:Button>
                                                                            <ext:Button ID="Button_AddNewForm" runat="server" Text="Add New Form" Icon="Add"
                                                                                Hidden="true">
                                                                                <Listeners>
                                                                                    <Click Handler="Button_AddNewForm_Click();" />
                                                                                </Listeners>
                                                                            </ext:Button>
                                                                        </Items>
                                                                    </ext:Toolbar>
                                                                </TopBar>
                                                                <ColumnModel ID="ColumnModel1" runat="server">
                                                                    <Columns>
                                                                        <ext:RowNumbererColumn />
                                                                        <ext:Column Header="Task ID" DataIndex="TaskID" Width="50">
                                                                        </ext:Column>
                                                                        <ext:Column Header="Task Type" DataIndex="TaskType" Width="150">
                                                                        </ext:Column>
                                                                        <ext:Column Header="Network Type" DataIndex="SecondaryType" Width="150">
                                                                        </ext:Column>
                                                                        <ext:Column Header="Last Status" DataIndex="LastStatus" Width="200">
                                                                        </ext:Column>
                                                                        <ext:Column Header="First Name" DataIndex="FirstName" Width="150">
                                                                        </ext:Column>
                                                                        <ext:Column Header="Last Name" DataIndex="LastName" Width="150">
                                                                        </ext:Column>
                                                                        <ext:Column Header="PhoneNo1" DataIndex="PhoneNo1" Width="150" Hidden="false">
                                                                        </ext:Column>
                                                                        <ext:DateColumn Header="Insert Date" DataIndex="InsertDate" Width="150" Format="dd-MM-yyyy HH:mm:ss"
                                                                            Hidden="false">
                                                                        </ext:DateColumn>
                                                                        <ext:Column ColumnID="IndividualFullName" Header="Full Name">
                                                                            <Renderer Handler="var fullName = ''; if(record.data['CustomerType']=='IndividualPerson'){fullName = '<b>' + record.data['LastName'] + '</b>,' + record.data['FirstName']}else{fullName = record.data['PublicFullName']} return fullName" />
                                                                        </ext:Column>
                                                                        <ext:Column Header="Customer Type" DataIndex="CustomerType" Width="100">
                                                                        </ext:Column>
                                                                        <ext:Column Header="Registration Person Type" DataIndex="RegistrationPersonType"
                                                                            Width="120">
                                                                        </ext:Column>
                                                                        <ext:Column Header="Registration Full Name" DataIndex="RegistrationFullName" Width="150">
                                                                        </ext:Column>
                                                                        <ext:DateColumn Header="Registration Date" DataIndex="RegistrationDate" Width="150"
                                                                            Format="dd-MM-yyyy HH:mm:ss">
                                                                        </ext:DateColumn>
                                                                        <ext:Column Header="Father Name" DataIndex="FatherName" Width="150" Hidden="true">
                                                                        </ext:Column>
                                                                        <ext:Column Header="Mother Name" DataIndex="MotherName" Width="150" Hidden="true">
                                                                        </ext:Column>
                                                                        <ext:Column Header="Mother Last Name" DataIndex="MotherLastName" Width="150" Hidden="true">
                                                                        </ext:Column>
                                                                        <ext:DateColumn Header="Birth Date" DataIndex="BirthDate" Width="150" Format="dd-MM-yyyy HH:mm:ss"
                                                                            Hidden="true">
                                                                        </ext:DateColumn>
                                                                        <ext:Column Header="Sex" DataIndex="Sex" Width="150" Hidden="true">
                                                                        </ext:Column>
                                                                        <ext:Column Header="Country" DataIndex="Country" Width="150" Hidden="true">
                                                                        </ext:Column>
                                                                        <ext:Column Header="BirthPlace" DataIndex="BirthPlace" Width="150">
                                                                        </ext:Column>
                                                                        <ext:Column Header="Citizenship" DataIndex="Citizenship" Width="150" Hidden="true">
                                                                        </ext:Column>
                                                                        <ext:Column Header="Individual Address" DataIndex="IndividualAddress" Width="150">
                                                                        </ext:Column>
                                                                        <ext:Column Header="Contact No" DataIndex="ContactNo" Width="150" Hidden="true">
                                                                        </ext:Column>
                                                                        <ext:Column Header="Email" DataIndex="Email" Width="150" Hidden="true">
                                                                        </ext:Column>
                                                                        <ext:Column Header="Public Full Name" DataIndex="PublicFullName" Width="150" Hidden="true">
                                                                        </ext:Column>
                                                                        <ext:Column Header="Public NIPT" DataIndex="PublicNIPT" Width="150" Hidden="true">
                                                                        </ext:Column>
                                                                        <ext:Column Header="Public Address" DataIndex="PublicAddress" Width="150" Hidden="true">
                                                                        </ext:Column>
                                                                        <ext:Column Header="Document Type" DataIndex="DocumentType" Width="150" Hidden="true">
                                                                        </ext:Column>
                                                                        <ext:Column Header="Passport Type" DataIndex="PassportType" Width="150" Hidden="true">
                                                                        </ext:Column>
                                                                        <ext:Column Header="Identity Number" DataIndex="IdentityNumber" Width="150" Hidden="true">
                                                                        </ext:Column>
                                                                        <ext:DateColumn Header="Identity Date" DataIndex="IdentityDate" Width="150" Format="dd-MM-yyyy HH:mm:ss"
                                                                            Hidden="true">
                                                                        </ext:DateColumn>
                                                                        <ext:Column Header="Certificate Type" DataIndex="CertificateType" Width="150" Hidden="true">
                                                                        </ext:Column>
                                                                        <ext:Column Header="PhoneNo2" DataIndex="PhoneNo2" Width="150" Hidden="true">
                                                                        </ext:Column>
                                                                        <ext:Column Header="PhoneNo3" DataIndex="PhoneNo3" Width="150" Hidden="true">
                                                                        </ext:Column>
                                                                        <ext:Column Header="PhoneNo4" DataIndex="PhoneNo4" Width="150" Hidden="true">
                                                                        </ext:Column>
                                                                        <ext:Column Header="PhoneNo5" DataIndex="PhoneNo5" Width="150" Hidden="true">
                                                                        </ext:Column>
                                                                        <ext:Column Header="PhoneNo6" DataIndex="PhoneNo6" Width="150" Hidden="true">
                                                                        </ext:Column>
                                                                        <ext:Column Header="UserID" DataIndex="UserID" Width="150" Hidden="true">
                                                                        </ext:Column>
                                                                        <ext:DateColumn Header="Update Date" DataIndex="UpdateDate" Width="150" Format="dd-MM-yyyy HH:mm:ss"
                                                                            Hidden="true">
                                                                        </ext:DateColumn>
                                                                        <ext:Column Header="Is Deleted" DataIndex="IsDeleted" Width="150" Hidden="true">
                                                                        </ext:Column>
                                                                    </Columns>
                                                                </ColumnModel>
                                                                <Plugins>
                                                                    <ext:GridFilters runat="server" ID="GridFilters_CustomerForms">
                                                                        <Filters>
                                                                            <ext:NumericFilter DataIndex="TaskID" />
                                                                            <ext:StringFilter DataIndex="TaskType" />
                                                                            <ext:StringFilter DataIndex="SecondaryType" />
                                                                            <ext:StringFilter DataIndex="LastStatus" />
                                                                            <ext:StringFilter DataIndex="FirstName" />
                                                                            <ext:StringFilter DataIndex="LastName" />
                                                                            <ext:StringFilter DataIndex="PhoneNo1" />
                                                                            <ext:DateFilter DataIndex="InsertDate">
                                                                                <DatePickerOptions runat="server" TodayText="Now" />
                                                                            </ext:DateFilter>
                                                                            <ext:StringFilter DataIndex="IndividualFullName" />
                                                                            <ext:StringFilter DataIndex="CustomerType" />
                                                                            <ext:StringFilter DataIndex="RegistrationPersonType" />
                                                                            <ext:StringFilter DataIndex="RegistrationFullName" />
                                                                            <ext:DateFilter DataIndex="RegistrationDate">
                                                                                <DatePickerOptions runat="server" TodayText="Now" />
                                                                            </ext:DateFilter>
                                                                            <ext:StringFilter DataIndex="FatherName" />
                                                                            <ext:StringFilter DataIndex="MotherName" />
                                                                            <ext:StringFilter DataIndex="MotherLastName" />
                                                                            <ext:DateFilter DataIndex="BirthDate">
                                                                                <DatePickerOptions runat="server" TodayText="Now" />
                                                                            </ext:DateFilter>
                                                                            <ext:StringFilter DataIndex="Sex" />
                                                                            <ext:StringFilter DataIndex="Country" />
                                                                            <ext:StringFilter DataIndex="BirthPlace" />
                                                                            <ext:StringFilter DataIndex="Citizenship" />
                                                                            <ext:StringFilter DataIndex="IndividualAddress" />
                                                                            <ext:StringFilter DataIndex="ContactNo" />
                                                                            <ext:StringFilter DataIndex="Email"/>
                                                                            <ext:StringFilter DataIndex="PublicFullName"/>
                                                                            <ext:StringFilter DataIndex="PublicNIPT"/>
                                                                            <ext:StringFilter DataIndex="PublicAddress"/>
                                                                            <ext:StringFilter DataIndex="DocumentType"/>
                                                                            <ext:StringFilter DataIndex="PassportType"/>
                                                                            <ext:StringFilter DataIndex="IdentityNumber"/>
                                                                            <ext:DateFilter DataIndex="IdentityDate">
                                                                                <DatePickerOptions runat="server" TodayText="Now" />
                                                                            </ext:DateFilter>
                                                                            <ext:StringFilter DataIndex="CertificateType"/>
                                                                            <ext:StringFilter DataIndex="PhoneNo2"/>
                                                                            <ext:StringFilter DataIndex="PhoneNo3"/>
                                                                            <ext:StringFilter DataIndex="PhoneNo4"/>
                                                                            <ext:StringFilter DataIndex="PhoneNo5"/>
                                                                            <ext:StringFilter DataIndex="PhoneNo6"/>
                                                                            <ext:NumericFilter DataIndex="UserID"/>
                                                                            <ext:DateFilter DataIndex="UpdateDate">
                                                                                <DatePickerOptions runat="server" TodayText="Now" />
                                                                            </ext:DateFilter>
                                                                            <ext:BooleanFilter DataIndex="IsDeleted"/>
                                                                        </Filters>
                                                                    </ext:GridFilters>
                                                                </Plugins>
                                                                <LoadMask ShowMask="true" />
                                                                <SelectionModel>
                                                                    <ext:RowSelectionModel ID="RowSelectionModel1" runat="server" SingleSelect="true">
                                                                        <DirectEvents>
                                                                            <RowSelect OnEvent="GridPanel_CustomerForms_RowSelect" Buffer="100">
                                                                                <EventMask ShowMask="true" Msg="Processing..." Target="CustomTarget" CustomTarget="={#{Panel3}.body}" />
                                                                                <ExtraParams>
                                                                                    <%-- or can use params[2].id as value --%>
                                                                                    <ext:Parameter Name="TaskID" Value="this.getSelected().id" Mode="Raw" />
                                                                                </ExtraParams>
                                                                            </RowSelect>
                                                                        </DirectEvents>
                                                                    </ext:RowSelectionModel>
                                                                </SelectionModel>
                                                                <BottomBar>
                                                                    <ext:PagingToolbar ID="PagingToolbar1" runat="server" PageSize="10" DisplayInfo="true"
                                                                        DisplayMsg="Displaying customer forms {0} - {1} of {2}" EmptyMsg="No customer form to display">
                                                                        <Items>
                                                                            <ext:Label ID="Label1" runat="server" Text="Page size:" />
                                                                            <ext:ToolbarSpacer ID="ToolbarSpacer1" runat="server" Width="10" />
                                                                            <ext:ComboBox ID="ComboBox1" runat="server" Width="80">
                                                                                <Items>
                                                                                    <ext:ListItem Text="1" />
                                                                                    <ext:ListItem Text="2" />
                                                                                    <ext:ListItem Text="5" />
                                                                                    <ext:ListItem Text="10" />
                                                                                    <ext:ListItem Text="20" />
                                                                                </Items>
                                                                                <SelectedItem Value="10" />
                                                                                <Listeners>
                                                                                    <Select Handler="#{PagingToolbar1}.pageSize = parseInt(this.getValue()); #{PagingToolbar1}.doLoad();" />
                                                                                </Listeners>
                                                                            </ext:ComboBox>
                                                                        </Items>
                                                                    </ext:PagingToolbar>
                                                                </BottomBar>
                                                                <Listeners>
                                                                    <DblClick Fn="GridPanel_CustomerForms_DblClick" />
                                                                    <CellClick Fn="cellClick" />
                                                                </Listeners>
                                                            </ext:GridPanel>
    Last edited by Daniil; Jun 27, 2011 at 12:44 PM. Reason: [CLOSED]
  2. #2
    Hi,

    This is the GridFiltres plugin functionality and, unfortunately, there is no ComboBox filter type.

    You can investigate the GridFilter's sources:
    <Ext.Net SVN folder>\Ext.Net\Build\Ext.Net\ux\plugins\gridfilters\gridfilters.js
    to consider how it can be achieved.
  3. #3
    By the way I'd use ListFilter. For me it's a good alternative of ComboBox.
  4. #4
    Ok, but how can I load programaticlly.
  5. #5
    Please see the 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[] { "1", "test1" },
                    new object[] { "2", "test2" },
                    new object[] { "3", "test3" }
                };
                store.DataBind();
     
                this.StoreOptions.DataSource = new object[] 
                { 
                    new object[] { "1" },
                    new object[] { "2" },
                    new object[] { "3" }
                };
                this.StoreOptions.DataBind();
            }
        }
    </script>
     
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title>Ext.Net Example</title>
    </head>
    <body>
        <form runat="server">
        <ext:ResourceManager runat="server" />
        <ext:Store ID="StoreOptions" runat="server">
            <Reader>
                <ext:ArrayReader IDProperty="test1">
                    <Fields>
                        <ext:RecordField Name="test1" />
                    </Fields>
                </ext:ArrayReader>
            </Reader>
        </ext:Store>
        <ext:GridPanel ID="GridPanel1" runat="server" AutoHeight="true">
            <Store>
                <ext:Store runat="server">
                    <Reader>
                        <ext:ArrayReader>
                            <Fields>
                                <ext:RecordField Name="test1" />
                                <ext:RecordField Name="test2" />
                            </Fields>
                        </ext:ArrayReader>
                    </Reader>
                </ext:Store>
            </Store>
            <ColumnModel runat="server">
                <Columns>
                    <ext:Column Header="Test1" DataIndex="test1" />
                    <ext:Column Header="Test2" DataIndex="test2" />
                </Columns>
            </ColumnModel>
            <Plugins>
                <ext:GridFilters ID="GridFilters1" runat="server" Local="true">
                    <Filters>
                        <ext:ListFilter
                            DataIndex="test1"
                            StoreID="StoreOptions"
                            LabelField="test1">
                        </ext:ListFilter>
                    </Filters>
                </ext:GridFilters>
            </Plugins>
        </ext:GridPanel>
        </form>
    </body>
    </html>

Similar Threads

  1. [CLOSED] Remote ListFilter (gridFilter)
    By peter.campbell in forum 1.x Legacy Premium Help
    Replies: 8
    Last Post: Mar 26, 2012, 3:28 PM
  2. [CLOSED] Remote GridFilter is not removed
    By macap in forum 1.x Legacy Premium Help
    Replies: 12
    Last Post: Jun 01, 2011, 3:43 PM
  3. [CLOSED] gridfilter remote question
    By vali1993 in forum 1.x Legacy Premium Help
    Replies: 6
    Last Post: Feb 24, 2011, 4:14 PM
  4. [CLOSED] Dynamically set filter value in GridFilter
    By jchau in forum 1.x Legacy Premium Help
    Replies: 3
    Last Post: Oct 05, 2010, 2:58 PM
  5. GridFilter, Alter name of filter
    By flaviodamaia in forum 1.x Help
    Replies: 0
    Last Post: Jun 05, 2009, 11:39 AM

Tags for this Thread

Posting Permissions