Custom AutoCompleteSuggestHelper

9 posts, 2 answers
  1. Sandor
    Sandor avatar
    15 posts
    Member since:
    Jan 2018

    Posted 28 Nov 2018 Link to this post

    Hi!

    I need help to use our custom DropDownPopupForm (custom means that we have items in the list and after the DropDownListElement we have one RadButtonElement) for auto completion feature too.
    Our custom DropDownList works as expected, when I click on the downward arrow then it shows our customized DropDownPopupForm, but when I start typing into the DropDownList then suggestions are not formatted the same way as in the previous scenario (they are not formatted at all).

    I found that the AutoCompleteSuggestHelper class has the following line:
    "internal bool isSuggestMode = false;//indicates this as Suggest DropDownList e.g. this is a second drop down"

    So if I try to use our custom DropDownListElement, then I can not set this field from outside the package.

     

    Thank you,
    Sandor

     

     

  2. Dess | Tech Support Engineer, Sr.
    Admin
    Dess | Tech Support Engineer, Sr.  avatar
    3192 posts

    Posted 29 Nov 2018 Link to this post

    Hello, Sandor,    

    Note that RadDropDownList has two different drop downs. The first one is the standard popup which displays the items added in the Items collection. It is shown when you click the arrow button. The second one is displayed when you type in the editable part and the suggestions are shown. Hence, if you format the items in the standard drop down, it won't affect the autocomplete items. 

    You can access the drop down for the AutoCompleteSuggestHelper by the DropDownListElement.AutoCompleteSuggest.DropDownList property. Then, you can subscribe to its VisualItemFormatting event and customize the items according to your custom requirement:

    public RadForm1()
    {
        InitializeComponent();
        for (int i = 0; i < 100; i++)
        {
            this.radDropDownList1.Items.Add("Item" + i);
        }
     
        this.radDropDownList1.AutoCompleteMode = AutoCompleteMode.Suggest;
        this.radDropDownList1.DropDownListElement.AutoCompleteSuggest.DropDownList.VisualItemFormatting += DropDownList_VisualItemFormatting;
    }
     
    private void DropDownList_VisualItemFormatting(object sender, Telerik.WinControls.UI.VisualItemFormattingEventArgs args)
    {
        args.VisualItem.DrawFill = true;
        args.VisualItem.BackColor = Color.Yellow;
        args.VisualItem.GradientStyle = Telerik.WinControls.GradientStyles.Solid;
    }

    I hope this information helps. If you need any further assistance please don't hesitate to contact me. 

    Regards,
    Dess | Tech Support Engineer, Sr.
    Progress Telerik
    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
  3. Sandor
    Sandor avatar
    15 posts
    Member since:
    Jan 2018

    Posted 29 Nov 2018 in reply to Dess | Tech Support Engineer, Sr. Link to this post

    Hi Dess!

    Thank you for your answer, but what if I need a button after all list's elements too in the DropDownList of AutoCompleteSuggestHelper? Just like that on the picture that I sended in my first comment.

    Best Regards,
    Sandor
  4. Answer
    Dess | Tech Support Engineer, Sr.
    Admin
    Dess | Tech Support Engineer, Sr.  avatar
    3192 posts

    Posted 29 Nov 2018 Link to this post

    Hello, Sandor,    

    You can create a custom AutoCompleteSuggestHelper and customize its popup form in order to add a RadButton. You can find below a sample code snippet which result is illustrated in the provided screenshot:

    public RadForm1()
    {
        InitializeComponent();
        for (int i = 0; i < 100; i++)
        {
            this.radDropDownList1.Items.Add("Item" + i);
        }
     
        this.radDropDownList1.AutoCompleteMode = AutoCompleteMode.Suggest;
        this.radDropDownList1.DropDownListElement.AutoCompleteSuggest = new CustomAutoCompleteSuggestHelper(this.radDropDownList1.DropDownListElement);
     
        this.radDropDownList1.DropDownListElement.AutoCompleteSuggest.DropDownList.VisualItemFormatting += DropDownList_VisualItemFormatting;
    }
     
    private void DropDownList_VisualItemFormatting(object sender, Telerik.WinControls.UI.VisualItemFormattingEventArgs args)
    {
        args.VisualItem.DrawFill = true;
        args.VisualItem.BackColor = Color.Yellow;
        args.VisualItem.GradientStyle = Telerik.WinControls.GradientStyles.Solid;
    }
     
    public class CustomAutoCompleteSuggestHelper : AutoCompleteSuggestHelper
    {
        public CustomAutoCompleteSuggestHelper(RadDropDownListElement owner) : base(owner)
        {
        }
     
        protected override RadDropDownListElement CreateDropDownElement()
        {
            return new CustomRadDropDownListElement();
        }
    }
     
    public class CustomRadDropDownListElement : RadDropDownListElement
    {
        protected override RadPopupControlBase CreatePopupForm()
        {
            DropDownPopupForm form = base.CreatePopupForm() as DropDownPopupForm;
            StackLayoutElement stack = new StackLayoutElement();
     
            stack.Orientation = Orientation.Horizontal;
     
            RadButtonElement button1 = new RadButtonElement();
            button1.Text = "Button1";
            button1.StretchHorizontally = false;
            button1.StretchVertically = false;
     
            stack.Children.Add(button1);
     
            DockLayoutPanel.SetDock(button1, Telerik.WinControls.Layouts.Dock.Bottom);
            button1.StretchHorizontally = true;
            form.SizingGripDockLayout.Children.Insert(1, button1);
            return form;
        }
    }



    Should you have further questions please let me know.

    Regards,
    Dess | Tech Support Engineer, Sr.
    Progress Telerik
    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
  5. Sandor
    Sandor avatar
    15 posts
    Member since:
    Jan 2018

    Posted 30 Nov 2018 in reply to Dess | Tech Support Engineer, Sr. Link to this post

    Hi Dess!

    That's exactly what I needed, thank you!

    Best Regards,
    Sandor

  6. Sandor
    Sandor avatar
    15 posts
    Member since:
    Jan 2018

    Posted 11 Dec 2018 Link to this post

    Hello Dess!

    I found a strange behavior, while using my custom DropDownList.
    Repro:
    1. Click on the arrow button -> The list elements appear;

    2. I start typing -> The list elements still there and the AutoSuggest's list elements appear too, so I have two lists in the same moment.
    (See the attached image)

  7. Sandor
    Sandor avatar
    15 posts
    Member since:
    Jan 2018

    Posted 11 Dec 2018 in reply to Sandor Link to this post

    .....and my question is: What do I make wrong? What is the reason of this?

    Thank you,
    Sandor
  8. Answer
    Dess | Tech Support Engineer, Sr.
    Admin
    Dess | Tech Support Engineer, Sr.  avatar
    3192 posts

    Posted 11 Dec 2018 Link to this post

    Hello, Sandor,    

    You are not doing anything wrong. The observed behavior with the second popup is by design. For reference, the MS ComboBox control has the same behavior. You can close the main popup when the auto complete gets opened.
      
    public Form1()
    {
        InitializeComponent();  
        this.radDropDownList1.AutoCompleteMode = AutoCompleteMode.Suggest;
        this.radDropDownList1.DropDownListElement.AutoCompleteSuggest.DropDownList.PopupOpened += DropDownList_PopupOpened;
    }
     
    private void DropDownList_PopupOpened(object sender, EventArgs e)
    {
        this.radDropDownList1.CloseDropDown();
    }

    I hope this information helps. If you need any further assistance please don't hesitate to contact me. 

    Regards,
    Dess | Tech Support Engineer, Sr.
    Progress Telerik
    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
  9. Sandor
    Sandor avatar
    15 posts
    Member since:
    Jan 2018

    Posted 11 Dec 2018 in reply to Dess | Tech Support Engineer, Sr. Link to this post

    Thank you, it works!
Back to Top