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>
  );
};  

Hi,

Please see this example https://codesandbox.io/s/thirsty-bohr-2s8dmm?file=/app/main.jsx. There is a very simple DatePicker and a very simple Grid in the page. The Grid has 1000 rows. When clicking the DatePicker button, it take 1 - 2 seconds to show the calendar dropdown, which  significantly slower then normal.

Thanks,

Jie

I'm working on a component library, and I'd like to wrap the Kendo Cards component with additional stuff that matches our requirements; however, I get an error about hooks being an issue due to the nesting.  Is there a way around this?

import { ReactNode } from 'react';
import { Card as KendoCard } from '@progress/kendo-react-layout';

export interface CardProps {
  /**
   * any nested JSX elements
   */
  children?: ReactNode;
}

/**
 * Primary UI component for wrapping content in a card
 */
const Card = ({ children }: CardProps) => (
  <KendoCard
    style={{
      width: 260,
      boxShadow: '0 0 4px 0 rgba(0, 0, 0, .1)',
      marginTop: '15px',
      padding: '19px',
    }}
  >
    {/* <KendoCardBody> */}
      <h4>This is a change</h4>
      {children}
    {/* </KendoCardBody> */}
  </KendoCard>
);

export default Card;

Hi Team,

Can some one provide me a solution example for kendo react scheduler custom editor with recurrence rule.

Hello world,

I am trying to add a filter row inside the MultiColumnComboBox options. 

I have a table that looks like

Name______Age________City

RICK________47___________USA

Tom________47___________CA

I want  it to look like

Name______Age________City

filterbox___filterbox___filterbox

RICK________47___________USA

Tom________47___________CA

These filter boxes will be filtering by name, age, and city respectively. And I cannot really find a way where I can use this.

Any help is greatly appreciated!

I really appreciate any help you can provide.

UI

PDF

i need to display checkbox for each row. But only restrict to 1 selection at a time which is achieved through selection mode - single.

However there is checkbox displayed at header level as well which i dont want to display to user..how to achieve this ?

I have a requirement to include a checkbox list field on a form--one field with N number of checkboxes. The value of the "field" would be a comma-delimited list of the checked values. The field can optionally be required, too, meaning at least one of the N checkboxes must be checked before the field is considered valid.  For example:

There isn't a CheckboxGroup equivalent to the RadioGroup (though people have asked about it). And the RadioGroup component doesn't seem to have a "checkbox mode."

Is there a decent way to build a checkbox list field using KendoReact? If so, how? I've toyed with the following options:

• Using an array map function within the form to render a series of <Field ... component={Checkbox} /> instances.
  • This works, but validation is a challenge since each Field has its own validation message rather than the collective field having a singular validation message.
• Building a custom field, <Field ... component={MyCheckboxList} />, where MyCheckboxList includes several Checkbox components. This is based on the Custom Components documentation. This seems incorrect since <Field /> is meant to hold one and only one form input field not several.

I'd prefer not to hand-roll a checkbox list field without using KendoReact. I can't be the first KendoReact user to need a checkbox list on a form...right? 😀

Hello,

I have a React project, which uses "react-styleguidist": "13.0.0" to show various examples of the components, while kendo react grid 4.8.0 has been used. Using this version, the column resizer works as expected in the documentation page which contains several examples of Grid component.

I am trying to upgrade Kendo React Grid and all its related packages to version 5.1.0. This is the latest version possible to use, without upgrading also the project to React 18.

All functionalities seem to work as expected with version 5.1.0, except of column-resizer. It only works correctly in the 1st Grid example of the documentation page. In all other examples except of the 1st one, when I try to drag the column-resizer the column resizes correctly, but it also scrolls to the 1st grid example of the documentation page.

Do you have any suggestions on what could be the root of the problem?

Thank you.