cloud tag control in multi-select textbox lookup

[browserfiles]

Thanks again for taking a look.

I was wondering how the textbox (or the textarea) could be onfiguerd as a tag control. The current setup is great selecting items, but removing an item (text item) takes a lot of backspace strokes (very awkward when using mobile devices).

I was trying to make things look like the following:
tagcloud.JPG

As you can see, to remove an item users just need to tap on the "x" button. Is there anyway we can configure the controls like this?

Thank you very very much in advance

[kotinkarwak]

Re: cloud tag control in multi-select textbox lookup

Just learnt of this yesterday. There is a property "In-control button definition". Give it a name, and the click to effect the following command

{this}.value = '';

at least this is for the textbox only, textarea not sure.


Update: Think was off the mark on what the request was but heck, nice to know this too I guess...

[TheSmitchell]

Re: cloud tag control in multi-select textbox lookup

I think using a textarea or text box is incorrect. There's a "contenteditable" attribute you can add to block elements in HTML. It has pretty good support and will let add the HTML styling and events necessary to handle display and removal of your tags.

I found most of this information on StackOverflow in this thread. http://stackoverflow.com/questions/1...a-using-jquery

The first answer includes two JS fiddles, the first of which will add tags when the spacebar is pressed in textbox1 and add them to textbox2: http://jsfiddle.net/hungerpain/Wky2Z/

[Davidk]

Re: cloud tag control in multi-select textbox lookup

You haven't said how you're going to populate the control... or process the selections. Depending on how you're going to work with the control then using the List control may be a good solution. It's a bit "heavy" but will give you better looking results than what you've included as a sample (ie no staggered row lengths). You can fill the list easily and process each selection easily to remove it... and then easily process the remaining selections.

[CharlesParker]

Re: cloud tag control in multi-select textbox lookup

Why couldn't you simply have a textbox and two buttons in a merge? The onclick events should be able to handle the needs. One button could set the tag and the other delete it...
Still another could create the 3 new controls in a list...or just a textbox and a single button in a merge to appear as your current images...or whatever they are.

I know you can eliminate the space between the controls to make this appear as a single seamless button.
As far as editing or changing it thats where the 3rd button could come in, like a reset or "clear"

Might make for a better mobile exp

[browserfiles]

Re: cloud tag control in multi-select textbox lookup

Hi Sarah, that was a good article you pointed out using attributes from the textarea. Unfortunately my java-script skills are crappy at best. I did see a good plugin - https://select2.github.io - I'm looking at it so i won't need to reinvent the wheel (me=lazy programmer).

Hey David, I've made a small video how to select the items. I made this from a .net third party component but I'm trying to port over Alpha if all works out:
https://youtu.be/AOCR8t_C2aU
It seems the textbox / textarea in alpha is a good candidate to start on this since it has the auto-suggest lookup already built in.

Hi Charles, that sounds great too but the items are selected from the auto-suggest list so i guess i would need to put more creativity on that.

Thank you everyone for your replies! I hope i can get more.

[TheSmitchell]

Re: cloud tag control in multi-select textbox lookup

Hi Sarah, that was a good article you pointed out using attributes from the textarea. Unfortunately my java-script skills are crappy at best. I did see a good plugin - https://select2.github.io - I'm looking at it so i won't need to reinvent the wheel (me=lazy programmer).

Fair enough! ;)

The Tagging box in that example is cool. I think some people get confused. Most "tag" boxes like the one shown in Select2 aren't textboxes. They're styled div or span elements that look like textbox or text area elements. The contenteditable attribute mentioned was applied to a DIV:

<div contenteditable="true"></div>

Anyway, I was thinking more about your needs and thought that a button list might be useful. You could have a textbox for adding new tags and clicking on the tag name in the button list would delete the tag. Add the tag would create a new button in the button list. Depending on how you're storing the tags will dictate how you'll need to store them "behind the scenes", if that's even necessary. If tags are individual line items in a database, you could use a list control to add/delete them. Just style the tag name as a button and add a delete action to the field's onClick event in the list control.

<button class="myButtonStyle">{TAG_NAME} X</button>

Are you storing tags as a comma delimited list in a single field? Or are they stored as individual records?

[Clint2]

Re: cloud tag control in multi-select textbox lookup

Thanks again for taking a look.

I was wondering how the textbox (or the textarea) could be onfiguerd as a tag control. The current setup is great selecting items, but removing an item (text item) takes a lot of backspace strokes (very awkward when using mobile devices).

I was trying to make things look like the following:
[ATTACH=CONFIG]40883[/ATTACH]

As you can see, to remove an item users just need to tap on the "x" button. Is there anyway we can configure the controls like this?

Thank you very very much in advance

Hi, have you thought about using a grid with a text box that had autosuggest enabled with a button to the right to touch to clear that entry?

You could then use that list of records as a source to filter another table.

So, a grid with one text box and one button. On that button you could put a pretty X as an image. :)

[Davidk]

Re: cloud tag control in multi-select textbox lookup

I got pretty close with this. I don't think there is a built-in easy way in Alpha to mimic the control you're using... but this gets close. Here's a video and the component. The dropdownbox control and ajax callback will need modification because they're using my data source and table names.

BuildSelectedList.PNG

https://youtu.be/WUdU8xZSV54

[Clipper87]

Re: cloud tag control in multi-select textbox lookup

I don't think there is a built-in easy way in Alpha to mimic the control you're using...

Sounds like a good idea for a feature suggestion to Selwyn

[Davidk]

Re: cloud tag control in multi-select textbox lookup

I don't think so. Although the specific control, as shown, isn't available in Alpha, I'd use a List control to accomplish the same thing. You're just building up a list from a filtered dropdown.

[browserfiles]

Re: cloud tag control in multi-select textbox lookup

I got pretty close with this. I don't think there is a built-in easy way in Alpha to mimic the control you're using... but this gets close. Here's a video and the component. The dropdownbox control and ajax callback will need modification because they're using my data source and table names.

[ATTACH=CONFIG]40897[/ATTACH]

https://youtu.be/WUdU8xZSV54

That was awesome david! (david = alphagod) I'm trying this out now when i get home (soooo excited)

[browserfiles]

Re: cloud tag control in multi-select textbox lookup

Finally got it running. Your tutorial definitely pointed me in the right direction david (aka alphagod). Here s what I built so far:

https://youtu.be/xIZsqY3UvDw

I'm currently pulling the data from xbasic because I would need in some way to persist data from server. I hope I can find a way to play with this client side. Thanks again. It was a big help.