It's my understanding that when filterChangedCallback is called that the grid filters the current data and calls doesFilterPass and isFilterActive as it does so.
Here I have column that uses a custom filter, and a floating filter. The floating filter (a checkbox) gets displayed ok, and when I click on it onFloatingFilterChanged in the custom filter is called, the green filter active icon appears, and the grid refreshes, but doesFilterPass does not get called at all and I can't figure out why.
There's something fundamental I'm not getting with custom filters so if anyone can shed any light on this I'd be grateful.
(Edit: it may be the interplay between the custom/floating filters that's at issue. There was a similar ag-grid-angular issue posted to github last year but nothing came of that. So perhaps it's a bug?)
Custom filter
export default class BooleanFilter {
init(params) {
this.params = params;
this.valueGetter = params.valueGetter;
this.filterChangedCallback = params.filterChangedCallback;
this.status = false;
}
onFloatingFilterChanged(status) {
this.status = status;
this.filterChangedCallback();
}
getGui() {
return '<div />';
}
getModel() {
return this.isFilterActive() ? { filterType: 'boolean', filter: this.status } : undefined;
}
setModel(model) {
this.state.status = model ? model.value : '';
}
isFilterActive() {
return this.status === true;
}
doesFilterPass(params) {
console.log(this.status, params);
}
}
Floating filter
export default class FloatingCheckboxFilter extends Component {
state = { status: false };
handleToggle = (e) => {
const { target: { checked } } = e;
const { parentFilterInstance } = this.props;
this.setState({ status: checked });
parentFilterInstance((instance) => {
instance.onFloatingFilterChanged(checked);
});
}
onParentModelChanged = (parentModel) => {
this.setState({
status: !parentModel ? false : parentModel.filter
});
}
render() {
const { status } = this.state;
return (
<input
style={{ marginTop: '0.75em' }}
type="checkbox"
checked={status}
onChange={this.handleToggle}
/>
);
}
}
Related
I have the following code
#Injectable()
export class ReceptionService {
private generalInfoDataSrc$ = new BehaviorSubject<any>(null);
public generalInfoData = this.generalInfoDataSrc$.asObservable();
setGeneralInfo(dataSrc: GeneralInfoMModal) {
this.generalInfoDataSrc$.next(dataSrc);
}
}
From my component1 I will set the above as
OnSelect(patient: any) {
let generalInfo = new GeneralInfoMModal();
generalInfo.id = patient.id;
// some other code here
// this.recepService.setGeneralInfo(generalInfo);
}
// from component2
//
ngOnInit() { getPatientDetails() }
getPatientDetails() {
this.receptionService.generalInfoData.pipe(mergeMap(response => {
if (response && response.id) {
this.loading = true;
return this.receptionService.get('User/Get' + response.id, this.sourceobj);
} else {
return of(null);
}
}), takeUntil(this.unsubscribe$)).subscribe(response => {
this.patient = response;
this.loading = false;
}, error => {
this.loading = false;
// this.utility.showMsg('An error occurred while getting user.')
}, () => {
})
}
Every things works well. I keep on selecting a user thereby calling the User/Get api. But if in case if the api returns an error then error part is executed after which when there is a change in behaviorsubject(user is selected) it doesn't call the User/Get. Is there other way of handling errors with behaviorsubject or any other approach to handle the idea. How a behaviorsubject should be used in such a case.
If you are using the same behavior subject over and over again, and if there is an error, you need to set the behavior subject back to null, so that when the next user is set, it will get the latest value.
Try something like this:
getPatientDetails() {
this.receptionService.generalInfoData.pipe(mergeMap(response => {
if (response && response.id) {
this.loading = true;
return this.receptionService.get('User/Get' + response.id, this.sourceobj);
} else {
return of(null);
}
}), takeUntil(this.unsubscribe$)).subscribe(response => {
this.patient = response;
this.loading = false;
}, error => {
this.loading = false;
///////////////////////////////// ADD THIS LINE ///////////////////////
this.recepService.setGeneralInfo(null);
// this.utility.showMsg('An error occurred while getting user.')
}, () => {
})
I am trying to implement group video functionality and I have following code
class App extends Component {
this.state = {
subscribers: [],
subscriberVideos: [],
screenVideo: undefined,
publisherVideo: undefined,
publisher: undefined,
}
}
async start() {
let publisher = OT.initPublisher(null, this.defaultPublisherProps, error => {
if(error) {
}
})
publisher.on('videoElementCreated', this.onPublisherVideoElement);
this.state.otSession.publish(publisher, error => {
if (error) {
}
this.setState(() => {
return { publisher: publisher };
}
}
}
onPublisherVideoElement = event {
this.setState(() => {
return { publisherVideo: event.element }
});
}
}
onPublisherScreenElement = event => {
this.setState(() => {
return { screenVideo: event.element }
}
}
onSubscriberVideoElement = event => {
this.setState(() => {
return {
subscriberVideos: [...this.state.subscriberVideos, event.element]
}
}
})
}
onSessionStreamCreated = event => {
let subscriber = this.state.otSession.subscriber(event.stream, null, this.defaultSubscriberProps, error => {
if (error) {
}
if (event.stream.videoType == 'screen') {
subscriber.on('videoElementCreated', this.onPublisherScreenElement);
this.setState(() => {
return { screenSubscriber: subscriber };
})
} else {
subscriber.on('videoElementCreated', this.onSubscriberVideoElement);
if (this.props.mdm === "m") {
this.setState((prevState) => {
return {
subscribers: [...this.state.subscribers, subscriber]
}
}
}
else {
return { subscribers: [...this.state.subscribers, subscriber] }
}
}
}
}
While showing subscribers I am doing
showSubscribers() {
return this.state.subscribers.filter(subscriber => subscriber.stream !== null).map((subscriber, index) => {
return(
<VideoSubscriber
key={index}
otok={this.otok}
subscriber={this.state.subscribers[index]
subscriberVidoe={this.state.subscriberVideos[index]
/>
)
}
}
But at random times the video goes black and also while some of the subscriber refresh the page it goes blank creates multiple subscirber with null stream.
How can i resolve this?
I think you probably want to handle the 'streamDestroyed' event and remove your subscribers. This is probably why you're getting blank subscribers when people leave.
Also video going black randomly could be happening because you're falling back to audio-only mode. This happens if your network has lots of packet loss, then it will drop the video and try to only send audio. You can handle the videoDisabled event and look at the reason 'quality'. More details here
I have weird issue when trying to create a custom autocomplete editor.
Basicly what I've done is I've pulled the built-in AutocompleteEditor class and refactored it to plain ES6, and renamed the class to ProductSelectEditor. No modifications to the code logic.
When I try to use it, I'm getting error "Cannot read property 'onCommit' of undefined" when handleChange() is called:
handleChange() {
this.props.onCommit(); // props undefined
}
Now if i replace the editor with the real built-in AutocompleteEditor, it works just fine. I can't see any straight reason, why my custom version does not work, when only alterations I'm doing are refactoring the code away from TypeScript, renaming the class, and eventually exporting the class out as default?
Any clues on what I'm not understanding here?
Below is the whole refactored code
import React from 'react'
import ReactDOM from 'react-dom'
import ReactAutocomplete from 'ron-react-autocomplete';
import PropTypes from 'prop-types';
import '../css/ron-react-autocomplete.css'
const { shapes: { ExcelColumn } } = require('react-data-grid')
let optionPropType = PropTypes.shape({
id: PropTypes.required,
title: PropTypes.string
});
export default class ProductSelectEditor extends React.Component {
static propTypes = {
onCommit: PropTypes.func,
options: PropTypes.arrayOf(optionPropType),
label: PropTypes.any,
value: PropTypes.any,
height: PropTypes.number,
valueParams: PropTypes.arrayOf(PropTypes.string),
column: PropTypes.shape(ExcelColumn),
resultIdentifier: PropTypes.string,
search: PropTypes.string,
onKeyDown: PropTypes.func,
onFocus: PropTypes.func,
editorDisplayValue: PropTypes.func
};
static defaultProps = {
resultIdentifier: 'id'
};
handleChange() {
this.props.onCommit();
}
getValue() {
let value;
let updated = {};
if (this.hasResults() && this.isFocusedOnSuggestion()) {
value = this.getLabel(this.autoComplete.state.focusedValue);
if (this.props.valueParams) {
value = this.constuctValueFromParams(this.autoComplete.state.focusedValue, this.props.valueParams);
}
} else {
value = this.autoComplete.state.searchTerm;
}
updated[this.props.column.key] = value;
return updated;
}
getEditorDisplayValue() {
let displayValue = {title: ''};
let { column, value, editorDisplayValue } = this.props;
if (editorDisplayValue && typeof editorDisplayValue === 'function') {
displayValue.title = editorDisplayValue(column, value);
} else {
displayValue.title = value;
}
return displayValue;
}
getInputNode() {
return ReactDOM.findDOMNode(this).getElementsByTagName('input')[0];
}
getLabel(item) {
let label = this.props.label != null ? this.props.label : 'title';
if (typeof label === 'function') {
return label(item);
} else if (typeof label === 'string') {
return item[label];
}
}
hasResults() {
return this.autoComplete.state.results.length > 0;
}
isFocusedOnSuggestion() {
let autoComplete = this.autoComplete;
return autoComplete.state.focusedValue != null;
}
constuctValueFromParams(obj, props) {
if (!props) {
return '';
}
let ret = [];
for (let i = 0, ii = props.length; i < ii; i++) {
ret.push(obj[props[i]]);
}
return ret.join('|');
}
render() {
let label = this.props.label != null ? this.props.label : 'title';
return (<div height={this.props.height} onKeyDown={this.props.onKeyDown}>
<ReactAutocomplete search={this.props.search} ref={(node) => this.autoComplete = node} label={label} onChange={this.handleChange} onFocus={this.props.onFocus} resultIdentifier={this.props.resultIdentifier} options={this.props.options} value={this.getEditorDisplayValue()} />
</div>);
}
}
Alright, after few hours of poking and mangling found the reason for the props to be undefined. Apparently after stripping out the Typescripts, I needed to re-bind 'this' in order to get the correct context:
<ReactAutocomplete ... onChange={this.handleChange.bind(this)} ... />
Here's my Angular controller
//Save And Update
$scope.AddUpdateBusinessType = function() {
var businessType = {
Code: $scope.businessCode,
BusiType: $scope.businessType
};
var getBusinessTypeAction = $scope.BusinessTypeAction;
if (getBusinessTypeAction == "Update") {
businessType.BusinessTypeId = $scope.businessTypeId;
var getBusinessTypeData = businessTypeService.updateBusinessType(businessType);
getBusinessTypeData.then(function (msg) {
GetAllBusinessType();
$scope.ClearBusinessTypeForm();
alert("Record Updated Successful");
$scope.BusinessTypeAction = "";
$scope.divBusinessType = false;
}, function () {
alert('Error in Updating Record');
});
} else {
**// Save Section**
var getExistBusinessCode = businessTypeService.checkBusinessTypeCode(businessType.Code);
getExistBusinessCode.then(function (businessTypeCode) {
debugger;
if (businessTypeCode == true) {
alert('Business Type Code Already Exist');
} else {
debugger;
var getBusinessTypeData = businessTypeService.addBusinessType(businessType);
getBusinessTypeData.then(function (msg) {
GetAllBusinessType();
$scope.ClearBusinessTypeForm();
alert("Record Added Successful");
$scope.divBusinessType = false;
}, function () {
alert("Error Occured In Saving Data");
});
}
},function() {
alert('Error Occured While Checking Records');
});
}
}
In the above code Save Section I am trying to check if a value is exists in a database so I'm passing a string value to: checkBusinessTypeCode(businessType.Code) Service.When I Debug and See Value its Seems Normal.
Here's My Service:
//Check Business Code
this.checkBusinessTypeCode = function (businessTypeCode) {
debugger;
var response = $http({
method: "post",
url: "/BusinessType/CheckBusinessTypeDetailByCode",
params: {
businessTypeCode: JSON.stringify(businessTypeCode)
}
});
return response;
}
But when Passing To Controller string value I get some unexpected behavior.
two \\ always appear automatically
example
"\"stringvalue\""
I'm Still Having Above Problem
but as a quick solution i did code as follows
public bool _CheckBusinessTypeDetailByCode(string businessTypeCode)
{
string bisCode = businessTypeCode.Replace("\"", "");
bool isExist;
isExist = _IBusinessTypeRepository.IsExist(x => x.IsActive && !x.IsDelete && x.Code == bisCode);
return isExist;
}
I don't know is it bad practice or not , any way it is solved my problem.
Before did this modification
string businessTypeCode always gives value as
"\"somevalue\""
I'm using angularjs to bring some data from server,
it's works perfectly.
Here is the code:
myAppcontroller("AgentCtrl", function ($scope, leadsService) {
$scope.showUsers = false;
$scope.cityName = { 'query': ''};
$scope.findAgent = function() {
leadsService.get("/api/usersapi/agents/" + $scope.cityName.query).then(function(out) {
$scope.agents = out;
$scope.showUsers = true;
$scope.selectedOption = $scope.agents[0];
});
};
$scope.init = function (cityName) {
$scope.cityName.query = cityName;
if ((typeof cityName !== "undefined")) {
$scope.findAgent();
}
};
$scope.$watch('cityName.query', function (newValue, oldValue) {
$scope.cityName.query.watch = newValue;
});
});
Now I have a validation error in Chrome... (I'm using jQuery validation).
Here is the code I'm using to disable this error:
$.validator.addMethod('date', function (value, element, params) {
if (this.optional(element)) {
return true;
}
var isValid = /^\d{4}[\/\-]\d{1,2}[\/\-]\d{1,2} \d{2}:\d{1,2}:\d{1,2}$/.test(value);
alert(isValid);
return isValid;
}, '');
But when I use the jquery code angularjs stops working...
Some one have met this issue??? If so how to solve it?