1 Answer, 1 is accepted
2
Hello,
That can be done by stoping the wheel event propagation using the component ref:
https://stackblitz.com/edit/react-3zbode-ax72nd?file=app/main.tsx
Regards,
Stefan
Progress Telerik
Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.
Jimmy
commented on 16 Feb 2022, 02:24 PM
Top achievements
Rank 1
Iron
Rank 1
Iron
I am fairly new to React. We have created a component for the input. Can you see how to make this happen using this code?
import React from "react"
import { connect } from "react-redux";
import { RouteComponentProps } from "react-router"
import { Label } from "reactstrap";
import { Col, Row } from "reactstrap";
import { ApplicationState } from "../../../../store";
import { DatePicker } from "@progress/kendo-react-dateinputs";
import * as CashModuleStore from '../../../../model/application/CashModuleStore';
import * as CDUBalanceStore from '../../../../model/aggregates/cdu/CDUBalanceStore';
import { CashModule } from "../../../../model";
import CDUBalanceUploadPAS from "../../../../model/aggregates/cdu/CDUBalanceUploadPAS";
import CDUBalanceUploadExcelPAS from "../../../../model/aggregates/cdu/CDUBalanceUploadExcel";
import CDU from '../../../../model/aggregates/cdu/CDU';
import { NumericTextBox } from "@progress/kendo-react-inputs";
type state = {
}
type OwnProps = {
description: string;
amount: number;
date?: Date | null;
amountName: string;
dateName?: string;
showDate?: boolean;
}
type CDUBalanceInputProps =
CashModuleStore.CashModuleState &
CDUBalanceStore.CDUBalanceState &
typeof CashModule.CashModuleActions &
typeof CDUBalanceUploadPAS.CDUBalanceUploadPASActions &
typeof CDUBalanceUploadExcelPAS.CDUBalanceUploadExcelActions &
typeof CDU.CDUActions &
OwnProps &
RouteComponentProps<{}>
class CDUBalanceInput extends React.Component<CDUBalanceInputProps, state>{
processUpdate(name: string, value: any) {
this.props.cduBalanceUploadIsModified(); //Flag the CDU as modified.
this.props.updateCDUBalanceUploadInput(name, value); //Update the store.
}
handleFocus = (e) => {
e.target.element.select()
}
public render(): React.ReactNode {
return <React.Fragment>
<Col sm={{ size: 12 }}>
<Row style={{ marginTop: '5px' }}>
<Col sm={{ size: 3 }}>
<Row style={{ display: 'inline-block' }}>
<Label style={{ display: 'inline-block', textAlign: 'right' }}>{this.props.description}</Label>
</Row>
</Col>
<Col sm={{ size: 4 }}>
<NumericTextBox
format='c2'
spinners={false}
value={this.props.amount ?? 0}
name={this.props.amountName}
onChange={(e) => this.processUpdate(e.target.name, e.target.value)}
disabled={this.props.isCDUBalanceUploadLoading}
onFocus={this.handleFocus}
/>
</Col>
{this.props.showDate && <Col sm={{ size: 3 }} style={{ marginLeft: '6px' }}>
<DatePicker
name={this.props.dateName}
value={this.props.date}
format="dd/MMM/yyyy"
defaultShow={false}
onChange={(e) => this.processUpdate(e.target.name, e.target.value)}
disabled={this.props.isCDUBalanceUploadLoading} />
</Col>}
</Row>
</Col>
</React.Fragment>
}
}
export default connect((state: ApplicationState, ownProps: OwnProps) => ({ ...state.cashModule, ...state.cduBalancePAS, ...ownProps }), {
...CashModule.CashModuleActions, ...CDUBalanceUploadPAS.CDUBalanceUploadPASActions, ...CDUBalanceUploadExcelPAS.CDUBalanceUploadExcelActions, ...CDU.CDUActions
})(CDUBalanceInput as any)
Stefan
commented on 16 Feb 2022, 02:39 PM
Telerik team
Hello,
There are two main points:
1) Create e ref to the component:
https://reactjs.org/docs/refs-and-the-dom.html
2) When the component mounts, add the event listener:
https://reactjs.org/docs/react-component.html#componentdidmount
https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener
3) Remove the event listener when the component un-mounts:
https://reactjs.org/docs/react-component.html#componentwillunmount
https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/removeEventListener
There are the steps when using a class component. Based on the code I see that you are using a class component.
Jimmy
commented on 16 Feb 2022, 03:21 PM
Top achievements
Rank 1
Iron
Rank 1
Iron
I tried to add it this way:
import React from "react"
import { connect } from "react-redux";
import { RouteComponentProps } from "react-router"
import { Label } from "reactstrap";
import { Col, Row } from "reactstrap";
import { ApplicationState } from "../../../../store";
import { DatePicker } from "@progress/kendo-react-dateinputs";
import * as CashModuleStore from '../../../../model/application/CashModuleStore';
import * as CDUBalanceStore from '../../../../model/aggregates/cdu/CDUBalanceStore';
import { CashModule } from "../../../../model";
import CDUBalanceUploadPAS from "../../../../model/aggregates/cdu/CDUBalanceUploadPAS";
import CDUBalanceUploadExcelPAS from "../../../../model/aggregates/cdu/CDUBalanceUploadExcel";
import CDU from '../../../../model/aggregates/cdu/CDU';
import { NumericTextBox } from "@progress/kendo-react-inputs";
type state = {
}
type OwnProps = {
description: string;
amount: number;
date?: Date | null;
amountName: string;
dateName?: string;
showDate?: boolean;
}
type CDUBalanceInputProps =
CashModuleStore.CashModuleState &
CDUBalanceStore.CDUBalanceState &
typeof CashModule.CashModuleActions &
typeof CDUBalanceUploadPAS.CDUBalanceUploadPASActions &
typeof CDUBalanceUploadExcelPAS.CDUBalanceUploadExcelActions &
typeof CDU.CDUActions &
OwnProps &
RouteComponentProps<{}>
const ref = React.useRef(null);
class CDUBalanceInput extends React.Component<CDUBalanceInputProps, state>{
handleOnWheel = event => {
event.stopPropagation();
};
componentDidMount(): void {
ref.current.element.addEventListener('wheel', this.handleOnWheel);
}
processUpdate(name: string, value: any) {
this.props.cduBalanceUploadIsModified(); //Flag the CDU as modified.
this.props.updateCDUBalanceUploadInput(name, value); //Update the store.
}
handleFocus = (e) => {
e.target.element.select()
}
public render(): React.ReactNode {
return <React.Fragment>
<Col sm={{ size: 12 }}>
<Row style={{ marginTop: '5px' }}>
<Col sm={{ size: 3 }}>
<Row style={{ display: 'inline-block' }}>
<Label style={{ display: 'inline-block', textAlign: 'right' }}>{this.props.description}</Label>
</Row>
</Col>
<Col sm={{ size: 4 }}>
<NumericTextBox
format='c2'
spinners={false}
value={this.props.amount ?? 0}
name={this.props.amountName}
onChange={(e) => this.processUpdate(e.target.name, e.target.value)}
disabled={this.props.isCDUBalanceUploadLoading}
onFocus={this.handleFocus}
/>
</Col>
{this.props.showDate && <Col sm={{ size: 3 }} style={{ marginLeft: '6px' }}>
<DatePicker
name={this.props.dateName}
value={this.props.date}
format="dd/MMM/yyyy"
defaultShow={false}
onChange={(e) => this.processUpdate(e.target.name, e.target.value)}
disabled={this.props.isCDUBalanceUploadLoading} />
</Col>}
</Row>
</Col>
</React.Fragment>
}
}
export default connect((state: ApplicationState, ownProps: OwnProps) => ({ ...state.cashModule, ...state.cduBalancePAS, ...ownProps }), {
...CashModule.CashModuleActions, ...CDUBalanceUploadPAS.CDUBalanceUploadPASActions, ...CDUBalanceUploadExcelPAS.CDUBalanceUploadExcelActions, ...CDU.CDUActions
})(CDUBalanceInputasany)
But I get this error:
Stefan
commented on 17 Feb 2022, 05:47 AM
Telerik team
Hello,
The error occurs because of this line:
`const ref = React.useRef(null);`I made a class version of the same example to showcase the approach:
https://stackblitz.com/edit/react-3zbode-px8k2o?file=app/main.tsx
Jimmy
commented on 17 Feb 2022, 02:56 PM
Top achievements
Rank 1
Iron
Rank 1
Iron
SO I tried to move this over to your version an still running into several errors :(
Stefan
commented on 17 Feb 2022, 02:59 PM
Telerik team
Hello,
These are all TypeScript errors. They can be resolved by setting `this.ref` as type `any`.
These are all TypeScript errors. They can be resolved by setting `this.ref` as type `any`.
Jimmy
commented on 17 Feb 2022, 03:30 PM
Top achievements
Rank 1
Iron
Rank 1
Iron
That worked 100 percent. Thank you for all the help... You were awesome!!!!!