[CLOSED] ComboBox TypeAhead in Each Field Separately

  1. #1

    [CLOSED] ComboBox TypeAhead in Each Field Separately

    Dears,

    Suppose I have the following ComboBox:

    <ext:ComboBox Flex="1" TypeAhead="true" ForceSelection="true"  QueryMode="Local" MinWidth="800" PaddingSpec="0 15 0 5" ID="ddlEditActivityCode" ClientIDMode="Static" ValueField="ID" DisplayField="CODEANDDESC" runat="server" >
    	<Store>
    			<ext:Store ClientIDMode="Static" ID="ddlEditActivityCodeStore" runat="server">
    			<Model>
    				<ext:Model  ClientIDMode="Static" ID="ddlEditActivityCodeModel" runat="server" IDProperty="ID">
    					<Fields>
    						<ext:ModelField Name="ID" Type="String" />
    						<ext:ModelField Name="ACTIVITY_NAME_ENGLISH" Type="String" />
    						<ext:ModelField Name="ACTIVITY_NAME_ARABIC" Type="String" />
    						<ext:ModelField Name="CODEANDDESC" Type="String" />
    					</Fields>
    				</ext:Model>
    			</Model>
    			</ext:Store>  
    	</Store>
    	<ListConfig Width="800" Height="300" ItemSelector=".x-boundlist-item">
    		<Tpl runat="server">
    			<Html>
    				<tpl for=".">
    					<tpl if="[xindex] == 1">
    						<table class="cbStates-list">
    							<tr>
    								<th>Activity Code</th>
    								<th>English Name</th>
    								<th>Arabic Name</th>
    							</tr>
    					</tpl>
    					<tr class="x-boundlist-item">
    						<td>{ID}</td>
    						<td>{ACTIVITY_NAME_ENGLISH}</td>
    						<td>{ACTIVITY_NAME_ARABIC}</td>
    					</tr>
    					<tpl if="[xcount-xindex]==0">
    						</table>
    					</tpl>
    				</tpl>
    			</html>                </Tpl>
    	</ListConfig>
    	<Triggers>
    		<ext:FieldTrigger Icon="Clear" Hidden="true" />
    	</Triggers>
    	<Listeners>
    		<BeforeQuery Handler="var q = queryEvent.query;
    							  queryEvent.query = new RegExp(q);
    							  queryEvent.query.length = q.length;" />
    		<TriggerClick Handler="if (index == 0) {
    								   this.focus().clearValue();
    								   trigger.hide();
    							   }" />
    		<Select Handler="this.getTrigger(0).show();" />
    	</Listeners>
    </ext:ComboBox>
    Now if I perform search with Code, the list get shortening, but when I try to search through English or Arabic the result comes wrong.

    How to achieve the followings:

    1. How to perform search in each field separately, means if I want to search in English only or in Arabic Only with mixing things with each other?

    2. Do you suggest better than this solution? I mean another way to achieve this with another component?

    Regards,
    Ali Alaswad
    Last edited by fabricio.murta; Oct 07, 2016 at 7:48 AM.
  2. #2
    Hello @alaswad!

    It is hard to say something without seeing it in action, unfortunately. But something that might just help you customize and improve the search specific demands of the combo box is this example: Form Fields - Combo Box - Custom Search.

    If this does not help at all, provide a test case illustrating the problem so we can see what you get on your side, reproduce here, and be able to provide you advice.
    Fabrício Murta
    Developer & Support Expert
  3. #3
    Dear @fabricio.murta,

    This example is more suitable to my case:

    https://examples3.ext.net/#/Form/ComboBox/Two_Columns/

    How I can perform search in both columns?

    Regards,
    Ali Alaswad
  4. #4
    Hello @Alaswad!

    Sorry for the delay, we'll be checking a possible implementation of search in that scenario. I still believe something like the first pointed example will be used to implement the search in a custom dropdown.
    Fabrício Murta
    Developer & Support Expert
  5. #5
    Hello again!

    The final answer for your main question is a short no, searching in two columns (and filtering out the non-matching rows) does not work. Not in the way you would want, at least.

    If you search for the string "abcd" in two columns, the only rows displayed would be the rows which both columns contain the pattern.

    That said, the only two alternatives I can see is implementing a filter that supports specifying a range of columns to search on or making an special column concatenating the text of all columns you want to include in the search, and performing the search in this column. The former approach would be up to you to develop such a feature, but as for the latter, it would be just a matter of concatenating data from server side, before providing data for the grid and below is the example you pointed simplified and modified to implement this approach.

    <%@ Page Language="C#" %>
    
    <script runat="server">
        protected void Page_Load(object sender, EventArgs e)
        {
            this.Store1.DataSource = new object[]
            {
                new object[] { "AL", "Alabama", "The Heart of Dixie", "AL Alabama The Heart of Dixie"},
                new object[] { "NC", "North Carolina", "First in Freedom", "NC North Carolina First in Freedom"},
                new object[] { "ND", "North Dakota", "Peace Garden State", "ND North Dakota Peace Garden State"},
                new object[] { "UT", "Utah", "Salt Lake State", "UT Utah Salt Lake State"},
                new object[] { "WV", "West Virginia", "Mountain State", "WV West Virginia Mountain State"},
            };
    
            this.Store1.DataBind();
        }
    </script>
    
    <!DOCTYPE html>
    
    <html>
    <head runat="server">
        <title>Comboboxes - Ext.NET Examples</title>
        <link href="/resources/css/examples.css" rel="stylesheet" />
    
        <style>
            .cbStates-list {
                width : 298px;
                font  : 11px tahoma,arial,helvetica,sans-serif;
            }
    
            .cbStates-list th {
                font-weight : bold;
            }
    
            .cbStates-list td, .cbStates-list th {
                padding : 3px;
            }
    
            .list-item {
                cursor : pointer;
            }
        </style>
    </head>
    <body>
        <form runat="server">
            <ext:ResourceManager runat="server" />
    
            <ext:ComboBox
                ID="cbStates"
                runat="server"
                EmptyText="Select State"
                TypeAhead="false"
                ForceSelection="false"
                DisplayField="state"
                ValueField="abbr"
                MinChars="1"
                MatchFieldWidth="false"
                PageSize="10">
                <Store>
                    <ext:Store ID="Store1" runat="server" IsPagingStore="true" PageSize="10">
                        <Model>
                            <ext:Model runat="server">
                                <Fields>
                                    <ext:ModelField Name="abbr" />
                                    <ext:ModelField Name="state" />
                                    <ext:ModelField Name="nick" />
                                    <ext:ModelField Name="combined" />
                                </Fields>
                            </ext:Model>
                        </Model>
                    </ext:Store>
                </Store>
                <ListConfig Width="320" Height="300" ItemSelector=".x-boundlist-item">
                    <Tpl runat="server">
                        <Html>
                            <tpl for=".">
                                <tpl if="[xindex] == 1">
                                    <table class="cbStates-list">
                                        <tr>
                                            <th>State</th>
                                            <th>Nick</th>
                                        </tr>
                                </tpl>
                                <tr class="x-boundlist-item">
                                    <td>{state}</td>
                                    <td>{nick}</td>
                                </tr>
                                <tpl if="[xcount-xindex]==0">
                                    </table>
                                </tpl>
                            </tpl>
                        </html>
                    </Tpl>
                </ListConfig>
                <Listeners>
                    <BeforeQuery Handler="App.Store1.filter('combined', new RegExp(this.getRawValue().toString()));" />
                </Listeners>
            </ext:ComboBox>
        </form>
    </body>
    </html>
    Looking forward for your feedback on whether this addresses your issue or not!
    Fabrício Murta
    Developer & Support Expert
  6. #6
    Dear fabricio.murta,

    Your suggest still NOT solving my problem.

    Can I achieve something like the following snapshot:

    Click image for larger version. 

