Questions on KendoReact Forum

1 answer

159 views

KendoReact - Data Grid Row Re-order is not working for live updates.

Greetings!

I am using the Kendo-React data grid for live updates. However, I am facing an issue where duplications of rows occur inside the grid when trying to reorder a row by drag and drop. It works fine for static data but doesn't work for live updates. Can someone help me understand why this is happening?

I just used the same code mentioned in the below documentation.

https://www.telerik.com/kendo-react-ui/components/grid/rows/row-reordering/

Any assistance would be appreciated.

Regards,
Fareed Alam

Drag and Drop

Grid

answered on 28 Dec 2023

1 answer

149 views

[Solved] Problems rendering data list correctly with Combobox - showing [object Object] list

Problems with the "Field > Combobox" component when passing all the data, label and component properties to it, no problem, but when I add "textField" the combobox gives me a list of [object Object]. Maybe I'm passing the properties wrong, could you give me some clue?

I have the list of "moneda" that is passed in data through the API.

In the attached image you can see that it loads the list with the value of 'CLP' which is correct and you see the [Object object] list. Greetings

const [currency, setCurrency] = useState([]);

useEffect(() => {
(async() => {
const currency = await getDefiCurrencies();

setCurrency(currency);
})();
}, []);

---------------Edit Form --------------------------
<Field
id={'CodiMone'}
name={'CodiMone'}
label={'Currency'}
component={FormComboBox}
// textField={'CodiMone'}
data={currency}
/>

ComboBox

DropDownList

answered on 28 Dec 2023

0 answers

209 views

Layout Responsive Web Design

I would like to know if Layout or other components that can plan UI/layout RWD ?

Styling / Themes

Wrappers for React

asked on 28 Dec 2023

1 answer

107 views

Print Editortool for Multiple Orientation

Hi there,

Referring to the Editor and Editortool @progress/kendo-react-editor,

How can I use Print tools with multiple orientation. For Example, Potrait orientation for page 1 and Landscape orientation for page 2.

Editor

PDF Processing

answered on 28 Dec 2023

1 answer

212 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

140 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

474 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

90 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

235 views

[Solved] 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

413 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