Home / Community & Support / Developer Productivity Tools Forums / ASP.NET AJAX > Grid > Annoying display issue

• Barry Burton

  Posted on Feb 9, 2012 (permalink)

  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?

  Attached files

  • radgrid.png

  Reply

• Princy MVP

  Posted on Feb 9, 2012 (permalink)

  Hello,
  
  Try the following CSS.
  CSS:
  

  <style type="text/css">

  .RadGrid_Default 

  {

    background: none repeat scroll 0 0 #F2F2F2 !important;

  }

  </style>

  
  Thanks,
  Princy.
  

  Reply


• Barry Burton

  Posted on Feb 10, 2012 (permalink)

  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.

  Reply

• Galin Galin

  Posted on Feb 14, 2012 (permalink)

  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

  Sharpen your .NET Ninja skills! Attend Q1 webinar week and get a chance to win a license! Book your seat now >>

  Attached files

  • sample-grid-CSS-workaround.zip
  • sample-page-js-workaround.zip

  Reply

• Barry Burton

  Posted on Mar 21, 2012 (permalink)

  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!

  Reply

• Galin Galin

  Posted on Mar 23, 2012 (permalink)

  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

  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 their blog feed now.

  Reply

Back to Top

Home / Community & Support / Developer Productivity Tools Forums / ASP.NET AJAX > Grid > Annoying display issue