I am using 2013.3.1324.35, and have a RadGrid where databinding occurs on the client using javascript and webservices calls, i.e. location and method attributes are not set declaratively. The grid's height needs to expand to fill the browser's client area, so setting fixed height is not possible.
When there is no need for a scrollbar, then loading, sorting and paging all work flawlessly. The headers align perfectly as seen in Image 1.
Next case is when the grid dimensions are changed, or the page size is changed, such that a vertical scrollbar appears. Again using the same databinding as described above, the headers are now misaligned. See Image 2.
In attempt to fix this, I discovered that if I perform the initial databind in the codebehind, and then allow all subsequent databind to occur clientside as described above, then I get the result as shown in Image 3. Here all the headers align, there is a small rectangular place holder in the header above the scrollbar, and this is all good.
My guess is that there is some grid initialization occuring in the codebehind that is not available during clientside binding. Is that the case?
I don't want to mix databinding methods. Most of the examples for clientside binding, just allow the height to increase to accomodate larger page sizes. In my case, the grid height is already full screen, so the scrollbar appears. I'm wondering if I need to caldulate and set the grid height programmatically prior to the initial binding on the client.
From the images, etc. can you shed any light on this behavior?
Dave
When there is no need for a scrollbar, then loading, sorting and paging all work flawlessly. The headers align perfectly as seen in Image 1.
Next case is when the grid dimensions are changed, or the page size is changed, such that a vertical scrollbar appears. Again using the same databinding as described above, the headers are now misaligned. See Image 2.
In attempt to fix this, I discovered that if I perform the initial databind in the codebehind, and then allow all subsequent databind to occur clientside as described above, then I get the result as shown in Image 3. Here all the headers align, there is a small rectangular place holder in the header above the scrollbar, and this is all good.
My guess is that there is some grid initialization occuring in the codebehind that is not available during clientside binding. Is that the case?
I don't want to mix databinding methods. Most of the examples for clientside binding, just allow the height to increase to accomodate larger page sizes. In my case, the grid height is already full screen, so the scrollbar appears. I'm wondering if I need to caldulate and set the grid height programmatically prior to the initial binding on the client.
From the images, etc. can you shed any light on this behavior?
Dave
7 Answers, 1 is accepted
0
Dave
Top achievements
Rank 1
Rank 1
answered on 30 Jan 2014, 08:10 AM
Oh, forgot to add that this is only an issue with IE. I tested IE 8, 9 and 10, all this issue. Firefox does not, there are no header misalignments in all cases.
0
Dave
Top achievements
Rank 1
Rank 1
answered on 30 Jan 2014, 06:27 PM
The differences I found in IE where the header aligned properly vs not aligned properly had to do with missing styles for the header div (<div class="rgHeaderDiv") In the case where the header does not align, margin-right is set to -1px and it needs to be 17px, and the width is set to 100% and it needs to not be set at all. As I said, this only the case with IE, Firefox is fine, and if you first bind the grid in the codebehind, the styles in IE area also correct. This seems like a bug to me.
In any event, the solution or workaround, was to apply the styles whenever the scrollbar appears, and remove them when it goes away. I wrote some script to do exactly that and called the script on the resize event of the containing RadPane, and on the Grid's clientside DataBound event.
Now the alignment works properly in IE regardless of the scrollbar.
In any event, the solution or workaround, was to apply the styles whenever the scrollbar appears, and remove them when it goes away. I wrote some script to do exactly that and called the script on the resize event of the containing RadPane, and on the Grid's clientside DataBound event.
Now the alignment works properly in IE regardless of the scrollbar.
0
Hi Dave,
I tried reproducing the described behavior in an isolated sample but was unable to do so. Could you please examine the attachment and tell us what differs in your case? Note that it would be best to show us the markup and code-behind of the page so we could get a better view over the exact setup. Once we have a better understanding of the scenario will try to replicate the problem locally and find what is causing it.
Regards,
Angel Petrov
Telerik
I tried reproducing the described behavior in an isolated sample but was unable to do so. Could you please examine the attachment and tell us what differs in your case? Note that it would be best to show us the markup and code-behind of the page so we could get a better view over the exact setup. Once we have a better understanding of the scenario will try to replicate the problem locally and find what is causing it.
Regards,
Angel Petrov
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 UI for ASP.NET AJAX, subscribe to the blog feed now.
0
Dave
Top achievements
Rank 1
Rank 1
answered on 03 Feb 2014, 07:05 PM
Hi Angel,
Thank you for responding. Below is your Default.aspx (my Test3.aspx) modified to create the problem. The modifications basically are to UseStaticHeaders, and to have the grid expand to fill the screen. I also attached a screen shot showing the headers "position" and "lastName" skewed to the right of their data columns. This only happens in IE, FireFox does not have this issue.
Assuming you can reproduce with this code, I'll post how I worked around the problem.
Dave
Thank you for responding. Below is your Default.aspx (my Test3.aspx) modified to create the problem. The modifications basically are to UseStaticHeaders, and to have the grid expand to fill the screen. I also attached a screen shot showing the headers "position" and "lastName" skewed to the right of their data columns. This only happens in IE, FireFox does not have this issue.
<%@ Page Title="Home Page" Language="C#" AutoEventWireup="true" CodeFile="Test3.aspx.cs" Inherits="Test3" %> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Test</title> <script type="text/javascript"> var employees = [ { "firstName": "John", "lastName": "Doe", "position": "Developer" }, { "firstName": "Anna", "lastName": "Smith", "position": "Support" }, { "firstName": "Peter", "lastName": "Jones", "position": "QA" }, { "firstName": "John", "lastName": "Doe", "position": "Developer" }, { "firstName": "Anna", "lastName": "Smith", "position": "Support" }, { "firstName": "Peter", "lastName": "Jones", "position": "QA" }, { "firstName": "John", "lastName": "Doe", "position": "Developer" }, { "firstName": "Anna", "lastName": "Smith", "position": "Support" }, { "firstName": "Peter", "lastName": "Jones", "position": "QA" }, { "firstName": "John", "lastName": "Doe", "position": "Developer" }, { "firstName": "Anna", "lastName": "Smith", "position": "Support" }, { "firstName": "Peter", "lastName": "Jones", "position": "QA" }, { "firstName": "John", "lastName": "Doe", "position": "Developer" }, { "firstName": "Anna", "lastName": "Smith", "position": "Support" }, { "firstName": "Peter", "lastName": "Jones", "position": "QA" }, { "firstName": "John", "lastName": "Doe", "position": "Developer" }, { "firstName": "Anna", "lastName": "Smith", "position": "Support" }, { "firstName": "Peter", "lastName": "Jones", "position": "QA" }, { "firstName": "John", "lastName": "Doe", "position": "Developer" }, { "firstName": "Anna", "lastName": "Smith", "position": "Support" }, { "firstName": "Peter", "lastName": "Jones", "position": "QA" }, { "firstName": "John", "lastName": "Doe", "position": "Developer" }, { "firstName": "Anna", "lastName": "Smith", "position": "Support" }, { "firstName": "Peter", "lastName": "Jones", "position": "QA" }, { "firstName": "John", "lastName": "Doe", "position": "Developer" }, { "firstName": "Anna", "lastName": "Smith", "position": "Support" }, { "firstName": "Peter", "lastName": "Jones", "position": "QA" } ]; function OnCommand(sender, args) { args.set_cancel(true); } function pageLoad() { var masterTable = $find('<%=RadGrid1.ClientID%>').get_masterTableView(); masterTable.set_dataSource(employees); masterTable.dataBind(); } </script> <style type="text/css"> html,body,form { height:100%; margin:0; padding:0; overflow:hidden; } </style> </head> <body> <form id="Form1" runat="server"> <telerik:RadScriptManager ID="RadScriptManager1" runat="server" /> <telerik:RadGrid ID="RadGrid1" AllowPaging="True" PageSize="15" runat="server" BorderWidth="0px" AllowSorting="true" GridLines="None" Width="100%" Height="100%" > <MasterTableView Width="100%"> <Columns> <telerik:GridBoundColumn UniqueName="firstName" HeaderText="firstName" DataField="firstName"></telerik:GridBoundColumn> <telerik:GridBoundColumn UniqueName="lastName" HeaderText="lastName" DataField="lastName"></telerik:GridBoundColumn> <telerik:GridBoundColumn UniqueName="position" HeaderText="position" DataField="position"></telerik:GridBoundColumn> </Columns> </MasterTableView> <PagerStyle Mode="NextPrevAndNumeric"></PagerStyle> <FilterMenu EnableTheming="True"> <CollapseAnimation Duration="200" Type="OutQuint"></CollapseAnimation> </FilterMenu> <ClientSettings> <Scrolling AllowScroll="true" UseStaticHeaders="true" /> <ClientEvents OnCommand="OnCommand" /> </ClientSettings> </telerik:RadGrid> </form> </body> </html> Assuming you can reproduce with this code, I'll post how I worked around the problem.
Dave
0
Dave
Top achievements
Rank 1
Rank 1
answered on 03 Feb 2014, 08:02 PM
Ok, the code below is the fix that I used. In my scenario, the RadGrid is embedded in a RadSplitterPane, so I've add that to your code. The other modifications add a style, "fixHeader", and some script to apply / remove the style. The script basically senses the presence or lack thereof a scrollbar and adds or removes the style accordingly. It is triggered by the OnDataBound event of the grid, and the OnClientResized event of the pane. In my live case, I also triggered it during a OnCommand - PageSize event. These changes fixed the problem in my scenario, and you can see the result in the attached screen shot.
Hope this helps,
Dave
Hope this helps,
Dave
<%@ Page Title="Home Page" Language="C#" AutoEventWireup="true" CodeFile="Test3.aspx.cs" Inherits="Test3" %> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Test</title> <script type="text/javascript"> var employees = [ { "firstName": "John", "lastName": "Doe", "position": "Developer" }, { "firstName": "Anna", "lastName": "Smith", "position": "Support" }, { "firstName": "Peter", "lastName": "Jones", "position": "QA" }, { "firstName": "John", "lastName": "Doe", "position": "Developer" }, { "firstName": "Anna", "lastName": "Smith", "position": "Support" }, { "firstName": "Peter", "lastName": "Jones", "position": "QA" }, { "firstName": "John", "lastName": "Doe", "position": "Developer" }, { "firstName": "Anna", "lastName": "Smith", "position": "Support" }, { "firstName": "Peter", "lastName": "Jones", "position": "QA" }, { "firstName": "John", "lastName": "Doe", "position": "Developer" }, { "firstName": "Anna", "lastName": "Smith", "position": "Support" }, { "firstName": "Peter", "lastName": "Jones", "position": "QA" }, { "firstName": "John", "lastName": "Doe", "position": "Developer" }, { "firstName": "Anna", "lastName": "Smith", "position": "Support" }, { "firstName": "Peter", "lastName": "Jones", "position": "QA" }, { "firstName": "John", "lastName": "Doe", "position": "Developer" }, { "firstName": "Anna", "lastName": "Smith", "position": "Support" }, { "firstName": "Peter", "lastName": "Jones", "position": "QA" }, { "firstName": "John", "lastName": "Doe", "position": "Developer" }, { "firstName": "Anna", "lastName": "Smith", "position": "Support" }, { "firstName": "Peter", "lastName": "Jones", "position": "QA" }, { "firstName": "John", "lastName": "Doe", "position": "Developer" }, { "firstName": "Anna", "lastName": "Smith", "position": "Support" }, { "firstName": "Peter", "lastName": "Jones", "position": "QA" }, { "firstName": "John", "lastName": "Doe", "position": "Developer" }, { "firstName": "Anna", "lastName": "Smith", "position": "Support" }, { "firstName": "Peter", "lastName": "Jones", "position": "QA" } ]; function OnCommand(sender, args) { args.set_cancel(true); } var iGrid; var iMasterTable; function pageLoad() { iGrid = $find("<%= RadGrid1.ClientID %>"); iMasterTable = iGrid.get_masterTableView(); iMasterTable.set_dataSource(employees); iMasterTable.dataBind(); } function onDataBound(sender, args) { _callAdjustGrid(); } function onGridPaneResized(sender, args) { _callAdjustGrid(); } function _callAdjustGrid() { setTimeout(function() { _adjustGrid(); }, 0); } function _adjustGrid() { var rgHeaderDiv = iGrid.get_masterTableViewHeader().get_element().parentElement; var rgDataDiv = iMasterTable.get_element().parentElement; var lbHasScrollbar = rgDataDiv.scrollHeight > rgDataDiv.clientHeight; if (lbHasScrollbar && rgHeaderDiv.className.indexOf(" fixHeader") == -1) rgHeaderDiv.className += " fixHeader"; else if (!lbHasScrollbar) rgHeaderDiv.className = rgHeaderDiv.className.replace(new RegExp(' fixHeader', 'g'), ''); } </script> <style type="text/css"> html,body,form { height:100%; margin:0; padding:0; overflow:hidden; } .fixHeader { margin-right: 17px ! important; width: inherit ! important; } </style> </head> <body> <form id="Form1" runat="server"> <telerik:RadScriptManager ID="RadScriptManager1" runat="server" /> <telerik:RadSplitter id="ContentAreaSplitter" Orientation="Horizontal" runat="server" Width="100%" Height="100%" > <telerik:RadPane ID="GridPane" runat="server" Scrolling="X" Width="764" OnClientResized="onGridPaneResized" > <telerik:RadGrid ID="RadGrid1" AllowPaging="True" PageSize="15" runat="server" BorderWidth="0px" AllowSorting="true" GridLines="None" Width="100%" Height="100%" > <MasterTableView Width="100%"> <Columns> <telerik:GridBoundColumn UniqueName="firstName" HeaderText="firstName" DataField="firstName"></telerik:GridBoundColumn> <telerik:GridBoundColumn UniqueName="lastName" HeaderText="lastName" DataField="lastName"></telerik:GridBoundColumn> <telerik:GridBoundColumn UniqueName="position" HeaderText="position" DataField="position"></telerik:GridBoundColumn> </Columns> <PagerStyle Mode="NextPrevAndNumeric" AlwaysVisible="true" /> </MasterTableView> <FilterMenu EnableTheming="True"> <CollapseAnimation Duration="200" Type="OutQuint"></CollapseAnimation> </FilterMenu> <ClientSettings> <Scrolling AllowScroll="true" UseStaticHeaders="true" /> <ClientEvents OnCommand="OnCommand" OnDataBound="onDataBound" /> </ClientSettings> </telerik:RadGrid> </telerik:RadPane> </telerik:RadSplitter> </form> </body> </html> 0
Hello Dave,
Indeed the problem can be observed with the code you provided in the previous post. The reason for its occurrence is that both the splitter and grid execute some client logic which to size them according to some specific criteria. Now in IE the grid calculation are executed before the RadPane has finished sizing-up and this breaks the layout(since RadGrid calculates it's dimensions according to it's container). In order to resolve the issue you can initially hide the grid and show it in the pageLoad client event.
ASPX:
JavaScript:
What happens in this case is that RadGrid will calculate it's dimensions after it becomes visible. At this time the splitter will had sized-up.
Additionally I want to note that using a RadSplitter with only one RadPane is not recommended. In such scenarios we suggest replacing the splitter with an ASP Panel.
Regards,
Angel Petrov
Telerik
Indeed the problem can be observed with the code you provided in the previous post. The reason for its occurrence is that both the splitter and grid execute some client logic which to size them according to some specific criteria. Now in IE the grid calculation are executed before the RadPane has finished sizing-up and this breaks the layout(since RadGrid calculates it's dimensions according to it's container). In order to resolve the issue you can initially hide the grid and show it in the pageLoad client event.
ASPX:
<telerik:RadGrid ID="RadGrid1" AllowPaging="True" PageSize="15" style="display:none;" runat="server" BorderWidth="0px" AllowSorting="true" GridLines="None" Width="100%" Height="99%">JavaScript:
function pageLoad() { iGrid = $find("<%= RadGrid1.ClientID %>"); iMasterTable = iGrid.get_masterTableView(); iMasterTable.set_dataSource(employees); iMasterTable.dataBind(); iGrid.get_element().style.display = ""; }Additionally I want to note that using a RadSplitter with only one RadPane is not recommended. In such scenarios we suggest replacing the splitter with an ASP Panel.
Regards,
Angel Petrov
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 UI for ASP.NET AJAX, subscribe to the blog feed now.
0
Dave
Top achievements
Rank 1
Rank 1
answered on 07 Feb 2014, 11:16 PM
Hi Angel,
Thank you for looking at the problem, and providing a solution. This solution is much cleaner than the fix I did using script. I will give it a whirl.
Also, just wanted to mention that I only used a single pane splitter to illustrate the problem. In real applications, I would only use a splitter when there are multiple panes. However, it is good to know that the above scenario is not recommended.
Again, thanks for your help,
Dave
Thank you for looking at the problem, and providing a solution. This solution is much cleaner than the fix I did using script. I will give it a whirl.
Also, just wanted to mention that I only used a single pane splitter to illustrate the problem. In real applications, I would only use a splitter when there are multiple panes. However, it is good to know that the above scenario is not recommended.
Again, thanks for your help,
Dave