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...

We have implement both a line and bar chart. After running a few tests none of the click events for the chart will fire using the left mouse button. All of them fire with the right-click. IS there a way to change this behavior to use a left-mouse-click?

const handlePlotAreaClick = (event: PlotAreaClickEvent) => { debugger }
const handleAxisLabelClick = (event: any) => { debugger }

<Chart
     onPlotAreaClick={(event: PlotAreaClickEvent) =>
        handlePlotAreaClick(event)
      }
      onAxisLabelClick={(event: any) => handleAxisLabelClick(event)}
    >
...
</Chart>

We are encountering an issue in our React application where the UI does not display the correct data in a grid component, even though the logged data is accurate. The issue persists when scrolling up and down in the grid.

Steps to Reproduce:

1. Load the grid with paginated or virtualized data.
2. Scroll down to load additional rows.
3. Scroll back up to view previously rendered rows.
4. Observe that the data displayed in the UI does not match the expected data.

Expected Behavior:

The UI should reflect the correct data for each row based on the logs and the data passed to the grid.

Observed Behavior:

• The logged values for each grid cell (dataItem[field]) are correct.
• However, the displayed data in the UI does not align with these logs.
• This issue appears to occur when using the following custom cell rendering logic:

<GridColumn
            field="columnNo"
            title="columnNo"
            width="100px"
            cell={({ dataItem, field }) => {
              // eslint-disable-next-line no-console
              console.log('value: ', dataItem[field]);
              return (
                <td key={`row-${dataItem.id}`}>
                  <span itemProp={`columnNo${dataItem[field]}`}>
                    {dataItem[field]}
                  </span>
                </td>
              );
            }}
          />

Troubleshooting Done:

1. Data Validation: Logged the dataItem, field, and dataItem[field] values, all of which are correct.
2. Key Prop: Verified that the key prop is used, though it may need adjustment.
3. React State Updates: Ensured the data is updated correctly and is not stale.
4. Grid Behavior: Temporarily removed custom cell rendering, but the issue persists with virtualization.
5. DevTools Inspection: Confirmed that DOM elements and attributes do not align with expected values during scrolling.

Environment Details:

• Frontend Framework: React 18.2
• Grid Component: @progress/kendo-react-grid": "^4.14.1"
• Browser: Version 131.0.6778.140 (Official Build) (arm64)
• State Management: Redux

return (
    <Wrapper itemProp="smart-table-selection">
      {loaders?.isLoading && (
        <>
          <Loading className="floated" />
          <LoadingMask />
        </>
      )}
      <div ref={refKendoTable}>
        <GridWrapper
          className="react-kendo-table"
          ref={kendoRef}
          style={{
            height: tableHeight + 56 - 16,
            marginBottom: 0,
          }}
          height={tableHeight - 16}
          rowHeight={56}
          data={orders.slice(page.skip, page.skip + PAGE_SIZE)}
          pageSize={PAGE_SIZE}
          total={numberOfRows}
          skip={page.skip}
          scrollable={'virtual'}
          onPageChange={pageChange}
          dataItemKey={tableDataCenter.selectionFieldName}
        >
          {/* Header selection checkbox */}
          <GridColumn
            field="selected"
            width="50px"
            headerCell={() => (
              <input
                type="checkbox"
                checked={isAllSelected}
                onChange={onHeaderSelectionChange}
              />
            )}
            cell={(props) => (
              <td>
                <input
                  type="checkbox"
                  checked={
                    selectedState[
                      // eslint-disable-next-line react/prop-types
                      props.dataItem[tableDataCenter.selectionFieldName]
                    ] || false
                  }
                  // eslint-disable-next-line react/prop-types
                  onChange={(e) => handleSelectionChange(e, props.dataItem)}
                />
              </td>
            )}
          />
          <GridColumn
            field="columnNo"
            title="columnNo"
            width="100px"
            cell={({ dataItem, field }) => {
              // eslint-disable-next-line no-console
              console.log('value: ', dataItem[field]);
              return (
                <td key={`row-${dataItem.id}`}>
                  <span itemProp={`columnNo${dataItem[field]}`}>
                    {dataItem[field]}
                  </span>
                </td>
              );
            }}
          />
          <GridColumn
            field={tableDataCenter.selectionFieldName}
            title={tableDataCenter.selectionFieldName}
            width="100px"
          />
          {/* {columnsRender} */}
        </GridWrapper>
      </div>
    </Wrapper>
  );