Questions on KendoReact Forum

1 answer

37 views

How to Scroll Into View and Highlight Row in Grid

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!

Grid

answered on 07 May 2025

0 answers

35 views

How to Make Kendo Grid Scrollable with Min Width and Expand Fully on Larger Screens

How can I configure the Kendo UI Grid so that it uses the full available horizontal space as the screen size increases, but also enforces a minimum width (e.g., 1200px) so that on smaller screens, a horizontal scrollbar appears instead of columns being compressed or wrapped?

<div style={{ overflowX: "auto", whiteSpace: "nowrap" }}>
<Grid
data={data}
pageable={{ pageSizes: [20, 50], buttonCount: 5 }}
total={totalCount}
pageSize={pageSize}
skip={skip}
onDataStateChange={handleDataStateChange}
onRowClick={handleRowClick}
>
<Column field="id" title="ID" width={150} />
<Column field="name" title="Name" width={200} />

{isDetailsExpanded && (
<>
<Column field="detail_1" title="Detail Field 1" width={250} />
<Column field="detail_2" title="Detail Field 2" width={120} />
</>
)}

<Column field="date" title="Date" width={150} />
<Column field="status" title="Status" width={100} />
</Grid>
</div>

What we've tried:

Setting style={{ minWidth: 1200 }} on the Grid itself.

Explicitly setting minWidth or width for each column.

Despite these efforts, the grid still does not consistently maintain the expected layout — on smaller screens, some columns are compressed, and on larger screens, the grid doesn't always expand to use the full width.

Thanks in advance for any help or suggestions! I really appreciate your time and support.

Grid

GridLayout

asked on 07 May 2025

0 answers

35 views

Kendo React Grid Filter Issue with Turkish Characters "i"

I'm using Kendo React Grid (@progress/kendo-react-grid@9.1.0) with client-side filtering. One of my columns contains Turkish words like "CEVİZ" (with capital dotted İ, U+0130). I noticed a strange behavior when filtering:

Typing "cevi" in the filter works correctly and returns "CEVİZ"
Typing "ceviz" does not return any results
Typing "CEVİZ" works
Typing "iz" does not return results
Similar issues happen with words like "SİDE" → "si" works but "sid" doesn't

It seems this is related to how JavaScript lowercases "İ" into "i\u0307" (with a combining dot), which causes unexpected behavior in includes() filtering.

I have lowercased to column data from "CEVİZ" to "ceviz" before displaying but still have same problem.

Questions:

Does the Kendo Grid's built-in client-side filtering normalize or handle Turkish casing (e.g., toLocaleLowerCase("tr"))?
Is there a recommended way to override or customize the string filtering logic to properly handle Turkish characters like İ?
If I provide a custom filter function, how can I ensure it's properly integrated for all relevant columns?

Thanks in advance!

Filter

Grid

updated question on 02 May 2025

1 answer

33 views

TimePicker renders DOM structure with duplicate IDs

@progress/kendo-react-dateinputs v9.4.1
@progress/kendo-react-labels v9.4.1

When using TimePicker with a manually defined Label component as such:

<Label 
    id="time-picker-label"
    editorId="time-picker"
    ...
>
    TimePickerLabel
</Label>
<TimePicker
    ariaLabelledBy="time-picker-label"
    id="time-picker"
/>

The generated HTML rendered to the DOM includes a span which has the ID attached to the TimePicker component, as well as the input control element which bears the same ID. This poses a screen-reader accessibility issue given that the label element's "for" value needs a unique ID.

Is this a known issue, and has it been resolved in a later version, or is there a plan to resolve this?

Accessibility

Labels

TimePicker

answered on 25 Apr 2025

1 answer

30 views

The KendoReact Grid Grouping does not working on mobile

Hi,

The KendoReact Grid Grouping does not working on mobile.

When trying to group columns by dragging them with the mouse, it fails.

Kendo Version 6.0.2 is in use.

Please check.

Grid

GridLayout

answered on 23 Apr 2025

1 answer

27 views

Issue Replacing GridColumn with Custom Column Component in Common Kendo Grid

Hi Kendo Team,

I’m working on creating a common reusable component for the Kendo React Grid in my project. I’ve built two components:

CustomGrid – a wrapper around the Kendo Grid component where I pass the data and configuration.
CustomGridColumn – a wrapper around the Kendo GridColumn component.

When I use CustomGrid with the regular GridColumn inside it, everything works perfectly.

