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

Top horizontal scrollbar

3 Answers 60 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Álvaro
Top achievements
Rank 1
Álvaro asked on 07 Oct 2013, 08:07 AM
Hi,

my client needs a second horizontal scrollbar, in top of RadGrid.

I used to do it with this Javascript function:

function dobleScroll() {
    var element = document.getElementById('divGrid');
    if (element == null) {
        setTimeout('dobleScroll();', 1000);
    }
    else {
        var scrollbar = document.createElement('div');
        scrollbar.appendChild(document.createElement('div'));
        scrollbar.style.overflow = 'auto';
        scrollbar.style.overflowY = 'hidden';
        scrollbar.style.width = element.clientWidth + 'px';
        scrollbar.firstChild.style.width = element.scrollWidth + 'px';
        scrollbar.firstChild.style.paddingTop = '1px';
        scrollbar.firstChild.appendChild(document.createTextNode('\xA0'));
        scrollbar.onscroll = function () {
            element.scrollLeft = scrollbar.scrollLeft;
        };
        element.onscroll = function () {
            scrollbar.scrollLeft = element.scrollLeft;
        };
        element.parentNode.insertBefore(scrollbar, element);
    }
}

The element "divGrid" is the HTML div that contains the grid.
This code works properly with .NET GridView, but it doesn't work with Telerik RadGrid. RadGrid creates more "div" elements than GridView and these divs have the value "0" for scrollWidth property.

Can anybody help me?
Thanks a lot

3 Answers, 1 is accepted

Sort by
0
Venelin
Telerik team
answered on 10 Oct 2013, 08:05 AM
Hello Álvaro,

  Currently, there is no built-in feature that enables second scroll bar on top of the grid. At this point I can not suggest a straightforward solution because I am not familiar with your project's requirements (i.e where exactly this scroll bar should be positioned)  nor with the grid settings/implementation. As you understand, there are many scenarios that have to be handled, so the solution would depend on them.
Also please note that RadGrid provides much more features than GridView, so its structure is more complex based on its extended functionality.Therefore the same approach won't fit to the RadGrid control.

Regards,
Venelin
Telerik
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to the blog feed now.
0
Álvaro
Top achievements
Rank 1
answered on 11 Oct 2013, 10:28 AM
Thanks Venelin,

I know I'm developing a strange functionality. I've found a solution and I share it, perhaps there will be any users that they want to do the same with Telerik RadGrid.

I've modified "dobleScroll", and this is the function code now:

function dobleScroll() {
    var divGrid = document.getElementById('divGrid');
    if (divGrid == null) {
        setTimeout('dobleScroll();', 1000);
    }
    else {
        var grid = divGrid.childNodes[0].childNodes[0].childNodes[0].childNodes[0];
        var scrollbar = document.createElement('div');
        scrollbar.appendChild(document.createElement('div'));
        scrollbar.style.overflow = 'auto';
        scrollbar.style.overflowY = 'hidden';
        scrollbar.style.width = divGrid.clientWidth + 'px';
        scrollbar.firstChild.style.width = grid.scrollWidth + 'px';
        scrollbar.firstChild.style.paddingTop = '1px';
        scrollbar.firstChild.appendChild(document.createTextNode('\xA0'));
        var divContenedorGrid = grid.parentNode;
        scrollbar.onscroll = function () {
            divContenedorGrid.scrollLeft = scrollbar.scrollLeft;
        };
        divContenedorGrid.onscroll = function () {
            scrollbar.scrollLeft = divContenedorGrid.scrollLeft;
        };
        divContenedorGrid.parentNode.insertBefore(scrollbar, divContenedorGrid);
    }
}

Regards
0
Venelin
Telerik team
answered on 11 Oct 2013, 12:16 PM
Hello Álvaro,

It seems that you have found a solution for your specific case, but your are not explaining what the case is. As I mentioned in the previous post the solution strongly depend on the grid's settings. In this code snippet there are hard-coded values which means that it won't work for every case.

Regards,
Venelin
Telerik
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to the blog feed now.
Tags
Grid
Asked by
Álvaro
Top achievements
Rank 1
Answers by
Venelin
Telerik team
Álvaro
Top achievements
Rank 1
Share this question
or