Multi-tiered filter category

[sergxp]

I'm trying to implement this library, but I need the ability to add a multi-tiered filter categories. Where the first tier opens another select box with 2nd tier options and so on... Is this currently possible or will this be a new feature?

[mistic100]

You can have two levels with optgroups #207
Or you can enabled search with bt-selectpicker ou chosen-selectpicker plugins #530

I'll keep this issue open, but clearly I don't like to have such complexity

[dholle02]

@mistic100 I realize you dislike the complexity this adds after my extensive searches on the topic, but it would make this builder much more flexible for developers. I'm in a situation where we have dozens of clients and we'd like to be able to filter for specific parameters around those clients. Adding a maximum of two additional filters would be extremely useful.

Putting each parameter we need into a separate optgroup for each client account would make the filter list extremely long (100+ options) and the UI would become un-navigable. What you have created is excellent - the best I've seen - but without nested filters, we aren't able to use the query builder to its full potential.

[njones57]

@dholle02 Did you ever figure out how to implement this? I am running into the same issue where we have ~190 filter options across 20 option groups. The single dropdown works but it would be nice to select the option group then the filter inside that group.

[mistic100]

Did you read the issue #530 I linked ?

[njones57]

Yes. While searchable single drop-down would be somewhat helpful, having a drop-down to select a option group and a second drop-down to show only the filters in that option group is what is desired.

[dholle02]

@njones57 I was never able to find a solution so we put the project on hold, which is a shame because this would have been a great implementation and really helped our end users. The searchable dropdown does not make sense for our UX and the list options we need to display, so we decided to do nothing instead of doing something that didn't make sense. I wish I had a better answer for you. Please let me know if you figure something else out in the meantime.

Perhaps @mistic100 will open his heart to our pleas and improve this already incredible tool :)

[mistic100]

As I said in the other issue, everything can be done with plugins and event hooks.

You could for example initialize your filters with optgroups and have hook on "afterCreateRuleFilters" to build two new selects from the optgroups and values, have them synchronized and update the original select (which you have hidden) when their value changes.

[qaharmdz]

@mistic100 thank for this awesome plugin!

I've been trying to solve the same issue for UI autocomplete for few days; and finally I found a solution. I hope this can help everyone who looking for custom filter creation.

In summary, filter input return typical html in one container and trigger a change when final selection is made. Filter valueGetter is where we get the final selected value to be returned.

Part 1: Create filter with custom input and valueGetter

{
  id: 'ui_autocomplete',
  label: 'Autocomplete Selection',
  type: 'integer',
  default_value: [],
  operators: ['in', 'not_in'],
  input: function(rule, input_name) {
    return getAutocomplete(rule['id'], input_name);

    /*
    // getAutocomplete() return:
    <div class="autocomplete_container"> 
      <input type="text" id="autocomplete" placeholder="autocomplete" class="ac_' + rule_id + '">
      <div class="ac_select_container ac_' + rule_id + '_select">
        <div>
          Selected item label

           // input we get the value from, so it's doesn't matter if there is lot of form input
          <input type="hidden" name="' + input_name + '" value="...">
        </div>
      </div>
    </div>
     */
  },
  valueGetter: function(rule) {
    var operator  = rule.operator;
    var container = rule.$el.find('.rule-value-container');
    var value     = [];

    // My case custom value getter
    for (var i = 0; i < operator.nb_inputs; i++) {
      container.find('[name=' + rule.id + '_value_' + i + ']').each(function() {
        value.push(parseInt($(this).val()));
      });
    }

    return value;
  }
}

Part 2: What important is the trigger change

$('#autocomplete').autocomplete({
  source: function(request, response) {
    return []; // dynamic from db
  },
  select: function(item) {
    // Insert selected to ac_select_container type input:hidden here

    // Important to trigger "valueGetter" 
    // Ref: https://querybuilder.js.org/api/core.js.html#line-711
    $('.autocomplete_container').trigger('change');
  }
});

Part 3: My output of $('#builder').queryBuilder('getRules');

{
  "condition": "AND",
  "rules": [
    {
      "id": "ui_autocomplete",
      "field": "ui_autocomplete",
      "type": "integer",
      "operator": "in",
      "value": [ // populated by "valueGetter" from hidden input
        34,
        40,
        47
      ]
    }
  ],
  "valid": true
}

[chiragkanhasoft]

is there any progress on this multi-tier dropdown point ?

[dejmsi]

@mistic100 how does it look, is it still planning?