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

SearchText vs SelectedItem null issue

9 Answers 229 Views
AutoCompleteBox
This is a migrated thread and some comments may be shown as answers.
Alex
Top achievements
Rank 1
Alex asked on 20 Jan 2015, 12:54 AM
Hi,

When the RadAutoCompleteBox goes from SelectedItem non-null to SelectedItem null (e.g. from binding), the control will visually display with an empty box, however, the SearchText will still be the previous value (i.e. that of the last SelectedItem). (Ideally I think it should null/empty the SearchText property)

Please see the linked project for an example (instructions to produce issue are in the project's Notes file)

https://docs.google.com/uc?id=0B5oaFsWDMeYmRGpRTUJOTzZPb2s&export=download



Version:
2014.2.729.1050 (This is the version in the linked project)

Also tested on internal build with same result:
2014.3.1319.1050

9 Answers, 1 is accepted

Sort by
0
Geri
Telerik team
answered on 21 Jan 2015, 04:31 PM
Hi Alex,

If we understand correctly, you mean that the SearchText property should be cleared when the SelectedItem becomes null. However, there are scenarios in which this behavior is not desired: in case the SelectedItem property becomes null, the SearchText should not become null as well. For example, when selecting an item and trying to edit it using Backspace, on the very first keystroke the SelectedItem becomes null if there's no matching item, but SearchText should retain its value until the user is done editing. 

Nevertheless, the scenario you tell us about is valid and we'll discuss it with the Development team in order to improve our product.

Regarding the behavior you're after - it can be achieved with little modification in the MainPageViewModel class of the project you sent us, please see the code below:

void Clear(object parameter)
{
    SelectedItem = null;
 
    //clear SearchText:
    this.SearchText = string.Empty;
}

Please, try this out and see if it works for you.

Regards,
Geri
Telerik
 

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

 
0
Alex
Top achievements
Rank 1
answered on 21 Jan 2015, 10:46 PM
Hi Geri,

The issue is that the text is not the search text. Please see the attached image highlighting the issue. (The image can be created by following the instructions in the first post)


Note how the control claims that the search text should be "43description" but the control is blank
0
Geri
Telerik team
answered on 22 Jan 2015, 12:39 PM
Hi Alex, 

We understand that in your scenario the behaviour of RadAutoCompleteBox seems like an issue, because the SearchText retains a value that is not visible in the TextBox. However, this is the way our control works. As I previously explained, the SearchText keeps its value even if the SelectedItem is null, because it is intended to retain the user input. The value of the SearchText and the TextBox by design is not constantly the same.

In order to make sure that we're on the same page - could you let us know which of the following is the desired behavior after the Selected Item is null:
1) The SearchText and the TextBox values are both displayed (e.g. 2description) 
2) The SearchText and the TextBox are both clear

In case the expected behaviour is 2), could you please tell us if the suggested in the previous answer solution works for you?

Regards,
Geri
Telerik
 

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

 
0
Alex
Top achievements
Rank 1
answered on 22 Jan 2015, 11:01 PM
The effect I would like for my particular use case is for (2) both the SearchText and the TextBox to be cleared, so yes your suggested code will mitigate my issue. However, I still believe that this inconsistency should be fixed due to the following scenario (even if the fix is to make the TextBox show the SearchText and thus require the use of (2) ):

The biggest issue caused by the SearchText and the TextBox being out of sync, is that the items are filtered using the SearchText, which is counter-intuitive if the textbox is empty. 

A typical scenario where this is required is when a View is bound to a particular object, and a RadAutoCompleteBox on that view is bound to a particular property. When the View's data context is changed (e.g. DataContext.CurrentItem changed) the TextBox should update to the new value (of CurrentItem.Property). However, if I click on the RadAutoCompleteBox, the items will be filtered with the last SearchText (which will be the last item), meaning that the drop down will only show the last item (or any other items that match the SearchText too)

-----

Ideally I think that the control should clear both the SearchText and TextBox iff the trigger of the change was the Selected Item null. (i.e. Still support the backspace scenario you outlined previously, but also support SelectedItem changes)





0
Geri
Telerik team
answered on 23 Jan 2015, 12:30 PM
Hi Alex,

Thank you for the comprehensive answer. We see your point and you are correct - the scenario you outline is valid. We take it into account and shall discuss it with the Development team.

Thank you for bringing this to our attention. We updated your Telerik Points for your involvement and dedication.

Regards,
Geri
Telerik
 

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

 
0
Rémi
Top achievements
Rank 1
answered on 16 Mar 2015, 02:44 PM
Hi Telerik team,

we would like to know if this issue was solved for the 'UI for Silverlight Q3 2014' version of controls?

Actually the AutoComplete Box with SelectionMode="Single" allows to leave it with the search area filled with the value that does not match any value in the list. While posting to database the select item turns to null and user might not to notice that car the screen steel shows the search text. Is it possible at least to clear the search area when user leaves the control ?

