Completed
Last Updated: 12 Aug 2021 11:32 by ADMIN
ADMIN
Attila Antal
Created on: 13 Sep 2018 13:05
Category: Grid
Type: Bug Report
1
Horiozontal Scrollbar not visible in Microsoft Edge when RadGrid has scrolling and Frozen columns enabled
When Scrolling is enabled with Frozen columns in RadGrid, horizontal scrollbar not visible in Microsoft Edge.

Issue appears in Microsoft Edge Version:
- Microsoft Edge 42.17134.1.0
- Microsoft EdgeHTML 17.17134



WORKAROUND:

Apparently, setting the horizontal scrollbar's height to 17 pixels will make Microsoft Edge display it. (Note: in case it still not displaying, you may try with 18px)

To set the height, you can choose one of the options below:

1. Using CSS style to increase the size of the horizontal scrollbar by one pixel.

<style type="text/css">
    .RadGrid div[id$="_Frozen"] {
        height: 18px;

        /* or  */
        /*padding-bottom: 1px;*/
    }
</style>


2. Using JavaScript

Subscribe the grid to its GridCreated client-side event, and in the event handler increase the element's height with the scrollbar then revert it back to its original size with a delay:

<script type="text/javascript">
    function GridCreated(sender, args) {
        $('div[id$="_Frozen"]').height(17);
    }
</script>
2 comments
ADMIN
Peter Milchev
Posted on: 12 Aug 2021 11:32

The issue is not reproduced with the latest and supported version of the Edge browser and it is working as expected in the other officially supported browsers.

Regards,
Peter Milchev
Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

Kavitha
Posted on: 17 Sep 2018 14:01
Workaround : Subscribe the grid to its GridCreated client-side event, and in the event handler increase the element's height to 18px.

<script type="text/javascript">

    function GridCreated(sender, args) {
             var frozen = $telerik.$('div[id$=""_Frozen""]');
        setTimeout(function () {
            frozen.height(18);
        });
    }
</script>