Resize Grid on content page

[Michael]

I'm using this example http://demos.telerik.com/aspnet-ajax/controls/examples/integration/gridandsplitterresizing/defaultcs.aspx?product=splitter (Resizing RadGrid in RadSplitter) to help with resizing my RadGrid.  However, I'm getting the following javascript error: Line: 107
Error: 'null' is null or not an object

The error is occurring when it's trying to call the changepagesize function.

The grid and splitter on in a content page.  Any help would be appreciated.

ASPX

<telerik:RadAjaxManagerProxy ID="RadAjaxManagerProxy1" runat="server">

<AjaxSettings>

<telerik:AjaxSetting AjaxControlID="RadAjaxManagerProxy1">

<UpdatedControls>

<telerik:AjaxUpdatedControl ControlID="ARGrid1" />

</UpdatedControls>

</telerik:AjaxSetting>

<telerik:AjaxSetting AjaxControlID="rcbCodeList">

<UpdatedControls>

<telerik:AjaxUpdatedControl ControlID="rcbListType"

LoadingPanelID="RadAjaxLoadingPanel1" />

<telerik:AjaxUpdatedControl ControlID="rtbCode" />

<telerik:AjaxUpdatedControl ControlID="btnAddCode" />

<telerik:AjaxUpdatedControl ControlID="rlbCodes"

LoadingPanelID="RadAjaxLoadingPanel1" />

</UpdatedControls>

</telerik:AjaxSetting>

<telerik:AjaxSetting AjaxControlID="rcbListType">

<UpdatedControls>

<telerik:AjaxUpdatedControl ControlID="rtbCode" />

<telerik:AjaxUpdatedControl ControlID="btnAddCode" />

<telerik:AjaxUpdatedControl ControlID="rlbCodes"

LoadingPanelID="RadAjaxLoadingPanel1" />

</UpdatedControls>

</telerik:AjaxSetting>

<telerik:AjaxSetting AjaxControlID="btnAddCode">

<UpdatedControls>

<telerik:AjaxUpdatedControl ControlID="rtbCode"

LoadingPanelID="RadAjaxLoadingPanel1" />

<telerik:AjaxUpdatedControl ControlID="rlbCodes"

LoadingPanelID="RadAjaxLoadingPanel1" />

</UpdatedControls>

</telerik:AjaxSetting>

<telerik:AjaxSetting AjaxControlID="ARGrid1">

<UpdatedControls>

<telerik:AjaxUpdatedControl ControlID="ARGrid1"

LoadingPanelID="RadAjaxLoadingPanel1" />

</UpdatedControls>

</telerik:AjaxSetting>

</AjaxSettings>

</telerik:RadAjaxManagerProxy>

<telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" Skin="Default">

</telerik:RadAjaxLoadingPanel>

<telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">

</telerik:RadCodeBlock>

<script type="text/javascript">

function ClientResized(sender, eventArgs) {

alert('in resize');

var test = $find("<%= RadAjaxManagerProxy1.ClientID %>");

alert('found proxy');

$find("<%= RadAjaxManagerProxy1.ClientID %>").ajaxRequest('ChangePageSize');

alert('changed size');

//  if ($find("<%= RadAjaxManagerProxy1.ClientID %>").visible)

// {

//$find("<%= RadAjaxManagerProxy1.ClientID %>").ajaxRequest('ChangePageSize');

//}

}

</script>    <telerik:RadPane ID="gridPane" runat="server" Height="400px" Scrolling="None" OnClientResized="ClientResized">     <table border="0" width="986px" cellpadding="0" cellspacing="0" style="background-color:White;table-layout:fixed">     <tr valign="top">     <td width="15px"><img src="images/spacer.gif" width="15px" alt="" /></td>     <td style="height:400px;">     <table border="0" cellpadding="0" cellspacing="0" width="986px" style="background-color:White;table-layout:fixed" >     <tr>     <td>     <telerik:RadGrid ID="ARGrid1" runat="server" Width="95%" GridLines="None"     PageSize="50" AllowSorting="True" AllowPaging="True" Visible="false"     OnNeedDataSource="ARGrid1_NeedDataSource" ShowStatusBar="true" ShowGroupPanel="true" Skin="Outlook" >     <MasterTableView AllowFilteringByColumn="true" AllowMultiColumnSorting="true" Width="100%" CommandItemDisplay="None" AutoGenerateColumns="true">       <Columns>     </Columns>     </MasterTableView>     <ClientSettings AllowColumnsReorder="true" AllowDragToGroup="true" ColumnsReorderMethod="Reorder" >     <Scrolling AllowScroll="true" UseStaticHeaders="true" SaveScrollPosition="false" FrozenColumnsCount="1" ScrollHeight="100%" />     <Resizing ClipCellContentOnResize="false" AllowColumnResize="true" />     </ClientSettings>     <GroupingSettings ShowUnGroupButton="true" />     </telerik:RadGrid>     </td>     </tr>     </table>       </td>     </tr>     </table>     </telerik:RadPane>

