Grid header CSS problem after "Best Fit"...

[FISCAL]

Hi,

I am having a problem with HeaderStyle cssclass after the grid has been resized using "best fit" feature. To show the problem, please have a look on the colour of the header in Error.PNG. Ideally I want to have it look like it was before applying "best fit" shown as in "original.png".

Following is javascript is responsible for resizing the grid during page load event.

function pageLoad() {
            var grid = $find("<%= grid.ClientID %>");
            var columns = grid.get_masterTableView().get_columns();
            for (var i = 0; i < columns.length; i++) {
                columns[i].resizeToFit();
            }
        }

Many thanks.
MG

[Galin]

Hello Milan,

Thank you for contacting us.

For using method columns[i].resizeToFit() you have to enable AllowColumnResize and AllowResizeToFit like in the next example:

<ClientSettings>
    <Resizing AllowColumnResize="true" AllowResizeToFit="true" />
</ClientSettings>

Please refer to this help topic.

I hope this help. Let me know if I can assist you any further.

Best wishes,
Galin
the Telerik team

[FISCAL]

Hi Galin,

My apologies. 'Best Fit' works perfectly. It's just that the custom css not applied properly after "Best Fit". Please refer to Original.png and Error.png.

"Original.png" has proper header colour and once "Best Fit" is applied, the grid looks like in "Error.png". How can I make it look correct?

Many thanks.
MG

[Galin]

Hello Milan,

You see the background of the headers, because in this case the RadGrid covers bigger place than the width of all columns. Set ClientSettings-Resizing-ResizeGridOnColumnResize="true"  to allow the RadGrid resize as necessary. Also to avoid conflict do not allow scroll for the Grid (ClientSettings-Scrolling-AllowScroll="false")

Additionally, please refer tothis demo site.

Kind regards,
Galin
the Telerik team