AutoCompleteBox Selected Value

4 posts, 0 answers
  1. Lance
    Lance avatar
    7 posts
    Member since:
    Feb 2012

    Posted 18 Nov 2014 Link to this post

    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); 
    }

  2. Ralitsa
    Admin
    Ralitsa avatar
    176 posts

    Posted 21 Nov 2014 Link to this post

    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
     

    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.

     
  3. UI for WinForms is Visual Studio 2017 Ready
  4. Lance
    Lance avatar
    7 posts
    Member since:
    Feb 2012

    Posted 21 Nov 2014 in reply to Ralitsa Link to this post

    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.
  5. Ralitsa
    Admin
    Ralitsa avatar
    176 posts

    Posted 26 Nov 2014 Link to this post

    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
     

    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.

     
Back to Top