feature request: plugin based on operator

[jsdev]

right now plugins defined at the filters level, we have a use case where we would like to load plugin based on operator.

for instance equal might be selectize (if data source, but maxItems: 1) but if in, not in, no maxItems

if no data source such as a documentNumber, no selectize, but if IN, NOT IN operator could use selectize with create true option and empty (or no) data source.

[mistic100]

You can use events :

$('#builder').on('afterUpdateRuleFilter.queryBuilder afterUpdateRuleOperator.queryBuilder',
  function(rule) {
    if (rule.filter.id == 'something' && rule.operator.type == 'something') {
      var $input = rule.$el.find($.fn.queryBuilder.constructor.selectors.rule_value);
      // ensure cleanup of previous plugin applied
      // apply new plugin
    }
  }
);

[lammia07]

Hi. I also would really like it if you could provide such a function. Unfortunately I can't use your approach with the event on the builder, because I'm generating the filter object dynamically. And I don't want to statically add this event every time.

regards Michael

[mreishus]

@mistic100 , can you provide an example of how to destroy and how to initialize a plugin, (say, selectpicker) here? I don't know QB well enough to figure it out. :)

$('#builder').on('afterUpdateRuleFilter.queryBuilder afterUpdateRuleOperator.queryBuilder',
  function(rule) {
    if (rule.filter.id == 'something' && rule.operator.type == 'something') {
      var $input = rule.$el.find($.fn.queryBuilder.constructor.selectors.rule_value);
      // ensure cleanup of previous plugin applied
      // apply new plugin
    }
  }
);

[PatruSorin]

@mistic100 , can you provide an example of how to destroy and how to initialize a plugin, (say, selectpicker) here? I don't know QB well enough to figure it out. :)

$('#builder').on('afterUpdateRuleFilter.queryBuilder afterUpdateRuleOperator.queryBuilder',
  function(rule) {
    if (rule.filter.id == 'something' && rule.operator.type == 'something') {
      var $input = rule.$el.find($.fn.queryBuilder.constructor.selectors.rule_value);
      // ensure cleanup of previous plugin applied
      // apply new plugin
    }
  }
);

ok in case anyone else has issues with this

The $input references your html input tag so if you want to remove the plugin all you have to do is $input.datetimepicker( "destroy" ); or whatever method is appropriate to destroy/disable the plugin you are working with

[Guilouf]

For people like me who really struggled for this basic fonctionnality: i ended up using a private method: createRuleInput

I wanted to disable selectize plugin for all operators except 'EQUAL' operators; for me this was working:

  $('#builder-basic').on('afterUpdateRuleFilter.queryBuilder afterUpdateRuleOperator.queryBuilder',
    function(e, rule) {
      /*Enable / disable selectize when operator is of type EQUAL or not */

        if (rule.operator.optgroup === 'EQUAL') {
          rule.filter.plugin = 'selectize'
        }
        else {
          rule.filter.plugin = ''
        }
      
      // triggers the update of the input according to rule modifcation
      $('#builder-basic').queryBuilder('createRuleInput', rule);

    }
  );

I am aware that calling a private method is not a good idea but i look forward to see a more straightforward solution. Spent a lot of time reading issues and i have found yet a satisfactory solution for my problem that is probably quite common.