Navigation on expand and collapse scroll bar appears on the grid

[Sunil]

I am working on an ASP.NET Web Forms application using Telerik RadGrid (Metro skin).

Scenario

• The page has a left navigation panel that can be collapsed / expanded

• On toggle, the main content container width is changed using CSS only (no page refresh)

• On initial page load or full refresh, the grid renders correctly

• On toggle of grid button in the expand mode only, the grid suddenly shows a horizontal scrollbar

Observed Behaviour

• This happens only after clicking toggle ( external button written in C# code)

• Rebinding the grid (Rebind()) or calling repaint() does not fix the issue

• A full page refresh always fixes it. 

 

 

How can i prevent the scoll from appearing when the grid has lesser columns. the scrolls appears from _Frozen.

 

Css used for toggle small -> condensed , and condensed -> small 

.small .RadGrid .rgRow td,
.small .RadGrid .rgAltRow td,
.small .RadGrid .rgEditRow td,

.small .gridFillLayoutPanel .RadGrid_Metro .rgHeader th,
.small .gridFillLayoutPanel .RadGrid_Metro .rgGroupHeader th,
.small .RadGrid .rgRow > td,
.small .RadGrid .rgAltRow > td,
.small .RadGrid .rgEditRow > td,
.small .RadGrid .rgFilterRow > td {
    padding-left: 8px !important;
    padding-right: 8px !important;
    line-height: 32px !important;
    height: 32px !important;
    font-family: @font-tab-title;
    font-size: 12px;
    padding-top: 7px !important;
    padding-bottom: 7px !important;
    text-align: left;
}

 

.condensed .gridFillLayoutPanel .RadGrid_Metro .rgRow td,
.condensed .gridFillLayoutPanel .RadGrid_Metro .rgAltRow td,
.condensed .gridFillLayoutPanel .RadGrid_Metro .rgEditRow td
.condensed .gridFillLayoutPanel .RadGrid_Metro .rgHeader,
.condensed .gridFillLayoutPanel .RadGrid_Metro .rgGroupHeader td,
.condensed .RadGrid .rgRow > td,
.condensed .RadGrid .rgAltRow > td,
.condensed .RadGrid .rgEditRow > td,
.condensed .RadGrid .rgFilterRow > td,
.condensed .RadGrid .rgHeader th, 
.condensed .RadGrid .rgGroupHeader th {
    padding-left: 7px !important;
    padding-right: 7px !important;
    line-height: 24px !important;
    height: 24px !important;
    font-family: @font-tab-title;
    font-size: 11px !important;
    padding-top: 3px !important;
    padding-bottom: 3px !important;
    text-align: left;
}

 

Best Regards,

Sunil Shanakr S R

 

[Vasko]

Hi Sunil,

Based on your description, I created a sample code snippet that tries to recreate the issue you are experiencing, however, it appears to work fine on my end.

Below you can see the code used, please try to adjust it so that it reproduces the issue you are having:

<div class="layout">
    <div id="nav" class="nav"></div>

    <div class="content">
        <asp:Button
            runat="server"
            Text="Toggle Density"
            OnClientClick="toggleLayout(); return false;" />

        <br />
        <br />
        <telerik:RadGrid ID="RadGrid1" runat="server" AllowPaging="True" Skin="Metro" FrozenColumnsCount="1" Width="800px" OnNeedDataSource="RadGrid1_NeedDataSource">
            <MasterTableView AutoGenerateColumns="False" DataKeyNames="OrderID">
                <Columns>
                    <telerik:GridBoundColumn DataField="OrderID" DataType="System.Int32"
                        FilterControlAltText="Filter OrderID column" HeaderText="OrderID"
                        ReadOnly="True" SortExpression="OrderID" UniqueName="OrderID">
                    </telerik:GridBoundColumn>
                    <telerik:GridDateTimeColumn DataField="OrderDate" DataType="System.DateTime"
                        FilterControlAltText="Filter OrderDate column" HeaderText="OrderDate"
                        SortExpression="OrderDate" UniqueName="OrderDate">
                    </telerik:GridDateTimeColumn>
                    <telerik:GridNumericColumn DataField="Freight" DataType="System.Decimal"
                        FilterControlAltText="Filter Freight column" HeaderText="Freight"
                        SortExpression="Freight" UniqueName="Freight">
                    </telerik:GridNumericColumn>
                    <telerik:GridBoundColumn DataField="ShipName"
                        FilterControlAltText="Filter ShipName column" HeaderText="ShipName"
                        SortExpression="ShipName" UniqueName="ShipName">
                    </telerik:GridBoundColumn>
                    <telerik:GridBoundColumn DataField="ShipCountry"
                        FilterControlAltText="Filter ShipCountry column" HeaderText="ShipCountry"
                        SortExpression="ShipCountry" UniqueName="ShipCountry">
                    </telerik:GridBoundColumn>
                </Columns>
            </MasterTableView>
        </telerik:RadGrid>

    </div>

body {
    margin: 0;
    font-family: Segoe UI;
}

.layout {
    display: flex;
    height: 100vh;
}

.nav {
    width: 240px;
    background: #1f2d3d;
    transition: width 0.3s ease;
}

    .nav.collapsed {
        width: 60px;
    }

.content {
    flex: 1;
    padding: 12px;
    transition: all 0.3s ease;
}

.RadGrid_Metro .rgMasterTable,
.RadGrid_Metro .rgFrozenTable {
    table-layout: fixed;
    box-sizing: border-box;
}

.RadGrid_Metro .rgFrozen {
    box-sizing: border-box;
}

.small .RadGrid_Metro .rgHeader th,
.small .RadGrid_Metro .rgGroupHeader th,
.small .RadGrid_Metro .rgRow > td,
.small .RadGrid_Metro .rgAltRow > td,
.small .RadGrid_Metro .rgEditRow > td,
.small .RadGrid_Metro .rgFilterRow > td {
    padding: 7px 8px !important;
    line-height: 32px !important;
    height: 32px !important;
    font-size: 12px !important;
    text-align: left;
}

.condensed .RadGrid_Metro .rgHeader th,
.condensed .RadGrid_Metro .rgGroupHeader th,
.condensed .RadGrid_Metro .rgRow > td,
.condensed .RadGrid_Metro .rgAltRow > td,
.condensed .RadGrid_Metro .rgEditRow > td,
.condensed .RadGrid_Metro .rgFilterRow > td {
    padding: 3px 7px !important;
    line-height: 24px !important;
    height: 24px !important;
    font-size: 11px !important;
    text-align: left;
}

function toggleLayout() {
    let body = document.body;
    let nav = document.getElementById("nav");

    nav.classList.toggle("collapsed");

    if (body.classList.contains("small")) {
        body.classList.remove("small");
        body.classList.add("condensed");
    } else {
        body.classList.remove("condensed");
        body.classList.add("small");
    }
}

Regards,
Vasko
Progress Telerik

[Sunil]

Thank you Vasko , will try to implement the above.