Hi,
I am putting this under Ajax because I suspect it might be a problem here.
I have a caption on my RadGrid. When I press insert my inline form appears, but my caption shifts from center to the left.
Whats strange is that if I mouse over my help button, the tooltip appears, and, my caption goes back to the center.
My caption shifts left under a couple of other scenerios , and shifts back under a few others.
I cannot see where the MasterTableView Caption placement is tied to anything that would make it move ?
But its because of the help tooltip that makes me suspect that it has something to do with ajax.
i am using an RadAjaxPanel by the way.
as always, thanks for your time
also, this is the css thats in the master table. Sure wish I could send screen shots.
/* Goes in RADGRID to affect the caption */
.MasterTable_Default
caption
{
color: Blue;
background-color:Yellow;
font-size:medium;
font-weight:200 }
Here is my code - (Excuse me - am in the middle of testing so I have a bit of uneccessary commenting).
| <asp:Content ID="Content1" ContentPlaceHolderID="mbfPlaceHolder1" runat="Server"> |
| <script type="text/javascript"> |
| //<![CDATA[ |
| function WebForm_OnSubmit() { |
| if (typeof(ValidatorOnSubmit) == 'function' && ValidatorOnSubmit() == false) return false; |
| return true;} |
| function ValidatorOnSubmit() {if (!document.getElementById('__EVENTVALIDATION')) { |
| alert('Please wait for the page to load completely'); document.location.href = 'http://something';return false;} |
| else {return true;}} |
| function HideTooltip() |
| { |
| var tooltip = Telerik.Web.UI.RadToolTip.getCurrent(); |
| if (tooltip) tooltip.hide(); |
| } |
| function ShowTooltip() |
| { |
| window.setTimeout(function() |
| { |
| // var tooltip = $find('ctl00_mbfPlaceHolder1_RadToolTip1'); |
| var tooltip = $find("ctl00_mbfPlaceHolder1_RadToolTip1"); |
| //API: show the tooltip |
| tooltip.show(); |
| }, 10); |
| } |
| function CheckIfShow(sender, args) |
| { |
| var summaryElem = document.getElementById("ctl00_mbfPlaceHolder1_ValidationSummary1"); |
| //check if summary is visible |
| if (summaryElem.style.display == "none") |
| { |
| //API: if there are no errors, do not show the tooltip |
| args.set_cancel(true); |
| } |
| } |
| /*function BuildAddress() |
| { |
| var street = (document.getElementById("txtStreet")).value; |
| var streetNumber = (document.getElementById("txtStreenNum")).value; |
| var city = (document.getElementById("txtCity")).value; |
| var country = (document.getElementById("txtCountry")).value; |
| var address = streetNumber + " " + street + ", " + city + ", " + country; |
| (document.getElementById("txtAddress")).value = address; |
| var tooltip = $find("RadToolTip2"); |
| //API: hide the tooltip |
| tooltip.hide(); |
| } */ |
| /* function InsertLanguages() |
| { |
| var tooltip = $find("RadToolTip3"); |
| //API: get the html element, holding the content of the tooltip |
| var contentElement = tooltip.get_contentElement(); |
| var checkboxes = contentElement.getElementsByTagName("INPUT"); |
| var list = document.getElementById("lbSelectedLanguages"); |
| //empty the listBox of selected languages |
| list.options.length = 0; |
| for(var index=0; index < checkboxes.length; index++) |
| { |
| var checkbox = checkboxes[index]; |
| if (checkbox.checked) |
| { |
| var content = checkbox.nextSibling.innerHTML; |
| var option = new Option(content, content); |
| //if the checkbox is checked, create and add a new option to the listBox of selected languages |
| list.options[list.options.length] = option; |
| } |
| } |
| //API: hide the tooltip |
| tooltip.hide(); |
| } |
| //]]> */ |
| </script> |
| <div> |
| </div> |
| <asp:ScriptManager ID="ScriptManager1" runat="server"> |
| </asp:ScriptManager> |
| <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel" runat="server" Transparency="20"> |
| <table style="width: 100%; height: 100%;"> |
| <tr style="height: 100%"> |
| <td align="center" valign="middle" style="width: 100%"> |
| <asp:Image ID="Image2" ImageUrl="~/mybodyscience/iqimages/Loading_Images/loading3.gif" |
| BorderWidth="0px" Height="45px" Width="145px" AlternateText="Processing Data ...." |
| runat="server"></asp:Image> |
| </td> |
| </tr> |
| </table> |
| </telerik:RadAjaxLoadingPanel> |
| <table style="width: 100%;"> |
| <tr> |
| <td style="width: 33%;"> |
| </td> |
| <td style="width: 33%; margin: 0px"> |
| <telerik:RadAjaxPanel ID="RadAjaxPanel1" runat="server" LoadingPanelID="RadAjaxLoadingPanel"> |
| <asp:Image ID="Image1" runat="server" ImageUrl="~/mybodyscience/iqimages/iqimage$/iStock_000003163184XSmall.jpg" |
| Height="135px" Width="398px" /> |
| <telerik:RadGrid ID="RadGrid1" runat="server" AllowPaging="True" AllowSorting="True" |
| GridLines="none" AutoGenerateDeleteColumn="false" EnableHeaderContextMenu="false" |
| OnItemCommand="RadGrid1_ItemCommand" OnInsertCommand="RadGrid1_SaveData" OnNeedDataSource="RadGrid1_NeedDataSource" |
| OnUpdateCommand="RadGrid1_SaveData" Skin="Office2007" OnItemDataBound="RadGrid1_ItemDataBound" |
| ShowStatusBar="true" PageSize="10" OnPreRender="RadGrid1_PreRender" OnItemCreated="RadGrid1_ItemCreated" |
| Width="398px" CssClass="MasterTable_Default"> |
| <HeaderContextMenu Skin="Office2007" EnableTheming="True"> |
| <CollapseAnimation Type="OutQuint" Duration="200"></CollapseAnimation> |
| </HeaderContextMenu> |
| <PagerStyle CssClass="iqBodyCompositionColors" Position="Bottom" AlwaysVisible="true" |
| VerticalAlign="Bottom" Mode="NextPrevAndNumeric" ForeColor="DarkBlue" /> |
| <StatusBarSettings LoadingText="Loading ..." ReadyText="Ready ..." /> |
| <ClientSettings> |
| <Scrolling AllowScroll="true" UseStaticHeaders="True" /> |
| </ClientSettings> |
| <MasterTableView AutoGenerateColumns="False" Caption="Add or Change Your Equipment Information" |
| CommandItemDisplay="Top" Width="100%" GridLines="None" NoMasterRecordsText="No Equipment entered as yet" |
| DataKeyNames="equEquipmentNo"> |
| <ItemStyle Font-Size="Small" ForeColor="#4E026E" BackColor="#FFE140" /> |
| <AlternatingItemStyle Font-Size="Small" BackColor="#FFE973" ForeColor="Black" /> |
| <HeaderStyle BackColor="#996633" ForeColor="Blue" /> |
| <CommandItemStyle Width="100%" BackColor="White" ForeColor="Brown" /> |
| <CommandItemTemplate> |
| <table width="100%" cellpadding="0" cellspacing="0" class="iqBodyCompositionColors"> |
| <td align="left"> |
| <asp:LinkButton Width="100px" ID="sequipAdd" runat="server" CommandName="InitInsert" |
| Visible='<%# !RadGrid1.MasterTableView.IsItemInserted %>' ToolTip="Add New Equipment"> |
| <img style="border:0px" alt="" src="../iqimages/trImages/AddRecord.gif" title="Add New Equipment"/> |
| Add Equipment</asp:LinkButton> |
| </td> |
| <td align="center"> |
| <asp:LinkButton ID="sequipHelp" Width="80px" runat="server" CommandName="iqRefresh"> |
| <img style="border:0px" alt="" src="../iqimages/trImages/Help.gif" /> |
| Help</asp:LinkButton> |
| <telerik:RadToolTip ID="RadToolTipGeneralHelp" runat="server" ManualClose="false" |
| TargetControlID="sequipHelp" RelativeTo="Mouse" MouseTrailing="true" Skin="Outlook" |
| Animation="None" Sticky="true" AutoCloseDelay="3000" Position="MiddleRight"> |
| <div> |
| <p> |
| Description of screen. |
| </p> |
| <p> |
| Add</p> |
| <p> |
| Delete</p> |
| <p> |
| Edit</p> |
| <p> |
| Tooltip</p> |
| </div> |
| </telerik:RadToolTip> |
| </td> |
| <td align="right"> |
| <asp:LinkButton ID="sequipRefresh" Width="110px" runat="server" CommandName="iqRefresh" |
| ToolTip="Start List At First Item"> |
| <img style="border:0px" alt="" src="../iqimages/trImages/Refresh.gif" title="Start List At First Item" /> |
| Refresh list</asp:LinkButton> |
| </td> |
| </table> |
| </CommandItemTemplate> |
| <RowIndicatorColumn> |
| <HeaderStyle Width="20px"></HeaderStyle> |
| </RowIndicatorColumn> |
| <ExpandCollapseColumn> |
| <HeaderStyle Width="20px"></HeaderStyle> |
| </ExpandCollapseColumn> |
| <Columns> |
| <telerik:GridBoundColumn DataField="equMemberNo" HeaderText="MemberNo" ReadOnly="true" |
| UniqueName="equMemberNo" Visible="false" DataType="System.String"> |
| </telerik:GridBoundColumn> |
| <telerik:GridBoundColumn DataField="equEquipmentNo" DataType="System.Int32" HeaderText="No" |
| UniqueName="equEquipmentNo" ReadOnly="true" ItemStyle-Width="20px" HeaderStyle-Width="20px"> |
| </telerik:GridBoundColumn> |
| <telerik:GridBoundColumn DataField="equEquipmentName" DataType="System.String" HeaderText="Name :" |
| UniqueName="equEquipmentName" Visible="false"> |
| </telerik:GridBoundColumn> |
| <%-- TTP Start--%> |
| <telerik:GridTemplateColumn HeaderText="Name & Detail"> |
| <ItemTemplate> |
| <div style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap;"> |
| <asp:Label Font-Underline="true" ID="lbl" runat="server" Text='<%#Eval("equEquipmentName")%>'></asp:Label> |
| </div> |
| <telerik:RadToolTip ID="RadToolTip1" runat="server" ManualClose="false" TargetControlID="lbl" |
| RelativeTo="Mouse" Skin="Outlook" Animation="None" Sticky="true" AutoCloseDelay="3000" |
| Position="MiddleRight"> |
| <div style="background-color: Yellow; font-size: medium; color: Blue; font-weight: bolder"> |
| <asp:Label runat="server" Style="background-color: Yellow" ID="Label7" Text="Equipment Information"> </asp:Label> |
| <br> |
| <asp:Label runat="server" Style="background-color: Yellow" ID="Label6" Text="Name ..:"> </asp:Label> |
| <asp:TextBox ID="eName" runat="server" TextMode="MultiLine" Width="200px" Rows="1" |
| Wrap="true" ReadOnly="true" /> |
| <%-- Equipment .: |
| <%# DataBinder.Eval(Container, "DataItem.equEquipmentName")%>--%> |
| <br> |
| <asp:Label runat="server" Style="background-color: Yellow" ID="labell" Text="Make ...:"> </asp:Label> |
| <asp:TextBox ID="eMake" runat="server" Width="200px" ReadOnly="true" /> |
| <%-- Make ......: |
| <%# DataBinder.Eval(Container, "DataItem.equEquipmentMake")%>--%> |
| <br> |
| <asp:Label runat="server" Style="background-color: Yellow" ID="lbla" Text="Model .:"> </asp:Label> |
| <asp:TextBox ID="eModel" runat="server" Width="200px" ReadOnly="true" /> |
| <%-- Model .....: |
| <%# DataBinder.Eval(Container, "DataItem.equEquipmentModel")%>--%> |
| <br> |
| <asp:Label runat="server" Style="background-color: Yellow" ID="Label8" Text="GymID :"> </asp:Label> |
| <asp:TextBox ID="eGymID" runat="server" Width="200px" ReadOnly="true" /> |
| <%-- Gym id ....: |
| <%# DataBinder.Eval(Container, "DataItem.equEquipmentGymID")%>--%> |
| <div> |
| <asp:Label runat="server" Style="background-color: Yellow" ID="lblNotes" Text="Notes ..:"> </asp:Label> |
| <asp:TextBox ID="enotes" runat="server" TextMode="MultiLine" Width="200px" Rows="3" |
| ReadOnly="true" /> |
| </div> |
| <%-- <%# DataBinder.Eval(Container, "DataItem.equEquipmentNotes")%> --%> |
| Created ...: |
| <%# DataBinder.Eval(Container, "DataItem.equDateCreated")%> |
| <br> |
| Changed .: |
| <%# DataBinder.Eval(Container, "DataItem.equDateCreated")%> |
| </div> |
| </telerik:RadToolTip> |
| </ItemTemplate> |
| </telerik:GridTemplateColumn> |
| <%-- TTP End--%> |
| <telerik:GridBoundColumn DataField="equEquipmentLocNo" HeaderText="Location :" UniqueName="equEquipmentLocNo" |
| Visible="false" DataType="System.Int32"> |
| </telerik:GridBoundColumn> |
| <telerik:GridBoundColumn DataField="equLocationName" HeaderText="LocationName" UniqueName="equLocationName" |
| ReadOnly="true"> |
| </telerik:GridBoundColumn> |
| <%-- <telerik:GridBoundColumn DataField="equTypeName" HeaderText="TypeName" UniqueName="equTypeName" |
| ReadOnly="true"> |
| </telerik:GridBoundColumn>--%> |
| <telerik:GridBoundColumn DataField="equEquipmentMake" DataType="System.String" HeaderText="Make" |
| UniqueName="equEquipmentMake"> |
| </telerik:GridBoundColumn> |
| <telerik:GridBoundColumn DataField="equEquipmentModel" DataType="System.String" HeaderText="Model" |
| UniqueName="equEquipmentModel" Visible="false"> |
| </telerik:GridBoundColumn> |
| <telerik:GridBoundColumn DataField="equEquipmentGymID" DataType="System.String" HeaderText="Any Gym ID" |
| UniqueName="equEquipmentGymID" Visible="false"> |
| </telerik:GridBoundColumn> |
| <telerik:GridBoundColumn DataField="equEquipmentNotes" DataType="System.String" HeaderText="Notes" |
| UniqueName="equEquipmentNotes" Visible="false"> |
| </telerik:GridBoundColumn> |
| <telerik:GridButtonColumn CommandName="Delete" ButtonType="ImageButton" ImageUrl="../iqimages/iqimage$/Delete.gif" |
| HeaderStyle-Width="25px" UniqueName="DeleteColumn" ItemStyle-HorizontalAlign="Center"> |
| <HeaderStyle Width="25px" /> |
| <ItemStyle HorizontalAlign="Center" /> |
| </telerik:GridButtonColumn> |
| <%-- ButtonType="LinkButton" Text="Chg" --%> |
| <telerik:GridButtonColumn CommandName="Edit" ButtonType="ImageButton" ImageUrl="../iqimages/iqimage$/Edit2.gif" |
| HeaderStyle-Width="25px" UniqueName="EditColumn" ItemStyle-HorizontalAlign="Center"> |
| <HeaderStyle Width="25px" /> |
| <ItemStyle HorizontalAlign="Center" /> |
| </telerik:GridButtonColumn> |
| </Columns> |
| <EditFormSettings EditFormType="Template"> |
| <FormTemplate> |
| <%-- <table id="Table2" cellspacing="0" cellpadding="0" width="100%" border="0" |
| style="border-collapse: collapse; background: white; font-size: small"> --%> |
| <div style="left:5px"> <!-- Outer div --> |
| <div style="text-align:center;font-size:small" > |
| <b>Equipment Information:</b> |
| <asp:TextBox ID="TextBox1" Width="0px" runat="server" Text='<%# Bind( "equEquipmentNo") %>' |
| Visible="false" /> |
| </div> |
| <br> |
| <div style="margin-left:5px; font-size:small" > |
| <asp:Label ID="Label1" runat="server" Text="Name .....:" ToolTip="Equipment Name " |
| Width="60px" /> |
| <asp:TextBox ID="sEquipmentName" Width="250px" MaxLength="50" runat="server" Text='<%# Bind( "equEquipmentName") %>' /> |
| <asp:RequiredFieldValidator ID="RequiredFieldValidator1" ControlToValidate="sEquipmentName" |
| Text="!" ErrorMessage="You Need Equipment Name" runat="server"> |
| </asp:RequiredFieldValidator> |
| </div> |
| <br> |
| <div style="margin-left:5px;font-size:small " > |
| <asp:TextBox ID="sequEquipmentLocNo" Width="0px" runat="server" Text='<%# Bind( "equEquipmentLocNo") %>' |
| Visible="false" /> |
| <asp:Label ID="Labeltyp1" runat="server" Text="Location ..:" ToolTip="Select Equipment Location " |
| Width="60px" /> |
| <asp:DropDownList ID="equEquipmentddl" runat="server" AppendDataBoundItems="True"> |
| <asp:ListItem Selected="True" Text="Select" Value=""></asp:ListItem> |
| </asp:DropDownList> |
| </div> |
| <br> |
| <div style="margin-left:5px;font-size:small" > |
| <asp:TextBox ID="sequEquipmentTypeNo" Width="0px" runat="server" Text='<%# Bind( "equEquipmentTypeNo") %>' |
| Visible="false" /> |
| <asp:Label ID="Label2" runat="server" Text="Type ......:" ToolTip="Select Equipment Type " |
| Width="60px" /> |
| <asp:DropDownList ID="equEquipmentTypeddl" runat="server" AppendDataBoundItems="True"> |
| <asp:ListItem Selected="True" Text="Select" Value=""></asp:ListItem> |
| </asp:DropDownList> |
| </div> |
| <br> |
| <div style="margin-left:5px;font-size:small" > |
| <asp:Label ID="Label3" runat="server" Text="Make ......:" ToolTip="Equipment Make " |
| Width="60px" /> |
| <asp:TextBox ID="sequEquipmentMake" Width="250px" MaxLength="30" runat="server" Text='<%# Bind( "equEquipmentMake") %>' /> |
| </div> |
| <br> |
| <div style="margin-left:5px;font-size:small" > |
| <asp:Label ID="Label4" runat="server" Text="Model .....:" ToolTip="Equipment Model " |
| Width="60px" /> |
| <asp:TextBox ID="sequEquipmentModel" Width="250px" MaxLength="30" runat="server" |
| Text='<%# Bind( "equEquipmentModel") %>' /> |
| </div> |
| <br> |
| <div style="margin-left:5px;font-size:small" > |
| <asp:Label ID="Labgid" runat="server" Text="GymID ....:" ToolTip="Sometimes in a Gym, they label the equipment with a number or other ID" |
| Width="60px" /> |
| <asp:TextBox ID="sequEquipmentGymID" Width="250px" MaxLength="15" runat="server" |
| Text='<%# Bind( "equEquipmentGymID") %>' /> |
| </div> |
| <br> |
| <div style="margin-left:5px;font-size:small" > |
| <asp:Label ID="Label5" runat="server" Text="Notes .....:" ToolTip="Any notes or comments about this Piece of Equipment" |
| Width="60px" /> |
| <asp:TextBox TextMode="MultiLine" ID="sequEquipmentNotes" Width="250px" MaxLength="100" |
| runat="server" Text='<%# Bind( "equEquipmentNotes") %>' /> |
| </div> |
| <br> |
| <div style="text-align:center"> |
| <asp:Button ID="btnUpdate" Text='<%# (Container is GridEditFormInsertItem) ? "Insert" : "Update" %>' |
| runat="server" OnClientClick="ShowTooltip()" CommandName='<%# (Container is GridEditFormInsertItem) ? "PerformInsert" : "Update" %>'> |
| </asp:Button> |
| <asp:Button ID="btnCancel" Text="Cancel" runat="server" CausesValidation="False" |
| CommandName="Cancel" OnClientClick="HideTooltip()"></asp:Button> |
| </div> |
| </div> <!-- Outer div --> |
| <%-- </table> --%> |
| </FormTemplate> |
| </EditFormSettings> |
| </MasterTableView> |
| </telerik:RadGrid> |
| </telerik:RadAjaxPanel> |
| </td> |
| <td style="width: 33%"> |
| |
| </td> |
| </tr> |
| </table> |
| <telerik:RadToolTip runat="server" ID="RadToolTip1" Position="Center" HideEvent="ManualClose" |
| Skin="SkyBlue" ShowEvent="FromCode" IsClientID="true" Width="300px" OnClientBeforeShow="CheckIfShow" |
| TargetControlID="btnUpdate"> |
| <asp:ValidationSummary ID="ValidationSummary1" runat="server" /> |
| </telerik:RadToolTip> |
| </asp:Content> |
1 Answer, 1 is accepted
0
IQworks
Top achievements
Rank 1
Rank 1
answered on 19 Mar 2009, 05:30 PM
Hi again,
Sorry for the overkill for such a small issue.
I will just post the following for anyone else that may have issues with the Caption.
Since I have my Add and Refresh buttons in the CommandItemTemplate, I just included a <asp:Label within the CommandItemTemplate with Text="The title I had in my Caption", which in my case was "Add or Change Your Equipment Information". This works better for me because I now have more control of some of the styling without CSS, and, IT DOSNT MOVE !
Thanks
Sorry for the overkill for such a small issue.
I will just post the following for anyone else that may have issues with the Caption.
Since I have my Add and Refresh buttons in the CommandItemTemplate, I just included a <asp:Label within the CommandItemTemplate with Text="The title I had in my Caption", which in my case was "Add or Change Your Equipment Information". This works better for me because I now have more control of some of the styling without CSS, and, IT DOSNT MOVE !
Thanks
| <CommandItemTemplate> |
| <table width="100%" cellpadding="0" cellspacing="0" class="iqBodyCompositionColors"> |
| <div> |
| <asp:Image ID="Image1" runat="server" ImageUrl="~/mybodyscience/iqimages/iqimage$/iStock_000003163184XSmall.jpg" |
| Height="135px" Width="400px" /> |
| </div> |
| <div style="text-align:center; background-color:Yellow; color:Blue; font-size:medium"> |
| <asp:Label ID="capID" runat="server" Text="Add or Change Your Equipment Information" /> |
| </div> |
| <div> |
| <asp:LinkButton Width="100px" ID="sequipAdd" runat="server" CommandName="InitInsert" |
| Visible='<%# !RadGrid1.MasterTableView.IsItemInserted %>' ToolTip="Add New Equipment"> |
| <img style="border:0px" alt="" src="../iqimages/trImages/AddRecord.gif" title="Add New Equipment"/> |
| Add Equipment</asp:LinkButton> |
| <asp:LinkButton ID="sequipHelp" Width="100px" runat="server" CommandName="iqRefresh"> |
| <img style="border:0px" alt="" src="../iqimages/trImages/Help.gif" /> |
| Help</asp:LinkButton> |
| <asp:LinkButton ID="sequipRefresh" Width="100px" runat="server" CommandName="iqRefresh" |
| ToolTip="Start List At First Item"> |
| <img style="border:0px" alt="" src="../iqimages/trImages/Refresh.gif" title="Start List At First Item" /> |
| Refresh list</asp:LinkButton> |
| </div> |
| </table> |
| </CommandItemTemplate> |