However, when I try to replace GridColumn with my CustomGridColumn component, the columns do not render at all – it's like they're not recognized by the grid. I'm passing all the necessary props and structure correctly, but it's still not working.

Could you please help me understand what might be causing this issue? Is there a special requirement for column components to be recognized by the Grid?

Thanks in advance for your help!

Grid

answered on 22 Apr 2025

0 answers

32 views

Is there a way to download the examples as an app?

Is there a way to download the examples as an app? This way I can change the code on my machine and use an AI assistant against the code. Also be able to use the IDE's capability for code navigation and refactoring.

General Discussions

updated question on 22 Apr 2025

1 answer

32 views

Issue with custom Grid component and Grid Column Component in React column not rendering when passing props

Hi Kendo Team,

I'm working on a React project where I want to create a common reusable component for the Kendo UI Grid so that if there are any changes in the grid properties or behavior, I only need to update them in one place—this way I avoid updating it across the entire project.

Here's an example of how I'm using the Grid:

<Grid
data={orderBy(staffAuditData, sort).map((item) => ({
...item,
[SELECTED_FIELD]: selectedState[idGetter(item)],
}))}
checkboxElement
style={{
height: staffAuditData.length > 0 ? "100%" : "250px",
}}
dataItemKey={DATA_ITEM_KEY}
skip={page}
take={pageSize}
total={metaData.totalCount}
onPageChange={pageChange}
className="pagination-row-cus"
pageable={{
pageSizes: [10, 20, 30, 50, 100, 500],
}}
sort={sort}
sortable={true}
onSortChange={(e) => setSort(e.sort)}
filterOperators={filterOperators}
onDataStateChange={dataStateChange}
onHeaderSelectionChange={onHeaderSelectionChange}
>
<GridColumn title="Affected Staff" field="affectedStaffName" className="cursor-default" />
<GridColumn title="Affected By" field="affectedByStaffName" className="cursor-default" />
<GridColumn title="Section" field="affectedTable" className="cursor-default" />
<GridColumn title="Action" field="actionName" className="cursor-default" />
<GridColumn
title="Date & Time"
cell={(props) => {
let date = props.dataItem.utcDateCreated;
return (
<td className="cursor-default">
{moment.utc(date).local().format("M/D/YYYY")} at{" "}
{moment.utc(date).local().format("hh:mm A")}
</td>
);
}}
/>
</Grid>

import React, { useState } from "react";
import { Grid } from "@progress/kendo-react-grid";
const CommonGrid = ({ data, selectable = true, pageable = true, ...props }) => {
  const [selectedID, setSelectedID] = useState(null);
  const rowClick = (event) => {
    setSelectedID(event.dataItem.id);
  };
  return (
    <Grid
      data={data.map((item) => ({ ...item, selected: item.id === selectedID }))}
      //selectable={selectable}
      pageable={pageable}
      onRowClick={rowClick}
      style={{ width: "100%" }}
      {...props} // Pass any additional props (sorting, filtering, etc.)
    ></Grid>
  );
};
export default CommonGrid;

import React from "react";
import { GridColumn } from "@progress/kendo-react-grid";
const CommonGridColumn = ({ field, title, width, ...props }) => {
  return <GridColumn field={field} title={title} width={width} {...props} />;
}
export default CommonGridColumn;

So I created two common components:

CommonGridComponent – which handles the Grid wrapper and works fine
CommonGridColumn – which I'm trying to use to handle columns dynamically

However, when I pass props to CommonGridColumn, the column doesn't show up in the grid. The same column works when used directly with GridColumn. Is there a recommended way to create a wrapper for GridColumn so it behaves correctly?

Any advice or example on how to build a custom reusable GridColumn component would be really helpful.

Thank you!

Grid

answered on 18 Apr 2025

1 answer

34 views

How can I customize the design of a Kendo UI Drawer?

I have a drawer design like this. I'm trying to create it, but I don't know how to design this kind of image. I am use Kendo react drawer

const CustomItem = (props: DrawerItemProps) => {
  const { visible, ...others } = props;
  let dataExpanded = props.expanded;
  const arrowDir = dataExpanded ? chevronDownIcon : chevronRightIcon;
  return visible === false ? null : (
    <DrawerItem {...others}>
      <SvgIcon icon={props.svgIcon} />
      <span className={'k-item-text'}>{props.text}</span>
      {dataExpanded !== undefined && (
        <SvgIcon
          icon={arrowDir}
          style={{
            marginLeft: 'auto',
          }}
        />
      )}
    </DrawerItem>
  );
};