Telerik Forums
KendoReact Forum
1 answer
9 views

I built this to show you what I'm talking about. Instead of the Grid expand to fill the Tab, instead the Tab expands to accommodate the Grid.

If you comment out line 22 and uncomment 23, you'll see that the Grid expand to fill the view and then a scrollbar for the Grid (not the entire view) will show up. But if you uncomment line 22 and comment out line 23, you'll see the opposite happening.

The same behavior can be observed by commenting/uncommenting lines 62 and 63.

https://codesandbox.io/p/sandbox/black-morning-kx4vpv

 

Thanks.

Yanko
Telerik team
 answered on 09 Jul 2025
0 answers
36 views

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.

Sai
Top achievements
Rank 1
 asked on 07 May 2025
1 answer
33 views

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.

Vessy
Telerik team
 answered on 23 Apr 2025
0 answers
46 views
Is there any method to hide the highlighted  Row and Column as shown below  and attached image as well.


Jaskaran
Top achievements
Rank 1
 asked on 19 Mar 2025
0 answers
57 views

Hello,

I am using the latest version of Kendo React Grid with multi-row selection and checkboxes. However, I encountered an issue where clicking on a cell (e.g., in the Product Name column) resets the previously selected checkboxes.

Steps to Reproduce:

  1. Click on multiple checkboxes to select rows.
  2. Click on a cell in the Product Name column.
  3. The previous checkbox selections are reset.

Expected Behavior:

  • I only want the checkboxes to control row selection.
  • Clicking on other cells (e.g., Product Name) should not affect the selected checkboxes.

Current Behavior:

  • Clicking a non-checkbox cell resets the checkbox selection.

Demo & Documentation:

<Grid data={products} style={{
      height: '400px'
    }} dataItemKey={DATA_ITEM_KEY} selectable={{
      enabled: true,
      drag: false,
      cell: false,
      mode: 'multiple'
    }} select={select} onSelectionChange={onSelectionChange} onHeaderSelectionChange={onHeaderSelectionChange}>
                <Column columnType="checkbox" />
                <Column field="ProductName" title="Product Name" width="300px" />
                <Column field="UnitsInStock" title="Units In Stock" />
                <Column field="UnitsOnOrder" title="Units On Order" />
                <Column field="ReorderLevel" title="Reorder Level" />
            </Grid>

Question:

How can I prevent clicking on other cells from affecting the checkbox selection? I want rows to be selected only via checkboxes, not by clicking other cells.

Thanks in advance!

Best regards,
Trustin


Trustin
Top achievements
Rank 1
Iron
 updated question on 22 Feb 2025
1 answer
81 views

In our grid we are providing an expansion field and providing a detail grid as given in the Master-Detail grid example:
React Data Grid Master-Detail Grids - KendoReact

In all of the examples the detail grid takes up the entire width of the main grid. I can limit the detail grid to be the screen size and align it to the left of the master grid, but I am having difficulty having the grid be sticky within the master grid. (here is an example from MUI Data Grid - Master detail - MUI X

I have tried making the inner div
position: sticky;
width: 90vw;
left: 5vw


but it does not scroll within the grid. Am I missing something easy?

Vessy
Telerik team
 answered on 19 Dec 2024
0 answers
72 views

Hi Folks,

I have been using  Kendo grid with infinite scroll also features incell edit and checkbox operation, It has input box(custom cells), select, checkbox fields.

but this gets really slow when we have more than 50-70 data in the grid.

please suggest how i can work on performance in this scenario.

please find the link below for the code i have folowing.

incell:  https://www.telerik.com/kendo-react-ui/components/grid/editing/editing-in-cell/

checkbox actions:  Customizing the Selection : https://www.telerik.com/kendo-react-ui/components/grid/interactivity/selection/

1 answer
93 views

Greetings,

I am using Kendo UI pivot grid version: @progress/kendo-react-pivotgrid": "^6.1.1

I am using the usePivotLocalDataService() function for local data binding. I am rendering the default row and default column axes dynamically. 
I am toggling the views calling this usePivotLocalDataService() for each different view. Its updating the data field dynamically but not updating columnAxes and rowAxes. I even passed it dynamically through props, but it was displaying the same column and row axes, i.e., maped initially.

Here is the code:

<PivotGridContainer>
<PivotGrid
className={`pivot-table-container3`}
{...pivotProps}
row={CustomRow}
rowAxes={rowAxis.current}
columnAxes={colAxis.current}
cell={(props: any) => (
<CustomCell2
{...props}
myFunc={myFunc}
tableLabel={tableLabel}
page={tableType}
views={views}
/>
)}
ref={pivotgrid}
style={{
// height: state.loading ? 350 : undefined,
maxHeight: 500,
}}
/>
{show && <PivotGridConfigurator {...configuratorProps} />}
<PivotGridConfiguratorButton onClick={handleButtonClick} />
{state.loading && <Loader />}
</PivotGridContainer>

Konstantin Dikov
Telerik team
 answered on 17 Jul 2024
Narrow your results
Selected tags
Tags
+127 more
Top users last month
Rob
Top achievements
Rank 3
Iron
Iron
Iron
Atul
Top achievements
Rank 1
Iron
Iron
Iron
Alexander
Top achievements
Rank 1
Veteran
Iron
Serkan
Top achievements
Rank 1
Iron
Shawn
Top achievements
Rank 1
Iron
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Rob
Top achievements
Rank 3
Iron
Iron
Iron
Atul
Top achievements
Rank 1
Iron
Iron
Iron
Alexander
Top achievements
Rank 1
Veteran
Iron
Serkan
Top achievements
Rank 1
Iron
Shawn
Top achievements
Rank 1
Iron
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?