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

Resizing RadGrid in RadSplitter

Customer IDCompany NameContact NameContact Title
TRADHTradição HipermercadosAnabela DominguesSales Representative
TRAIHTrail's Head Gourmet ProvisionersHelvetius NagySales Associate
VAFFEVaffeljernetPalle IbsenSales Manager
VICTEVictuailles en stockMary SaveleySales Agent
VINETVins et alcools ChevalierPaul HenriotAccounting Manager
WANDKDie Wandernde KuhRita MüllerSales Representative
WARTHWartian HerkkuPirkko KoskitaloAccounting Manager
WELLIWellington ImportadoraPaula ParenteSales Manager
WHITCWhite Clover MarketsKarl JablonskiOwner
WILMKWilman KalaMatti KarttunenOwner/Marketing Assistant
WOLZAWolski ZajazdZbyszek PiestrzeniewiczOwner
123
 Page 3 of 3, items 81 to 91 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.

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

<!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