Annoying display issue

[Barry Burton]

I have a minor but annoying display issue I don't know how to resolve.  Whenever I enable RadGrid scrolling (Scrolling-AllowScroll="true"), an unsightly hole opens up above the scroll bar on the right side of the grid (see attached).  I've tried various ways of filling this hole using css, but have found nothing that really works.

I know I can't be the only one who finds this a deficiency in an otherwise great product.

Does anyone have any ideas on how to resolve this issue?

[Princy]

Hello,

Try the following CSS.
CSS:

<style type="text/css">
.RadGrid_Default
{
  background: none repeat scroll 0 0 #F2F2F2 !important;
}
</style>

Thanks,
Princy.

[Barry Burton]

Thanks for the reply Princy.  I added the css to the page and to the grid (CssClass="RadGrid_Default").  It did help a bit with filling in the hole, but also affected the main grid as well. 

I have a detail table as part of the main  and notice the RadGrid handles the fill properly on the left hand side directly above where the gridview toggle buttons are located, if I could just figure out how to do the same thing on the right side of the grid above the scroll bar I would be all set.

[Galin]

Hello Barry,

The gap above the scroll is a legacy from the first versions of RadControls for ASP.NET AJAX. We prefer not to change this appearance as we will have to introduce breaking changes which is not acceptable.

However, you can workaround it by making a new image exactly like header and set it as background of RadGrid with CSS.  You can find a sample page in the attached file. (sample-grid_CSS_workaround.zip)

Another way to workaround it is by filling the gap with new elements, which are created with the following javascript and styled appropriately

Javascript

function GridCreated(sender, arg)
{
    var tableMarkup = '<table cellSpacing="0" class="rgMasterTable rgClipCells">';
    var header = sender.get_masterTableViewHeader().get_element();
    $telerik.$('thead tr', header).each(function()
    {
        var currEl = $telerik.$('th:first, td:first', this);
        tableMarkup += '<tr><' + currEl[0].tagName + ' class="' + currEl[0].className + '" style="height:' + currEl.height() + 'px"> </' + currEl[0].tagName + '></tr>';
    });

    tableMarkup += '</table>';

    $telerik.$('.rgHeaderDiv').wrap('<div class="rgHeaderDiv rgHeaderDivWrapper" />')
    .parent()
    .append(tableMarkup);
}

CSS

.rgHeaderDivWrapper
{
    position: relative;
}

.rgHeaderDivWrapper > .rgMasterTable
{
    position: absolute;
    top: 0;
    right: 0
}

I hope this helps.

Greetings,
Galin
the Telerik team

[Barry Burton]

Thanks for the help Galin, unfortunately neither of these workarounds worked for me.

I followed your CSS workaround example to the letter, however I could not get it to fill the gap above the scrollbar.  And while your javascript workaround did fill the gap, each successive postback of my ajax enabled RadGrid caused longer and longer delays in refreshing the page, to the point where the page would essentially hang.  Once I removed the workaround, the page went back to behaving normally.

I understand your desire not in introduce breaking code for LEGACY versions of the grid.  At the same time, as a PAYING customer and user of the very latest version of the Telerik Premium Collection, I find this gap UNACCEPTABLE and truly UNPROFESSIONAL for an otherwise excellent product, ESPECIALLY from Telerik!

[Galin]

Hello Barry,

Thank you for the feedback.

I will forward this request to our developers. They could further investigate it and researched on possible resolution of rendering the RadGrid without the gap like in the RadTreeList. As soon as we have any updates on this issues we will update you on the status of this request.

In the meantime, could you send us a sample project, which I can use to investigate and help you to full the gap.

Looking forward to your reply.

Regards,
Galin
the Telerik team