[REACT] Resources show up when resourceFilter is not of type combo.

[janiquekamgx]

I am trying out the custom resource filter, but for some reason once I specify the type combo, I immediately get "no results" in my dropdown box.

If i revert to no type, and get the checkbox, all resources show up and works fine. What could i be missing ? are there things i need to be careful of when using type combo?

I'm following this code pen: https://codepen.io/Animal-Nige/pen/YzgKaGV?editors=0010

the config below works fine and all resources show up.

  sidebar: {
    collapsed: false,
    items: {
      datePicker: {
        prevYear: true,
        nextYear: true
      },
      resourceFilter: {
        selected: [],
        placeholder: 'Select one or more please',
        valueField: 'test',
        displayField: 'name'
      },
      eventFilter: false
    }
  },

[Animal]

Really can't understand much of that.

But "No results" shows in a combo when you type a filter string that doesn't match anything. That's pretty expected isn't it?

Screenshot 2023-12-21 at 17.05.38.png (103.94 KiB) Viewed 4892 times

[janiquekamgx]

Yep, what you described is pretty expected, given the case you are talking about. Unluckily, we are not talking about the same case. Let me try to illustrate my case better.

empty.PNG (21.25 KiB) Viewed 4890 times

With the blue line I've highlighted where in the code pen https://codepen.io/Animal-Nige/pen/vYbMxxK?editors=0110 You see the options which you can select from.

In my case, copying the same code, no options show up.

Given that I change to a different resource filter: I have all my expected options.
Given that I hardcode items, I have options.

     resourceFilter: {
        type: 'combo',
        flex: '1 1 20em',
        weight: 500,
        multiSelect: true,
        listCls: 'custom-resource-filter',
        // The value is the records selected
        valueField: null,

    // What narrowing by typing works on
    displayField: 'name',
    items: [{ name: 'hello' }, { name: 'animal' }],
    listItemTpl: resource => StringHelper.xss`
        <div class="resource-list-text">
            <div class="resource-name">${resource.name}</div>
            <div class="resource-type">${resource.type}</div>
        </div>
    `,

    listeners: {
      // "up." means resolve in ownership chain. Will call on the Calendar
      change: 'up.onFilterCriteriaChange',
      // We have to filter after the Calendar has processed the change
      prio: -1000
    },

    // We want the ChipView to scroll horizontally with no wrapping.
    chipView: {
      itemTpl: resource => StringHelper.xss`${resource.name}`,
      scrollable: {
        overflowX: 'hidden-scroll',
        overflowY: false
      },
      style: {
        flexWrap: 'nowrap'
      }
    }
  }

let me know if this is more understandable.

[Animal]

Sorry, I just don't understand any of that

[janiquekamgx]

I was able to reproduce the same scenario(no resources to choose from) here https://bryntum.com/products/calendar/examples/customized-resourcefilter/

If I put the customer resource filter code in two places at once (tbar and sidepanel).
So I assume my issue is that I am already filtering somewhere else without knowing it.
Sharing in case anyone else comes across this post.

[Animal]

https://bryntum.com/products/calendar/examples/customized-resourcefilter/ went wrong in some way?

Please share a screencap of the steps to make it go wrong.

[janiquekamgx]

<removed and put a better example>

[janiquekamgx]

I was finally able to reproduce my exact scenario on a Bryntum example https://bryntum.com/products/calendar/examples/date-resource/

Here's a video of my exact scenario

combodoesnotwork.gif (1.79 MiB) Viewed 4844 times

as you can see
given that I use the default resource filter: I have all resources to choose from.
given that I specify type combo: it says no results and I am not able to filter on resources.

[alex.l]

Hi,

Since you changed a type of a widget from resourceFilter to combo, you lost all the logic that resourceFilter widget had. So you need to add that yourself, attach combo, define fields and handlers. I suggest you to hide default filter and add a new one with own name instead, it will make your coding more clear and predictable.
You can go to resources and review https://bryntum.com/products/calendar/docs/api/Scheduler/widget/ResourceFilter class to see what logic was lost by using another widget.

[alex.l]

In the demo you refer on, did you see the code that set store and state for custom combo?

project : {
    events,
    resources,
    listeners : {
        refresh({ source }) {
            const rf = calendar.widgetMap.resourceFilter;

            calendar.eventStore.addFilter({
                id       : 'custom-filter',
                filterBy : event => rf.valueCollection.includes(event.resourceId)
            });
            
            rf.store = source.resourceStore;
            rf.value = rf.store.records;
        },
        once : true
    }
},