Rows and columns alignment problem

[Nitchaphat]

Hi,

I have PivotGrid in my web Application, The rows and columns in PivodGrid are not aligned correctly.
What I've tried so far 
1.Finding solution from old thread in the forum but the solutions didn't work
2.running on various browsers but it 
3.Running PivotGrid in empty page
4.Write CSS to fix it - I made PivotGrid Header display properly but I can't fix row height.
It always generates the wrong height. 

My CSS
<style type="text/css">
        /*fix header*/
        #ctl00_MainContent_RadPivotGrid1_OT > tbody> tr:nth-child(3) {
            height:129px !important;
        }
        #ctl00_MainContent_RadPivotGrid1_ctl02_DataZone_DT  tr:nth-child(4), tr:nth-child(5){
            height:26px !important;
        }
        /*Adjust row header total*/
        #ctl00_MainContent_RadPivotGrid1_OT > tbody > tr > td.rpgRowHeaderTotal{
            height:26px !important;
        }
        /*Adjust all data cell*/
        #ctl00_MainContent_RadPivotGrid1_ctl02_DataZone_DT > tbody > tr > td.rpgDataCell{
            height:26px !important;
        }
        /*test specific row*/
        /*#ctl00_MainContent_RadPivotGrid1_OT tbody tr:nth-child(5){
          height:25px !important;
        }*/
    </style>

My Aspx

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadFormDecorator ID="QsfFromDecorator" runat="server" DecoratedControls="All" EnableRoundedCorners="false" />
    <telerik:RadPivotGrid ID="RadPivotGrid1" runat="server" DataSourceID="SqlDataSource1" AggregatesLevel="3">
                <PagerStyle ChangePageSizeButtonToolTip="Change Page Size" PageSizeControlType="RadComboBox"></PagerStyle>
                <Fields>
                    <telerik:PivotGridColumnField DataField="Year" UniqueName="Year" Caption="Year">
                    </telerik:PivotGridColumnField>
                    <telerik:PivotGridColumnField DataField="Quarter" UniqueName="Quarter" Caption="Quarter">
                    </telerik:PivotGridColumnField>
                    <telerik:PivotGridColumnField DataField="Month" UniqueName="Month" Caption="Month">
                    </telerik:PivotGridColumnField>
                    <telerik:PivotGridColumnField Caption="Meal" DataField="Meal" UniqueName="Meal">
                    </telerik:PivotGridColumnField>
                    <telerik:PivotGridRowField DataField="MenuGroup" UniqueName="MenuGroup" Caption="MenuGroup">
                        <CellStyle Width="140px" />
                    </telerik:PivotGridRowField>
                    <telerik:PivotGridRowField DataField="MenuName" UniqueName="MenuName" Caption="MenuName">
                        <CellStyle Width="320px" />
                    </telerik:PivotGridRowField>
                    <telerik:PivotGridAggregateField Caption="SaleAmount" DataField="SaleAmount" GrandTotalAggregateFormatString="" UniqueName="SaleAmount" DataFormatString="{0:C}">
                        <CellStyle Width="150px" />
                    </telerik:PivotGridAggregateField>
                    <telerik:PivotGridAggregateField Caption="OrderQuantity" DataField="OrderQuantity" GrandTotalAggregateFormatString="" UniqueName="OrderQuantity">
                        <CellStyle Width="170px" />
                    </telerik:PivotGridAggregateField>
                </Fields>
                <ConfigurationPanelSettings EnableOlapTreeViewLoadOnDemand="True"></ConfigurationPanelSettings>
            </telerik:RadPivotGrid>

Regards,
Nitchaphat

[Radoslav]

Hi Nitchaphat,

I tried to reproduce the described issue but to no avail. I am sending you a simple example which shows that the RadPivotGrid rows are aligned correctly. Please check it out and let me know what differs in your case.
Additionally could you please confirm that you use the latest version of our dlls like in my example?
Also could you please try setting the RowHeaderCellStyle.Height property and let me know if the issues still persist:

<telerik:RadPivotGrid ID="RadPivotGrid1" runat="server"  AggregatesLevel="3">
        <PagerStyle ChangePageSizeButtonToolTip="Change Page Size" PageSizeControlType="RadComboBox"></PagerStyle>
        <RowHeaderCellStyle Height="40px" />
        <Fields>
...

Looking forward for your reply.

Regards,
Radoslav
Telerik

 

 

[ts]

Nitchaphat,

Your workaround fixed my issue. Thank you.

My Issue can be found : www.telerik.com/forums/pivotgrid-alignment-issue

I added below css to the page referring to your code .

<style type="text/css">
#ctl00_ContentPlaceHolder1_RPG_YearToYearSales_OT> tbody> tr> td.rpgRowsZone
{
height:103px !important;
}

#ctl00_ContentPlaceHolder1_RPG_YearToYearSales_ctl00_DataZone_DT> thead > tr
{
height:18px !important;
}
</style>

[Nitchaphat]

Hi Radoslav,

Thanks for the reply.I just fixed the issue. 
I found thread mention that error in JavaScript can make row alignment error, so I recheck my code again and remove Foundation script from master page then problem solve.

Nitchaphat

@ts
I'm glad that it can help you.