Questions on UI for ASP.NET AJAX Forum

0 answers

139 views

I have an aspx application with master page.My content page is inherited master page and inside the content page i have 5 radtabs.Each having a navigateurl inside vb code and redirect to different pages(not inherited by master page).My problem is when i press "tab" in the key board the Header portion of page is disappeared. and the vertical scroll bar have no bottom portion seen.

Master page code
---------------------

<%@ Master Language="VB" CodeFile="ESCCMaster.master.vb" Inherits="ESCCMaster" %>
<%@ 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 id="Head1" runat="server">
<meta http-equiv="X-UA-Compatible" content="IE=7" />
    <title>ESCC APP V3.1</title>
    <link href="css/escc.css" rel="stylesheet" type="text/css" />
    <link href="Skins/gridnewstyle/grid.gridnewstyle.css" rel="stylesheet" type="text/css" />
    <link href="Skins/newstyle/PanelBar.newstyle.css" rel="stylesheet" type="text/css" />
    <link href="Skins/Vista/Dock.vista.css" rel="stylesheet" type="text/css" />

    <link href="Skins/newstyle/Dock.newstyle.css" rel="stylesheet" type="text/css" />
    <link href="Skins/newstyle/grid.newstyle.css" rel="stylesheet" type="text/css" />
    <link href="Skins/Office2007/Grid.Office2007.css" rel="stylesheet" type="text/css" />
    <link href="Skins/newstyle/Splitter.newstyle.css" rel="stylesheet" type="text/css" />
    <style type="text/css">#divLoadCont {
Z-INDEX: 100; LEFT: 0px; WIDTH: 100%; POSITION: absolute; TOP: 0px; HEIGHT: 100%; BACKGROUND-COLOR: whitesmoke; layer-background-color: white
}
.highlight {
BACKGROUND: yellow; COLOR: black
}
.commu_text_area {
BORDER-RIGHT: #cccccc 1px solid; BORDER-TOP: #cccccc 1px solid; MARGIN: 5px; BORDER-LEFT: #cccccc 1px solid; WIDTH: 100%; BORDER-BOTTOM: #cccccc 1px solid; HEIGHT: 150px
}
</style>
    <style type="text/css">
html, body, form
{
height: 100%;
width: 100%;
margin: 0px;
padding: 0px;
overflow: hidden;

}

</style>
<!--<script type="text/javascript">
//<![CDATA[

var screenHeight = screen.height;
var browserToolBarHeight = 220;
var header = document.getElementById('topdiv').offsetHeight;
var footer = document.getElementById('footer').offsetHeight;
var contentH = screenHeight - (header + footer+browserToolBarHeight) + "px";
document.getElementById('content').style.height = contentH;
document.getElementById('RadSplitter1').style.height = RadSplitter1H;
document.getElementById('rightcontent').style.height = contentH;
document.getElementById('LeftPane').style.height = contentH;

//]]>
</script>-->
</head>
<body runat="server" id="masterbody">
    <form id="form1" runat="server">
        <telerik:RadScriptManager runat="server" ID="RadAjaxManager1" AsyncPostBackTimeout="10000">
        </telerik:RadScriptManager>

</script>

