RadGrid Scrolling Colum Size

[ross]

Hey Guys,

I have a grid where I hide/show certain columns dynamically. Everything works fine until I set AllowScroll="true", then all the columns go out of whack completely, as can be seen in the attached images. I've tried quiet a few things to get the grid to play nice, but any suggestions are welcome.

Regards
Ross

 

<telerik:RadGrid ID="m_radgrdLevel1" runat="server" AllowPaging="True" AllowSorting="True"
    GridLines="None" BorderWidth="1px" Height="325px" Style="margin-left: 10px; margin-right: 10px;
    margin-top: 5px; margin-bottom: 5px; width: 98%" OnItemCommand="m_radgrdLevel1_ItemCommand"
    OnItemDataBound="m_radgrdLevel1_ItemDataBound" CellSpacing="0" OnSortCommand="m_radgrdLevel1_SortCommand">
    <filtermenu enableimagesprites="False">
    </filtermenu>
    <pagerstyle visible="False" />
    <clientsettings allowexpandcollapse="True">
        <ClientEvents OnColumnClick="ClickAlert" OnScroll="HandleScrolling"  />
        <Scrolling AllowScroll="true" UseStaticHeaders="true" SaveScrollPosition="true" />

    </clientsettings>
    <mastertableview allowmulticolumnsorting="True" autogeneratecolumns="False" datakeynames="CodeNumber,CodeSystem"
        grouploadmode="Server" hierarchyloadmode="ServerOnDemand" >
        <CommandItemSettings ExportToPdfText="Export to PDF"></CommandItemSettings>
        <RowIndicatorColumn Visible="True" FilterControlAltText="Filter RowIndicator column">
        </RowIndicatorColumn>
        <ExpandCollapseColumn Visible="True" FilterControlAltText="Filter ExpandColumn column">
        </ExpandCollapseColumn>
        <Columns>
            <telerik:GridTemplateColumn UniqueName="CheckboxColumn">
                <ItemTemplate>
                    <asp:CheckBox AutoPostBack="true" ID="chkDoc" runat="server" Checked="false" Enabled="true"
                        OnCheckedChanged="chkDoc_CheckedChanged" />
                    <ItemStyle Width="4%" />
                    <HeaderStyle Width="4%" />
                </ItemTemplate>
            </telerik:GridTemplateColumn>
            <telerik:GridButtonColumn CommandName="Redirect" DataTextField="CodeNumber" HeaderText="ID"
                FilterControlAltText="Filter column column" UniqueName="LinkButtonColumn">
                <ItemStyle Width="10%"/>
                <HeaderStyle Width="10%" />
            </telerik:GridButtonColumn>
            <telerik:GridBoundColumn DataField="CodeNumber" HeaderText="ID" UniqueName="CodeNumber">
                <ItemStyle Width="10%"/>
            </telerik:GridBoundColumn>
            <telerik:GridBoundColumn DataField="CodeDescription" HeaderText="Name" UniqueName="CodeName">
                <ItemStyle Width="45%" />
            </telerik:GridBoundColumn>
            <telerik:GridBoundColumn DataField="Status" HeaderText="Status" UniqueName="CodeStatus">
                <ItemStyle Width="8%" />
            </telerik:GridBoundColumn>
            <telerik:GridBoundColumn DataField="Active" HeaderText="Active">
                <ItemStyle Width="8%" />
            </telerik:GridBoundColumn>
            <telerik:GridBoundColumn DataField="CodeSystem" HeaderText="Code System">
                <ItemStyle Width="20%" />
            </telerik:GridBoundColumn>
            <telerik:GridBoundColumn DataField="TargetType" HeaderText="Target Type" UniqueName="TargetType" visible="false">
            </telerik:GridBoundColumn>
            <telerik:GridBoundColumn DataField="HasChildren" UniqueName="HasChildren" Visible="false">
            </telerik:GridBoundColumn>
            <telerik:GridBoundColumn DataField="QAType" UniqueName="QAType" Visible="false">
            </telerik:GridBoundColumn>
        </Columns>

                                                    </MasterTableView>
                                                </telerik:RadGrid>

[ross]

Anybody?

[Galin]

Hi Ross,

You can workaround this issue by attaching the following function clientsettings->ClientEvents
->OnColumnHidden event

function onColumnHidden(sender) {
    var dataTable = sender.get_masterTableView().get_element(),
        headerTable = sender.get_masterTableViewHeader().get_element();
    dataTable.style.tableLayout = "auto";
    headerTable.style.tableLayout = "auto";
    if ($telerik.isIE8) {
        dataTable.style.position = "absolute";
        headerTable.style.position = "absolute";
    }
    window.setTimeout(function () {
        dataTable.style.tableLayout = "fixed";
        headerTable.style.tableLayout = "fixed";
        if ($telerik.isIE8) {
            dataTable.style.position = "static";
            headerTable.style.position = "static";
        }
    }, 1)
}

I hope this helps.

Regards,
Galin
the Telerik team