How to add optgroups from json data?? about angular-selectize HOT 18 CLOSED

The suggestion is OK, I suppose.
As a workaround, you can try and use the Optgroups API to add them later.
(Haven't tried.)

from angular-selectize.

@PhiLhoSoft thanks for workaround sugestion I just added functionality only problem I have is implementing id becouse addOptionGroup needs that id Can u help me with this I just created gist with code that should work --- https://gist.github.com/atheleron/03afae07a5b180c6c265

from angular-selectize.

Can you please set up a Plunker (or Fiddle or whatever) with your code, corresponding HTML and client code, showing it in action?

from angular-selectize.

I just created a plunk I head bit trouble with 2 angular-selectize scripts on same page so I did some changes to suppot both directives selectize and optselect but now its ok check the preview on plank http://plnkr.co/edit/2JG0EEKbLQnpVbXjWpLg?p=info

from angular-selectize.

OK, thanks. At first, I was a bit confused, wondering why you have so much files.
I finally made sense out of that... :-D
Note: I would have used a CDN for Selectize itself, using the standalone version, avoiding to explicitly add the two dependencies. I used <script src="//cdnjs.cloudflare.com/ajax/libs/selectize.js/0.12.1/js/standalone/selectize.js"></script> in a Plunk. The non-minified version eases debugging... :-)

Now, I find your Plunk well made, informative and illustrative. Well done.

I haven't fully analyzed the issue yet, but by glancing at the code, I think the main problem is that optgroup isn't available from the start of the controller in the atheleron version, while it is in the machineboy one.
angular-selectize binds its options but actually needs them a init (link() call) time, so they cannot be loaded in a delayed way. I suppose it is a similar issue with optgroup, but it is just an intuition right now. It needs a more thorough investigation.

from angular-selectize.

It fails when calling addOptionGroup which is defined as function(id, data), but you call it as selectize.addOptionGroup(scope.optgroups);, ie. only one parameter.
Moreover, it is called in onInitialize(), so scope.optgroups isn't set yet.

from angular-selectize.

Some errors in your code: the atheleron version doesn't define an option group, like the machineboy version. I added it. As I pointed out, you treat addOptionGroup like addOption, hoping it will process an array, but it is here only a call for one group. So I changed your calls with a map over the array.

http://plnkr.co/edit/TRpM8N3WceevLAAZE1Ri

Seems it works. Again, it is a quick hack / fix, perhaps I overlooked some things.

from angular-selectize.

wooohooooo it woooorks :) :) :)

@PhiLhoSoft First I would like to thank you so much for your effort and support you give me.

I did at first used selectize standalone version I dont know why but select input didnt show up so I used one that required microplugin and sifter

In theory options and optgroups are basicly the same so I said ok lets clone this options and lets try to implement addOptionGroup but since I was cloned generateOptions to generateGroups function witch returns an array I was like why do I need id I mean there is optgroupField witch tells you what id to use to connect options and optgroupValueField that is id of optgroup so why do I realy need that id. then I just added json string to it in hope it will resolve but it didnt. So I was thinking I shoudld make better array and somehow tell addOptionGroup to use id of scope.options but how to get it ?? this is where I stuck. I didnt realise I should make reversable array man that is genious you can call it a hack or fix whatever you call it maybe is not the best solution but it works exactly as it should be its perfect.

Maybe in future we can create some function instead call an array on it each time. I was searching inside of brianreavis/selectize.js to find how he did optgroups but that is to much complex code and requires lots of reading hehe I did find some callbacks that are not inside of documentation like onOptionGroupAdd onOptionGroupRemove and onOptionGroupClear and some other stuff just by searching "optionGroup" maybe it can help if we need to make optgroup function that will also beautify more code and after we can send a @machineboy2045 pull request as optgroups feature functionality but what a heck important is that it works now!! :) :)

from angular-selectize.

I notice there is a bug with _onChange function_ when you select "Game of Thrones" and then
open selectize input list again instead optgroup name there is an id number instead of label but if I commentout onChange function that isn't happening but when I try to submit form without onChange function in my case value is not submitted because value is empty.. So why value changes optgroupLabelField to optgroupValueField it should just change current value of select box not the title??

from angular-selectize.

I updated the pliunk to include an onChange function, and I can reproduce the issue. Actually, the first issue, visible without onChange, is that the Game of Thrones option should be under the group of same name. Not sure why it is not, yet.

from angular-selectize.

I cleaned up a bit the code, removing ngModel from the optgroup generation, or automatic generation of optgroups from a string, as these don't make sense (in the latter case, the optgroupField is invalid).
Opt groups are broken, I am debugging it, but gotta go, Will code back to it later.

from angular-selectize.

hahaha this is crazy or what ok I solved it!!! previous code works fine don't need to remove anything the only problem was naming of _id_ value i just changed _optgroupValueField: id to oid_ so its diferent from _valueField_ and somehow inside root json there is oid with same value as id hahaha and it works optgroupValueField can be named as you wish it will just clone id number of json and it will appended to it here is plunk check Json Response in preview you will see oid http://plnkr.co/edit/gW8gqojbFYaxwgu7vAms?p=preview

from angular-selectize.

I am sorry, but I don't understand your last plunk.

Apparently, you use the same data to define the options and the option groups, which doesn't make much sense for me.
I still think the opt group data should be separate, as I shown in my plunk. Although perhaps they can be loaded asynchronously too.

But you made me take a second look. Actually, I found out that the values defined in the optgroupValueField property must match the values in the optgroupField defined in the options.
In other words, in my plunk, ogid's values in the optgroup definitions must match values of parent_id in the option definitions. In short, there was no need for a parent_id field in the optgroup definition.

I think that null parent_id isn't a valid value, though.

Note: my previous version was calling selectize.addOptionGroup(g.id, g); which is incorrect, supposing an id field was defined. Now it uses selectize.addOptionGroup(g[config.optgroupValueField], g);.
And I still think the code I removed isn't useful: you will rarely refer to a group by its full name in the options, I think. And you won't define optgroups from the model, too (unlike selected options).

from angular-selectize.

OK, if you want to load groups dynamically as well, you can.
I updated the plunk, using modified Json data, separating group definitions from options (and changing null parent_id to 11).
Changed the machineboy code as well. Both work fine, now.
Still at http://plnkr.co/edit/TRpM8N3WceevLAAZE1Ri?p=preview

from angular-selectize.

Last note: I mentioned that the wrapper should call registerOption instead of addOption, to distinguish user tags from initial tags. Likewise, we should call registerOptionGroup instead of addOptionGroup, because it frees us from having to specify an id (which is stored back to the data anyway) and doesn't trigger an event (not useful initially).

from angular-selectize.

Thanks a lot PhiLhoSoft !
You save us some long hours (dev) with your modified version for optgroups !

from angular-selectize.

I've added an example of optgroups to the plnkr demo. But the directive still does not support dynamic optgroups. This might be a good feature to add in the future.

from angular-selectize.

is dynamic optgroups supported now?

from angular-selectize.