Questions on KendoReact Forum

1 answer

143 views

Open Custom form when user click on button outside of Scheduler

Hello,

Please refer to this stack blitz demo based on Customization of Editot

Need to open below custom Scheduler Form with default Recurrence Rule UI when user clicks on the button "New Schedule" .

When trying to add a recurrence Rule component, it gives the below error. (Please check commented code into custom-form-editor.tsx file

Please let me know, how to achieve this.

Thanks

Scheduler

answered on 27 Dec 2023

1 answer

68 views

Kendo React - Grid - External Filter - Hide filter expression but keep the data filtered

Good evening,

Is there a way to keep a certain filter expression hidden ("Is not null") while still applying it on External filter?

Please help, thanks!

Jason

Filter

Grid

answered on 25 Dec 2023

0 answers

353 views

Kendo-react-pdf throwing error when building.

I have used PDFExport component, but I get an error while building. I have installed @progress/kendo-drawing also, still build fails. What am I missing? When running, it is showing error for either kendo-drawing or kendo-file-saver or kendo-react-common. I don't need these for my project still installed it due to the error, but this doesn't fixed the issue.

ModuleNotFoundError: Module not found: Error: Can't resolve '@progress/kendo-drawing' in 'C:\Users\...\AppData\Local\Bit\capsules\9789..\node_modules\.pnpm\@progress+kendo-react-pdf@7.0.2_react-dom@18.2.0_react@18.2.0\node_modules\@progress\kendo-react-pdf'

PDF Processing

updated question on 24 Dec 2023

0 answers

66 views

Overlapping Messages in Conversational UI

Messages get overlapp as seen below. I am using KendoReact and React bootstrap. Any solution to fix this please?

Conversational UI

asked on 22 Dec 2023

1 answer

131 views

Kendo React - Grid - Date filter with operator "Is before/Is after" is showing null records

Greetings,

I'm having an issue with the Date filter when the grid contains null date values.
I'm currently using the following operators for the Date filter:

{ text: 'grid.filterAfterOperator', operator: 'gt' },
{ text: 'grid.filterBeforeOperator', operator: 'lt' },
{ text: 'grid.filterIsNullOperator', operator: 'isnull' },
{ text: 'grid.filterIsNotNullOperator', operator: 'isnotnull' }

The "Is null/Is not null" operators are working but the "Is before/Is after" operators are not filtering out the null values.
Is there a way to fix this? Thanks!

Jason

DatePicker

Filter

Grid

answered on 22 Dec 2023

1 answer

313 views

Form Field Custom Input Rerender

Using version 7.0.2 for all kendo-react dependencies.

I'm trying to use a custom Input component for a form Field component in order to achieve a custom onBlur functionality, which will set a state variable in parent component of the Field. The following code causes an infinite re-render for the custom input component:

export const User = () => {

    const [existingUser, setExistingUser] = React.useState({});

    const handleUserResponse = (result: any) => {
        if (result.data) {
            setExistingUser(result.data[0]);
        }
    };

    const UserEmailInput = (props: FieldRenderProps) => {
      React.useEffect(() => {
          console.log("UserEmailInput Re-Render");
      }, []);

      const [value, setValue] = React.useState<string>('');
      const emailOnBlur = () => {
        fetch(...).then((response: any) => {
          console.log(response);
          setExistingUser(response.data[0]);
        };
      };

      return (
        <FormMaskedTextBox
            {...props}
            onChange={(e: any) => { setValue(e.value); }}
            onBlur={emailOnBlur}
        />
      );
    };

    return (
        <div style={{ marginTop: '5px', marginBottom: '5px' }}>
            <Card>
                //Form component lives in parent component.
                    <Field
                        name={"email"}
                        label={"E-mail:"}
                        component={UserEmailInput}
                        validator={[
                            requiredValidator("E-mail"),
                            lengthValidator("E-mail", 255),
                            regexValidator("E-mail", emailRegex)
                        ]}
                        id="emailID"
                    />
                </CardBody>
            </Card>
        </div>
    );
};

If I move the UserEmailInput component outside of the GroupUser component, the infinite re-render is resolved, but I lose the ability to set a the state variable in GroupUser. I could feasibly use a React Context for this, but I'd prefer to use those as sparingly as possible.

Can anyone advise me on this infinite re-render issue, and how I might be able to mitigate it without moving my custom input field outside of the component where the Field is rendered, and where my state variable needs to be set?

Form

Input

answered on 20 Dec 2023

1 answer

91 views

There is a problem when using Grid's row detail and group at the same time

Hi, there are three issue in my demo, please check. and if you find any message please give me replay, Thank a lot.

1. All rows become expanded by default.
2. Click the minus sign. The row detail data is not updated.

3. Group-level expansion does not work properly

cool-field-mpzjjj - CodeSandbox

Grid

answered on 20 Dec 2023

1 answer

137 views

Aggregate in kendo grid react

Hi Team,

I am trying to implement aggregate in my grid which is written in class component.

I have to display aggregate both at top and bottom(in corresponding column) while doing grouping. I am unable to get "groupFooter as rowtype option while writing cellRender function.

Const cellRender = (tdElement, cellProps) =>{

if(cellProps.rowType==="groupFooter"){

}

Grid

answered on 19 Dec 2023

1 answer

181 views

New Project Failure

The error displayed is

ERROR in ./node_modules/@progress/kendo-react-popup/index.mjs

I followed these instructions from https://www.telerik.com/kendo-react-ui/components/getting-started/

npx create-kendoreact-app

Below is my configuration

? What is the name of your project? demoapp
? Do you want to use TypeScript? No
? Do you want to use SASS? Yes
? Which Kendo UI Theme do you want to use?
❯ default
bootstrap
material

after this i entered the directory and performed

npm i npm run start

I get errors like

ERROR in './node_modules/@progress/kendo-react-layout/...'

This is a NEW Project with React 18 and Node 18.15

Calendar