<div class="wrapper" id="ParentDivElement" style="height: 100%; overflow: hidden">
               <table style="position:absolute;">
          <tr><td>
        <telerik:RadToolTip Visible="false" Font-Bold="true" BackColor="#99CCFF" ForeColor="white"
            ShowCallout="false" Position="TopCenter" Modal="true" ID="message1" VisibleOnPageLoad="false"
            runat="server" Skin="Office2007" Animation="FlyIn"   ShowDelay="50" >
            <table style="width: 170px; height: 20px;">
                <tr style="height: 20px;">
                    <td style="width: 100%;">
                        <asp:Label ID="lblmsg" runat="server" Font-Bold="true" Text="Message!">
                        </asp:Label>
                    </td>
                </tr>
               <%-- <tr>
                    <td align="center" colspan="2">
                        <asp:Button ID="messagebtnok" runat="server" Visible="true" Text="OK" />
                    </td>
                </tr>--%>
            </table>
        </telerik:RadToolTip>
         </td></tr>
          </table>
            <div id="topdiv" style="height: 66px;" runat="server">
                <div class="logo">
                    <img src="images/logo.gif" alt="ESCC" title="ESCC" />
                </div>
                
                <asp:UpdatePanel ID="alertupdatepanel" runat="server">
                    <ContentTemplate>
                        <asp:Timer runat="server" ID="timer1" Interval="300000">
                        </asp:Timer>
                        <div class="topmenu" id="topmenu" runat="server">
                            <ul id="ul1" runat="server">
                                <li class="userhomepage"><a href="work_list.aspx">User Homepage</a></li>
                                <li class="messages"><a href="#">Messages</a></li>
                                <li class="documents"><a href="#">Documents</a></li>
                                <li class="alerts" runat="server" id="liAlerts"><a href="User_Messages.aspx" runat="server" id="lnkaAlerts">Alerts </a>
                                <%--<asp:Label runat="server" ID="lblopenbracket" Text="("></asp:Label>
                                <asp:LinkButton runat="server" ID="lnkalertcnt" Text="10"></asp:LinkButton>
                                <asp:Label runat="server" ID="lblclosebracket" Text=")"></asp:Label>--%></li>
                                <li class="settings"><a href="#">Settings</a></li>
                            </ul>
                        </div>
                    </ContentTemplate>
                </asp:UpdatePanel>
                
                <div class="logout">
                    <asp:Label ID="lblUserName" runat="server"></asp:Label>
                    <span class="logdivider">|</span>
                    <asp:Label ID="lblDate" runat="server"></asp:Label>
                    <span class="logdivider" id="htmlLogDivider" runat="server">|</span> <span class="logoutc">
                        <a href="logout.aspx" id="lnkLogOut" runat="server">Logout</a></span>
                </div>
                
            </div>
            
            <div id='content' style="margin: 0 auto; width: 100%; height: 100%; background-color: #FFFFFF;
                overflow: hidden;">
                <telerik:RadSplitter ID="RadSplitter1" runat="server" Width="100%" Height="100%"
                    Style="background-color: #FFFFFF; border: none !important" Skin="newstyle" EnableEmbeddedSkins="false"
                    VisibleDuringInit="false">
                    <telerik:RadPane ID="LeftPane" runat="server" Width="160px" Height="100%">
                        <div class="leftmenu">
                            <div class="leftmenutop">
                            </div>
                            <div class="leftmenuinner">
                                <telerik:RadAjaxPanel runat="server" ID="radajaxpanelmenu" Width="160px">
                                    <telerik:RadPanelBar runat="server" ID="RadPlBMasterMenu" PersistStateInCookie="false"
                                        Skin="newstyle" EnableEmbeddedSkins="false">
                                        <CollapseAnimation Duration="100" Type="None" />
                                        <ExpandAnimation Duration="100" Type="InBounce" />
                                    </telerik:RadPanelBar>
                                </telerik:RadAjaxPanel>
                            </div>
                            <div class="leftmenubottom">
                            </div>
                        </div>
                    </telerik:RadPane>
                    <telerik:RadSplitBar ID="RadSplitBar1" runat="server" CollapseMode="Forward" Height="100%" />
                    <telerik:RadPane ID="MiddlePane1" runat="server" Scrolling="none" Height="100%">
                        <div id="rightcontent" style="width: 100%">
                            <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
                            </asp:ContentPlaceHolder>
                        </div>
                        
                    </telerik:RadPane>
                </telerik:RadSplitter>
            </div>
            
        </div>
        
    </form>
</body>
</html>

TabStrip

asked on 12 Nov 2009

1 answer

79 views

