can you please provide an example of kendo react selection grid along with pagination, filtering enabled ?

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? 😀