Rows and column alignment problem

[Morten]

Hi,

I have a pivot grid where some of the fields holds "long" texts. Sometimes the “rows” in the grids are not aligned correctly with the “column rows” – especially when the text wraps. I tried my example in a completely empty project on a page having only the pivot grid but the problem does not go away (no CSS or other layout applied).

(IE9)

[Vasil]

Hello Morten,

The RadPivotGrid use JavaScript to align the row heights between the rows in it's tables. If the JavaScript in your browser is turned off or if there is JavaScript error in your page, the align will not happen.
Please confirm that the script debugging is enabled in your browser and that you don't get any exception.
You can also try to execute the function that aligns the rows in the console of your browser and see if it's get corrected:

$find("Client Id of Your RadPivotGrid")._adjustRowsLayout()

Kind regards,
Vasil
the Telerik team

[Barbaros Saglamtimur]

I have same problem on IE9. FireFox runs fine.
_adjustRowsLayout() did nothing.

[Brian]

I also have this issue, though for me it correctly aligns after expanding a row.

initially it is badly misaligned, the first row will be almost all the way up to the column headers. as soon as I expand any row and collapse it corrects itself and everything looks great.

[Vasil]

Hello,

We had this issue in our previous version, but it is already fixed and it is working fine in our demos (which are using the latest version).  Could you tell us what version of the controls you are using? And if it is the latest one, please try to prepare a sample runnable project that we can test here and investigate further.

Greetings,
Vasil
the Telerik team

[Barbaros Saglamtimur]

2013.1.417.40 over here.

[Vasil]

Hi Barbaros,

Could you send us sample that we can run here, or if you have your page online, to give us a link?

All the best,
Vasil
the Telerik team

[Morten]

Unfortunately we dont have an online demo showing the problem. But the problem happens if you have many PivotGridRowFields (eg. 5), if they wrap the text inside and if you show a sub total for each PivotGridRowFields.

I tried to run the Javascript function _adjustRowsLayout() but it doesn’t solve the problem. The function runs without any errors (JS debugging enabled etc.).

(Telerik.web.ui version 2013.1.417.40)

[Vasil]

Hi Morten,

We tested the RadPivotGrid in various scenarios when the data is in several rows and it aligns correct every time. I am not sure what else we can do here. If you can provide some additional information that you think it might help in replicating the problem, it might help to resolve it. Will be glad to here all your findings about the subject.

Regards,
Vasil
the Telerik team

[Barbaros Saglamtimur]

I have found my problem. It happens when I have templated pivotgridrowfield with its width is 0px.

[Luke]

I was seeing this issue with certain data using the latest Telerik DLLs as of October 2014, and found that sorting any column would cause the row alignment to be corrected, so I implemented this fix:

<telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
  <script type="text/javascript">

    // Sometimes the pivot grid row becomes misaligned with the other rows, but lines up after applying a sort.
    // This will force a sort on page load (but in default sort order so the action isn't apparent) to fix the problem.
    $(document).ready(function () {
      var pivotGrid = $find('<%= RadPivotGrid1.ClientID %>');
      pivotGrid.fireCommand("Sort", "");
    });

  </script>
</telerik:RadCodeBlock>

[Jérome]

Hi,

I encounter the same issue.

could you tell me where the radscripblock has to be placed in the page or what I have to add because when I try to add the block in my page, I get a javascript exception when I load the page

thanks in advance

[Vasil]

Hello Jérome,

$(document).ready is not reliable way to execute JavaScript when you need controls to be created, because it will depend on how fast is the browser engine and how items there are on the page.

Use the pageLoad of the Asp.Net Ajax Framework instead.

function pageLoad()
{
   //this code will be executed after the controls are created
   var pivotGrid = $find('<%= RadPivotGrid1.ClientID %>');
   pivotGrid.fireCommand("Sort", "");
}

Regards,
Vasil
Telerik