Advice for Adoption of new Versions for Multiple RadControls within WebParts

Our team is making heavy use of a number of RadControls in the context of WebParts (SharePoint 2007) and have run into issues when spanning multiple RadControl versions, specifically with regard to ajaxified controls. A clear and apparent fix seems to be to update all webparts to use the latest common denominator version of the RadControls for ASP.NET AJAX.

Going forward, however, we intend to make use of the RadMenu in our global navigation for SharePoint. Since that will be present on each page and we likely will want to adopt functionality from newer releases (we haven't yet cracked open the q3 2009 controls, but likely will shortly), it will likely necessitate that we update both the navigation with the latest version of the RadMenu control and perhaps all other WebParts that make use of RadControls.

Is there a recommended upgrade path when doing a site wide upgrade of RadControls? Should we only be concerned with those WebParts that are making use of "ajaxified" WebParts or all?

Would telerik say it's best practice to use one and only one version of the controls on the same page because of potential javascript issues?

I know this is a kitchen sink kind of posting, but our team needs to start getting our heads around these issues.

Many thanks,

Peter Rogers
Senior Software Engineer
Seyfarth Shaw LLP

General Discussions

answered on 12 Nov 2009

1 answer

179 views

Textbox firing validators inside RAD Grid

Hi Telerik Team,

Product that we are developing requires RAD Grid and a text box inside the grid. What we are doing is to have a asp:Textbox with GridTemplateColumn added.

<telerik:GridTemplatecolumn>

<asp:Textbox id="txtUser" runat="server" Text='<%#Bind("UserInfo")%' OnTextChanged="txtUser_TextChanged"/>

<asp:RequiredFieldValidator id="revTxtUser" runat="server" ControlToValidate="txtUser" ErrorMessage="User Info is blank" />

</telerik:GridTemplatecolumn>

Please note that this textbox has a required field validator. We don't want a edititemtemplate rather a textbox pre-filled with values (UserInfo) from datasource. When user changes the text inside a textbox, my OnTextChanged event gets fired.

We have a scenario where the data coming the datasource for UserInfo is blank. In the same page, we have a button that will do the postback. During this time, my requiredFieldValidator is not getting fired. I will also have RegularExpressionValidator with this textbox. Even this need to be fired.

Is there any way to fire this client side validator. I tried setting ValidationGroup also. It didn't work out. Worst solution here would be to use asp:CustomValidator and do the validation at the server side. But I wan't to keep this as the last option.

Could you please guide me on how to fire these validators? Is there a way to fire these validators?

Regards,

Kishan G K

Grid

answered on 12 Nov 2009

2 answers

117 views

Non consecutive dates

Is it possible to select several non consecutive dates using the RAD Scheduler?

Scheduler

answered on 12 Nov 2009

1 answer

150 views

[Solved] Resizing/watermarking an image after upload

I love the embedded BinaryImage controls, but I have a situation where I need to do a little bit of processing with an image after the upload.

Here's the scenario; I have a hierarchical grid; the second tier contains zero or more images related to the master table. What I'd like to do is this; when I insert or replace an image, I'd like to resize the image to an appropriate size for my app, create a thumbnail of the image, and add a watermark image to the larger version. The image manipulation would be done with a third-party control (I'm using ImgWriter), so basically what I need to do is identify when an image has been uplaoded, get the image out into an object, manipulate it, and then save it back (along with updating another column).

I'm wondering where I could attach this processing? Also, since the table I want to update is the second-level table, how do I respond only when the second level table is updated?

TIA.

Grid

answered on 12 Nov 2009

1 answer

94 views

Unable to disable richtext feature on lists

