Filtering down to two groups or more (Scheduler)

I understand that you want to keep multiple groups visible but it’s not clear whether they are at the same level or nested…

Could you please post a screenshot or the resources[] definition?

Hi Dan

Thank you for your help.

In the three screens below you can see me filtering from a full list of groups/resources down to a single group/resource.

I’m looking for a way to filter down to two groups/resources.

I imagine it would work with two drop downs and a ‘filter’ button allowing the scheduler to filter down to any combination of two groups/resources.

Hi Steve,

Thanks for the update!

You could use two dropdowns or you could use a component that allows selecting multiple values (such as Choices).

So provided that you have multiple selected values stored in an array:

const queries = ["one", "two", "three"];

Then you can display all resource groups that have a child that matches any of the selected values:

const app = {
  filter(values) {
    const queries = ["one", "two", "three"];
    dp.rows.filter({
      queries: queries,
    });
  },
  // ...
};

Just update the onRowFilter handler like this:

onRowFilter: (args) => {
  const queries = args.filterParam.queries;
  args.visible = false;

  for (let i = 0; i < queries.length; i++) {
    if (args.row.name.toUpperCase().indexOf(queries[i].toUpperCase()) !== -1) {
      args.visible = true;
      break;
    }
  }

  var parent = args.row.parent();

  if (parent && !parent.hiddenUsingFilter) {
    args.visible = true;
  }
},

Hi Dan

I’ve had a chance to play and have hit an issue. I’ve successfully integrated ‘choices’ with the following code:

<select
    class="form-control"
    name="choices-multiple-remove-button"
    id="filter"
    placeholder="This is a placeholder"
    multiple
>
    <option value="One">One</option>
    <option value="Two">Two</option>
    <option value="Three">Three</option>
</select>

<script>
    document.addEventListener('DOMContentLoaded', function() {
        var genericExamples = document.querySelectorAll('[data-trigger]');

        for (let i = 0; i < genericExamples.length; i++) {
            var element = genericExamples[i];
            new Choices(element, {
                allowHTML: true,
                placeholderValue: 'This is a placeholder set in the config',
                searchPlaceholderValue: 'This is a search placeholder',
            });
        }

        var multipleCancelButton = new Choices(
            '#filter',
            {
                allowHTML: true,
                removeItemButton: true,
            }
        );
    });
</script>

And I’ve changed my onRowFilter to:

onRowFilter: (args) => {
    const queries = args.filterParam.queries;

    args.visible = false;

    for (let i = 0; i < queries.length; i++) {
        if (args.row.name.toUpperCase().indexOf(queries[i].toUpperCase()) !== -1) {
            args.visible = true;
            break;
        }
    }

    var parent = args.row.parent();
    if (parent && !parent.hiddenUsingFilter) {
        args.visible = true;
    }
},

I’m now confused with what I need to do with my ‘const app’ which is currently:

const app = {
    elements: {
        filter: document.querySelector("#filter"),
    },

    filter() {
        // see dp.onRowFilter above
        dp.rows.filter({
            query: app.elements.filter.value,
        });
    },

    init() {
        app.elements.filter.addEventListener("change", function() {
            app.filter();
        });
    }
};

app.init();

I also have no idea how to ensure that my multiple selected values from ‘choices’ are stored in an array.

I’m sorry to be thick, can you help please?

Hi Dan.

I should have mentioned that if I use the choices component and the existing code:

onRowFilter: (args) => {
    const query = args.filterParam.query;
    if (args.row.name.toUpperCase().indexOf(query.toUpperCase()) === -1) {
        args.visible = false;
    } 
    
    var parent = args.row.parent();
    if (parent && !parent.hiddenUsingFilter) {
        args.visible = true;
    }
},

const app = {
    elements: {
        filter: document.querySelector("#filter"),
    },

    filter() {
        // see dp.onRowFilter above
        dp.rows.filter({
            query: app.elements.filter.value,
        });
    },

    init() {
        app.elements.filter.addEventListener("change", function() {
            app.filter();
        });
    }
};

app.init();

It will filter down to a single group/resource perfectly.

It looks like you are quite close. You should be able to get the array of selected values using getValue(true):

filter() {
  const queries = multipleCancelButton.getValue(true);
  dp.rows.filter({
    queries,
  });
},

Thanks Dan. I’ll have a play and get back you you :-)