RadAutoCompleteTextBox - Multi Column

[Terry]

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

[Svett]

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

[Terry]

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

[Svett]

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

[Terry]

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

[Svett]

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