AutoCompleteBox Selected Value

[Lance]

I have an AutoCompleteBox with a value member of ProductID and a display member of Description. I would like to allow the users to auto-search by the Description field, but when they select an item from the list, I would like the AutoComplete textbox to show the ProductID in the text block when selected. Here is the example code I am using:

radAutoCompleteProductId.AutoCompleteDisplayMember = "Description";
radAutoCompleteProductId.AutoCompleteValueMember = "ProductID";           
radAutoCompleteProductId.ListElement.VisualItemFormatting += OnListElementVisualItemFormatting;
radAutoCompleteProductId.DropDownMinSize = new Size(400, 300);
radAutoCompleteProductId.AutoCompleteMode = AutoCompleteMode.Suggest;  

private void OnListElementVisualItemFormatting(object sender, VisualItemFormattingEventArgs e)
{
       var dataItem = e.VisualItem.Data;
       e.VisualItem.Text = string.Format("{1} ({0})", dataItem.Text, dataItem.Value); 
}

[Ralitsa]

Hi Lance,

Thank you for contacting us. 

You can replace the default TokenizedTextBlock with custom one to achieve your goal. Here is the code snippet: 

class MyTokenizedTextBlockElement : TokenizedTextBlockElement
    {
        protected override Type ThemeEffectiveType
        {
            get
            {
                return typeof(TokenizedTextBlockElement);
            }
        }

        public override string Text
        {
            get
            {
                return this.ContentElement.Text;
            }
            set
            {
                base.Text = value;
                this.ContentElement.Text = value.ToString();
            }
        }
    }

You need to subscribe to the CreateTextBlock event to replace the default text block: 

void radAutoCompleteBox1_CreateTextBlock(object sender, CreateTextBlockEventArgs e)
       {
           if (e.TextBlock is TokenizedTextBlockElement)
           {
               e.TextBlock = new MyTokenizedTextBlockElement();
           }
       }

Finally subscribe to the TextBlockFormatting event and set the Text property to token value: 

void radAutoCompleteBox1_TextBlockFormatting(object sender, Telerik.WinControls.UI.TextBlockFormattingEventArgs e)
        {
            TokenizedTextBlockElement token = e.TextBlock as TokenizedTextBlockElement;
            if (token != null && token.Item.Value != null)
            {
                token.DrawText = false;
                token.Text = string.Format("({0})", token.Item.Value);
            }
        }

Please refer to attached project which demonstrates you the implementation. 

You can refer to article Creating Custom Blocks for more information about custom custom text blocks.  

Should you have further questions, I would be glad to help.​

Regards,
Ralitsa
Telerik

 

 

[Lance]

Thank you for the reply Ralitsa. This works great, but I do have one issue. When my form loads, I sometimes need to "pre-select" some items in teh AutoCompleteBox. I do this by passing a delimited string to the control's text property, for example (Product1; Product2). 

When this custom TokenizedTextBlock fires, my pre-selected items come out like jibberish. It's like it is writing over top of itself. Any idea how to correct this?

I have attached a screenshot of the issue I'm describing above.

[Ralitsa]

Hi Lance,

Thank you for your reply. 

I was able to reproduce your issue if I add token item which is not from data base. In that case you can use the following code snippet to avoid it in the handler of the TextBlockFormatting event: 

void radAutoCompleteBox1_TextBlockFormatting(object sender, Telerik.WinControls.UI.TextBlockFormattingEventArgs e)
{
    TokenizedTextBlockElement token = e.TextBlock as TokenizedTextBlockElement;
    if (token != null && token.Item.Value != null)
    {
        token.DrawText = false;
        token.Text = string.Format("({0})", token.Item.Value);
    }
    //if item is not from data source and hasn`t value
    if (token != null && token.Item.Value == null)
    {
        token.DrawText = false;
        token.Text = string.Format("{0}", token.Item.Text);
    }
}

In attachment you can find the modified project. 

I hope this helps. Let me know if I can assist you further.

Regards,
Ralitsa
Telerik