[Solved] Grid expands in width when bound via AJAX within splitter

[AJtheCoder]

I have a RadGrid search which is embedded in a splitter in a semi-complex layout. I'll post an example at the end of this message. When I click a button, sending an AJAX request which rebinds it with a valid datasource, the grid expands just enough to stretch the page beyond its current width.

I've tried a few tricks - placing it inside a fixed-layout table didn't work, nor did setting the grid's layout to fixed, nor did placing it inside an absolutely-sized div tag. I'm out of ideas. I want the grid to remain at 100% width within the splitter, even when rebound. Even setting it to 100% takes it beyond the available size of the pane, however - I've had to put it at 99%, and then it expands past on refresh, as if the third pane weren't there at all.

Here's an example - content first, then master page. None of the CSS classes here change anything aside from color, border, margin/padding, and so on - very basic stuff which should not affect this. Skin-wise, I'm using a slightly modified (colors only) Outlook for the grid and a slightly modified (colors only) Office2007 for the splitter, so nothing major's hidden there.

Here's the content page:

<%@ Page Language="C#" MasterPageFile="~/MainFrame.Master" AutoEventWireup="true"
   Codebehind="RetrieveDeal.aspx.cs" Inherits="SDPS.SearchPage" Title="Search Results" %>

<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
   <telerik:RadAjaxManagerProxy ID="RadAjaxManagerProxy1" runat="server">
      <AjaxSettings>
         <telerik:AjaxSetting AjaxControlID="SearchButton">
            <UpdatedControls>
               <telerik:AjaxUpdatedControl ControlID="LoadedPanel" LoadingPanelID="RadAjaxLoadingPanel1" />
            </UpdatedControls>
         </telerik:AjaxSetting>
         <telerik:AjaxSetting AjaxControlID="SearchResults">
            <UpdatedControls>
               <telerik:AjaxUpdatedControl ControlID="LoadedPanel" LoadingPanelID="RadAjaxLoadingPanel1" />
            </UpdatedControls>
         </telerik:AjaxSetting>
      </AjaxSettings>
   </telerik:RadAjaxManagerProxy>
   <telerik:RadGrid ID="SearchResults" runat="server" AllowPaging="True" AllowSorting="True"
      AlternatingItemStyle-CssClass="ReadOnlyAlt" AutoGenerateColumns="False" GridLines="None"
      ItemStyle-CssClass="ReadOnly" OnNeedDataSource="SearchResults_NeedDataSource"
      SkinID="RadGrid" Height="330px" Width="99%">
      <PagerStyle Mode="NextPrevAndNumeric" NextPageText="&gt;" PrevPageText="&lt;" />
      <SelectedItemStyle BackColor="Blue" />
      <MasterTableView>
         <Columns>
            <telerik:GridTemplateColumn DataField="IsTest" UniqueName="Mode" HeaderStyle-Width="20px">
               <ItemTemplate>
                  <nobr><img src="/App_Themes/Default/Images/<%# (bool)Eval("IsTest") ? "Test" : "NotTest" %>.gif" alt="<%# (bool)Eval("IsTest") ? "Mode: Test" : "Mode: Not Test" %>" title="<%# (bool)Eval("IsTest") ? "Mode: Test" : "Mode: Not Test" %>" /></nobr>
               </ItemTemplate>
            </telerik:GridTemplateColumn>
            <%-- Thirteen fairly wide Gridbound columns go here, plus one GridDropdown.
                  These stretch well beyond the width of the window, but horizontal
                  scrollbars do appear, so the number of columns doesn't appear to be
                  the problem. --%>
         </Columns>
         <RowIndicatorColumn Visible="False">
            <HeaderStyle Width="20px" />
         </RowIndicatorColumn>
         <ExpandCollapseColumn Resizable="False" Visible="False">
            <HeaderStyle Width="20px" />
         </ExpandCollapseColumn>
         <EditFormSettings>
            <PopUpSettings ScrollBars="None" />
         </EditFormSettings>
      </MasterTableView>
      <ClientSettings>
         <Selecting AllowRowSelect="True" />
         <Scrolling AllowScroll="True" ScrollHeight="330px" />
      </ClientSettings>
      <ItemStyle CssClass="ReadOnly" />
      <AlternatingItemStyle CssClass="ReadOnlyAlt" />
      <HeaderStyle Font-Bold="False" Font-Italic="False" Font-Overline="False" Font-Strikeout="False"
         Font-Underline="False" Wrap="False" />
   </telerik:RadGrid>
   <p>
      <asp:ImageButton ID="SearchButton" runat="server" AlternateText="Search"
         BackColor="transparent" ImageUrl="~/App_Theme/Default/Images/Search.gif" OnClick="SearchButton_Click" />
   </p>
