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.
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.
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.
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.
Product Name
column.Product Name
) should not affect the selected checkboxes.<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>
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
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?
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/
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: