[Solved] RadGrid AllowScroll with FrozenColumn make last column partially hide

[guillaume.lebel]

Hi,

I have grid that contains many different column. Also i have activate the scroll and set the frozencolumncount to 3.

The thing is that my last column is not showing completly. I have to create an empty column visible="false" and set a specific with to be able to see my last column completly. (see attachment)

Here is my grid html code :

<telerik:RadGrid ID="RadGridCadetStaffing" runat="server" AutoGenerateColumns="False"
    Style="margin-top: 5px;" AllowSorting="true" AllowFilteringByColumn="true" AllowMultiRowSelection="true"
    meta:resourcekey="RadGridCadetStaffing" OnItemCreated="OnItemCreated" OnNeedDataSource="OnNeedDataSource" AllowPaging="true" EnableViewState="true">
    <MasterTableView TableLayout="Fixed" CommandItemDisplay="TopAndBottom" AutoGenerateColumns="false">
        <CommandItemTemplate>
            <asp:Panel ID="GridFooter" CssClass="ListFooter" runat="server" HorizontalAlign="Right">
                <fortress:ButtonAddNew ID="ButtonAddNew" runat="server"></fortress:ButtonAddNew>
                <asp:ImageButton ID="ImageButtonSubmitCadetApplication" runat="server" OnClick="OnSubmitCadetApplication" style="margin-right:10px"
                 ImageUrl="~/App_Themes/Fv2Default/StandardButtons/SubmitCommit20x20.png" meta:resourcekey="ImageButtonSubmitCadetApplication" />
                <asp:ImageButton ID="ImageButtonDeleteCadetApplication" runat="server" OnClick="OnDeleteSelected"
                    ImageUrl="$/grid/Delete20x20.png" AlternateText="~Supprimer une application"
                    meta:resourcekey="ImageButtonDeleteCadetApplication" />
            </asp:Panel>
        </CommandItemTemplate>
        <Columns>
            <telerik:GridClientSelectColumn Reorderable="False" UniqueName="ClientSelectColumn"
                HeaderText="~Sélection" meta:resourcekey="GridClientSelectColumn">
                <HeaderStyle Width="20px"></HeaderStyle>
            </telerik:GridClientSelectColumn>
            <%--Insérez vos colonnes ici -- DÉBUT --%>
            <telerik:GridTemplateColumn UniqueName="TemplateEditColumn" AllowFiltering="false">
                <ItemTemplate>
                    <fortress:ButtonEdit ID="ButtonEdit" runat="server">
                    </fortress:ButtonEdit>
                </ItemTemplate>
                <HeaderStyle Width="30px" />
            </telerik:GridTemplateColumn>
            <telerik:GridBoundColumn AllowFiltering="true" UniqueName="CadetId" Visible="false">
            </telerik:GridBoundColumn>
            <telerik:GridBoundColumn AllowFiltering="true" UniqueName="StaffableActivityContingentId"
                Visible="false" HeaderText="~StaffableActivityContingentId">
            </telerik:GridBoundColumn>
            <fortress:RadGridDateColumn UniqueName="WaiverCount" Visible="false">
            </fortress:RadGridDateColumn>
            <telerik:GridTemplateColumn AllowFiltering="false" ItemStyle-HorizontalAlign="Center"
                UniqueName="WaiverCountImage" meta:resourcekey="GridTemplateColumnWaiverCount"
                SortExpression="ApplicationStatus">
                <HeaderStyle Width="25px" HorizontalAlign="Center" />
                <ItemTemplate>
                    <asp:Image ID="ImageRespectAllCriteria" runat="server" Visible='<%#EvalIsIncomplete(Eval(LocalizedCadetStaffingFieldsName.ApplicationStatusId))%>'
                        ImageUrl='~/App_Themes/Fv2Default/StandardButtons/Warning20x20.png' meta:resourcekey="ImageRespectAllCriteria" />
                         <asp:Image ID="ImageRejected" runat="server" Visible='<%#EvalIsRejected(Eval(LocalizedCadetStaffingFieldsName.ApplicationStatusId))%>'
                        ImageUrl='~/App_Themes/Fv2Default/StandardButtons/Error20x20.png' meta:resourcekey="ImageImageRejected" />
                    <asp:Label ID="LabelRespectAllCriteria" runat="server" Visible='<%# !EvalIsIncomplete(Eval(LocalizedCadetStaffingFieldsName.ApplicationStatusId)) && !EvalIsRejected(Eval(LocalizedCadetStaffingFieldsName.ApplicationStatusId)) %>'
                        Text=" "></asp:Label>
                </ItemTemplate>
            </telerik:GridTemplateColumn>
            <telerik:GridBoundColumn AllowFiltering="true" UniqueName="ApplicationStatus" HeaderText="~ApplicationStatus"
                meta:resourcekey="GridBoundColumnApplicationStatus">
                <HeaderStyle Width="110px" />
            </telerik:GridBoundColumn>
            <telerik:GridTemplateColumn UniqueName="ApplicationDerogationStatus" HeaderText="~Dérogation" AllowFiltering="false"
             meta:resourcekey="TemplateColumnApplicationDerogationStatus">
                <HeaderStyle Width="30px" HorizontalAlign="Center" />
                <ItemStyle HorizontalAlign="Center" />
                <ItemTemplate>
                    <asp:Label ID="LabelEmptyDerogation" runat="server" Text=" "
                    Visible='<%# !EvalApplicationDerogationStatus(Eval(LocalizedCadetStaffingFieldsName.ApplicationStatusId), Eval(LocalizedCadetStaffingFieldsName.WaiverCount))%>'></asp:Label>
                    <asp:Image ID="ImageDerogation" runat="server" ImageUrl="~/App_Themes/Fv2Default/StandardButtons/CheckWaiver20x20.png"
                     Visible='<%# EvalApplicationDerogationStatus(Eval(LocalizedCadetStaffingFieldsName.ApplicationStatusId), Eval(LocalizedCadetStaffingFieldsName.WaiverCount))%>' meta:resourcekey="ImageDerogation" />
                </ItemTemplate>
            </telerik:GridTemplateColumn>
            <telerik:GridHyperLinkColumn AllowFiltering="true" UniqueName="ContingentSerialNumber" HeaderText="~ContingentSerialNumber"
                DataNavigateUrlFormatString="~/Content/StaffableActivities/Contingent/UnitStaffableActivityContingentView.aspx?ContingentId={0}"
                DataNavigateUrlFields="StaffableActivityContingentId" meta:resourcekey="GridBoundColumnContingentSerialNumber">
                <HeaderStyle Width="70px" />
            </telerik:GridHyperLinkColumn>
            <telerik:GridBoundColumn AllowFiltering="true" UniqueName="Name" HeaderText="~name"
                meta:resourcekey="GridBoundColumnName">
                <HeaderStyle Width="80px" />
            </telerik:GridBoundColumn>
            <fortress:StaffableActivityTypeColumn UniqueName="StaffableActivityType">
            </fortress:StaffableActivityTypeColumn>
            <telerik:GridBoundColumn AllowFiltering="true" UniqueName="Nic" HeaderText="~Nic"
                meta:resourcekey="GridBoundColumnNic">
                <HeaderStyle Width="70px" />
            </telerik:GridBoundColumn>
            <telerik:GridHyperLinkColumn AllowFiltering="true" UniqueName="LastName" HeaderText="~LastName"
                DataNavigateUrlFormatString="~/Content/Cadet/CadetView.aspx?CadetId={0}"
                DataNavigateUrlFields="CadetId" meta:resourcekey="GridBoundColumnLastName">
                <HeaderStyle Width="100px" />
            </telerik:GridHyperLinkColumn>
            <telerik:GridBoundColumn AllowFiltering="true" UniqueName="FirstName" HeaderText="~Prénom"
                meta:resourcekey="GridBoundColumnFirstName">
                <HeaderStyle Width="100px" />
            </telerik:GridBoundColumn>
            <%--Package de CadetRankColumn--%>
            <fortress:CadetRankColumn>
            </fortress:CadetRankColumn>
            <telerik:GridBoundColumn UniqueName="CadetRankSequence" Visible="false">
            </telerik:GridBoundColumn>
            <telerik:GridBoundColumn UniqueName="CadetRankId" Visible="false">
            </telerik:GridBoundColumn>
            <%-- Fin package de CadetRankColumn--%>
            <telerik:GridBoundColumn UniqueName="SubmittedUnitShortName"  HeaderText="~Saisi par" meta:resourcekey="GridBoundColumnSubmittedUnitShortName">
            <HeaderStyle Width="80px" />
            </telerik:GridBoundColumn>
            <Fortress:RadGridDateColumn UniqueName="SubmissionDate" DataFormatString="{0:yyyy-MM-dd}" meta:resourcekey="GridBoundColumnSubmissionDate">
                <HeaderStyle Width="80px" />
            </Fortress:RadGridDateColumn>
            <telerik:GridBoundColumn UniqueName="SubmissionStatus" meta:resourcekey="GridBoundColumnSubmissionStatus">
                <HeaderStyle Width="110px" />
            </telerik:GridBoundColumn>
            <telerik:GridHyperLinkColumn AllowFiltering="true" UniqueName="UnitShortName" HeaderText="~UnitShortName"
                DataNavigateUrlFormatString="~/Content/Unit/UnitView.aspx?UnitId={0}"
                DataNavigateUrlFields="CadetCorpsId" meta:resourcekey="GridBoundColumnUnitShortName">
                <HeaderStyle Width="70px" />
            </telerik:GridHyperLinkColumn>
            <fortress:RadGridDateColumn AllowFiltering="false" UniqueName="ContingentStartDate"
                HeaderText="~ContingentStartDate" DataFormatString="{0:d}" meta:resourcekey="GridBoundColumnContingentStartDate">
                <HeaderStyle Width="80px" />
            </fortress:RadGridDateColumn>
            <fortress:RadGridDateColumn AllowFiltering="false" UniqueName="ContingentEndDate"
                HeaderText="~ContingentEndDate" DataFormatString="{0:d}" meta:resourcekey="GridBoundColumnContingentEndDate">
                <HeaderStyle Width="80px" />
            </fortress:RadGridDateColumn>
            <fortress:RadGridDateColumn AllowFiltering="true" UniqueName="StartApplicationDate"
                HeaderText="~StartApplicationDate" DataFormatString="{0:d}" meta:resourcekey="GridBoundColumnStartApplicationDate">
                <HeaderStyle Width="90px" />
            </fortress:RadGridDateColumn>
            <fortress:RadGridDateColumn AllowFiltering="true" UniqueName="EndApplicationDate"
                HeaderText="~EndApplicationDate" DataFormatString="{0:d}" meta:resourcekey="GridBoundColumnEndApplicationDate">
                <HeaderStyle Width="90px" />
            </fortress:RadGridDateColumn>
            <telerik:GridBoundColumn AllowFiltering="false" UniqueName="CommandingOfficerPriority"
                HeaderText="~Priorité du commandant" meta:resourcekey="GridBoundColumnCommandingOfficerPriority">
                <HeaderStyle Width="80px" />
            </telerik:GridBoundColumn>
            <telerik:GridBoundColumn AllowFiltering="false" UniqueName="CadetPreference" HeaderText="~Préférence du cadet"
                meta:resourcekey="GridBoundColumnCadetPreference">
                <HeaderStyle Width="80px" />
            </telerik:GridBoundColumn>
            <%-- Cette colonne permet de régler le problème de scroll horizontal --%>
            <fortress:RadGridDateColumn AllowFiltering="false" UniqueName="EmptyColumn">
                <HeaderStyle Width="217px" />
            </fortress:RadGridDateColumn>
            <%--Insérez vos colonnes ici -- FIN --%>
        </Columns>
    </MasterTableView>
    <ClientSettings>
        <Scrolling AllowScroll="true" UseStaticHeaders="true" ScrollHeight="360px" FrozenColumnsCount="3" />
    </ClientSettings>
</telerik:RadGrid>

The <fortress.... > are home made gridboundcolumn.

Is there a way to remove the last column that only serve to resize correctly my grid?

Thx for your help,
have a nice day,
Guillaume

[Dimo]

Hi Guillaume,

When using frozen columns, you have to ensure that the sum of the widths of the last visible columns matches (or is smaller than) the free space for non-frozen columns. Otherwise you will not see the last column completely.

Try changing the column widths. Alternatively, increase the width of the last column so that it is still clipped, but all of its content is visible.

Regards,
Dimo
the Telerik team

[subbulaxmi]

I have a similar problem. But in my case, the last column is cutoff from the rest of the grid on a postback event like a button click. I have two frozen first columns on the grid and the last column does show on the page load but hides on postback. I tried fixing the width of other columns to see if that would fit the last column in the grid. But that didnt help either. Any help appreciated. 

[Pavlina]

Hi,

Could you specify which is the version of Telerik UI for ASP.NET AJAX that you are using in your project? Also in order to investigate the reason for the described issue send us the grid declaration so we can test it locally.
 
Regards,
Pavlina
Telerik

[subbulaxmi]

The grid columns are being dynamically generated form an XML file. However, below is the declaration of the grid. Also to update you, the issue is only on a button click or any other postback event on the page. The grid columns look good when scrolled on Page Load. I have over 60 columns on the grid and attached is a screenshot of what happens. 

        <telerik:RadAjaxPanel ID="RadAjaxPanelGrid" runat="server" LoadingPanelID="RadAjaxLoadingGrid">
            <telerik:RadPanelBar ID="RadPanelBarMain" runat="server" PersistStateInCookie="true"
                CssClass="gridpanelNoCollapse">
                <Items>
                    <telerik:RadPanelItem Text="Company: ALL Book: ALL" CssClass="collapsed" Expanded="true"
                        Selected="true" ToolTip="Click here to open and close the list" PreventCollapse="true">
                        <HeaderTemplate>
                            <table width="70%">
                                <tr>
                                    <td class="span-label-left">
                                        <span>
                                            <asp:Label runat="server" ID="lblCompany" CssClass="span-label-text"></asp:Label></span>
                                    </td>
                                    <td class="span-label-right">
                                        <span>
                                            <asp:Label runat="server" ID="lblBook" CssClass="span-label-text"></asp:Label></span>
                                    </td>
                                </tr>
                            </table>
                        </HeaderTemplate>
                        <ContentTemplate>
                            <telerik:RadTabStrip ID="TabStripDetailData" runat="server" MultiPageID="RadTabExpandCollapse"
                                SelectedIndex="0">
                                <Tabs>
                                    <telerik:RadTab Text="Gold Detail">
                                    </telerik:RadTab>
                                    <telerik:RadTab Text="Company By Book">
                                    </telerik:RadTab>
                                </Tabs>
                            </telerik:RadTabStrip>
                            <telerik:RadMultiPage ID="RadTabExpandCollapse" runat="server" SelectedIndex="0">
                                <telerik:RadPageView ID="RadPageCollapse" runat="server">
                                    <twControl:TwRadGridDrc runat="server" ID="gridGoldSummary" OnNeedDataSource="gridGoldSummary_NeedDataSource"
                                        OnItemCommand="gridGoldSummary_ItemCommand" GroupingEnabled="false" AllowFilteringByColumn="true"
                                        AllowSorting="True" AutoGenerateColumns="false" AllowPaging="true" PageSize="50"
                                        FeatureGroupID="Gold Detail" GridLines="None" ShowStatusBar="true" EnableHeaderContextMenu="false"
                                        EnableHeaderContextFilterMenu="false" EnableViewState="false" ToolTip="Gold Detail"
                                        Visible="true">
                                        <GroupingSettings CaseSensitive="false" />
                                        <MasterTableView Visible="true" TableLayout="Fixed" IsFilterItemExpanded="true" CommandItemDisplay="None">
                                            <CommandItemSettings ShowExportToWordButton="false" ShowExportToExcelButton="false"
                                                ShowRefreshButton="false" ShowExportToCsvButton="false" ShowExportToPdfButton="false"
                                                ShowAddNewRecordButton="false"></CommandItemSettings>

                                            <Columns></Columns>
                                        </MasterTableView>
                                        <ClientSettings AllowColumnHide="false" ReorderColumnsOnClient="false" ColumnsReorderMethod="Reorder"
                                            AllowColumnsReorder="false">
                                            <Scrolling FrozenColumnsCount="2" AllowScroll="true" UseStaticHeaders="true"/>
                                            <Resizing AllowColumnResize="false" AllowRowResize="false" />
                                        </ClientSettings>
                                        <PagerStyle AlwaysVisible="true" PageSizeControlType="None" />
                                    </twControl:TwRadGridDrc>
                                </telerik:RadPageView>
                                <telerik:RadPageView ID="RadPageExpand" runat="server">
                                    <twControl:TwRadGridDrc runat="server" ID="gridGoldDetail" AllowSorting="True" AutoGenerateColumns="false"
                                        OnNeedDataSource="gridGoldDetail_NeedDataSource" OnItemCommand="gridGoldDetail_ItemCommand"
                                        AllowPaging="true" PageSize="50"
                                        GridLines="None" ShowStatusBar="true" AllowFilteringByColumn="true" EnableHeaderContextMenu="false"
                                        EnableHeaderContextFilterMenu="false" EnableViewState="false" GroupingEnabled="false"
                                        ItemStyle-HorizontalAlign="Left" FeatureGroupID="Company By Book" EnableLinqExpression="false" 
                                        Visible="true" ToolTip="Company By Book">
                                        <GroupingSettings CaseSensitive="false" />
                                        <MasterTableView Visible="true" TableLayout="Fixed" IsFilterItemExpanded="true" CommandItemDisplay="None">
                                            <CommandItemSettings ShowExportToWordButton="false" ShowExportToExcelButton="false"
                                                ShowRefreshButton="false" ShowExportToCsvButton="false" ShowExportToPdfButton="false"
                                                ShowAddNewRecordButton="false"></CommandItemSettings>
                                            <Columns></Columns>
                                        </MasterTableView>
                                        <ClientSettings AllowColumnHide="false" ReorderColumnsOnClient="false" ColumnsReorderMethod="Reorder"
                                            AllowColumnsReorder="false">
                                            <Scrolling FrozenColumnsCount="2" AllowScroll="true" UseStaticHeaders="true" />
                                            <Resizing AllowColumnResize="false" AllowRowResize="false" />
                                        </ClientSettings>
                                        <PagerStyle AlwaysVisible="true" PageSizeControlType="None" />
                                    </twControl:TwRadGridDrc>
                                </telerik:RadPageView>
                            </telerik:RadMultiPage>
                        </ContentTemplate>
                    </telerik:RadPanelItem>
                </Items>
            </telerik:RadPanelBar>
            <asp:Literal ID="litBook" runat="server" Visible="false" />
            <asp:Literal ID="litCompany" runat="server" Visible="false" />
        </telerik:RadAjaxPanel>

 

 

[Pavlina]

Hi,

What you could try in order to deal with this problem is to subscribe on OnClientTabSelected event of the RadTabStrip, find the corresponding RadGrid and call its repaint() method. 
http://docs.telerik.com/devtools/aspnet-ajax/controls/grid/client-side-programming/radgrid-object/methods/repaint

Try this suggestion and let me know if the last grid column is now visible.

Regards,
Pavlina
Telerik