Radgrid with TableLayout="Auto" and vertical scrollbar

[Prava kafle]

Hi,

I am trying to show vertical scrollbars on a RadGrid and on initial pageload column headers squeeze to the left and leave large empty space on right.  However, the columns render properly after postback.  How can I  render the coloumns correctly even on initail page load. Given below is my mark up.

<telerik:RadGrid ID="TicketsGrid" runat="server"
                           EnableEmbeddedSkins="false"   AllowPaging="True" PageSize="20"
                           AllowFilteringByColumn="True" AllowSorting="True"    ShowGroupPanel="True"
                           ClientSettings-ClientEvents-OnRowClick="gridClick"
                           EnableHeaderContextFilterMenu="True" EnableHeaderContextMenu="True"
                           GridLines="None" oncolumncreated="rgTicketsGrid_ColumnCreated"
                           ondatabound="rgTicketsGrid_DataBound"
                           ongroupschanging="rgTicketsGrid_GroupsChanging"
                           onsortcommand="rgTicketsGrid_SortCommand"
                           onpageindexchanged="rgTicketsGrid_PageIndexChanged"
                           onpagesizechanged="rgTicketsGrid_PageSizeChanged"     >
                          <mastertableview allowfilteringbycolumn="False" GroupLoadMode="Server"   Height="95%"   TableLayout="Auto" >
                          </mastertableview>
                         <SortingSettings  EnableSkinSortStyles="false" />

                          <clientsettings allowdragtogroup="True" allowrowsdragdrop="True"  enablerowhoverstyle="True"  >
                                 <selecting allowrowselect="True" />
                                 <clientevents onrowdropping="rowDropping" />
                                 <clientevents onrowcontextmenu="RowContextMenu" />
                                <Scrolling AllowScroll="True" UseStaticHeaders="True" SaveScrollPosition="true"   >
                                 </Scrolling>
                          </clientsettings>
                          <activeitemstyle borderstyle="Solid" font-bold="True" />
                          <PagerStyle Mode="NextPrevAndNumeric"></PagerStyle>
                          <GroupingSettings ShowUnGroupButton="true"    />

                        <HeaderStyle HorizontalAlign="Center" VerticalAlign="Middle" />
                        <ItemStyle HorizontalAlign="Left" VerticalAlign="Middle" />
                        <AlternatingItemStyle HorizontalAlign="Left" VerticalAlign="Middle" />
                   </telerik:RadGrid>

If I use  Fixed Table layout,  all columns  headers render properly and Fixed layout shows problem when you try to group records by field name. When grouped in fixed layout, edge of column headers and items do not align. In grouped mode, all records squeeze to left.

Any help is appreciated.

Thanks,
Prava

[Pavlina]

Hi Prava Kafle,

Can you please try setting TableLayout = Fixed of MasterTableView and ItemStyle-HorizontalAlign and AlternatingItemStyle-HorizontalAlign properties to Center as shown below:

<HeaderStyle HorizontalAlign="Center" VerticalAlign="Middle" />
<ItemStyle HorizontalAlign="Center" VerticalAlign="Middle" />
<AlternatingItemStyle HorizontalAlign="Center" VerticalAlign="Middle" />

and let me know if it makes any difference.

Regards,
Pavlina
the Telerik team

[Prava kafle]

Hi Pavlina,
Fixed table layout renders column perfectly on initial page load and even after post back, but it starts showing problem on grouped mode.
When I group the items by field, the item column do not align with header column. I have attached an image along with this.

That's the reason I wanted to set auto table layout.

Thanks,
Prava

[Pavlina]

Hello Prava Kafle,

I took the sample code you provided and put it in a sample page following a similar scenario you have, but I was not able to replicate the alignment issue. Please examine the attached project and let me know what is the difference in your scenario.

Kind regards,
Pavlina
the Telerik team

[Prava kafle]

Hi Pavlina,

I tested your code and it works. My problem is, this grid is wrapped in a RadPane/Panel and supposed to take 95% of panel height, how can I make my grid cover 95% of parent container.

Thanks,
Prava

[Pavlina]

Hello Prava Kafle,

Go through the link below:
http://www.telerik.com/community/code-library/aspnet-ajax/grid/setting-100-height-and-resize-on-container-resize-for-grid-with-scrolling-and-static-headers.aspx

Kind regards,
Pavlina
the Telerik team