Issue with Static Header in Rad Grid

[Jitendra Pati]

Hi,
When I am trying to make the Rad grid header static by setting "UseStaticHeaders = true", the grid columns automatically shrinks to the length of data present in the particular cell and hence the total width of the grid also decreases. But the width of the grid and column remains intact if I remove the property. Again when the "AllowScroll" is true and there is not enough rows so that the scrollbar  will appear, a small gap (exactly width of the scrollbar) between the grid and the panel which contains the grid  is coming. I have given the grid width as 100% and column width in % also. Please let me know if any property settings missing or any solution.

Thanks.
JK

[Dimo]

Hello Jitendra Pati,

If you are using scrolling with static headers, the master table's layout is "auto" and there are no column widths specified, then the columns will shrink to fill the minimum required space - this is expected.

In order to avoid this, please either set column widths, or set TableLayout="Fixed", or set Width="95%" for the MasterTable.

Let us know if you need more information.

Best wishes,
Dimo
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[Jitendra Pati]

thnx

[Divya]

Hi,

I have seen the Example in the below link
http://demos.telerik.com/aspnet-ajax/grid/examples/client/scrolling/defaultcs.aspx

When u r moving the scroll bar there is no sink in the table header and the data rows.

I have the same problem in my site.

Can u please suggest me on this..

Regards,
Divya

[Dimo]

Hello Divya,

The online demo works as expected. Make sure you have Javascript enabled.

Kind regards,
Dimo
the Telerik team

[Divya]

Hi,

Yeah .The online demo is working as you designed.
But my question is when u r moving the horizontal scroll bar there is no sink in header and data column.
I want that sink.
if i use UseStaticHeaders =false then i'm getting sink but not getting the static header columns.
How to solve this..

Thanks

[Dimo]

Hello Divya,

>> "when you are moving the vertical scrollbar, there is no sync in header and data column."

I am afraid I don't understand what your requirement is. Please explain in more detail (e.g. by using screenshots). Generally, there is no need of any syncronization when using the vertical scrollbar.

Kind regards,
Dimo
the Telerik team

[Sue]

I beleive what they are getting is the attached, which is the same thing I am getting.

The header column widths do not match the width of the grid columns.
 
The grid lines are set to the width I have custom set for each column, but the header does not follow that same setting for the column.

See attached screen shot.

Is there a setting that fixes this.

Thanks
Sue

[Dimo]

Hi Sue,

Such an issue may occur when you have used ItemStyle-Width (which is incorrect - use HeaderStyle-Width only), or Javascript is disabled, or if you have a Javascript error on the page, or the cell padding styles have been overridden. Can you please provide your RadGrid configuration?

Regards,
Dimo
the Telerik team

[Sue]

Hi Dimo,

After changing all columns to use HeaderStyle-Width the columns are now aligned, thank you.

On my last column, which is unit price, the filter box and filter icon are outside of the RadAjaxPanel.

Is there a setting that will allow the filter box to be smaller, it only needs to be as wide as the column?

All other aspects of the column widths are correct, and if I make the RadAjaxPanel larger the users will need to scroll to filter the Unit Price column.

Thanks
Sue

[Dimo]

Hi Sue,

RadGrid columns have a FilterControlWidth property, e.g. it is used here:

http://demos.telerik.com/aspnet-ajax/grid/examples/generalfeatures/filtering/defaultcs.aspx

For autogenerated columns, you can set the property in ColumnCreated.

Sincerely yours,
Dimo
the Telerik team

[Sue]

Hi,

I had the spacing of grids and columns working in visual studio, in debug, but then I put this page in Sharepoint as a Web Part, using the Sharepoint Page Viewer, the columns are all shrunk and my settings for the HeaderStyle-Width and FilterControlWidth are not working.

Is there another setting needed if the page will be viewed in Sharepoint?

Attached are screen shots of the grid in and out of Sharepoint.

The RadGrid is in a RadAjaxPanel. Here is part of the RadGrid setup, I have not shown every column.

 

<telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanelM" runat="server" />
<telerik:RadAjaxPanel ID="RadAjaxPanelM" runat="server" HorizontalAlign="Left" LoadingPanelID="RadAjaxLoadingPanelM" Width="1150px" >
<telerik:RadGrid ID="RadGridM" runat="server" DataSourceID="DatabaseItem" OnPageIndexChanged="PageChange" AutoGenerateColumns="False" GridLines="None" AllowMultiRowSelection="true" EnableViewState="false" Skin="Office2007" AllowPaging="true" PageSize="50" OnItemDataBound="RadGrid1_ItemDataBound AllowFilteringByColumn="True" OnPreRender="RadGridM_PreRender" OnItemCommand="RadGrid1_ItemCommand">
<mastertableview autogeneratecolumns="false" datakeynames="VendorID,ItemNumber" EditMode="InPlace" TableLayout="Fixed" >
<Columns>
<telerik:GridTemplateColumn UniqueName="CheckBoxTemplateColumn" AllowFiltering="false" HeaderText="Select" HeaderStyle-Width="15pt">
<ItemTemplate><input type="checkbox" id="SelectCheckBox" onclick="ValidateLine(this)" runat="server" size="15pt" /> </ItemTemplate>
</telerik:GridTemplateColumn>
</Columns>
</mastertableview>
<ClientSettings><Scrolling AllowScroll="True" UseStaticHeaders="True" SaveScrollPosition="True"></Scrolling></ClientSettings>
</telerik:RadGrid>

 

 

 

 

 

 Are there any special settings for the HeaderStyle-Width or use StaticHeaders settings to work in Sharepoint?

I have many RadGrid's on this Sharepoint site and all are working except for this one.
This is the only one that is using the HeaderStyle-Width setting and UseStaticHeaders.

Thanks
Sue

[Dimo]

Hi Sue,

The observed layout can be observed in IE6, IE7 or IE8 in compatibility mode, if you are using automatic TableLayout and there are no column widths set. You should either set TableLayout="Fixed" for the MasterTableView (which will make all width-less columns equally wide), or set explicit Width for the MasterTableView.

Here are some more tips on using column widths:

http://www.telerik.com/community/forums/aspnet/grid/best-practice-for-grid-and-column-widths.aspx#1214355

Best wishes,
Dimo
the Telerik team