Wrap Row/Column Header text

Hello,
it's possibile to wrap the row and column header text and set a fix max width?

Thanks

Regards

3 Replies

AD Alagarsamy D Syncfusion Team March 5, 2015 04:57 PM UTC

Dear Customer,

We would like to inform that it is possible to wrap the row and column header text and set a fix maximum width and height. But it may change the layout of the OLAP Grid table.

The following code snippet will help you to achieve this.

   

Code Snippet[.aspx]:

<style type="text/css" runat="server">

.SF_DefaultSkin .PivotTable .ColHeader

{

    min-width:0px !important;

   max-width:50px !important;

   width: 5px !important;

   height:50px !important;

   word-wrap:break-word !important;

}

.SF_DefaultSkin .PivotTable .RowHeader

{

    max-width:100px;

    width:200px !important;

    height:10px !important;

    word-wrap:break-word !important;

}

.SF_DefaultSkin .PivotTable .ValueCell

{

    max-width:50px !important;

    word-wrap:break-word !important; 

    </style>

Please find the below screenshot where you can view the OLAP Grid with changed layout due to the wrapped headers.

Screenshot :           

Thanks,

Ramesh.G




SP saglietto piermaria March 6, 2015 08:49 AM UTC

Hello,
thanks for your reply. I have tried your solution, but the word wrap not working properly. I put a screenshot of my problem.


I have copied your code in my application.

Can you help me?

Thanks in advance

Regards


RG Ramesh Govindaraj Syncfusion Team March 9, 2015 05:28 AM UTC

Dear Customer,

Thanks for the update.

 

Please find the updated code snippet which will help you to achieve your requirement.

Code Snippet [.aspx]:

<style id="Style1" type="text/css" runat="server">

.SF_DefaultSkin .PivotTable .ColHeader

{

   min-width:0px !important;

   max-width:50px !important;

   width: 5px !important;

   height:50px !important;

   word-wrap:break-word !important;

   white-space:normal !important;

}

.SF_DefaultSkin .PivotTable .RowHeader

{

    max-width:100px;

    width:30px !important;

    height:10px !important;

    word-wrap:break-word !important;

    white-space:normal !important;

}

.SF_DefaultSkin .PivotTable .ValueCell

{

    max-width:50px !important;

    word-wrap:break-word !important

    white-space:normal !important;

}

</style>

Thanks,

Ramesh. G



Loader.
Up arrow icon