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.

Hi,

The default Bootstrap and Kendo UI Bootstrap theme colours are not completely WCAG compliant. Before the introduction of the new colour system I was able to customise the colour of both Bootstrap and the Kendo UI Bootstrap theme in my index.scss to improve contrast very simply as follows:

/* ---------- begin bootstrap customisation ---------- */
$primary: blue;
$secondary: #495057;
$warning: #fa991f;
$info: teal;

$font-family-base: "Calibri";
/* ---------- end bootstrap customisation ---------- */

/* ---------- start kendo customisation ---------- */
$kendo-font-family: $font-family-base;
/* ---------- end kendo customisation ----------*/

// kendo
@import "/node_modules/@progress/kendo-theme-bootstrap/dist/all.scss";
// import bootstrap
@import "/node_modules/bootstrap/scss/bootstrap.scss";

The Bootstrap colour variable overrides combined with the order of imports was sufficient for the Kendo theme colours to inherit the change.

The colour system has now completely changed. From what I can see I will need to upgrade in multiple steps e.g. from v7 to v8 following the breaking changes guidance and then again from v8 to v10 for the new Dart sass breaking changes.

Could you please confirm that I will now have to perform separate overrides for both Bootstrap and and Kendo UI Bootstrap theme colours? Are you able to provide an example based on the snippet provided above?

Kind regards,

David

When using the cell prop to display an icon in the grid column. when we try clicking on the icon does not trigger the onRowClick event, 

sample code :

<Column
    title="Icon Name"
    width={20}
    headerClassName="custom-header"
     cell={(props) => {
      const { Name } = props.dataItem;
      return (
      <td className="classname">
          {Map[Icon] || ""}
      </td>
       );
       }}
      />

Not only for the icon for anything that uses cell prop and use td is not triggering the rowclick.

Would Appreciate any suggestions or possible solutions, Thank you...