This is a migrated thread and some comments may be shown as answers.

how to scroll <tbody> only in radgrid?

1 Answer 150 Views
Grid
This is a migrated thread and some comments may be shown as answers.
khaled jendi
Top achievements
Rank 1
khaled jendi asked on 22 Mar 2012, 06:23 AM
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>

1 Answer, 1 is accepted

Sort by
0
Jayesh Goyani
Top achievements
Rank 2
answered on 22 Mar 2012, 06:51 AM
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
Tags
Grid
Asked by
khaled jendi
Top achievements
Rank 1
Answers by
Jayesh Goyani
Top achievements
Rank 2
Share this question
or