autocompletebox in radgridview, is this possible to do this?

11 posts, 1 answers
  1. Tai
    Tai avatar
    73 posts
    Member since:
    Jun 2010

    Posted 10 Sep 2010 Link to this post

    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>
                    <!--AutocompleteBox radcombobox for the FinancialAccountId-->
                    <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>
                     
                     
                    <!--AutocompleteBox radcombobox for the FinancialDepartmentId-->
                     
                     
                    <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" />
                    <!--Transaction Date Header with footer implementation-->
                     
                     
                    <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
  2. Tai
    Tai avatar
    73 posts
    Member since:
    Jun 2010

    Posted 13 Sep 2010 Link to this post

    can someone help me with this?

    thank you
  3. DevCraft banner
  4. Pavel Pavlov
    Admin
    Pavel Pavlov avatar
    2039 posts

    Posted 15 Sep 2010 Link to this post

    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
  5. Tai
    Tai avatar
    73 posts
    Member since:
    Jun 2010

    Posted 15 Sep 2010 Link to this post

    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
  6. Answer
    Pavel Pavlov
    Admin
    Pavel Pavlov avatar
    2039 posts

    Posted 16 Sep 2010 Link to this post

    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
    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
  7. Tai
    Tai avatar
    73 posts
    Member since:
    Jun 2010

    Posted 16 Sep 2010 Link to this post

    Hi Pavel

    the dropdown will be opened automatically now . However, the filter still won't work with IsFilteringEnabled = True when the VirtualizingStackPanel is on
    what i mean the filter doesn't work is that? it still Find correctly the wanted item and highlight it. However, it won't filter out the unwanted items

    i test with your sample one with IsFilteringEnabled=True and it doesn't work too


  8. Pavel Pavlov
    Admin
    Pavel Pavlov avatar
    2039 posts

    Posted 17 Sep 2010 Link to this post

    Hello Tai,

    Please excuse me for the confusion !
    It seems you have hit a known limitation of RadComboBox  -  filtering is not supported when using  virtualization as stated in this online help article ( at the bottom of the page) .


    Kind 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
  9. Martin
    Martin avatar
    19 posts
    Member since:
    Feb 2012

    Posted 28 Jul 2014 Link to this post

    Is this feature included in Q1 2014 or do I have to create the DataTemplates as shown in the attached demo?
  10. Martin
    Martin avatar
    19 posts
    Member since:
    Feb 2012

    Posted 28 Jul 2014 in reply to Martin Link to this post

    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;
            }
        }
    }
  11. Martin
    Martin avatar
    19 posts
    Member since:
    Feb 2012

    Posted 28 Jul 2014 in reply to Martin Link to this post

    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>
  12. Yoan
    Admin
    Yoan avatar
    1070 posts

    Posted 29 Jul 2014 Link to this post

    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.
     
Back to Top
DevCraft banner