</asp:Content>

SearchButton_Click is simple - it sets a RebindSearchResults boolean to true and calls for a rebind. The SearchResults_NeedDataSource event is also simple - if the boolean's true, it gets a dataset, stores it in a session variable, and, whether the boolean's true or not, sets the grid's datasource to the session variable. As with all NeedDataSource events, the necessary rebind is called automatically. The code works fine. (The session variable is necessary due to an overworked and underpaid SQL server which whines pitifully whenever it's asked to produce large groups of results - holding the dataset on the session side to save on re-queries was a kindness to the poor thing.)

Now, MainFrame.Master:

<%@ Master Language="C#" AutoEventWireup="true" Codebehind="MainFrame.master.cs"
   Inherits="SDPS.MainFrame" %>
<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
   <title>Untitled Page</title>
</head>
<body>
   <form id="form1" runat="server">
      <telerik:RadScriptManager ID="RadScriptManager1" runat="server">
         <Scripts>
            <asp:ScriptReference Path="~/scripts/scripts.js" />
            <asp:ScriptReference Path="~/scripts/jslog.js" />
         </Scripts>
      </telerik:RadScriptManager>
      <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" OnAjaxRequest="RadAjaxManager1_AjaxRequest">
         <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="RadAjaxManager1">
               <UpdatedControls>
                  <telerik:AjaxUpdatedControl ControlID="LoadingPanel" LoadingPanelID="RadAjaxLoadingPanel1" />
               </UpdatedControls>
            </telerik:AjaxSetting>
         </AjaxSettings>
      </telerik:RadAjaxManager>
      <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" BackColor="#FFFFFF"
         Height="500px" Transparency="25" Width="100%">
         <p>
            <br />
            <br />
            <asp:Image ID="LoadingImage" runat="server" SkinID="loading" /></p>
      </telerik:RadAjaxLoadingPanel>
      <asp:Panel ID="LoadingPanel" runat="server" Height="500px" Width="100%">
         <asp:Panel ID="LoadedPanel" runat="server" Visible="false">
            <telerik:RadSplitter ID="RadSplitter1" runat="server" EnableEmbeddedSkins="false"
               Height="100%" OnClientLoaded="fnSizeSplitter" Skin="Default" Width="100%" LiveResize="false">
               <telerik:RadPane ID="RadPane1" runat="server" Width="21px" CssClass="DarkBG">
                  <telerik:RadSlidingZone ID="RadSlidingZone1" runat="server" Width="21px" CssClass="DarkBG">
                     <telerik:RadSlidingPane ID="RadSlidingPane1" runat="server" Title="Navigation" Width="345px"
                        CssClass="DarkBG" EnableDock="false" EnableResize="false" PersistScrollPosition="true">
                        Large RadPanelBar goes here, roughly 320px wide and 500px tall.
                     </telerik:RadSlidingPane>
                  </telerik:RadSlidingZone>
               </telerik:RadPane>
               <telerik:RadPane ID="ContentPane" runat="server" CssClass="MainContent LightBG" Height="100%">
                  <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
                  </asp:ContentPlaceHolder>
               </telerik:RadPane>
               <telerik:RadPane ID="RadPane3" runat="server" Width="21px" CssClass="DarkBG">
                  <asp:ContentPlaceHolder ID="ContentPlaceHolder2" runat="server">
                  </asp:ContentPlaceHolder>
               </telerik:RadPane>
            </telerik:RadSplitter>
         </asp:Panel>
      </asp:Panel>
      <telerik:RadScriptBlock ID="RadScriptBlock1" runat="server">

         <script language="javascript" type="text/javascript">
            <!--
               var strAjaxManager="<%=RadAjaxManager.GetCurrent(Page).ClientID %>";
               var strMainSplitter="<%=RadSplitter1.ClientID %>";
               var strContentPane="<%=ContentPane.ClientID %>";
               //Determines current width of the window and the height of the content
               // document.
               fnAddWindowEvent(fnSetDocSize);

               //Adds a resize event that, if the window's width or the document's height
               // change, reloads the page, which auto-sizes the splitter according to the
               // window's width and the content document's height.
               fnAddWindowEvent(fnResizeDoc, "resize");

               //Makes the LoadedPanel visible after a 100ms delay.
               fnAddWindowEvent(fnLoadScreen);
            //-->
         </script>

      </telerik:RadScriptBlock>
   </form>