I upgraded RadEditorMoss from the trial to the full version (5.5.1). I then noticed the information on changing the scope of the features so that you didn't have to enable the features for each site in a site collection. I followed the instructions, and this worked fine as well. Unfortunately, I discovered that I no longer had the ability to embed video into blogs and wiki's with ERTE, so I realised I needed to implement the "Web" scope after all, so users could choose whether to have the embed functionality of ERTE, or the features offered by RadEditor. I followed the instructions again, this time substituting "Site" for "Web", but no matter what I do, RadEditor is always the default editor for lists, even if the feature isn't activated on the wiki or blog or list site in question.

I have disabled all instances of the features, retracted, and removed the solution (which reverts the lists back to the MOSS editor), performed numerous IISRESET, and re-installed and deployed the .wsp with stasadm, but still it shows up as the default editor after re-installation, even though it hasn't been activated.

Any idea what's going on and how to solve this issue?

(if there was a way to access the ERTE functionality from a button on the RadEditor toolbar, that would work for me...)

Editor

answered on 12 Nov 2009

7 answers

212 views

How to use telerik tool kit

Hi All.
I am downloading RadControls_for_ASP.NET_AJAX_2008_3_1314_trial this free exe file and extract it but I dont know how to use it . I am searching documentation. I am trying but i cant understand it.

Thanks
shashank

Ajax

answered on 12 Nov 2009

1 answer

184 views

How to Customize Hyperlink Manager ?

Hello Experts !

I need to remove some controls and Tabs in Hyperlink Manager Dialogue Box in RadEditor , is that possible ? If so how can i ?
thanks in Advance
-Prince

Editor

answered on 12 Nov 2009

1 answer

109 views

Slider Images not displayed

Hi Telerik Team,

i have a problem in radtooltip...

i have a radgrid inside a radtooltip, the radgrid hase the pagestyle mode as slider.
when the tooltip is displayed the slider images is not displayed,
but if u do a postback by clicking in the sort column in the radgrid the second time the slider works fine.

ex:-

    <form id="form1" runat="server">
