Description: When using MUI Autocomplete inside the KendoReact GridColumnMenuFilter, clicking on the autocomplete input triggers the Popper component outside the GridColumnMenuFilter wrapper. However, when selecting an option from the Popper, the outside click event of the GridColumnMenuFilter is triggered, causing the filter menu to close unexpectedly.

Steps to Reproduce:

1. Open the provided demo link.

2. Click on the MUI Autocomplete input inside the GridColumnMenuFilter.

3. Observe that the Popper appears outside the filter menu.

4. Click on an option in the Popper.

5. Notice that the GridColumnMenuFilter closes immediately after selecting an option.

Expected Behavior: Selecting an option from the MUI Autocomplete Popper should not trigger the outside click event of the GridColumnMenuFilter, preventing it from closing unintentionally.

Actual Behavior: The GridColumnMenuFilter closes when selecting an option from the Popper.

import * as React from 'react';
import { AutoComplete } from '@progress/kendo-react-dropdowns';
import TextField from '@material-ui/core/TextField';
import Autocomplete from '@material-ui/lab/Autocomplete';

const data = [
  { title: 'The Shawshank Redemption', year: 1994 },
  { title: 'The Godfather', year: 1972 },
  { title: 'The Godfather: Part II', year: 1974 },
  { title: 'The Dark Knight', year: 2008 },
  { title: '12 Angry Men', year: 1957 },
  { title: "Schindler's List", year: 1993 },
  { title: 'Pulp Fiction', year: 1994 },
  { title: 'The Lord of the Rings: The Return of the King', year: 2003 },
  { title: 'The Good, the Bad and the Ugly', year: 1966 },
  { title: 'Fight Club', year: 1999 },
];

export const CustomFilterUI = (props) => {
  const onChange = (event) => {
    const value = event.value === 'null' ? null : event.value === 'true';
    const { firstFilterProps } = props;
    firstFilterProps.onChange({
      value,
      operator: 'eq',
      syntheticEvent: event.syntheticEvent,
    });
  };

  const { firstFilterProps } = props;
  const value = firstFilterProps.value;

  return (
    <div>
      <h3>MUI Autocomplete</h3>
      <Autocomplete
        id="combo-box-demo"
        options={data}
        getOptionLabel={(option) => option.title}
        style={{ width: 300 }}
        renderInput={(params) => (
          <TextField {...params} label="Combo box" variant="outlined" />
        )}
        onChange={onChange}
        disablePortal
      />
      <h3>Kendo Autocomplete</h3>
      <AutoComplete data={data} textField="title" onChange={onChange} />
    </div>
  );
};

Demo Link: StackBlitz Demo

Additional Notes:

• The issue might be due to event propagation from the MUI Popper component.

• A potential fix could involve preventing the GridColumnMenuFilter from closing when clicking inside the Popper.

• Seeking guidance on how to prevent this behavior while maintaining correct filtering functionality.

Looking forward to your support and suggestions. Thank you!

We have a grid that has expand collapse functionality on the first column of the grid.  I would like to make the header of the column a button or place an icon that could be clicked to toggle the expand/collapse functionality.

I’m using a Kendo form and rendering it dynamically. I’m facing an issue with the upload component validation. For example, when creating a new record, a validation error shows up if the file is not uploaded. However, after the data is saved and when I edit the record, if any other fields are changed, the validation error appears for those fields. What I want is to skip the validation for the upload component while editing, so the form can be submitted without it, but the validation should still be enforced during creation.

I am using these type off code

these type data can be use and these my form code 

Hi there,

I have a Kendo React Grid with a GridColumnMenuCheckboxFilter. Some of the values can get out of hand long, which push the filter dialog width out too far. Is it possible to set a width limit?

Versions:

@progress/kendo-react-inputs: 9.4.0

@progress/kendo-react-form: 9.4.0

(all @progress dependencies at 9.4.0)

When using NumericTextBox outside of a KendoReact Form FieldWrapper, the min attribute seems to behave as expected. For the following case:

