optgroup work? about ember-cli-selectize HOT 23 CLOSED

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:

{{ember-selectize
  content=posts
  selection=selectedPosts
  optionGroupPath="category"
  optionValuePath="content.id"
  optionLabelPath="content.title"}}

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']

{{ember-selectize
  content=posts
  selection=selectedPosts
  optionGroupPath="category.name"
  optionValuePath="content.id"
  optionLabelPath="content.title"}}

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

{{ember-selectize optionGroupPath="content.category"}}

#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

{{ember-selectize groupedContent=someArray}}

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.