New to Telerik UI for ASP.NET AJAX? Download free 30-day trial

Resizing RadGrid in RadSplitter

Customer IDCompany NameContact NameContact Title
ALFKIAlfreds FutterkisteMaria AndersSales Representative
ANATRAna Trujillo Emparedados y heladosAna TrujilloOwner
ANTONAntonio Moreno TaqueríaAntonio MorenoOwner
AROUTAround the HornThomas HardySales Representative
BERGSBerglunds snabbköpChristina BerglundOrder Administrator
BLAUSBlauer See DelikatessenHanna MoosSales Representative
BLONPBlondesddsl père et filsFrédérique CiteauxMarketing Manager
BOLIDBólido Comidas preparadasMartín SommerOwner
BONAPBon app'Laurence LebihanOwner
BOTTMBottom-Dollar MarketsElizabeth LincolnAccounting Manager
12345678910
 Page 1 of 10, items 1 to 10 of 91.

RadSplitter for ASP.NET AJAX 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.

Resizing RadGrid in RadSplitter

This example shows how you can resize RadGrid when resizing its splitter container. The RadSplitter control exposes OnClientResized 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.

  • DefaultCS.aspx
  • DefaultCS.aspx.cs
  • scripts.js
  • styles.css
<%@ Page Language="c#" CodeFile="DefaultCS.aspx.cs" AutoEventWireup="false" Inherits="Telerik.Web.Examples.Controls.Integration.GridAndSplitterResizing.DefaultCS" %>

<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head runat="server">
    <title>Telerik ASP.NET Example</title>
    <link rel="stylesheet" href="styles.css" />
    <script src="scripts.js" type="text/javascript"></script>
</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
    <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" OnAjaxSettingCreated="RadAjaxManager1_AjaxSettingCreated"
                            OnAjaxRequest="RadAjaxManager1_AjaxRequest">
        <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="RadAjaxManager1">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="RadGrid1"></telerik:AjaxUpdatedControl>
                </UpdatedControls>
            </telerik:AjaxSetting>
            <telerik:AjaxSetting AjaxControlID="RadGrid1">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="RadGrid1"></telerik:AjaxUpdatedControl>
                </UpdatedControls>
            </telerik:AjaxSetting>
        </AjaxSettings>
    </telerik:RadAjaxManager>
    <script type="text/javascript">
        //<![CDATA[
            $splitterGridDemo.ajaxManagerID = "<%= RadAjaxManager1.ClientID %>";
        //]]>
    </script>
    <div class="demo-container no-bg">
        <telerik:RadSplitter RenderMode="Lightweight" ID="RadSplitter1" Width="800px" runat="server" Orientation="Horizontal" CssClass="compositeSplitter">
            <telerik:RadPane ID="gridPane" runat="server" Height="307px" OnClientResized="ClientResized"
                             Scrolling="None">
                <telerik:RadGrid RenderMode="Lightweight" AllowPaging="true" PageSize="40" Width="100%" Height="100%" Style="border: 0; outline: none"
                                 ID="RadGrid1" runat="server">
                    <MasterTableView AllowPaging="true" TableLayout="Fixed">
                    </MasterTableView>
                    <PagerStyle Mode="NumericPages"></PagerStyle>
                    <ClientSettings EnableRowHoverStyle="true">
                        <Selecting AllowRowSelect="true"></Selecting>
                        <Scrolling AllowScroll="true" UseStaticHeaders="true"></Scrolling>
                    </ClientSettings>
                </telerik:RadGrid>
            </telerik:RadPane>
            <telerik:RadSplitBar CollapseMode="Both" ID="RadSplitBar2" runat="server" EnableResize="True">
            </telerik:RadSplitBar>
            <telerik:RadPane ID="listBoxPane" runat="server" CssClass="TextStyle" BackColor="#d9eeff" ForeColor="Black">
                    <p class="pane-text-content">
                        RadSplitter for ASP.NET AJAX 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.
                    </p>
            </telerik:RadPane>
        </telerik:RadSplitter>
    </div>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance