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

[Sai]

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.

[Filip]

Hi, Sai,

I can suggest ensuring that the container wrapping the Grid has a minWidth set. This will prevent the Grid from shrinking below this width and trigger a horizontal scrollbar. Here is a possible snippet of the suggested approach:

<div style={{ minWidth: '1200px', overflowX: 'auto' }}>
  <Grid
    data={data}
    pageable={{ pageSizes: [20, 50], buttonCount: 5 }}
    total={totalCount}
    pageSize={pageSize}
    skip={skip}
    onDataStateChange={handleDataStateChange}
    onRowClick={handleRowClick}
    style={{ width: '100%' }}
  >
    <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>

In case this is not what you are looking for can you please send me an example from a third party library which has the desired behavior? This will enable me to inspect further if the same behavior can be achieved in the KendoReact Grid.

Regards,
Filip