RadGrid scrolling through RadSlider
Cancel
The title field is required!
Thread is closed for posting
1
posts,
0
answers
-
63F75A2C-1F16-4AED-AFE8-B1BBD57646AD
1572
posts
Member since:
Oct 2004
Posted 05 Jun 2008
Link to this post
RadControls version |
Telerik.Web.UI v2008.1 515 (Q1, SP1)
|
.NET version |
.Net3.5
|
Visual Studio version |
2008
|
programming language |
JavaScript/ASPX only
|
browser support |
all browsers supported by RadControls
|
- PROJECT DESCRIPTION
The project demonstrates an integration of RadGrid and RadSlider. Grid scrolling functionality is implemented through both horizontal and vertical sliders. An important CSS rule is applied to hide the default Grid scroll bars:
<style type="text/css"> |
.Grid div |
{ |
overflow: hidden !important; |
} |
</style> |
RadSlider's OnClientValueChange event handler controls the Grid data div scrollTop/scrollLeft properties. The ASPX looks like this:
<script type="text/javascript"> |
function pageLoad(sender, args) |
{ |
$find("<%= RadSlider1.ClientID %>").set_maximumValue($find("<%= RadGrid1.ClientID %>")._gridDataDiv.scrollWidth); |
$find("<%= RadSlider2.ClientID %>").set_maximumValue($find("<%= RadGrid1.ClientID %>")._gridDataDiv.scrollHeight); |
} |
|
function valueChange(sender, args) |
{ |
var gridDataDiv = $find("<%= RadGrid1.ClientID %>")._gridDataDiv; |
if(sender.get_id() == "<%= RadSlider1.ClientID %>") |
{ |
gridDataDiv.scrollLeft = sender.get_value(); |
} |
else |
{ |
gridDataDiv.scrollTop = sender.get_value(); |
} |
} |
</script> |
<asp:ScriptManager ID="ScriptManager" runat="server" /> |
<div style="float: left; background-color: #7698c5; border: 1px solid ThreeDShadow;"> |
<div style="float: left;"> |
<telerik:RadGrid ID="RadGrid1" Width="600px" Skin="Office2007" CssClass="Grid" DataSourceID="LinqDataSource1" |
runat="server"> |
<MasterTableView TableLayout="Fixed"> |
<HeaderStyle Width="100px" /> |
</MasterTableView> |
<ClientSettings> |
<Scrolling AllowScroll="true" UseStaticHeaders="true" /> |
</ClientSettings> |
</telerik:RadGrid> |
<telerik:RadSlider ID="RadSlider1" Skin="Office2007" runat="server" OnClientValueChange="valueChange" |
Length="600" /> |
</div> |
<div style="float: left; padding-top: 21px;"> |
<telerik:RadSlider ID="RadSlider2" Skin="Office2007" runat="server" OnClientValueChange="valueChange" |
Orientation="Vertical" Length="300" /> |
</div> |
</div> |
<asp:LinqDataSource ID="LinqDataSource1" runat="server" ContextTypeName="DataClassesDataContext" |
TableName="Customers"> |
</asp:LinqDataSource> |
A fully functional project is attached as well.
-