[Solved] how to scroll <tbody> only in radgrid?

[khaled jendi]

hi,

I have many records in my rad grid and its being contained in fixed height <div style="max-height: 350px; overflow-y:scroll">
what happens now is that the div is scrolling vertically, but in this scenario when the user is scrolling, so he would lose the the name of columns (header of each column) and the footer as well

as rad grid is rendered  as html table, how can I keep <thead> and <tfoot> and make the scroll only in <tbody> ?

here is my rad grid:
[note that I am loading datasource of my grid in client side]

<telerik:RadGrid ID="gvViolation" EnableViewState="false" runat="server"
    AllowPaging="true" AllowSorting="True" AllowFilteringByColumn="false" GridLines="None" Skin="Sunset" Width="735px" PageSize="3">

        <ExportSettings OpenInNewWindow="true" >
             <Pdf Author="WheelTrack" Creator="WheelTrack" />
        </ExportSettings>

        <MasterTableView AllowMultiColumnSorting="true" TableLayout="Fixed" >


        <RowIndicatorColumn FilterControlAltText="Filter RowIndicator column"></RowIndicatorColumn>

        <ExpandCollapseColumn FilterControlAltText="Filter ExpandColumn column"></ExpandCollapseColumn>

        <PagerStyle Mode="NextPrevAndNumeric" />
        <CommandItemSettings ShowExportToWordButton="true" ShowExportToExcelButton="true" ShowExportToPdfButton="true" ShowAddNewRecordButton="false" ShowExportToCsvButton="true"    />

        <Columns>
            <telerik:GridBoundColumn DataField="Device_Name" HeaderText="Device Name" />
            <telerik:GridBoundColumn DataField="Device_Desc" HeaderText="Device Desc" />
            <telerik:GridBoundColumn DataField="Rule_Name" HeaderText="Rule Name" />
            <telerik:GridBoundColumn DataField="ViolationText" HeaderText="Violation" />
            <telerik:GridBoundColumn DataField="Latitude" HeaderText="Latitude" />
            <telerik:GridBoundColumn DataField="Longtitude" HeaderText="Longtitude" />
            <telerik:GridBoundColumn DataField="UTC_Date" HeaderText="Violation Date" />
            <telerik:GridBoundColumn DataField="UTC_Time" HeaderText="Violation Time" />
            <telerik:GridBoundColumn DataField="Location_NearBy" HeaderText="Location NearBy" />
        </Columns>
    </MasterTableView>


        <FilterMenu EnableImageSprites="False"></FilterMenu>

        <HeaderContextMenu CssClass="GridContextMenu GridContextMenu_Sunset"></HeaderContextMenu>

    <PagerStyle AlwaysVisible="true" Mode="NumericPages"/>
    <ClientSettings>
        <ClientEvents OnCommand="gvViolation_Command" />
    </ClientSettings>
</telerik:RadGrid>

[Jayesh Goyani]

Hello,

Please check below demo.
Grid / Scrolling


OR

Please set below property in your grid

<HeaderStyle Width="200px" />
          <ClientSettings>
              <Scrolling AllowScroll="True" UseStaticHeaders="True" SaveScrollPosition="True">
              </Scrolling>
          </ClientSettings>
      </telerik:RadGrid>

Thanks,
Jayesh Goyani