Telerik Forums
UI for ASP.NET AJAX Forum
5 answers
136 views
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
Telerik team
 answered on 23 Apr 2008
4 answers
103 views
Hi,

I am looking for a way to browse a document library in SharePoint in order to create a link from a document to Wiki article. So within a wiki article I'd like the user to open TreeView, locate the document, and select it to paste a link of that document into the specified field. Is that possible with TreeView?

I know I can do this via copy and paste into the link dialogue box but I want to make the process as seamless as possible with as few clicks as possible. 

Thanks very much in advance.
Peter
Telerik team
 answered on 23 Apr 2008
1 answer
73 views
I have an aspx page containing a RadTabStrip some controls and some RequiredFieldValidators. When the page is not valid, the RadTabStrip will not switch to the tab that was clicked. How can I avoid this?
bemara57
Top achievements
Rank 1
 answered on 23 Apr 2008
2 answers
161 views
In the week view, how can I change the cell height for the column that contains the time. If this is changed, will it automatically adjust the cell height for the cells within the calendar (where you put the appointments). I'm trying to fit more than 8:00AM - 2:00PM on a page with a fixed height, without having to scroll.
Susan
Top achievements
Rank 1
 answered on 23 Apr 2008
12 answers
552 views
I have a Modal Window on my MasterPage and also a RadMenu, everything works fine except when the Modal Window opens, the only control left enabled on the page is the RadMenu.

Is this a known issue?  I don't see anything about it when I did a search.  I can disable it from the JS that opens the window, but that seems kludgy.

Did I miss a setting somewhere that controls this behavior?

I tried Overlay which did not affect the behavior in any way.
Steele
Top achievements
Rank 1
 answered on 23 Apr 2008
1 answer
178 views
I tried to to set the focus to the Text box  which is used inside RadMultiPage View.

That RadMultiPage View  is part of my asp.net form Which is opened in Radwindow.

I have set ShowContentDuringLoad property is  to true for radwindow


But i was not able to set the focus to the textbox. Please address  this issue ASAP.
Petio Petkov
Telerik team
 answered on 23 Apr 2008
1 answer
88 views
I tried to to set the focus to the Text box control which is inside RadMuitpage View..  Which is opened in Radwindow.


I have set ShowContentDuringLoad property is  to true for radwindow

Eventhough i was not able to set the focus to the textbox. Please address  this issue ASAP.

Petio Petkov
Telerik team
 answered on 23 Apr 2008
1 answer
191 views
I know I've seen an example page where a RadToolBar is used as a CommandItem for a grid. The code included some styling to make the ToolBar fit the grid width and do some other stuff.


Can I find it now I need it? Hmm? No.

If anyone knows where to find this, I can't remember if it was an online example or in the Live Example installed with the controls (although I can't find it in either place), please let me know.

Ta.

--
Stuart
Dan
Top achievements
Rank 1
 answered on 23 Apr 2008
0 answers
132 views
Anyone have a best approach for implementing a fisheye / bubble effect that works will with radcontrols for asp.net ajax

Thanks!
JB
jtby
Top achievements
Rank 1
 asked on 23 Apr 2008
4 answers
432 views
In the out-of-the-box skins, RadToolBarItems have a different look when focused. The focus effect stays in place until the user moves focus to another element in the page. There are quite a few cases where this is undesirable and the button should revert to its normal look as soon as the click is complete.

Overriding the styles has limitations, and seems like it could cause issues when the control is upgraded in the future. You end up overriding all sorts of classes like .rtbIn, .rtbWrap, .rtbMid, etc.

The FocusedCssClass property seemed like a good solution, but it used to supplement rather than override the default focused class.

As an interim solution, I simply call focus() then blur() on a different ToolBarItem (or any visible form element). This works like a charm, but I'd rather not use such a hack.

I guess I'd like to know why the focused buttons behave the way they do in the default skins. It makes them feel more like toggle buttons and winds up confusing the user. It feels great that the buttons "light-up" when you click on them, but keeping them lit up until focus is lost feels unnatural and serves little purpose.
Chris Sears
Top achievements
Rank 1
 answered on 23 Apr 2008
Narrow your results
Selected tags
Tags
+? more
Top users last month
Jake
Top achievements
Rank 1
RBarnes
Top achievements
Rank 1
Iron
Iron
Rami
Top achievements
Rank 1
Iron
Veteran
Nathan
Top achievements
Rank 1
Kumeri
Top achievements
Rank 1
Iron
Veteran
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Jake
Top achievements
Rank 1
RBarnes
Top achievements
Rank 1
Iron
Iron
Rami
Top achievements
Rank 1
Iron
Veteran
Nathan
Top achievements
Rank 1
Kumeri
Top achievements
Rank 1
Iron
Veteran
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?