Regarding combo filter

[kundansah]

Thanks but it doesn't seem to be working, shared the codepen via email to support@bryntum.com

[ghulam.ghous]

Hi Kundansah,

I have checked the shared link, the app is not runnable so I can't do anything with that.
Could you pls zip and send it as archive? It will give us opportunity to add sources and run the code.

Regards,
Ghous

[kundansah]

Hi,

An email has been sent to support[at]bryntum.com by Moses with runnable zip as attachment.

Thanks,
Kundan

[ghulam.ghous]

We have not received any email yet from Moses. Can you please recheck?

[ghulam.ghous]

I have received it now, checking.

[ghulam.ghous]

Hi kundansah,

You cannot use onChange because it is being used internally. I have opened a ticket to change that behaviour here https://github.com/bryntum/support/issues/8910. As a workaround you can either do two things:

1. You can use the change event inside the listeners and it will serve your purpose:

filterField: {
      type: "combo",
      value: activeCenterName,
      valueField: "name",
      displayField: "name",
      multiSelect: false,
      editable: false,
      store: resourceStoreInstance.chain(
        (record) => record.resourceType == "building"
      ),
      filterFn: ({ record, value }) => record.buildingName == value,
      listeners: {
        change(props) {
          console.log("here: ", props);
          // call your function here
        },
      },
    },

1. You can also use onAction event that provides the selected value and record. https://bryntum.com/products/grid/docs/api/Core/widget/FilterField#eventhandler-onAction

    filterField: {
      type: "combo",
      value: activeCenterName,
      valueField: "name",
      displayField: "name",
      multiSelect: false,
      editable: false,
      store: resourceStoreInstance.chain(
        (record) => record.resourceType == "building"
      ),
      filterFn: ({ record, value }) => record.buildingName == value,
      onAction(props){
        console.log(props)
        // call your function here
      }
    },

Both will serve your purpose. Can you please check and let us know if that workaround works for you?

Regards,
Ghous

[kundansah]

hi team,
we have tried both methods using onAction and listeners but the functions are not getting called can you please help me with this

let filterConfig = {
    filterField: {
      type: "combo",
      value: activeCenterName,
      valueField: "name",
      displayField: "name",
      multiSelect: false,
      editable: false,
      store: resourceStoreInstance.chain(
        (record) => record.resourceType == "building"
      ),
      //onChange : refreshOnCenterChange,
    },
    filterFn: ({ record, value }) => record.buildingName == value,
    // listeners: {
    //   change(props) {
    //     console.log("here: ", props);
    //     refreshOnCenterChange();
    //   },
    // },
    onAction(props){
    console.log(props, "props")
    refreshOnCenterChange();
    }

  };

  return filterConfig;
}

[ghulam.ghous]

Hi Kundansah,

The listeners need to be added on filterField and not on filterConfig as I have shown here viewtopic.php?p=143501#p143501. In your code snippet there are added on the filterConfig. Here's the code snippet for filterField:

filterField: {
      type: "combo",
      value: activeCenterName,
      valueField: "name",
      displayField: "name",
      multiSelect: false,
      editable: false,
      store: resourceStoreInstance.chain(
        (record) => record.resourceType == "building"
      ),
      //onChange : refreshOnCenterChange,
      filterFn: ({ record, value }) => record.buildingName == value,
      listeners: {
        change(props) {
          console.log("inside change listener");
          refreshOnCenterChange();
        },
      },
      onAction(props) {
        console.log("inside onAction listener");
        refreshOnCenterChange();
      },
    },

Here's the complete resourceFilter.js file:

import { Store } from "../../build/schedulerpro.module.js";
import { refreshDataset } from "../../index.js";

export function getResourceFilter({ context } = {}) {
  let resourceStoreInstance = Store.getStore("resources");
  let { activeCenterName } = context;
  //resourceStoreInstance.sort("name"); //sort all resources alphabetically in combo //!!(+ list?) /// This is causing the re-sort
  let filterConfig = {
    filterField: {
      type: "combo",
      value: activeCenterName,
      valueField: "name",
      displayField: "name",
      multiSelect: false,
      editable: false,
      store: resourceStoreInstance.chain(
        (record) => record.resourceType == "building"
      ),
      //onChange : refreshOnCenterChange,
      filterFn: ({ record, value }) => record.buildingName == value,
      listeners: {
        change(props) {
          console.log("inside change listener");
          refreshOnCenterChange();
        },
      },
      onAction(props) {
        console.log("inside onAction listener");
        refreshOnCenterChange();
      },
    },
  };

  return filterConfig;
}

async function refreshOnCenterChange(record, value) {

  console.log('I am inside refreshOnCenterChange');
  record.buildingName == value;
  console.log("SelectedProps", record);
  // let resourceStoreInstance = Store.getStore("resources");
  // let schedulerPro = props.source._owner;
  // let context = sessionStorage.getItem("cehubContext");
  // let startDate = schedulerPro._startDate;
  // let defaultSpan = schedulerPro._viewPreset.defaultSpan;
  // let selectedCenter = resourceStoreInstance.chain(
  //   (record) => record.resourceType == "building" &&
  //   record.name == props.value
  // )
  // let selectedCenterId = selectedCenter._data[0]._data.id;
  // await refreshDataset({ context: context, calendarStartDate: startDate, defaultSpan: defaultSpan,selectedCenterId: selectedCenterId});
}

Here's the clip showing that the functions are being called: https://drive.google.com/drive/folders/1rxASNCOsePphWH9M2HFRph_hzvUJ6Pn6?usp=sharing

Hope it helps!

Regards,
Ghous