Ideas for a Tag editor

Hello.
I've worked before with WPF but I still haven't done with Syncfusion controls for desktop so I would like some advice about how to achieve a very particular functionality that I need in an application I should develop.
My idea is having a textbox (or, more accurately, a text area) where the user writes text but when he press the comma key(or whichever is configured) the text is converted to a token like happens in many mail clients (on the address field) or multi-options selectors like in the following images:


There are several requirements that I should accomplish:
  • Tags should be aligned horizontally then downwards.
  • Tags should be draggable so the user can sort the tags
  • Clicking over the text edits the tag content. Even if the user write a new comma(s) inside the tag is splitted.
  • User can select several tags at a time using the Ctrl key. The idea is join the selected tags in order to create a new tag combining the texts (the button for this feature will be out of the control but this means that I should be able to do this from code).
  • Tags would have different colours depending on their position (i.e. 1 to 10 in red, 11 to 30 in blue, etc)
I know that it seems very difficult and I'm not asking you to develop this complete solution (or yes if you find interesting for other users) but I'm sure that with your experience you can point me towards which controls I should use and some examples where to find some ideas on how to reach my goals.
Thanks in advance for your assistance.
Toni

7 Replies

RS Ruba Shanmugam Syncfusion Team April 10, 2020 01:15 PM UTC

Hi Toni,

Greetings from Syncfusion,

Query 1: Tags should be aligned horizontally then downwards.

We have analyzed your query and created a sample with SfTextBoxExt control to achieve your requirement. Please find the sample from the below link.

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/AutocompleteSample-340744053

For more information about TextBoxExt, you can refer the below link.

UG: https://help.syncfusion.com/wpf/autocomplete/autocomplete-modes

For other queries, we are checking the possibilities with the SfTextBoxExt control and we will update you the complete details regarding this on 14th April 2020. We appreciate your patience until then.

Regards,
Ruba Shanmugam


SP Sakthivel Palaniyappan Syncfusion Team April 15, 2020 01:41 PM UTC

Hi Toni,

Currently we don't have support to achieve your requirement with SfTextboxExt and will check the feasibility to implement this feature in SfTextboxExt and update the detail on or before April 23rd , 2020.

Regards,
Sakthivel P.



SP Sakthivel Palaniyappan Syncfusion Team April 24, 2020 10:17 AM UTC

Hi Toni,

Thanks for the patience.

We would like to know that, we have logged this as feature request and please find the feedback portal below.

Feedback portal:
https://www.syncfusion.com/feedback/13800/provide-support-for-drag-the-items-edit-the-item-text-select-multiple-items-and

We will include this feature in our any of upcoming main release.

Regards,
Sakthivel P.
 



VD Victor Dienstbier May 8, 2020 08:48 PM UTC

Hi,

I really like that you are implemention this option and keep improving it :-)

Maybe you can use this for some more functions:


I really like this one but there are a lot of disadvantages...

For the TextBoxAdv I have a question:

With the WPFTagControl it is possible to seperate the Suggestion List and the Tag which are the content of the TextBox with ItemsSource and SuggestionListSource. Is this anyhow possible with the TextBoxAdv, too?

And how is it possible to add a Value to the TextBox which is not in the List and add this to the Items?

The usecase is the following:

I have for example a Custom Class "Car" with the Property "Color". Now I'd like to have a SuggestionList with the values: Yellow, Red and Green. I alway want to show these suggestions in every TextBox. But want to add different color tags to different cars and if a color is missing, I'd like to add this color to the SuggestionList.

Is this anyhow possible?


Thank you so much!

Victor




SP Sakthivel Palaniyappan Syncfusion Team May 11, 2020 11:43 AM UTC

Hi Victor,

Thanks for the details. we will consider these while we implement.

Regards,
Sakthivel P.
 



MG Michal Gregorczyk February 5, 2025 11:57 AM UTC

Hi,

sorry to response to this old thread, but i search for that funcionality, but without prepared words like here:

 Employees = new List<Employee>();

 Employees.Add(new Employee { Name = "Lucas" });

 Employees.Add(new Employee { Name = "James" });


TextBox with ability to write word separated by comma or/and return key, added as tag. I write in text box 3 text: tag1, tag2, tag3, and it will apperas as tags and will be saved into database, and when edit they returned as this tags.

It is possible?



SN Sivaranjith Nagaraj Syncfusion Team February 6, 2025 05:06 PM UTC

Hi Michal Gregorzyk,

 

Thank you for reaching out to us. We have reviewed your queries and would like to provide further clarification regarding the behavior of the WPF SfTextBoxExt control based on your requirements.

The functionality you are requesting, where typing three texts automatically converts them into tags and saves them in the database, is not available by default. However, you can achieve similar behavior by selecting items from the drop-down in Multi-Selection Token Mode. When an item is selected from the drop-down in this mode, it is automatically converted into a token within the text box.

Additionally, SfTextBoxExt provides delimiter support, allowing you to separate items using a specified delimiter character. For example, if you set a comma as the delimiter character, you can enter multiple items in the text box separated by commas.

For further details on these behaviors, we have included relevant documentation links for your reference. Kindly review them and let us know if you need any further assistance.

 

Multiple selection using tokens: https://help.syncfusion.com/wpf/autocomplete/single-and-multiple-selection#multiple-selection-using-tokens

 

Multiple tokens using delimiter: https://help.syncfusion.com/wpf/autocomplete/single-and-multiple-selection#multiple-selection-using-delimiter

 

Regards,

Sivaranjith N


Loader.
Up arrow icon