[CLOSED] ComboBox TypeAhead in Each Field Separately

**Alaswad** · Aug 26, 2016, 6:55 PM

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

**fabricio.murta** · Aug 27, 2016, 4:06 AM

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.

**Alaswad** · Aug 27, 2016, 1:48 PM

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

**fabricio.murta** · Aug 30, 2016, 8:01 AM

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.

**fabricio.murta** · Aug 31, 2016, 2:42 AM

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!

**Alaswad** · Oct 05, 2016, 8:49 AM

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: 90
Size: 35.1 KB
ID: 24764

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

Regards,
Ali Alaswad

**fabricio.murta** · Oct 06, 2016, 1:52 AM

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?

**Alaswad** · Oct 06, 2016, 11:21 AM

@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

**fabricio.murta** · Oct 07, 2016, 7:48 AM

Hello Ali!

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

Thread: [CLOSED] ComboBox TypeAhead in Each Field Separately

Thread Tools

Search Thread

Display

[CLOSED] ComboBox TypeAhead in Each Field Separately

Similar Threads

Combobox Typeahead

ComboBox two TriggerFields whith Directevents separately

[CLOSED] TypeAhead databound combobox

[CLOSED] Combobox TypeAhead

[CLOSED] [1.0] Combobox typeahead no longer sets the value to selected row when tabbing out of the combobox

Posting Permissions

Sitemap

Downloads

Resources

Thread: [CLOSED] ComboBox TypeAhead in Each Field Separately

[CLOSED] ComboBox TypeAhead in Each Field Separately

Similar Threads

Posting Permissions

Sitemap

Downloads

Resources

Stay connected with us