Resize Grid on content page

5 posts, 0 answers
  1. Michael
    Michael avatar
    51 posts
    Member since:
    Dec 2008

    Posted 11 Mar 2010 Link to this post

    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;  
                }  
            } 
  2. Michael
    Michael avatar
    51 posts
    Member since:
    Dec 2008

    Posted 11 Mar 2010 Link to this post

    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.

     

  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Michael
    Michael avatar
    51 posts
    Member since:
    Dec 2008

    Posted 11 Mar 2010 Link to this post

    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.
  5. Iana Tsolova
    Admin
    Iana Tsolova avatar
    3388 posts

    Posted 16 Mar 2010 Link to this post

    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.
  6. Michael
    Michael avatar
    51 posts
    Member since:
    Dec 2008

    Posted 17 Mar 2010 Link to this post

    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

Back to Top
UI for ASP.NET Ajax is Ready for VS 2017