</body>
</html>

That's it. What am I doing wrong?

[Yavor]

Hello ADH,

Unfortunately, the supplied information is not sufficient to recreate the problem and debut it locally - there are additional style settings applied, which may also be interfering with the behavior of the control. Therefore, I would suggest that you open a formal support ticket, and send us a small working sample, which demonstrates the discrepancy, for further testing.
We will get back to you with our findings accordingly.

Best wishes,
Yavor
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center

[AJtheCoder]

The expanding-on-bind issue went away when I cleared MainContent's "padding: 10px" style. However, the RadGrid still does not expand to 100% without creating scrollbars, and, having removed all styles from the project except those posted, that is still a problem. I seem to recall there was something special one had to do to get 100% width within a RadSplitter - set it to 99.x% or something? I know this has been discussed before, but I didn't see a clear answer. Let me know!

[Yavor]

Hi ADH,

The behavior of the control in this case would depend on the setup of the page, the containers in which it is nested, and any additional css settings applied. As suggested earlier, if you send us the problematic setup in a small project sample, through a support ticket, we will review it and get back to you with our findings.

Sincerely yours,
Yavor
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center

[AJtheCoder]

Believe me, if I thought it was horribly vital to have this solved NOW NOW NOW, I would have submitted a support ticket in the beginning and been done with it.

However, a question: Have you attempted to recreate the issue using the code I posted above? As I stated in my second post, the 100% width problem re-occurs when themes are turned off and just the code listed there is included. What do you feel is missing? I'm perfectly willing to provide it, but my testing has shown that the above code is enough to show the issue.

If you're looking for something you can fire and forget, I'm afraid I don't have time to produce that. I'm getting a little tired of being asked to send in a support ticket and submit a test project for stuff which is not, in my opinion, worth wasting the time on. If you cannot reproduce the problem given the code above, please post what you need. If you are unwilling to try, feel free to leave my posts for others to answer. I do not require a reply from Telerik to everything I post - some of the people in this forum are very knowledgeable, and may recognize the problem just from reading the code.

Asking on the forum, for me, is part of the troubleshooting process which takes place before I send in a support ticket - it's to make sure I don't miss anything stupidly simple and obvious, and don't waste your time with poorly phrased support requests. If I'm using it wrong, please let me know.

That said, I'm still interested to know what would cause a RadGrid within a splitter to over-expand when it's set at 100% width. I've seen other threads on it, but I had thought this was fixed with Prometheus - or is it something that can't really be fixed? I'm curious.

[Yavor]

Hi,

Indeed, I have tried to replicate the problem locally, and have only requested a sample project after reviewing the code, and determining that there are many missing resources. Some of them are:

1. Datasource/Databinding routine for the control
2. css files
3. jss files referenced in the code
4. js functions and client side handlers

The only reason I suggested opening a support ticket and supplying a sample application was because this is generally the most straightforward approach in resolving the issue, which is as important to us as it it to you. Nevertheless, I have commented most of these out, and prepared a sample apllication based on the code initially supplied. You will find it attached to this message. Let me know how to proceed, or if you find that I am leaving something out.

Regards,

Yavor
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center