Is there any parameter to add ?

Thank you very much in advance for response,

Anna SHTITELMAN

Sucden developpement team
0
Geri
Telerik team
answered on 17 Mar 2015, 04:56 PM
Hello Anna, 

Thank you for contacting us.

The behavior you're talking about does not come built-in in the RadAutoCompleteBox control and the SearchText stays visible even if the SelectedItem is null.

However, it can be easily achieved by implementing a custom logic which sets the SearchText to null when the focus is lost and the SearchText is not visible if it doesn't match any item in the list:

private void RadAutoCompleteBox_LostFocus(object sender, RoutedEventArgs e)
{
    var autoCompleteBox = sender as RadAutoCompleteBox;
 
        if (autoCompleteBox.SelectedItem == null)
        {
            autoCompleteBox.SearchText = null;
        }        
}

Hope this helps.

Regards,
Geri
Telerik
 

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

 
0
Rémi
Top achievements
Rank 1
answered on 18 Mar 2015, 03:49 PM
Hello Geri,

thank you very much for your response. Finally, we choose another solution that consists to use SelectionMode="Multiple" in order to bind a single value: in this case the RadAutoComplete box shows a box with the cross so there is no ambiguity between the search text and selected item value. The new behavior contains 2 points :
- when the number of selected items is greater then one, the previous selected item is deleted automatically;
- the BoxesItemTemplate is generated dynamically in order to fit the RadAutoCompleteBox size. In that case the search text is hided completely by the first selected item.
Here is complete code snippet. Feel free to add your comments.


public class SingleSelectionModeBehavior : Behavior<RadAutoCompleteBox>
 {
     /// <summary>
     /// Called when [attached].
     /// </summary>
     protected override void OnAttached()
     {
         base.OnAttached();
 
         AssociatedObject.SelectionChanged += RadAutoCompleteBox_SelectionChanged;
 
         /// Create the boxes item template
         this.CreateBoxesItemTemplate();
     }
 
     /// <summary>
     /// Handles the SelectionChanged event of the RadAutoCompleteBox control.
     /// </summary>
     /// <param name="sender">The source of the event.</param>
     /// <param name="e">The <see cref="System.Windows.RoutedEventArgs"/> instance containing the event data.</param>
     private void RadAutoCompleteBox_SelectionChanged(object sender, EventArgs e)
     {
         var autoCompleteBox = sender as RadAutoCompleteBox;
 
         int selectedItemsNumber = ((IEnumerable<object>)autoCompleteBox.SelectedItems).Count();
 
         if (selectedItemsNumber > 1)
         {
             /// When more then 1 item choosen, deletes the previous item
             object lastItem = ((IEnumerable<object>)autoCompleteBox.SelectedItems).LastOrDefault();
             autoCompleteBox.SelectedItems = null;
             autoCompleteBox.SelectedItem = lastItem;
             autoCompleteBox.SearchText = null;
         }
     }
 
     /// <summary>
     /// Creates the boxes item template.
     /// </summary>
     private void CreateBoxesItemTemplate()
     {
         StringBuilder template = new StringBuilder();
         template.Append("<DataTemplate ");
         template.Append("xmlns='http://schemas.microsoft.com/winfx/2006/xaml/presentation' ");
         template.Append("xmlns:x='http://schemas.microsoft.com/winfx/2006/xaml'");
         template.Append(">");
         template.Append("<TextBlock ");
         template.Append("Text = ");
         template.Append("\"");
         template.Append("{Binding ");
         template.Append(AssociatedObject.TextSearchPath.ToString());
         template.Append("}");
         template.Append("\"");
         template.Append(" Height=");
         template.Append("\"");
         template.Append(AssociatedObject.Height.ToString());
         template.Append("\"");
         template.Append(" Width=");
         template.Append("\"");
         template.Append((AssociatedObject.Width - 32).ToString());
         template.Append("\"");
         template.Append("></TextBlock>");
         template.Append("</DataTemplate>");
 
         AssociatedObject.BoxesItemTemplate = (DataTemplate)XamlReader.Load(template.ToString());
     }
 
     /// <summary>
     /// Called when [detaching].
     /// </summary>
     protected override void OnDetaching()
     {
         base.OnDetaching();
         AssociatedObject.SelectionChanged -= RadAutoCompleteBox_SelectionChanged;
     }
 }

Thanks and regards,

Anna SHTITELMAN,
Suden Developpement Team




0
Geri
Telerik team
answered on 20 Mar 2015, 09:00 AM
Hi Anna,

We're glad you came up with a solution for your scenario.
We have reviewed the code you posted and it seems fine. 

Regards,
Geri
Telerik
 

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

 
Tags
AutoCompleteBox
Asked by
Alex
Top achievements
Rank 1
Answers by
Geri
Telerik team
Alex
Top achievements
Rank 1
Rémi
Top achievements
Rank 1
Share this question
or