Hello,

after upgrading KendoReact from version 10.x to 14.4.1, the PDFViewer stopped rendering the PDF document content.

We did not change the implementation. The PDF file is loaded from our server as a Base64 string and passed to the PDFViewer through the data prop.

Before the upgrade, the same Base64 value was rendered correctly. After the upgrade to 14.4.1, the PDFViewer toolbar is displayed, but the document content area is empty. The pager shows “Page 1 of 0”, and no PDF pages are rendered. Please see the attached screenshot.

Current behavior:

• PDFViewer toolbar is visible.

• Content area is blank.

• Pager shows “Page 1 of 0”.

• The same Base64 PDF data worked in the previous KendoReact version.

• No code changes were made except the KendoReact package upgrade.

Expected behavior:

• The PDF content should be rendered from the Base64 string as before.

Environment:

• @progress/kendo-react-pdf-viewer: 14.4.1

• KendoReact upgraded from: 10.x

• Data source: Base64 string returned from server

• Usage: <PDFViewer data={base64String} />

Could you please confirm whether there were any breaking changes or new dependency/version requirements for the PDFViewer between KendoReact 10.x and 14.4.1, especially related to Base64 data rendering, pdfjs-dist, @progress/kendo-pdfviewer-common, or theme versions?

Also, is the PDFViewer in 14.4.1 expected to work with a plain Base64 string passed to the data prop, or should the value be converted to ArrayBuffer/TypedArray instead?

Thank you.

I am using @progress/kendo-react-grid version 8.2.0 with virtual scrolling enabled.

Currently, virtual scrolling works correctly only when all data is loaded on the client side. My API returns the complete dataset at once, and for large datasets the Grid becomes very slow and the UI freezes.

Here is my current Grid configuration:

<Grid
  scrollable={scrollPagination ? "virtual" : "scrollable"}
  skip={scrollPagination ? scrollModePage.skip : page.skip}
  take={scrollPagination ? scrollModePage.take : page.take}
  data={
    scrollPagination
      ? expandedData.slice(0, scrollModePage.take)
      : expandedData
  }
  total={totalCount}
  onPageChange={pageChange}
  rowHeight={rowHeight ?? 60}
  pageable={{
    buttonCount: 4,
    pageSizes: defaultPageSizes ?? [10, 20, 30, "All"],
    pageSizeValue: pageSizeValue,
    responsive: true
  }}
/>

Current issue:

• The API returns all records at once.

• For large datasets, the Grid becomes slow and the screen freezes.

• Virtual scrolling appears to work only after all data is loaded into memory on the client side.

I am using @progress/kendo-react-grid version 8.2.0 with virtual scrolling enabled.

Currently, virtual scrolling works correctly only when all data is loaded on the client side. My API sends the complete dataset at once, and for large datasets the screen becomes stuck/freezes because the Grid renders too much data.

Here is my current configuration:

<Grid
  scrollable={scrollPagination ? "virtual" : "scrollable"}
  skip={scrollPagination ? scrollModePage.skip : page.skip}
  take={scrollPagination ? scrollModePage.take : page.take}
  data={scrollPagination
    ? expandedData.slice(0, scrollModePage.take)
    : expandedData}
  total={totalCount}
  onPageChange={pageChange}
  rowHeight={rowHeight ?? 60}
/>

When using the TaskBoard component, a horizontal scrollbar appears at the bottom of the board even when the columns fit within the available viewport width. This issue can be reproduced on the official Telerik demo page.

demo:  demos.telerik.com/kendo-react-ui/taskboard/overview/func

**Code example:**

// Grid usage
<Grid
  cells={{
    group: {
      groupHeader: (args) => {
        if (args.level === 0) return <BalloonGroupHeader {...args} />
        if (args.level === 1) return <ModuleGroupHeader {...args} />
        return null
      },
    },
  }}
/>

// Custom group header component
const BalloonGroupHeader = (props: GridGroupCellProps) => {
  const { key, ...restTdProps } = props.tdProps as any
  return <td key={key} {...restTdProps} />
}

kendo-react: 8.2.0

"react": "^18.2.0"

Hey Team!

We're looking to implement a scroll into view for our Kendo grid using Typescript. This example is similar to what we are looking to do when the grid first loads. https://www.telerik.com/kendo-react-ui/components/grid/scroll-modes/scroll-into-view 

Is it possible to change the background color of the row once it scrolls to the target row?

Thanks in advance!

Hi

There is functionality in kendo asp.net tabstrip for drag to order.
How can we achieve same for kendoreact

Hi,

I am trying to implement in-grid date-range filtering using a custom filterCell in KendoReact Grid.

Context:
I followed the Knowledge Base article:
React Create a Date-Range Filter in the Grid - KendoReact

I adapted the example to my project and used a custom filterCell for date-range filtering.
However, I noticed an issue:

When two or more columns with the same custom date filter cell are adjacent, the filter UI of the neighboring columns is rendered inside the first column's filter cell.

Example:
app.jsx - nodebox - CodeSandbox
When column order is: [text, text, date, date, text] - The filter UI of both date columns is rendered inside the first date column.
When I change the order to: [text, text, date, text, date] - The filters render correctly and independently.

Thank you.
Bohdan