Hi there
I have a grid which is bound client-side. The table contains about 10 columns of which some are fixed width and others aren't.
When I page through the grid everything works as expected until I reach the last page. Then the scrollbar disapears the headers are misaligned with the table content.
I found that calling grid.repaint() from the client when the data is bound fixes this problem for Internet Explorer 7 (haven't tried other versions), however, Firefox doesn't seem to care and the grid is misaligned until the scrollbar reapears (pushing the content back to place). The problem is a bit different in Google Chrome, but it's still an issue.
Is there any way to realign the headers programatically through script whenever a scrollbar (re)apears?
I have a grid which is bound client-side. The table contains about 10 columns of which some are fixed width and others aren't.
When I page through the grid everything works as expected until I reach the last page. Then the scrollbar disapears the headers are misaligned with the table content.
I found that calling grid.repaint() from the client when the data is bound fixes this problem for Internet Explorer 7 (haven't tried other versions), however, Firefox doesn't seem to care and the grid is misaligned until the scrollbar reapears (pushing the content back to place). The problem is a bit different in Google Chrome, but it's still an issue.
Is there any way to realign the headers programatically through script whenever a scrollbar (re)apears?
10 Answers, 1 is accepted
0
Hello Kenneth,
I am afraid that we are not aware of such issue.
For your convenience I am attaching you sample application demonstrating RadGrid bound client side with static headers.
Please give it a try and see whether it works on your end.
Kind regards,
Nikolay
the Telerik team
Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.
I am afraid that we are not aware of such issue.
For your convenience I am attaching you sample application demonstrating RadGrid bound client side with static headers.
Please give it a try and see whether it works on your end.
Kind regards,
Nikolay
the Telerik team
Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.
0
Bent
Top achievements
Rank 2
Rank 2
answered on 19 May 2009, 07:43 AM
Hi again
I believe the problem becomes a bit more apparent with the Office2007 skin.
As I said, if i register the grid.repaint() function in the OnDataBinding client event, everything works as expected in Internet Explorer 7 (I haven't tried other versions of IE), but Firefox, Google Chrome and others seems to ignore this. You have to move back and forth between the second and third page to visualize the problem.
It should be mentioned however, that Firefox does seem to react to the repaint function as the headers are realigned on the last page, but when moving back to page two, the scrollbar pads the grid cells to be misaligned with the headers.
Since I can't attach files, I have pasted the modified markup here (the codebehind remains unchanged):
I believe the problem becomes a bit more apparent with the Office2007 skin.
As I said, if i register the grid.repaint() function in the OnDataBinding client event, everything works as expected in Internet Explorer 7 (I haven't tried other versions of IE), but Firefox, Google Chrome and others seems to ignore this. You have to move back and forth between the second and third page to visualize the problem.
It should be mentioned however, that Firefox does seem to react to the repaint function as the headers are realigned on the last page, but when moving back to page two, the scrollbar pads the grid cells to be misaligned with the headers.
Since I can't attach files, I have pasted the modified markup here (the codebehind remains unchanged):
| <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %> |
| <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %> |
| <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> |
| <html xmlns="http://www.w3.org/1999/xhtml"> |
| <head runat="server"> |
| <title></title> |
| <script type="text/javascript"> |
| function GridDataBinding(sender, e) { |
| sender.repaint(); |
| } |
| </script> |
| </head> |
| <body> |
| <form id="form1" runat="server"> |
| <asp:ScriptManager runat="server" ID="ScriptManager1" EnablePageMethods="true"></asp:ScriptManager> |
| <div> |
| <telerik:RadGrid runat="server" ID="RadGrid1" AutoGenerateColumns="false" |
| AllowPaging="true" Height="200px" Skin="Office2007"> |
| <MasterTableView> |
| <Columns> |
| <telerik:GridBoundColumn DataField="ID" HeaderText="ID"> |
| <HeaderStyle Width="50" /> |
| </telerik:GridBoundColumn> |
| <telerik:GridBoundColumn DataField="ID1" HeaderText="ID1"> |
| <HeaderStyle Width="50" /> |
| </telerik:GridBoundColumn> |
| <telerik:GridBoundColumn DataField="ID2" HeaderText="ID2"> |
| <HeaderStyle Width="50" /> |
| </telerik:GridBoundColumn> |
| <telerik:GridBoundColumn DataField="ID3" HeaderText="ID3"> |
| <HeaderStyle Width="50" /> |
| </telerik:GridBoundColumn> |
| <telerik:GridBoundColumn DataField="ID4" HeaderText="ID4"></telerik:GridBoundColumn> |
| <telerik:GridBoundColumn DataField="ID5" HeaderText="ID5"></telerik:GridBoundColumn> |
| <telerik:GridBoundColumn DataField="ID6" HeaderText="ID6"></telerik:GridBoundColumn> |
| <telerik:GridBoundColumn DataField="ID7" HeaderText="ID7"></telerik:GridBoundColumn> |
| <telerik:GridBoundColumn DataField="ID8" HeaderText="ID8"></telerik:GridBoundColumn> |
| <telerik:GridBoundColumn DataField="ID9" HeaderText="ID9"></telerik:GridBoundColumn> |
| <telerik:GridBoundColumn DataField="ID10" HeaderText="ID10"></telerik:GridBoundColumn> |
| <telerik:GridBoundColumn DataField="ID11" HeaderText="ID11"></telerik:GridBoundColumn> |
| <telerik:GridBoundColumn DataField="ID12" HeaderText="ID12"></telerik:GridBoundColumn> |
| </Columns> |
| </MasterTableView> |
| <ClientSettings> |
| <Scrolling UseStaticHeaders="true" AllowScroll="true"/> |
| <DataBinding SelectMethod="GetData" SelectCountMethod="GetCount" |
| Location="Default.aspx" SortParameterType="Linq" FilterParameterType="Linq"> |
| </DataBinding> |
| <ClientEvents OnDataBinding="GridDataBinding" /> |
| </ClientSettings> |
| </telerik:RadGrid> |
| </div> |
| </form> |
| </body> |
| </html> |
0
Hello Kenneth,
I was able to observe the behavior described in your post and have modified the example in order to make it working properly.
Please review the code attached to this post.
Best wishes,
Nikolay
the Telerik team
Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.
I was able to observe the behavior described in your post and have modified the example in order to make it working properly.
Please review the code attached to this post.
Best wishes,
Nikolay
the Telerik team
Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.
0
Bent
Top achievements
Rank 2
Rank 2
answered on 22 May 2009, 09:42 AM
Hi again :)
I have tried your solution and it seems to work correctly in both Internet Explorer 7 and Firefox 3, however, Google Chrome still does not render correctly. It's not a major issue, but I would love to see support for this browser as well.
I have tried your solution and it seems to work correctly in both Internet Explorer 7 and Firefox 3, however, Google Chrome still does not render correctly. It's not a major issue, but I would love to see support for this browser as well.
0
Accepted
Hello Kenneth,
I am reattaching the code modified to work properly under Safari and Chrome.
Please find the attached application to this post.
Regards,
Nikolay
the Telerik team
Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.
I am reattaching the code modified to work properly under Safari and Chrome.
Please find the attached application to this post.
Regards,
Nikolay
the Telerik team
Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.
0
Bent
Top achievements
Rank 2
Rank 2
answered on 27 May 2009, 11:36 PM
Hi
I have not yet had the time to try out your solution. I'll do that as soon as possible.
What else I'm interested in knowing is wether you are planning to implement this workaround in the grid?
I have not yet had the time to try out your solution. I'll do that as soon as possible.
What else I'm interested in knowing is wether you are planning to implement this workaround in the grid?
0
Hello Kenneth,
Our developers are constantly working on improving RadGrid functionality.
Hopefully this or similar code will be ported into RadGrid and it will automatically handle this scenario.
Regards,
Nikolay
the Telerik team
Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.
Our developers are constantly working on improving RadGrid functionality.
Hopefully this or similar code will be ported into RadGrid and it will automatically handle this scenario.
Regards,
Nikolay
the Telerik team
Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.
0
Bent
Top achievements
Rank 2
Rank 2
answered on 01 Jun 2009, 11:40 AM
That sounds promising. I'll look forward for this as integrated behaviour in the future.
I have marked your post as an answer (which everyone else should do with their posts as well!)
I have marked your post as an answer (which everyone else should do with their posts as well!)
0
Brian Azzi
Top achievements
Rank 2
Rank 2
answered on 01 Apr 2010, 05:03 PM
This is very useful code... but its not working for me under the latest revision of chrome? Would it be possible to get an update? : ) I've been trying to fiddle with it, but can't get it to work the way I like under chrome....
0
Hello Brian,
I have just tested the project with Q1 2010 release of RadControls for ASP.NET AJAX and if seems to be working properly even without the code for OnDataBound handler.
All the best,
Nikolay
the Telerik team
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 Public Issue Tracking system and vote to affect the priority of the items.
I have just tested the project with Q1 2010 release of RadControls for ASP.NET AJAX and if seems to be working properly even without the code for OnDataBound handler.
All the best,
Nikolay
the Telerik team
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 Public Issue Tracking system and vote to affect the priority of the items.