RadAutoCompleteTextBox - Multi Column

6 posts, 0 answers
  1. Terry
    Terry avatar
    39 posts
    Member since:
    Sep 2007

    Posted 21 Jun 2012 Link to this post

    Hello,

    Is it possible to have the AutoCompleteText box display mult-columns, eg
    USD  |  US Dollars
    GBP  |  British Pounds
    EUR  |  Euro's

    Also is it possible to have the auto complete work on both columns so I can start to type GBP or  Briti... and it will work as per single items?

    Thanks

    Terry
  2. Svett
    Admin
    Svett avatar
    728 posts

    Posted 25 Jun 2012 Link to this post

    Hello Terry,

    You can achieve your scenario by extending the RadAutoComplteBox. You should create a custom list element where you can alter the filtering logic. In addition, you should create a custom list element to represent an item with two columns:

    public class CustomRadAutoCompleteBox : RadAutoCompleteBox
        {
            protected override RadTextBoxControlElement CreateTextBoxElement()
            {
                return new CustomAutoCompleteBoxElement();
            }
     
            public override string ThemeClassName
            {
                get
                {
                    return typeof(RadAutoCompleteBox).FullName;
                }
                set
                {
                    base.ThemeClassName = value;
                }
            }
        }

    public class CustomAutoCompleteBoxElement : RadAutoCompleteBoxElement
        {
            protected override Type ThemeEffectiveType
            {
                get
                {
                    return typeof(RadAutoCompleteBoxElement);
                }
            }
     
            protected override RadTextBoxListElement CreateListElement()
            {
                return new CustomTextBoxListElement();
            }
        }

    public class CustomTextBoxListElement : RadTextBoxListElement
        {
            public CustomTextBoxListElement()
            {
                this.CreatingVisualItem += this.OnCreatingVisualItem;
            }
     
            private void OnCreatingVisualItem(object sender, CreatingVisualListItemEventArgs args)
            {
                args.VisualItem = new CustomVisualItem();
            }
     
            protected override Type ThemeEffectiveType
            {
                get
                {
                    return typeof(RadListElement);
                }
            }
     
            protected override bool AutoCompleteFilter(RadListDataItem item)
            {
                if (this.AutoCompleteMode != System.Windows.Forms.AutoCompleteMode.Suggest)
                {
                    return base.AutoCompleteFilter(item);
                }
     
                RadTextBoxAutoCompleteDropDown popup = this.ElementTree != null ?
                    this.ElementTree.Control as RadTextBoxAutoCompleteDropDown : null;
     
                if (popup != null && popup.OwnerElement.ElementTree.Control.Site != null)
                {
                    return true;
                }
     
                if (string.IsNullOrEmpty(this.PatternText))
                {
                    return false;
                }
     
                string itemText = (item.Text ?? string.Empty).ToUpperInvariant();
                string[] splittedWords = itemText.Split(new char[] { ' ' }, StringSplitOptions.RemoveEmptyEntries);
                string patternText = this.PatternText.ToUpperInvariant();
     
                foreach (string word in splittedWords)
                {
                    if (word.StartsWith(patternText))
                    {
                        return true;
                    }
                }
     
                return false;
            }
        }

    public class CustomVisualItem : RadListVisualItem
        {
            private StackLayoutElement element;
            private LightVisualElement firstColumn;
            private LightVisualElement lastColumn;
            private LightVisualElement separator;
     
            protected override void CreateChildElements()
            {
                base.CreateChildElements();
                this.element = new StackLayoutElement();
                this.element.StretchHorizontally = true;
                this.element.StretchVertically = true;
                this.firstColumn = new LightVisualElement();
                this.firstColumn.StretchHorizontally = false;
                this.firstColumn.MinSize = new Size(40, 0);
                this.lastColumn = new LightVisualElement();
                this.lastColumn.TextAlignment = ContentAlignment.MiddleLeft;
     
                this.separator = new LightVisualElement();
                this.separator.StretchHorizontally = false;
                this.separator.MinSize = new System.Drawing.Size(2, 0);
                this.separator.BackColor = Color.FromArgb(156, 189, 232);
                this.separator.GradientStyle = GradientStyles.Solid;
                this.separator.DrawText = false;
                this.separator.DrawFill = true;
     
                this.element.Children.Add(this.firstColumn);
                this.element.Children.Add(this.separator);
                this.element.Children.Add(this.lastColumn);
                this.Children.Add(this.element);
            }
     
            protected override Type ThemeEffectiveType
            {
                get
                {
                    return typeof(RadListVisualItem);
                }
            }
     
            public override void Synchronize()
            {
                base.Synchronize();
                this.DrawText = false;
                this.firstColumn.Text = Convert.ToString(this.Data.Value);
                this.lastColumn.Text = this.Data.Text;
            }
     
        }

    Let me know if you need further assistance. Kind regards,
    Svett
    the Telerik team
    RadControls for WinForms Q2'12 release is now live! Check out what's new or download a free trial >>
  3. UI for WinForms is Visual Studio 2017 Ready
  4. Terry
    Terry avatar
    39 posts
    Member since:
    Sep 2007

    Posted 04 Jul 2012 Link to this post

    Hi Svett,

    Thanks for this, but I'm being a real thicky - how do I instanstiate it and populate it with my two columns of possible data?

    Many thanks
    Terry

  5. Svett
    Admin
    Svett avatar
    728 posts

    Posted 05 Jul 2012 Link to this post

    Hello Terry,

    You should create a custom grid editor to embed the RadAutoCompleteBox in RadGridView. Presently, you should use the RadHostItem to do that because of some painting glitches. You should use the following code snippets:

    public class RadAutoCompleteBoxEditor : BaseGridEditor
    {
        protected override RadElement CreateEditorElement()
        {
            return new RadAutoCompleteBoxItem();
        }
     
        protected RadAutoCompleteBox AutoCompleteBox
        {
            get { return (this.EditorElement as RadAutoCompleteBoxItem).AutoCompleteBox; }
        }
     
        public override object Value
        {
            get
            {
                return this.AutoCompleteBox.Text;
            }
            set
            {
                this.AutoCompleteBox.Text = Convert.ToString(value);
            }
        }
    }
     
    public class RadAutoCompleteBoxItem : RadHostItem
    {
        public RadAutoCompleteBoxItem()
            : base(new RadAutoCompleteBox())
        {
            this.RouteMessages = false;
        }
     
        public RadAutoCompleteBox AutoCompleteBox
        {
            get { return this.HostedControl as RadAutoCompleteBox; }
        }
    }

    Then you should use the EditorRequired event to replace the default editor:
    private void radGridView1_EditorRequired(object sender, EditorRequiredEventArgs e)
    {
        if (e.EditorType == typeof(RadTextBoxEditor))
        {
            e.EditorType = typeof(RadAutoCompleteBoxEditor);
        }
    }

    Regards,
    Svett
    the Telerik team
    RadControls for WinForms Q2'12 release is now live! Check out what's new or download a free trial >>
  6. Terry
    Terry avatar
    39 posts
    Member since:
    Sep 2007

    Posted 05 Jul 2012 Link to this post

    Hi Svett,

    You are being really kind and providing me with great code I'm sure - But I just don't know how I can populate it with my 2 columns and data as per the original question
    eg.
    USD | US Dollars
    GBP | British Pounds
    EUR | Euro's

    Would be able to provide a working example project that I can get my teeth into?

    Many thanks

    Terry

  7. Svett
    Admin
    Svett avatar
    728 posts

    Posted 09 Jul 2012 Link to this post

    Hi Terry,

    I am enclosing a sample project, which demonstrates how you should adopt all code snippets that I have previously sent. 

    Let me know if you need further assistance.

    All the best,
    Svett
    the Telerik team
    RadControls for WinForms Q2'12 release is now live! Check out what's new or download a free trial >>
Back to Top
UI for WinForms is Visual Studio 2017 Ready