Thanks but it doesn't seem to be working, shared the codepen via email to support@bryntum.com
Support Forum
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:
- 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
},
},
},
- 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
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;
}
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