[Solved] Grid Loses Scroll When Tabs Changed

[Rafi]

Hi Telerik team,

I have an issuew ith the grid that I can't figure out. I have a RadTabStrip with MultipPage and each has a grid in it. The grids work perfect initially when I load them through Ajax. However, when I change tabs (they are cached now), the grids lose their scrollbars! What is causing this? Also, radgrid has a default.skin file that applies styles to all grids.

 

<div >

    <telerik:RadTabStrip ID="test" AutoPostBack="true" SelectedIndex="0"

        runat="server" MultiPageID="mpTest
" OnTabClick="test_TabClick" SkinID="MySkinID">

        <Tabs>

            <telerik:RadTab Text="tab 1" />

            <telerik:RadTab Text="tab 2" />

            <telerik:RadTab Text="tab 3" />

        </Tabs>

    </telerik:RadTabStrip>

</div>

<div>

    <telerik:RadMultiPage ID="mpTest" SelectedIndex="0" runat="server"

        OnPageViewCreated="mpTest_PageViewCreated">

    </telerik:RadMultiPage>

</div>

<telerik:RadGrid runat="server" >
    <MasterTableView ShowHeadersWhenNoRecords="False"/>
    <HeaderStyle HorizontalAlign="Left" VerticalAlign="Bottom"></HeaderStyle>
    <ItemStyle HorizontalAlign="Left" VerticalAlign="Top"></ItemStyle>
    <AlternatingItemStyle HorizontalAlign="Left" VerticalAlign="Top"></AlternatingItemStyle>
    <ClientSettings EnableRowHoverStyle="False">
        <Scrolling AllowScroll="True" SaveScrollPosition="True" UseStaticHeaders="True" ScrollHeight="500px" />
        <Selecting AllowRowSelect="True" />
    </ClientSettings>
</telerik:RadGrid>

[Rafi]

Anyone know how to fix this? Please this is urgent.

[Princy]

Hi Rafi,

I have tried your code and i was able to get the scrolling to work when the width of the radgrid is set.From your code i couldn't find any width that is set on the radgrid.In order to display horizontal scroll for navigation, you need to make sure that the total width of the columns (either auto-generated or declaratively set) exceeds the width of the grid .
Moreover, to render merely the horizontal scroll and avoid the appearance of the vertical scroll, make sure that the height of the records in the grid does not exceed the ClientSettings -> Scrolling -> ScrollHeight scroll setting. Please make sure that you follow this,if this doesn't help,please provide your full code snippet to replicate the issue.

Thanks,
Princy

[Rafi]

Princy thanks for the reply.

However, I am only worried about vertical scrolling. I don't care about horrizontal scrolling.

Let me describe the issue a bit more with more details.

I have a TelerikSkins.skin file that has all the defaults for radgrids, and so then I give it the skinID and so it grabs defaults from there. An example of what I am using:

<telerik:RadGrid SkinId="MySkinID" runat="server" AllowSorting="True" >
    <MasterTableView ShowHeadersWhenNoRecords="False" />
    <HeaderStyle HorizontalAlign="Left" VerticalAlign="Bottom"></HeaderStyle>
    <ItemStyle HorizontalAlign="Left" VerticalAlign="Top"></ItemStyle>
    <AlternatingItemStyle HorizontalAlign="Left" VerticalAlign="Top"></AlternatingItemStyle>
    <ClientSettings EnableRowHoverStyle="False">
        <Scrolling AllowScroll="True" SaveScrollPosition="True" UseStaticHeaders="False" ScrollHeight="800px" />
    </ClientSettings>
</telerik:RadGrid>

Okay so you can see the height now, every grid initially has 800px height and then a scroll is enabled. Everything works perfect in the RabStrip and MutliPage, HOWEVER, afterI change tabs (after they are initially loaded and cashed), the scroll/height is lost, and the grid is expanded all the way down to my page with no scroll, so it is 100% of the page (the page has to scroll now, not the grid). Why does the RadGrid lose its scroll height and change itself to 100% after I change tabs? Do I have to repaint or something? Why does it it lose its skinID defaults?

[Venelin]

Hi Rafi,

I am afraid that I was not able to replicate the same issue on my side based on the provided information. I created a sample project that follows the described structure. Please try to examine it and try to identify what are the differences with respect to your real project. This will help us to identify the source of the problem and find a proper solution. Please try to modify the code in order to replicate the issue and resend it.

I am looking forward to your reply.

Regards,
Venelin
Telerik