Hello,

I recently asked a question about an infinite form re-render, and I was able to track it down to a problem misusing the Field component's validator prop.  Unfortunately, I'm struggling to achieve the desired functionality using kendo-react's recommended usage.

We'd like to be able to have a set of reusable and minimally customizable validators, for example, a length validator with a configurable maxLength value.

Here's what we have so far:

importReactfrom'react';
import { Field, FieldArray, Form, FormElement, FormRenderProps, FormSubmitClickEvent, FormValidatorType, KeyValue } from'@progress/kendo-react-form';
import { lengthValidator } from'./validators.tsx'exportconstUserForm = (props: UserFormProps) => {

    return (
        <Form
            render={() => {
                console.log("Form Render");
                return (
                    <FormElement>
                        <div className="form-content-container" style={{ overflowY: "scroll" }}>
                            <Field
                               name="test"
                               component={FormInput}
                               validator={lengthValidator(10)}
                           />
                        </div>
                    </FormElement>
                );
            }}
        />
    );
};


export const lengthValidator = (maxLength: number) => {
    return (value: any, _valueGetter: (name: string) => any) => { 
        if ( value ) {
            const valueStripped: string = value.replace(stripMaskRegex,""); 
            if ( valueStripped.length > maxLength ) {
                return  " Cannot exceed length " + maxLength;
            }
        }
        return undefined;
    };
};

Here is a stackblitz session demonstrating what we're wanting to do.  As you can see, it causes an infinite loop, as demonstrated by the re-render log in the Form's render function.

https://stackblitz-starters-oys53t.stackblitz.io

Obviously we are not doing this in the correct way, but I'm hoping someone can show me that there is a way to correctly create reusable validators that can take configuration arguments like this maxLength on a per-field basis.

Thanks!

Hi

I'm using a line chart in my project, but I don't want to show or hide the corresponding line by clicking on the legend. I blocked the default click event, but the hand pointer still remains when the mouse is over the legend. Is there any way to solve this?

Looking forward to your reply, thank you.

Regards,
Sunny

Greetings,

Is there a way to implement a search column text functionality inside the dropdown from the external filter?

The user can easily find their column name instead of scrolling through it one by one.

I have attached an image for the example. Thanks!

Jason

Hi,

In our project, there are many groups and each one has many child items, so we want "click group name" have the same behavior to the "triangle expand/collapse button" on the left of group name, but now the whole dropdown collapsed when we click the group name, and or our project we just want the child items can be selected not the parent one(group name), is there anyway we can use to click group name to open/collapse the inner list without collapse the whole dropdown list?
Szkaan (forked) - StackBlitz

Regards,
Sunny Hu

The scenario/issue:

When we scroll down to any section of the modal, then click the "PDF Preview" button, the PDF Preview shows correctly as expected. However, when "print" tool is clicked, the pages are not arranged in order. This only occurs when a printer is connected. But when it is printed, the actual printed pages are correctly ordered.

Additionally, we also noticed that in the official documentation https://www.telerik.com/kendo-react-ui/components/pdfviewer/toolbar/ , clicking the print tool does not display the pages in order. 

Question: 

Given the scenario above, is there a way to correctly display the pages in order when Print tool is clicked?

On kendo-react-form version 7.0.2, passing a validator to the Form component seems to invoke the validator function in an infinite loop.

When I render a form with the following code, my "Form Validation" console log prints to the console infinitely.  It doesn't seem to be a re-render issue, as my "Form Render" console log inside of the Form's render function does not seem to get called infinitely.

The particular form validator function I'm using for the purpose of this example is taken directly from https://www.telerik.com/kendo-react-ui/components/form/validation/#toc-form-validation.  

Can anyone advise me on whether this is the expected behavior, or if there is a problem with kendo-react-form 7.0.2, or if there's something obvious that I'm doing wrong in my implementation?

export const UserForm = (props: UserFormProps) => {

    const handleResponse = (result: any) => {
        setServerErrorState(result);
 if (result.errorDetails?.length > 0 || result.errorMessage) {
            onSubmitError(result);
 }
        else {
            setServerErrorState(null);
 onSubmitSuccess(result);
 }
    };

    const firstNameGetter: any = getter("user.firstName");
 const lastNameGetter: any = getter("user.lastName");

 const firstOrLastNameValidator = (values: any) => {
        console.log("Form Validation");
 if (firstNameGetter(values) || lastNameGetter(values)) {
          return;
 }
      
        return {
          VALIDATION_SUMMARY: "Please fill at least one of the following fields.",
 ["user.firstName"]:
 "Please check the validation summary for more information.",
 ["user.lastName"]:
 "Please check the validation summary for more information.",
 };
      };

    return (

        <Form
            id="test"
            initialValues={props.editorUser}
            onSubmitClick={handleSubmit}
            validator={firstOrLastNameValidator}
            render={() => {
                console.log("Form Render");
                return (
                    <FormElement>
 <div className="form-content-container" style={{ overflowY: "scroll" }}>
 <UserInformationSection /> //returns Field components wrapped in div
<UserAddressSection /> //returns Field components wrapped in div</div>
 </FormElement>
 );
            }}
        />
 );
};

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