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?

Hi,

I would like to know if the Scheduler provides any built-in functionality to automatically position the view at a specific hour in the Week View. For example, an automatic scroll to a selected time when the component is rendered.

Is there any available property or method to achieve this?

Hi,

I have a React Grid displaying data from a remote API. I've added filters to most of the columns, which seem to work well where the underlying property to be filtered against is a top level field. However, I also need to filter against a nested array of items that may exist within each row. I've not been able to achieve this thus far, possibly because it's not supported, but I'd thought I'd ask here anyway.

To demonstrate the problem more clearly, here is an example JSON dataset of 3 items:

[
  {
    "id": "c0664e54-b3d6-4c69-b58e-04817d5aaa3c",
    "title": "Item 1",
    "description": "",
    "tasks": [
      {
        "id": "4c9e6015-e086-46cd-bd7d-6bf15c0f2760",
        "type": 3,
        "name": "Review",
        "description": "",
        "assignedTo": {
          "displayName": "User 1",
          "emailAddress": "user1@contoso.local"
        },
        "dueDate": "2024-12-21T10:51:40+00:00"
      },
	  {
        "id": "4c9e6015-e086-46cd-bd7d-6bf15c0f2761",
        "type": 4,
        "name": "Review",
        "description": "",
        "assignedTo": {
          "displayName": "User 2",
          "emailAddress": "user2@contoso.local"
        },
        "dueDate": "2024-12-21T10:51:40+00:00"
      }
    ],
    "createdOn": "2023-12-01T17:35:32+00:00",
    "modifiedOn": "2023-12-01T17:35:32+00:00"
  },
  {
    "id": "df0e2fb3-9e1f-4986-ab06-04c52b19371a",
    "title": "Item 2",
    "description": "",
    "tags": [ {
        "id": "2c9e6015-e086-46cd-bd7d-6bf15c0f2760",
        "type": 3,
        "name": "Review",
        "description": "",
        "assignedTo": {
          "displayName": "User 1",
          "emailAddress": "user1@contoso.local"
        },
        "dueDate": "2024-12-21T10:51:40+00:00"
      }],
    "createdOn": "2024-08-12T13:13:05+00:00",
    "modifiedOn": "2024-08-12T13:13:05+00:00"
  },
  {
    "id": "e43ef097-bad9-4bf5-bce0-08c63ac50308",
	"title": "Item 3",
    "description": "",
    "tags": [ {
        "id": "3a4e6015-e086-46cd-bd7d-6bf15c0f2761",
        "type": 4,
        "name": "Review",
        "description": "",
        "assignedTo": {
          "displayName": "User 2",
          "emailAddress": "user2@contoso.local"
        },
        "dueDate": "2024-12-21T10:51:40+00:00"
      }],
    "createdOn": "2023-12-11T09:32:04+00:00",
    "modifiedOn": "2023-12-11T09:32:04+00:00"
  }]

In this data set, each item can have one or more tasks associated with it. I use a custom cell format to display a list of the task assignees, but I also need to be able to filter on this column. The filter list would show a list of all of the available task assignees (i.e. the liveTasks.assignedTo.displayName value). So that when a user name is selected to filter, we only show the items where that person has an open task.

My GridColumn syntax currently looks like this:

<GridColumn field="tasks" title="Task assignee(s)" cell={CustomLiveTaskAssigneesCell}  columnMenu={TaskAssigneeColumnMenuCheckboxFilter} width="150px" />

My TaskAssigneeColumnMenuCheckboxFilter component looks like this:

export const TaskAssigneeColumnMenuCheckboxFilter = (props: GridColumnMenuProps) => {
  const {data} = useFetchTaskAssignees();
  //let taskAssignees = (data || []).map(assignee => { return { "liveTasks.assignedTo" : {"displayName" : assignee }} });
  let taskAssignees = (data || []).map(assignee => { return { displayName : assignee } });
  return (
    <div>
      <GridColumnMenuCheckboxFilter {...props} data={taskAssignees} expanded={true} />
    </div>
  );
}

Hopefully that gives enough context. Is what I'm trying to do possible at all?

Many thanks.