Comments (23)
Selectize Option Groups aren't implemented. 😞
from ember-cli-selectize.
😢
from ember-cli-selectize.
👍 I would be very happy to see this implemented !!
from ember-cli-selectize.
Let's decide on an API for this.
Following Ember.Select, supposing we want to show a list of posts grouped by their category, it would be:
An example post would be:
{
id: 1,
category: 'A string',
title: 'This title will appear on select'
}
The trick here is the optionGroupPath
and the grouping of content
according to this value. Then we would just need to use selectize's API to reflect the grouping.
I would be fine with this.
from ember-cli-selectize.
For full functionality, you need:
- optgroups : list of group objects
- optgroupField which is the path to the property of the items that should be used for grouping (your optionGroupPath)
- optgroupValueField and optgroupLabelField that are the paths to the properties of the optgroups items to be used as value and label.
from ember-cli-selectize.
Ember.Select doesn't do that.
Your suggestion allows to have a separate array of optgroups. But is that really necessary?
We can derive all the needed optgroups from optionGroupPath
.
Example:
posts.mapBy('category')
// this could return ['category 1', 'category 2', 'category 3']
If you're using relationships in ember-data, no problem:
posts.mapBy('category.name')
// this could return ['category 1', 'category 2', 'category 3']
I'm not seeing any advantage of your suggestion vs this core Ember.Select's API.
Perhaps you can illustrate me that with a use case.
from ember-cli-selectize.
Your proposed design is good.
There's just a need to sort the groups in a specific order.
from ember-cli-selectize.
How wrong is the README when it mentions optgroupFunction and other optgroup features ?
from ember-cli-selectize.
Well, the optgroupFunction option is indeed passed to to selectize. However, since you can't use optgroups, it makes them pretty useless.
from ember-cli-selectize.
I'm not familiar with this component or if it would be easy, but why not something like? Obviously here, zones
is too specific but you get the idea:
{
"Category 1": [
{value: "foo", label: "Foo"}
]
}
OR
[
{
group: "Category 1",
content: [
{value: "foo", label: "Foo"}
]
}
]
from ember-cli-selectize.
We will folow Ember Select's approach, which is really flexible:
#1
scenario
Set optionGroupPath
to a path for a property to group for.
Example:
[
{
id: 1,
category: 'Nature',
title: 'This title will appear on select'
},
{
id: 2,
category: 'Nature',
title: 'This title will appear on select'
},
{
id: 3,
category: 'Another category',
title: 'This title will appear on select'
},
//...
]
optionGroupPath
would be content.category
, which would group items according to that property automatically.
like
#2
scenario
If you prefer you can group your items yourself and pass them to ember selectize.
Just set the property groupedContent
to an array with the following format:
[
{
label: 'Nature',
content: [
{
id: 1,
title: 'This title will appear on select'
},
{
id: 2,
title: 'This title will appear on select'
}
]
},
{
label: 'Another category',
content: [
//...
]
},
//...
]
and in your template
We can later control the property name of label
, and some other tweaks as well, but this should be our base ground.
from ember-cli-selectize.
I like it.
from ember-cli-selectize.
@miguelcobain in # 2 inside of content
do we still need to set the category
? Other than that it looks good!
from ember-cli-selectize.
@karellm we don't to do that. Grouping information is already provided by data structure. :)
from ember-cli-selectize.
@miguelcobain That was my thought but you left it in your example, hence my question :)
from ember-cli-selectize.
Edited to avoid confusion.
from ember-cli-selectize.
Here's a first try at optgroups
branch 318f9d4
#1
scenario is working. #2
scenario is working but changes to each content
property aren't observed.
Also, tests and README updates are missing.
If anyone wants to help or give some feedback, that's the branch to use.
from ember-cli-selectize.
Thanks @miguelcobain , I've actually got it complaining that it can't find ember-new-computed after installing from the optgroups
branch 318f9d4
Error: Could not find module `ember-new-computed` imported from `ember-cli-selectize/components/ember-selectize`
from ember-cli-selectize.
@ashrafhasson That branch was fixed and merged with master. Should be working now: https://github.com/miguelcobain/ember-cli-selectize/tree/optgroups
from ember-cli-selectize.
Can we get this merged? Master was merged into the optgroups
branch but sadly not the other way around. It would be great it this could be released soon.
from ember-cli-selectize.
You're using this branch?
from ember-cli-selectize.
master changes have been merged with this branch until I find myself some time to handle scenario 2.
from ember-cli-selectize.
Since version 0.4.0
ember-cli-selectize supports optgroups and is Ember 2.0 compatible. Than you all.
from ember-cli-selectize.
Related Issues (20)
- hideSelected and multiple don't work together HOT 1
- v0.5.8 broke the selectize styles HOT 4
- selectize.js:2151 Uncaught TypeError: Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'
- multiple mode bug? HOT 2
- Selectize changing my model property to null
- Best Practice for adding/removing on a REST/API error
- add 'readOnly' to 'generalOptions ' HOT 2
- Move selectize and sifter from Bower to NPM HOT 3
- select-item action should not fire when selection promise resolves. HOT 1
- Using multiple=true with ember-changeset-validations HOT 3
- Add Support for data-dash-attributes
- Can't install due to missing dependency HOT 1
- Label truncates when second word contains letters in the first in multiple mode HOT 1
- Tooltip for list
- 2 selectors in the same template and options visible for both of them at the same time HOT 1
- Fix breaking changes in FastBoot 1.0 HOT 1
- Migration to power select HOT 1
- DEPRECATION HOT 1
- Deprecated calls to sendAction
- ember-cli-selectize triggers a Maximum Call Stack exceeded errors
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from ember-cli-selectize.