Integrating numeric conversion with Kendo Form using FieldRenderProps

2 Answers 110 Views

Form

Tejas asked on 16 Jun 2023, 11:07 AM

"I am using a Kendo form with FieldRenderProps, but I am facing an issue with the NumericTextBox action. Could you please provide some code to assist me? I have implemented a NumericTextBox for 'Kilometers' and would like to have the same setup for 'Miles'. The goal is to enter a value in Kilometers and have the corresponding Miles value automatically calculated and displayed in the Miles NumericTextBox. For instance, if I input 10 in Kilometers, the calculated Miles value should be 6.214 and displayed in the Miles NumericTextBox."

code link

https://stackblitz.com/edit/react-232pue-cjgnrl?file=app%2Fmain.jsx

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import {
  Form,
  Field,
  FormElement,
  FormMultiSelect,
  FieldWrapper,
} from '@progress/kendo-react-form';
import {
  Label,
  Error,
  Hint,
  FloatingLabel,
} from '@progress/kendo-react-labels';
import { Button } from '@progress/kendo-react-buttons';
import { countries, employees, genders, sizes, equipment } from './data';
import {
  Input,
  MaskedTextBox,
  NumericTextBox,
  Checkbox,
  ColorPicker,
  Switch,
  RadioGroup,
  Slider,
  SliderLabel,
  RangeSlider,
  TextArea,
  Rating,
} from '@progress/kendo-react-inputs';
const FormNumericTextBox = (fieldRenderProps) => {
  const {
    validationMessage,
    touched,
    label,
    id,
    valid,
    disabled,
    hint,
    ...others
  } = fieldRenderProps;
  const showValidationMessage = touched && validationMessage;
  const showHint = !showValidationMessage && hint;
  const hintId = showHint ? `${id}_hint` : '';
  const errorId = showValidationMessage ? `${id}_error` : '';
  return (
    <FieldWrapper>
      <Label editorId={id} editorValid={valid} editorDisabled={disabled}>
        {label}
      </Label>
      <NumericTextBox
        ariaDescribedBy={`${hintId} ${errorId}`}
        valid={valid}
        id={id}
        disabled={disabled}
        {...others}
      />
      {showHint && <Hint id={hintId}>{hint}</Hint>}
      {showValidationMessage && <Error id={errorId}>{validationMessage}</Error>}
    </FieldWrapper>
  );
};
const App = () => {
  const handleSubmit = (dataItem) => alert(JSON.stringify(dataItem, null, 2));
  return (
    <Form
      onSubmit={handleSubmit}
      initialValues={{
        genderselected: genders,
      }}
      render={(formRenderProps) => (
        <FormElement
          style={{
            width: 400,
          }}
        >
          <Field
            id={'Kilometers'}
            name={'Kilometers'}
            label={'Kilometers'}
            component={FormNumericTextBox}
          />
          <Field
            id={'Miles:'}
            name={'Miles:'}
            label={'Miles:'}
            component={FormNumericTextBox}
          />
          <div className="k-form-buttons">
            <Button
              themeColor={'primary'}
              type={'submit'}
              disabled={!formRenderProps.allowSubmit}
            >
              Submit
            </Button>
            <Button onClick={formRenderProps.onFormReset}>Clear</Button>
          </div>
        </FormElement>
      )}
    />
  );
};
ReactDOM.render(<App />, document.querySelector('my-app'));

2 Answers, 1 is accepted

Accepted

Product Bundles

DevCraft

Web

Mobile

Document Management

Desktop

Reporting

Testing & Mocking

CMS

UI/UX Tools

Debugging

Free Tools

Support and Learning

Resources

Productivity and Design Tools

Integrating numeric conversion with Kendo Form using FieldRenderProps

2 Answers, 1 is accepted