This is a migrated thread and some comments may be shown as answers.

autocompletebox in radgridview, is this possible to do this?

10 Answers 338 Views

GridView

This is a migrated thread and some comments may be shown as answers.

This question is locked. New answers and comments are not allowed.

Tai asked on 10 Sep 2010, 08:30 PM

Hi

Is this possible to do this?
1.
Assuming I have a RadCombox bound to a collection of Account Objects
Each Account has 3 fields:
Id Number Description
1 6032 6032 Accounting
1 6714 6714 Banking

I want the user to be able to type into the Radcombobox(so i use IsEditableEnabled="True") but can't type anything wrong(so i set IsReadOnly="True"). During typing the drop down box will appear and filter out inappropriated results with the TextSearchMode="Contains". So i set IsFilterable="True" and OpenDropDownOnFocus="True").

The TextSearchMode should let us search words in the Description
The dropdown box should show all of the available Description. So i set ItemTemplate to a textbox which has Text's property binds to the Description.
After clicking on one of the the drop down item, the selectedValue should be bound to Id . So i set SelectedValuePath = "Id". However, the displayed value on the input area should be the {Number}.

Basically, i want to have the selected value of Id but the displayed value on the input area is the value of Number. The dropdown will show Descriptions and the Search Mode will let me search basing on Description (not Number)

