RadControls for ASP.NET AJAX This example shows how you can resize RadGrid when resizing its splitter container. The RadSplitter control exposes OnClientPaneResized client event which can be handled to initiate an AJAX request and then all you need to do is calculate and set the new value of the PageSize property on the server.
Additionally, to make the grid stretch inside the corresponding pane on horizontal resize, simply set the Width property of RadGrid to 100%.
Below is the code logic used in the example:
CopyJavaScript
function ClientResized(sender, eventArgs) {
$find("<%= RadAjaxManager1.ClientID %>").ajaxRequest('ChangePageSize');
}
CopyASPX
<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" OnAjaxRequest="RadAjaxManager1_AjaxRequest">
<AjaxSettings>
<telerik:AjaxSetting AjaxControlID="RadAjaxManager1">
<UpdatedControls>
<telerik:AjaxUpdatedControl ControlID="RadGrid1" />
</UpdatedControls>
</telerik:AjaxSetting>
<telerik:AjaxSetting AjaxControlID="RadGrid1">
<UpdatedControls>
<telerik:AjaxUpdatedControl ControlID="RadGrid1" />
</UpdatedControls>
</telerik:AjaxSetting>
</AjaxSettings>
</telerik:RadAjaxManager>
<telerik:RadSplitter ID="RadSplitter1" Width="700px" runat="server" Orientation="Horizontal">
<telerik:RadPane ID="gridPane" runat="server" Height="200px" OnClientResized="ClientResized"
Scrolling="None">
<telerik:RadGrid ID="RadGrid1" runat="server" AllowPaging="true" Width="700px" Skin="Telerik">
<MasterTableView AllowPaging="true" />
<PagerStyle Mode="NumericPages" />
</telerik:RadGrid>
</telerik:RadPane>
<telerik:RadSplitBar ID="RadSplitBar2" runat="server" EnableResize="True">
</telerik:RadSplitBar>
<telerik:RadPane ID="listBoxPane" runat="server" CssClass="TextStyle">
RadSplitter Prometheus enables you to build desktop-like application interfaces
with resizable areas and sliding, dockable panels just like in Visual Studio .Net.
Each layout can be indefinitely nested with splitters, whose state is automatically
persisted on the server and can be saved/loaded through the extensive API.
</telerik:RadPane>
</telerik:RadSplitter>CopyC#
private void Page_Load(object sender, System.EventArgs e)
{
if (!Page.IsPostBack)
{
RadGrid1.PageSize = 6;
}
}
protected void RadAjaxManager1_AjaxRequest(object sender, Telerik.Web.UI.AjaxRequestEventArgs e)
{
switch (e.Argument.ToString())
{
case "ChangePageSize":
int rows = (Int32.Parse(this.gridPane.Height.Value.ToString()) - 60) / 23;
if (rows >= 1)
{
RadGrid1.PageSize = rows;
if (Session["itemsCount"] != null)
{
int itemsCount = (int)Session["itemsCount"];
int pageCount = (int)Math.Ceiling(((double)itemsCount / rows));
if (RadGrid1.MasterTableView.CurrentPageIndex > pageCount - 1)
{
RadGrid1.MasterTableView.CurrentPageIndex = pageCount - 1;
}
}
RadGrid1.Rebind();
}
break;
}
}
private void RadGrid1_NeedDataSource(object source, Telerik.Web.UI.GridNeedDataSourceEventArgs e)
{
String ConnString = ConfigurationManager.ConnectionStrings["NorthwindConnectionString"].ConnectionString;
SqlConnection conn = new SqlConnection(ConnString);
SqlDataAdapter adapter = new SqlDataAdapter();
adapter.SelectCommand = new SqlCommand("SELECT CustomerID, CompanyName, ContactName, ContactTitle FROM Customers", conn);
DataTable myDataTable = new DataTable();
conn.Open();
try
{
adapter.Fill(myDataTable);
}
finally
{
conn.Close();
}
Session["itemsCount"] = myDataTable.DefaultView.Count;
RadGrid1.DataSource = myDataTable;
}CopyVB.NET
Private Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles MyBase.Load
If Not Page.IsPostBack Then
RadGrid1.PageSize = 6
End If
End Sub
Private Sub RadGrid1_NeedDataSource(ByVal source As Object, ByVal e As Telerik.Web.UI.GridNeedDataSourceEventArgs) Handles RadGrid1.NeedDataSource
Dim ConnString As String = ConfigurationManager.ConnectionStrings("NorthwindConnectionString").ConnectionString
Dim conn As SqlConnection = New SqlConnection(ConnString)
Dim adapter As SqlDataAdapter = New SqlDataAdapter
adapter.SelectCommand = New SqlCommand("SELECT CustomerID, CompanyName, ContactName, ContactTitle FROM Customers", conn)
Dim table1 As New DataTable
conn.Open()
Try
adapter.Fill(table1)
Finally
conn.Close()
End Try
RadGrid1.DataSource = table1
End Sub
Protected Overloads Overrides Sub OnInit(ByVal e As EventArgs)
InitializeComponent()
MyBase.OnInit(e)
End Sub
Private Sub InitializeComponent()
End Sub
Protected Sub RadAjaxManager1_AjaxRequest(ByVal sender As Object, ByVal e As UI.AjaxRequestEventArgs) Handles RadAjaxManager1.AjaxRequest
Select Case e.Argument.ToString()
Case "ChangePageSize"
Dim rows As Integer = (Int32.Parse(Me.gridPane.Height.Value.ToString()) - 60) / 23
If rows >= 1 Then
RadGrid1.PageSize = rows
RadGrid1.Rebind()
End If
Exit Select
End Select
End Sub