We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
close icon

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.
Live Chat Icon For mobile
Up arrow icon