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!

Hi,

I'm using Drag & Drop functionality for following:

Two droppable div areas, one on the left side of the screen, the other one on the right side. In the middle a (long) list of draggable elements, that can be dragged and dropped to either side. Everything works fine if the list is no longer than the screen. The draggable area seems to end at the bottom of the visible screen, although the div element is much longer.  After scrolling to the end of the list, the elements have to be dragged all the way up to the 'first page'.

Is it a bug or currently not supported? How can I use 'long' droppable areas ?

Copied from https://stackoverflow.com/q/55593449/1399272

I am trying to develop with Kendo React in a .NET Web Forms application. It looks like Kendo distributes their packages as a variety of JavaScript modules -- the dist folder in their node packages contains the following four subfolders:

• cdn/js
• es
• npm
• systemjs

I'm sure this is relatively painless to work with in some of the newer JavaScript systems, but I do not have access to utilities such as node.js to manage modules. I am trying to simply include a JavaScript file with a script tag, but so far have not had much luck. I get the following errors when trying to include @progress/kendo-react-common:

• cdn/js: Uncaught TypeError: Cannot read property 'string' of undefined
• es: Uncaught SyntaxError: Unexpected token { (not like I expect a raw browser to understand import anyway)
• npm: Uncaught ReferenceError: exports is not defined
• systemjs: Uncaught ReferenceError: System is not defined

It looks like @TylerDahle has done something similar here: https://stackoverflow.com/q/49740869/1399272. But I don't know where he gets his source from.

Is there any way to include a Kendo React script with a script tag?