<NumericTextBox label={'Non-Form NumericTextBox Input'} min={0} />

the NumericTextBox blur event seems to set the input value to 0, as expected.

However, when used as part of a form wrapper, as follows:

<Form
    render={(props: FormRenderProps) => {
        return (
            <Field
              name="numericInputField"
              label={'Form NumericTextBox Input'}
              component={FormNumericTextBox}
              min={0}
            />
        );
    }}
/>

export const FormNumericTextBox = (fieldRenderProps: FieldRenderProps) => {
  const {
    validationMessage,
    touched,
    label,
    id,
    valid,
    disabled,
    hint,
    onBlur,
    customProp,
    required,
    onChange,
    min,
    max,
    ...others
  } = fieldRenderProps;

  const showValidationMessage: string | false | null =
    touched && validationMessage;
  const showHint: boolean = !showValidationMessage && hint;
  const hintId: string = showHint ? `${id}_hint` : '';
  const errorId: string = showValidationMessage ? `${id}_error` : '';

  /*
      Temporary workaround.  Kendo React does not remove negative sign when changing input value from negative to zero.
  */
  const customOnChange = (event: NumericTextBoxChangeEvent) => {
    if (min === 0 && event.value && event.value < min) {
      onChange({ ...event, value: 1 });
      onChange({ ...event, value: min });
    } else {
      onChange({ ...event });
    }
  };

  return (
    <FieldWrapper>
      <NumericTextBox
        ariaDescribedBy={`${hintId} ${errorId}`}
        valid={valid}
        id={id}
        disabled={disabled}
        onBlur={customProp?.customOnBlur}
        required={true}
        onChange={onChange}
        min={min}
        max={max}
        label={label}
        {...others}
      />
      {showHint && <Hint id={hintId}>{hint}</Hint>}
      {showValidationMessage && <Error id={errorId}>{validationMessage}</Error>}
    </FieldWrapper>
  );
};

In this case, when we set the value to a negative number, the blur event seems set the value to 0, but the negative sign (-) remains.
For convenient reproduction of this behavior, I have written up the following StackBlitz demo: https://stackblitz.com/edit/react-ts-sy4etxrp

Please let me know whether or not this is a bug, or if we need to do something differently besides using the included customOnChange as a temporary workaround.

Hello, we are using KendoReact DataGrid 9.3.1. I want to show something more specific and branded when the DataGrid has no records. I tried the example on this page:

https://www.telerik.com/kendo-react-ui/components/grid/api/gridnorecords

What is the correct way to do this in 9.3.1? There appears to be no "noRecords" property on Grid and <GridNoRecords> fails no matter what I put in there, also doesn't support a "content" attribute. What is the correct way to use it?

Hi,

We are using the KendoReact DatePicker component, with the following prop:

formatPlaceholder={{ day: "Tag", month: "Monat", year: "Jahr" }}

It creates the following warning in our application:

The reason can be found here:

When using the DatePicker, it seems that the `span` component gets given the `formatPlaceholder` prop as is.

Is there a way to get around it?

We are using React 19.

Thank you!

Greetings,

I'm having an issue where a blank space would appear on the column header whenever I add a column.

This only happens when locked columns are present in the grid.

Here is the screenshot where "Actions" is a locked column, and the blank space is at the left of the "Actions" column.

Please help, thanks!

Hi everyone,

I’m using the KendoReact Menu component, which opens on hover. However, I’ve noticed that when clicking on a MenuItem (in our case, we’re opening a side panel from a grid item), the menu does not automatically close. I couldn’t find any prop in the documentation that controls this behavior.

Additionally, I’m curious about the decision to stop rendering the menu inside a portal in versions 9+. This change impacts how the menu behaves in certain layouts.

• Is there a built-in way to make the menu close when a MenuItem is clicked?

• If not, what would be the best way to achieve this?

Any guidance or workarounds would be greatly appreciated!