This is a migrated thread and some comments may be shown as answers.

Horizontal Scrolling within Grids

8 Answers 960 Views

General Discussions

This is a migrated thread and some comments may be shown as answers.

8 Answers, 1 is accepted

answered on 13 Feb 2019, 04:25 PM

ezgif-com-video-to-gif.gif

Here is the video. Had to edit it a little to make it less than 2mb, but this is the exact moment when the scrollbar gets stuck. Prior to to that I was just clicking and dragging on the scrollbar to try and trigger the problem.

answered on 15 Feb 2019, 09:56 PM

This video gif is from the kendo-ui grid frozen-columns demo. There is a scrollbar on the right for me, but it only appears when scrolling. I'll attach the snippet for the piece of code I am running that is getting the same problem. You'll notice the height of the container is the same as the height of the contents, so no vertical scrolling in this situation.

<Grid

resizable={true}

reorderable={true}

filterable={true}

groupable={false}

sortable={true}

style={{height: '100%'}}

total={props.activityLogStore.total}

skip={props.activityLogStore.page && props.activityLogStore.page.skip}

pageSize={props.activityLogStore.page && props.activityLogStore.page.take}

pageable={true}

data={toJS(props.activityLogStore.list)}

filter={props.activityLogStore.filter}

sort={toJS(props.activityLogStore.sort)}

onDataStateChange={(event) => props.activityLogStore.find(event)}

>

<GridColumn field="createdAt" title="Time Stamp" filterable={false} cell={GridMomentDateCell} width="200px"

format="MM/DD/YYYY HH:mm:ss"/>

<GridColumn field="emailAddress" sortable={false} title="Email" width="190px"/>

<GridColumn field="foo" sortable={false} title="Foo" width="190px"/>

<GridColumn field="bar" title="Bar" filter="boolean" width="175px"/>

<GridColumn field="tags" title="Tag" sortable={false} width="190px"/>

</Grid>

answered on 18 Feb 2019, 07:36 AM

Hello, Benjamin,

Thank you for the code.

I made an example using a similar code and the issue is not reproducible.

Could please check the example and see if you will be able to replicate the issue on it:

https://stackblitz.com/edit/react-wrurgl?file=app%2Fmain.js

Also, please have in mind that the jQuery Grid and the React one are very different. If it is only reproduced on the jQuery version, please let me know and I will transfer this to my colleagues from the jQuery team to take a look at it.

Regards,
Stefan
Progress Telerik

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items

Product Bundles

DevCraft

Web

Mobile

Document Management

Desktop

Reporting

Testing & Mocking

CMS

UI/UX Tools

Debugging

Free Tools

Support and Learning

Resources

Productivity and Design Tools

Horizontal Scrolling within Grids

8 Answers, 1 is accepted