Questions on KendoReact Forum

2 questions

1 answer

28 views

i was adding masked-text box for inline-edit inside grid, similar to normal edit

in this section i wanted to have only numeric input with some format like hh:mm.

so i was using masked text box. but doing so on every onchange it is throwing me out of focus.

Editor

Grid

MaskedTextBox

answered on 15 Nov 2023

1 answer

122 views

implement a MaskedTextBox that displays the country flag

How can I implement a MaskedTextBox that displays the country flag automatically when a country code like +1 or +2 is entered for a phone number?

import * as React from "react";
import * as ReactDOM from "react-dom";
import {
  MaskedTextBox,
  InputPrefix,
  InputSuffix,
} from "@progress/kendo-react-inputs";
import { Button } from "@progress/kendo-react-buttons";
import { Icon } from "@progress/kendo-react-common";
const prefix = () => (
  <InputPrefix>
    <Icon name="user" />
  </InputPrefix>
);
const suffix = () => (
  <InputSuffix>
    <Button themeColor="primary" fillMode={"flat"} rounded={null}>
      Send
    </Button>
  </InputSuffix>
);
const App = () => {
  return (
    <div>
      <div>Number:</div>
      <MaskedTextBox
        prefix={prefix}
        suffix={suffix}
        mask="(999) 000-00-00-00"
        defaultValue="(359) 884-12-33-21"
        width={300}
      />
    </div>
  );
};