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

I recently signed-up for the Telerik® UI for ASP.NET Core Trial

I was able to get the API Key

However I'm getting an VSCode Error with this package name:   Telerik.UI.for.AspNet.Core.Trial

Is there a common package name?  

How can I find the package name for my account?