Questions on KendoReact Forum

0 answers

385 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

73 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

160 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

344 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

99 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

149 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

191 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

answered on 18 Dec 2023

1 answer

120 views

Change the color of the entire row as red when there is a duplicate row in the grid

I want to show a particular row in red color when same records exists in some other row. I using inline editing.

Grid

answered on 18 Dec 2023

1 answer

269 views

The scroll of the grid inside the Drawer component doesn't work

Hi,

Why can't I use the Grid component inside the Drawer? The scroll disappears, and when scrolling occurs, it happens on the page and not within the grid. I created an example containing two grids. As you can see, the top grid has scrolling, but when inserted inside the Drawer, the scrolling no longer appears

Link
Oq8tmu (forked) - StackBlitz

These display: flex settings are responsible for this. I don't understand why, and what can I do to fix that?

Drawer

Grid

answered on 18 Dec 2023

2 answers

162 views

KendoUI React fails in Next after upgrading to 7.0.1

I have a project using KendoUI with NextJS 14 and using Turbo pack, I upgraded to 7.0.1 because it said "now with next support" but I am getting errors like this:

There are types at '/app/apps/myproject/node_modules/@progress/kendo-react-grid/index.d.ts',

but this result could not be resolved when respecting package.json "exports". The '@progress/kendo-react-grid' library

may need to update its package.json or typings.

General Discussions

answered on 15 Dec 2023