Server code:

       protected void RadAjaxManagerProxy1_AjaxRequest(object sender, Telerik.Web.UI.AjaxRequestEventArgs e)
        {
            switch (e.Argument.ToString())
            {
                case "ChangePageSize":
                    //Calculate the number of rows that fit in the RadPane.
                    //In this case 23 is the sum of the height of a single row and its upper border width.
                    //Depending on the paticular scenario this value may vary.
                    int rows = (Int32.Parse(this.gridPane.Height.Value.ToString()) - 60) / 23;
                    if (rows >= 1)
                    {
                        ARGrid1.PageSize = rows;

                        // Check whether the CurrentPageIndex is correct.
                        if (Session["itemsCount"] != null)
                        {
                            int itemsCount = (int)Session["itemsCount"];
                            int pageCount = (int)Math.Ceiling(((double)itemsCount / rows));
                            if (ARGrid1.MasterTableView.CurrentPageIndex > pageCount - 1)
                            {
                                ARGrid1.MasterTableView.CurrentPageIndex = pageCount - 1;
                            }
                        }

                        ARGrid1.Rebind();
                    }
                    break;
            }
        }

        public string RadGrid1PanelClientID;

        protected void RadAjaxManagerProxy1_AjaxSettingCreated(object sender, AjaxSettingCreatedEventArgs e)
        {
            if (e.Initiator.ID == "ARGrid1")
            {
                this.RadGrid1PanelClientID = e.UpdatePanel.ClientID;
            }
        }

[Michael]

I figured part of my problem out after doing a little research on the Ajax forum. 
I needed to change this line:  $find("<%= RadAjaxManagerProxy1.ClientID %>").ajaxRequest('ChangePageSize');  

to:

$find(

"<%= RadAjaxManager.GetCurrent(this).ClientID %>").ajaxRequest('ChangePageSize');

That got me past object null error.

However, my grid isn't resizing.

 

[Michael]

I figured out what my problem with the resizing is but haven't been able to get it to work. The problem is that the event for Onajaxrequest isn't firing.  I haven't figured out how to get it to fire on a content page.

[Iana Tsolova]

Hi Michael,

In order to achieve your goal, try adding the below ajax setting in the Page_Load event handler of the content page. There you can also attach the handler of the RadAjaxManager AjaxRequest event:

protected void Page_Load(object sender, EventArgs e)
{
    RadAjaxManager manager = RadAjaxManager.GetCurrent(Page);
    manager.AjaxSettings.AddAjaxSetting(manager, ARGrid1);
    manager.AjaxRequest += new RadAjaxControl.AjaxRequestDelegate(manager_AjaxRequest);
}
protected void manager_AjaxRequest(object sender, Telerik.Web.UI.AjaxRequestEventArgs e)
{
   //handle the manager AjaxRequest event here
}

Check it out and let me know if it works.

Kind regards,
Iana
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.

[Michael]

Yes that helped call the RadManagerProxy ajaxrequest.   The other important piece that I found to make this work is the style.  The following must be added in order to resize the grid using the splitter.

 

<style type="text/css">

 

#<%=

 

RadGrid1PanelClientID %>

 

{

 

padding:10px 10px 10px 10px;

 

 

margin:10px 10px 10px 10px;

 

 

height:100%;

 

}

</style>

and

 

        // Used to set the style on the Grid so it will grow/shrink with splitter bar
        public string RadGrid1PanelClientID;

        protected void manager_AjaxSettingCreated(object sender, AjaxSettingCreatedEventArgs e)
        {
           // Used to set the style on the Grid so it will grow/shrink with splitter bar
            if (e.Initiator.ID == "ARGrid1")
            {
                this.RadGrid1PanelClientID = e.UpdatePanel.ClientID;
            }
        }

I've got everything working now.   Thanks