<telerik:RadScriptBlock ID="RadScriptBlock1" runat="Server">

            <script language="javascript" type="text/javascript">

                function ShowImageTooltip(obj)
                {
                    var tooltip = $find("<%=RTTImageView.ClientID %>");
                    if(obj.id != tooltip.get_targetControlID)tooltip.set_targetControl(obj)
                    window.setTimeout(function(){ var tooltip = $find("<%=RTTImageView.ClientID %>"); tooltip.show(); }, 10);
                 }

            </script>
        </telerik:RadScriptBlock>
    <telerik:RadScriptManager id="ScriptManager1" runat="server"></telerik:RadScriptManager>
        <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" Height="75px" Width="75px" Transparency="30" style="background:url('../Images/LoadingTitle.gif') center center no-repeat #f3f3e2;"></telerik:RadAjaxLoadingPanel>
        <telerik:RadFormDecorator ID="RadFormDecorator1" runat="server" EnableRoundedCorners="true" DecoratedControls="Buttons,CheckBoxes,Label,RadioButtons,Scrollbars,Textarea,Textbox" />
        <telerik:RadDockLayout ID="radLocationDocLayout" runat="server" Skin="Forest" EnableEmbeddedSkins="true" >
            <telerik:RadDockZone ID="radLocationDocZone" Height="400" runat="server" EnableEmbeddedSkins="true" Skin="Forest" Width="400">
                    <telerik:RadDock ID="radLocationDoc" runat="server" EnableEmbeddedSkins="true" EnableTheming="true"
                        Skin="Forest" Width="400" Height="400">
                        <ContentTemplate>
                        <div id="div1" runat="server" onmouseover="ShowImageTooltip(this)">
                            <telerik:RadGrid ID="radGridTest"   EnableTheming="True" Skin="Forest" EnableEmbeddedSkins="true" EnableEmbeddedBaseStylesheet="False" AllowSorting="True"
                                AllowMultiRowSelection="true" AllowMultiRowEdit="true" EnableAJAX="true" Width="800"
                                runat="server" AllowPaging="True" AutoGenerateColumns="True" ShowStatusBar="true" ClientSettings-AllowColumnsReorder="true" >
                                <PagerStyle HorizontalAlign="Left" Mode="Slider" alwaysvisible="True" EnableSEOPaging="True"></PagerStyle>
                                <MasterTableView Width="800" NoDetailRecordsText="No records to display" NoMasterRecordsText="No records to display" EnableAJAX="true">
                                    <HeaderStyle HorizontalAlign="Left" VerticalAlign="Middle"></HeaderStyle>
                                    <ItemStyle HorizontalAlign="Left"></ItemStyle><AlternatingItemStyle HorizontalAlign="Left"></AlternatingItemStyle>
                                </MasterTableView>
                                <HeaderStyle CssClass="RadGridHeader" ></HeaderStyle>
                                <ClientSettings Resizing-AllowColumnResize="true" >
                                    <%--<ClientEvents OnColumnMouseOver="ShowImageTooltip(this)" />--%><Selecting AllowRowSelect="True" ></Selecting>
                                </ClientSettings>
                                <FilterMenu EnableTheming="True" Skin="WebBlue" enableembeddedbasestylesheet="False">
                                    <CollapseAnimation Type="OutQuint" Duration="200"></CollapseAnimation>
                                </FilterMenu>
                                <SortingSettings   SortToolTip="Click here to sort"></SortingSettings>
                            </telerik:RadGrid>
                        </div>
                        </ContentTemplate>
                    </telerik:RadDock>
            </telerik:RadDockZone>
        </telerik:RadDockLayout>

        <telerik:RadToolTip RenderInPageRoot="true" runat="server" ID="RTTImageView" Skin="Forest" RelativeTo="Element" EnableEmbeddedSkins="true" Position="Center"    HideEvent="ManualClose" ShowEvent="FromCode" >
            <telerik:RadAjaxPanel ID="RadAjaxPanel1" runat="server" Height="100%" LoadingPanelID="RadAjaxLoadingPanel1" Width="100%">
                <div style="padding:15px;" runat="server" id="div">
                   <telerik:RadGrid ID="radGridTooltip" EnableTheming="True" Skin="Forest" EnableEmbeddedSkins="true" EnableEmbeddedBaseStylesheet="False" AllowSorting="True"
                    AllowMultiRowSelection="true" AllowMultiRowEdit="true" EnableAJAX="true" Width="1000"
                            runat="server" AllowPaging="True" AutoGenerateColumns="True" ShowStatusBar="true" ClientSettings-AllowColumnsReorder="true" >
                        <PagerStyle HorizontalAlign="Left" Mode="slider" alwaysvisible="True" EnableSEOPaging="True"></PagerStyle>
                        <MasterTableView Width="1000" NoDetailRecordsText="No records to display" NoMasterRecordsText="No records to display" EnableAJAX="true">
                            <HeaderStyle HorizontalAlign="Left" VerticalAlign="Middle"></HeaderStyle>
                            <ItemStyle HorizontalAlign="Left"></ItemStyle><AlternatingItemStyle HorizontalAlign="Left"></AlternatingItemStyle>
                        </MasterTableView>
                        <HeaderStyle CssClass="RadGridHeader" ></HeaderStyle>
                        <ClientSettings Resizing-AllowColumnResize="true">
                        <Scrolling   AllowScroll="true" UseStaticHeaders="true" ScrollHeight="400" />
                        <Selecting AllowRowSelect="True" ></Selecting></ClientSettings>
                        <FilterMenu EnableTheming="True" Skin="WebBlue" enableembeddedbasestylesheet="False">
                            <CollapseAnimation Type="OutQuint" Duration="200"></CollapseAnimation>
                        </FilterMenu>
                        <SortingSettings SortToolTip="Click here to sort"></SortingSettings>
                    </telerik:RadGrid>
                </div>
            </telerik:RadAjaxPanel>
        </telerik:RadToolTip>
    </form>

ToolTip