This is a migrated thread and some comments may be shown as answers.

Rows and columns alignment problem

3 Answers 110 Views
PivotGrid
This is a migrated thread and some comments may be shown as answers.
Nitchaphat
Top achievements
Rank 1
Nitchaphat asked on 06 Sep 2014, 11:34 AM
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


3 Answers, 1 is accepted

Sort by
0
Radoslav
Telerik team
answered on 10 Sep 2014, 08:43 AM
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
 

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

 
0
ts
Top achievements
Rank 1
answered on 10 Sep 2014, 07:00 PM
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>
0
Nitchaphat
Top achievements
Rank 1
answered on 11 Sep 2014, 03:24 PM
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.


Tags
PivotGrid
Asked by
Nitchaphat
Top achievements
Rank 1
Answers by
Radoslav
Telerik team
ts
Top achievements
Rank 1
Nitchaphat
Top achievements
Rank 1
Share this question
or