(I check ur Demo and it didn't match my case)

2.
I want to have an autocomplete column in my radgridview with the above feature(1). I tried with the GridViewComboBoxColumn
but don't see the setting for TextSearchMode so i do a custom Column with RadCombobox template. However, for the custom column Do i need to implement both CellTemplate and CellEditTemplate(with exactly the same code)?? because if i only implement one of them then one of the mode won't show the RadCombobox after i clicking insert a new row in the GridView.
For example, if i only implement the CellTemplate with RadCombobox inside then after pressing the Insert button to insert a new row. The template column only show an empty Textbox(not the RadCombobox) because it is in Edit Mode now. But if i only implement the CellEditTemplate, then in the non Edit Mode, it won't show anything.

One more bug:
After clicking an item in the dropdown list, the cursor automatically move to the next two columns and that will make my grid always pop up the error message because there is one missing cell not fill out yet. How can i stop the cursor automatically move to the next column?

Is this possible to have the above feature(1) with GridViewComboBoxColumn
?

This is the attempt for my implementation. After finishing input the value of Account, Department, the cursor automatically moves to the Transaction Date(skip the Reference Number and Description column). That makes the error message pops up

<telerik:RadGridView Grid.ColumnSpan="7" Grid.Row="3" ItemsSource="{Binding ElementName=documentLineDomainDataSource, Path=Data}" Name="documentLineRadGridView"

AutoGenerateColumns="False"

ShowGroupPanel="False"

DataLoadMode="Asynchronous"

RowEditEnded="documentLineRadGridView_RowEditEnded"

AddingNewDataItem="documentLineRadGridView_AddingNewDataItem"

IsSynchronizedWithCurrentItem="false"

Deleted="documentLineRadGridView_Deleted"

ShowColumnFooters="True" Height="281" VerticalAlignment="Top">

<telerik:RadGridView.Columns>

<telerik:GridViewDataColumn DataMemberBinding="{Binding FinancialAccountId, Mode=TwoWay}" Header="Account">

<telerik:GridViewDataColumn.CellTemplate>

<DataTemplate>

<telerik:RadComboBox ItemsSource="{Binding ListofFinancialAccount, Source={StaticResource financialAccountList}}"

ItemTemplate="{StaticResource FAComboBoxCustomTemplate}"

telerik:TextSearch.TextPath="AccountNumber"

SelectedValuePath="FinancialAccountId"

SelectedValue="{Binding FinancialAccountId, Mode=TwoWay}"

IsEditable="True"

IsFilteringEnabled="True"

TextSearchMode="Contains"

IsReadOnly="True"

OpenDropDownOnFocus="True">

<telerik:RadComboBox.ItemsPanel>

<ItemsPanelTemplate>

<VirtualizingStackPanel />

</ItemsPanelTemplate>

</telerik:RadComboBox.ItemsPanel>

</telerik:RadComboBox>

</DataTemplate>

</telerik:GridViewDataColumn.CellTemplate>

<telerik:GridViewDataColumn.CellEditTemplate>

<DataTemplate>

<telerik:RadComboBox ItemsSource="{Binding ListofFinancialAccount, Source={StaticResource financialAccountList}}"

ItemTemplate="{StaticResource FAComboBoxCustomTemplate}"

telerik:TextSearch.TextPath="AccountNumber"

SelectedValuePath="FinancialAccountId"

SelectedValue="{Binding FinancialAccountId, Mode=TwoWay}"

IsEditable="True"

IsFilteringEnabled="True"

TextSearchMode="Contains"

IsReadOnly="True"

OpenDropDownOnFocus="True">

<telerik:RadComboBox.ItemsPanel>

<ItemsPanelTemplate>

<VirtualizingStackPanel />

</ItemsPanelTemplate>

</telerik:RadComboBox.ItemsPanel>

</telerik:RadComboBox>

</DataTemplate>

</telerik:GridViewDataColumn.CellEditTemplate>

</telerik:GridViewDataColumn>

<telerik:GridViewDataColumn DataMemberBinding="{Binding FinancialDepartmentId, Mode=TwoWay}" Header="Department" >

<telerik:GridViewDataColumn.CellTemplate>

<DataTemplate>

<telerik:RadComboBox ItemsSource="{Binding ListofFinancialDepartment, Source={StaticResource financialDepartmentList}}"

ItemTemplate="{StaticResource FDComboBoxCustomTemplate}"

telerik:TextSearch.TextPath="DepartmentNumber"

SelectedValuePath="FinancialDepartmentId"

SelectedValue="{Binding FinancialDepartmentId, Mode=TwoWay}"

IsEditable="True"

IsFilteringEnabled="True"

TextSearchMode="Contains"

IsReadOnly="True"

OpenDropDownOnFocus="True">

<telerik:RadComboBox.ItemsPanel>

<ItemsPanelTemplate>

<VirtualizingStackPanel />

</ItemsPanelTemplate>

</telerik:RadComboBox.ItemsPanel>

</telerik:RadComboBox>

</DataTemplate>

</telerik:GridViewDataColumn.CellTemplate>

<telerik:GridViewDataColumn.CellEditTemplate>

<DataTemplate>

<telerik:RadComboBox ItemsSource="{Binding ListofFinancialDepartment, Source={StaticResource financialDepartmentList}}"

ItemTemplate="{StaticResource FDComboBoxCustomTemplate}"

telerik:TextSearch.TextPath="DepartmentNumber"

SelectedValuePath="FinancialDepartmentId"

SelectedValue="{Binding FinancialDepartmentId, Mode=TwoWay}"

IsEditable="True"

IsFilteringEnabled="True"

TextSearchMode="Contains"

IsReadOnly="True"

OpenDropDownOnFocus="True">

<telerik:RadComboBox.ItemsPanel>

<ItemsPanelTemplate>

<VirtualizingStackPanel />

</ItemsPanelTemplate>

</telerik:RadComboBox.ItemsPanel>

</telerik:RadComboBox>

</DataTemplate>

</telerik:GridViewDataColumn.CellEditTemplate>

</telerik:GridViewDataColumn>

<telerik:GridViewDataColumn DataMemberBinding="{Binding ReferenceNumber, Mode=TwoWay}" Header="Reference Number" />

<telerik:GridViewDataColumn DataMemberBinding="{Binding TransactionDescription, Mode=TwoWay}" Header="Description" />

<telerik:GridViewDataColumn DataMemberBinding="{Binding TransactionDate, Mode=TwoWay}" Header="Transaction Date" DataFormatString="{}{0:d}" >

<telerik:GridViewDataColumn.Footer>

<StackPanel Orientation="Vertical">

<TextBlock Text="Total:" />

<TextBlock Text="Balance:" />

</StackPanel>

</telerik:GridViewDataColumn.Footer>

</telerik:GridViewDataColumn >

thank you

10 Answers, 1 is accepted

answered on 15 Sep 2010, 02:29 PM

autocomletecombo.zip

Hi Tai,

What I understand is :

1. You need to edit the ID , to Display the Number in the cell , and to search by the Description.

Let me know if the sample attached is close enough.

Regards,
Pavel Pavlov
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items

answered on 15 Sep 2010, 10:12 PM

Hi Pavel,

it is exactly what i need. Thank you
1.
However, i also want the dropdown list open automatically when the combobox column is in the edit mode so the user can see the filtered list animation. So i set the OpenDropDownOnFocus = True (inside the DataTemplate - > telerik:Radcombobox).
but it doesn't work.
it will work nicely if the radcombobox doesn't inside the gridview

do you know why? and how can i accomplish that behavior with the radcombobox inside the radgridview?

2. This is my current code . The filter won't work anymore if i have the VirtualizingStackpanel on(what i mean is that it still shows correctly the searched item but it won't filter out the unwanted items) . I set it on because my Financial Account List might contain a lot of Accounts. Without it , the loading somewhat is slow whenever i click on the combobox column for editing because it needs to load the list of accounts.
Can you tell me how to make the filter work during typing for searching? (right now i also set IsFilteringEnabled=true but it doesn't filter out anything)

<telerik:GridViewComboBoxColumn DataMemberBinding="{Binding FinancialAccountId, Mode=TwoWay}" Header="Account"

IsComboBoxEditable="True"

IsFilterable="True"

DisplayMemberPath="AccountNumber"

SelectedValueMemberPath="FinancialAccountId"

ItemsSource="{Binding Data, Source={StaticResource v_FinancialAccountSearch}}"

>

<telerik:GridViewComboBoxColumn.CellEditTemplate>

<DataTemplate>

<telerik:RadComboBox ItemsSource="{Binding Data, Source={StaticResource v_FinancialAccountSearch}}"

IsEditable="True"

IsFilteringEnabled="True"

OpenDropDownOnFocus="True"

TextSearchMode="Contains"

SelectedValue="{Binding FinancialAccountId, Mode=TwoWay}"

SelectedValuePath="FinancialAccountId"

DisplayMemberPath="SearchAccount"

>

<telerik:RadComboBox.ItemsPanel>

<ItemsPanelTemplate>

<VirtualizingStackPanel />

</ItemsPanelTemplate>

</telerik:RadComboBox.ItemsPanel>

</telerik:RadComboBox>

</DataTemplate>

</telerik:GridViewComboBoxColumn.CellEditTemplate>

</telerik:GridViewComboBoxColumn>

thank you

Accepted

answered on 16 Sep 2010, 02:34 PM

autocomletecombo.zip

Hi Tai,

I am attaching a modified version/fixed of the porject . I believe it does not have the above mentioned problems.

Greetings,
Pavel Pavlov
the Telerik team

answered on 29 Jul 2014, 12:50 AM

I didn't have time to wait for Telerik's response, so I managed to implement a custom RadComboBoxColumn working properly on Q1 2014 with all autocomplete functionality of RadComboBox.

Shame on Telerik that for any reason they decide not to expose 5 simple properties to do this directly with the RadComboBoxColumn.

Find the code below:

public class MyGridViewComboBoxColumn : GridViewComboBoxColumn

{

public override System.Windows.FrameworkElement CreateCellEditElement(Telerik.Windows.Controls.GridView.GridViewCell cell, object dataItem)

{

var control = base.CreateCellEditElement(cell, dataItem);

var comboBox = control as RadComboBox;

if (comboBox != null)

{

comboBox.OpenDropDownOnFocus = true;

comboBox.TextSearchMode = TextSearchMode.Contains;

comboBox.IsEditable = true;

comboBox.IsFilteringEnabled = true;

//Disable virtualization

comboBox.ItemsPanel = new ItemsPanelTemplate(new FrameworkElementFactory(typeof(StackPanel)));

return comboBox;

}

else

{

return control;

}

answered on 29 Jul 2014, 12:53 AM

This is how you'd use it in a RadGridView:

<telerik:RadGridView Grid.Row="2" Grid.Column="0" Grid.ColumnSpan="2" Margin="0,10,0,0" NewRowPosition="Top"

ItemsSource="{Binding ProductsInOrder}" AutoGenerateColumns="False"

CanUserReorderColumns="False" CanUserSortColumns="False" CanUserSortGroups="False"

ShowGroupPanel="False" IsFilteringAllowed="False">

<telerik:RadGridView.Columns>

<local:MyGridViewComboBoxColumn Header="Product" DataMemberBinding="{Binding ProductId}" ItemsSource="{Binding Products}"

DisplayMemberPath="ProductName" SelectedValueMemberPath="ProductId">

</local:MyGridViewComboBoxColumn>

</telerik:RadGridView.Columns>

</telerik:RadGridView>

answered on 29 Jul 2014, 03:00 PM

Hello Martin,

You can achieve the same functionality if you set the IsComboBoxEditable property of the column and the following style to the editor:

<telerik:GridViewComboBoxColumn DataMemberBinding="{Binding CountryId}"

UniqueName="Country"

SelectedValueMemberPath="Id"

DisplayMemberPath="Name"

IsComboBoxEditable="True">

<telerik:GridViewComboBoxColumn.EditorStyle>

<Style TargetType="telerik:RadComboBox">

<Setter Property="OpenDropDownOnFocus" Value="True"/>

<Setter Property="TextSearchMode" Value="Contains"/>

<Setter Property="IsFilteringEnabled" Value="True"/>

<Setter Property="ItemsPanel">

<Setter.Value>

<ItemsPanelTemplate>

<StackPanel/>

</ItemsPanelTemplate>

</Setter.Value>

</Setter>

</Style>

</telerik:GridViewComboBoxColumn.EditorStyle>

</telerik:GridViewComboBoxColumn>

You can also check the Filter the Items in GridViewComboBoxColumn help article.

I hope this helps.

Regards,
Yoan
Telerik

Check out Telerik Analytics, the service which allows developers to discover app usage patterns, analyze user data, log exceptions, solve problems and profile application performance at run time. Watch the videos and start improving your app based on facts, not hunches.