Client-side databind with static headers and scrolling

11 posts, 1 answers
  1. Bent
    Bent avatar
    38 posts
    Member since:
    Sep 2008

    Posted 14 May 2009 Link to this post

    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?
  2. Nikolay Rusev
    Admin
    Nikolay Rusev avatar
    2284 posts

    Posted 18 May 2009 Link to this post

    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Bent
    Bent avatar
    38 posts
    Member since:
    Sep 2008

    Posted 19 May 2009 Link to this post

    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):

    <%@ 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> 
     
  5. Nikolay Rusev
    Admin
    Nikolay Rusev avatar
    2284 posts

    Posted 22 May 2009 Link to this post

    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.
  6. Bent
    Bent avatar
    38 posts
    Member since:
    Sep 2008

    Posted 22 May 2009 Link to this post

    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.
  7. Answer
    Nikolay Rusev
    Admin
    Nikolay Rusev avatar
    2284 posts

    Posted 25 May 2009 Link to this post

    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.
  8. Bent
    Bent avatar
    38 posts
    Member since:
    Sep 2008

    Posted 27 May 2009 Link to this post

    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?
  9. Nikolay Rusev
    Admin
    Nikolay Rusev avatar
    2284 posts

    Posted 01 Jun 2009 Link to this post

    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.
  10. Bent
    Bent avatar
    38 posts
    Member since:
    Sep 2008

    Posted 01 Jun 2009 Link to this post

    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!)
  11. Brian Azzi
    Brian Azzi avatar
    65 posts
    Member since:
    Mar 2010

    Posted 01 Apr 2010 Link to this post

    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....
  12. Nikolay Rusev
    Admin
    Nikolay Rusev avatar
    2284 posts

    Posted 06 Apr 2010 Link to this post

    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.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017