Name:	ComboWithGridAndSearch.jpg 
Views:	22 
Size:	35.1 KB 
ID:	24764

    How to embed such grid with search text boxes for each column in combo box?

    Regards,
    Ali Alaswad
  7. #7
    Hello Alaswad!

    You can do something like the picture you provided with the FilterHeader plug in: GridPanel - Filter Header - Overview

    Hope this helps. But I don't understand your last line of message. You want to use combo boxes instead of text fields in as the search input components?
    Fabrício Murta
    Developer & Support Expert
  8. #8
    @fabricio.murta,

    Thanks a lot.
    I think my problem solved by using this example (https://examples3.ext.net/#/Form/Dro...ield/Overview/) to embed (https://examples4.ext.net/#/GridPane...ader/Overview/).

    When user click on drop down field, the grid with search options will appear.

    Regards,
    Ali
  9. #9
    Hello Ali!

    Glad it helped solving your issue! Thanks for leaving your feedback!

Similar Threads

  1. Combobox Typeahead
    By markhenk in forum 2.x Help
    Replies: 1
    Last Post: Feb 08, 2016, 10:35 PM
  2. Replies: 3
    Last Post: Dec 05, 2012, 5:16 PM
  3. [CLOSED] TypeAhead databound combobox
    By vadym.f in forum 1.x Legacy Premium Help
    Replies: 6
    Last Post: Jun 27, 2012, 1:28 PM
  4. [CLOSED] Combobox TypeAhead
    By blurken in forum 2.x Legacy Premium Help
    Replies: 2
    Last Post: May 18, 2012, 1:46 AM
  5. Replies: 4
    Last Post: Sep 28, 2011, 8:57 AM

Posting Permissions