Removing scrollbar from RadWindow - asp.net

Code contains RadWindow with RadSplitter, inside which are two RadPanes. Second pane contains RadTextBox.
I'am trying to remove scrollbars from window and i tried solutions like Scrolling="None", fixed positioning, but nothing seems to work.
This is what i get.
This is what i'am trying to accomplish
Code:
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="DefaultCS2.aspx.cs" Inherits="RadControlsWebApp1.DefaultCS2" %>
<%# Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns='http://www.w3.org/1999/xhtml'>
<head>
<title>Modal Popup</title>
</head>
<body>
<form id="form1" runat="server">
<telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
<telerik:RadSkinManager ID="QsfSkinManager" runat="server" Skin="Office2007" />
<telerik:RadFormDecorator ID="QsfFromDecorator" runat="server" DecoratedControls="All" EnableRoundedCorners="false" />
<telerik:RadAjaxPanel runat="server" ID="rapConfiguration" LoadingPanelID="ralpConfiguration" HorizontalAlign="NotSet">
<telerik:RadWindow ID="modalPopup" VisibleStatusbar="false" runat="server" AutoSize="true" OnClientResize="ResizeRadSplitter" OnClientCommand="ResizeRadSplitter">
<ContentTemplate>
<telerik:RadSplitter ID="MainSplitter" runat="server" Height="100%" Width="100%" Orientation="Horizontal">
<telerik:RadPane ID="Radpane4" runat="server" Width="100%">
Splitter Top Pane
</telerik:RadPane>
<telerik:RadSplitBar ID="Radsplitbar4" runat="server" CollapseMode="Forward">
</telerik:RadSplitBar>
<telerik:RadPane ID="Radpane5" runat="server" Height="100%" Scrolling="None" Width="100%">
<telerik:RadTextBox ID="chatBox" runat="server" TextMode="MultiLine" Resize="None" Rows="10" Width="100%"
EmptyMessage="type here" AutoPostBack="true" BorderStyle="None" Style="border: none; margin: 0 auto; outline: none">
</telerik:RadTextBox>
</telerik:RadPane>
</telerik:RadSplitter><br />
</ContentTemplate>
</telerik:RadWindow>
</telerik:RadAjaxPanel>
<telerik:RadCodeBlock runat="server" ID="rdbScripts">
<script type="text/javascript">
function ResizeRadSplitter(sender, args) {
var splitter = $find("<%=MainSplitter.ClientID %>");
var container = $telerik.$(sender.get_contentElement());
splitter.resize(container.width(), container.height());
}
function showDialogInitially() {
var wnd = $find("<%=modalPopup.ClientID %>");
wnd.show();
Sys.Application.remove_load(showDialogInitially);
}
Sys.Application.add_load(showDialogInitially);
</script>
</telerik:RadCodeBlock>
</form>

Try the following CSS and it should work
<style type="text/css">
#modalPopup_C
{
overflow:hidden !important;
}
</style>
Thanks
AB

The above solution worked for me with 1 tweak due to the client ID changing. My css looked like this:
#<%=modalPopup.ClientID %>_C
{
overflow:hidden !important;
}

Related

show an Image on Click of a LinkButton Control

How to show an image in ContentPlaceHolder4 on click of a Link Button which is placed on ContentPlaceHolder3.
I Have a Master Page and one content page. On master page i have a link INSTRUMENTS by clicking on which i am redirected to content page INSTRUMENTS. Now i have 10 LINK BUTTON controls on my Content Page and i want on the click of each link button corresponding image should open on same content page but in different CntentPlaceHolder. Please guide me how to add code for Link Button Click and how to render iamge on click of Link Button.
Following is the code i have added till now.
**This is My Master Page**
<%# Master Language="C#" AutoEventWireup="true" CodeFile="MasterPage.master.cs" Inherits="MasterPage" %>
<!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></title>
<asp:ContentPlaceHolder id="head" runat="server">
</asp:ContentPlaceHolder>
<style type="text/css">
.style1
{
}
.style2
{
width: 162px;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div> <img src="IMAGES/main.png" style="background-color: #99FF99; border-top-color: #800000; width: 1082px; height: 105px;" />
</div>
HOME INSTRUMENTS LOGIN
ADDRESS
<table style="width: 100%; height: 288px; margin-top: 11px;">
<tr>
<td bgcolor="#FF0066" align="center" class="style2"
style="text-align: center; vertical-align: top;">
<asp:ContentPlaceHolder ID="ContentPlaceHolder3" runat="server">
</asp:ContentPlaceHolder>
</td>
<td bgcolor="#33CCCC" class="style1">
<asp:ContentPlaceHolder ID="ContentPlaceHolder4" runat="server">
</asp:ContentPlaceHolder>
</td>
</tr>
</table>
</form>
</body>
</html>
**This is My Content Page**
<%# Page Title="" Language="C#" MasterPageFile="~/MasterPage.master" AutoEventWireup="true" CodeFile="INSTRUMENTS.aspx.cs" Inherits="INSTRUMENTS" %>
<asp:Content id="content3" ContentPlaceHolderID="head" runat="server">
<link href="StyleSheet.css" rel="stylesheet" type="text/css" />
</asp:Content>
<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder3" Runat="Server">
<asp:LinkButton ID="LinkButton1" runat="server" OnClick="lkbutton_click">Sitar</asp:LinkButton><br />
<asp:LinkButton ID="LinkButton2" runat="server">Harmonium</asp:LinkButton>
<br />
<asp:LinkButton ID="LinkButton3" runat="server">Tabla</asp:LinkButton>
<br />
<asp:LinkButton ID="LinkButton4" runat="server">Drum</asp:LinkButton>
<br />
<asp:LinkButton ID="LinkButton5" runat="server">Guitar</asp:LinkButton>
<br />
<asp:LinkButton ID="LinkButton6" runat="server">Sarod</asp:LinkButton>
<br />
<asp:LinkButton ID="LinkButton7" runat="server">Flute</asp:LinkButton>
<br />
<asp:LinkButton ID="LinkButton8" runat="server">Santoor</asp:LinkButton>
<br />
<asp:LinkButton ID="LinkButton9" runat="server" onclick="LinkButton9_Click">Keyboard</asp:LinkButton>
<br />
<asp:LinkButton ID="LinkButton10" runat="server">LinkButton</asp:LinkButton>
</asp:Content>
<asp:content ID ="C2" ContentPlaceHolderID ="ContentPlaceHolder4" runat="Server">
<asp:Image ID ="I1" ImageUrl ="~/IMAGES/F.png" >
<asp:Image />
</asp:content>
in your design page use like this.
<asp:Content ContentPlaceHolderID="ContentPlaceHolder4" Runat="Server">
<img id="img1" runat="server" />
</asp:Content>
and in code behind link button click event like below:
protected void lkbutton_click(object sender, EventArgs e)
{
img1.Src = "~/images/sonata-logo.png";
}
i tested it it's working fine.
but put the correct path of image then only it will show.
Thanks
<asp:LinkButton ID="LinkButton1" runat="server" width="250px" height="250">
<img runat="server" id="IL"src="~/Class/Adds/0/4.jpg" width="250" height="250" />
</asp:LinkButton>
With this you can change the picture with server code.
il.SRC = "~/Class/Adds/0/7.jpg"

How to align resized items in RadToolBar when RadToolBar is resized?

I am running into an issue with the radtoolbarbutton in a radtoolbar and can't find a solution anywhere.
My Radtoolbar looks like this...
<div>
<telerik:RadToolBar ID="rtlbCustomers" runat="server"
Width="100%" Height="18px">
<Items>
<telerik:RadToolBarButton runat="server" ImageUrl="~/Images/AddIco.png" Text="Add" Value="btnAdd" />
<telerik:RadToolBarButton runat="server" ImageUrl="~/Images/EditIco.png" Text="Change" Value="btnUpdate" />
<telerik:RadToolBarButton runat="server" ImageUrl="~/Images/DeleteIco.png" Text="Delete" Value="btnDelete" />
</Items>
</telerik:RadToolBar>
</div>
I have resized the items with this...
.RadToolBar .rtbItem {
height:16px !important;
}
Here is a picture of how it looks like..
I am trying to get my buttons aligned properly in the radtoolbar so that the radtoolbarbuttons are in the grey area, but can't figure out how.
Has anyone ran into this situation?
Use your dev toolbar to find the elements you need to change. Here is what seemed fine for me:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<style type="text/css">
div.RadToolBar .rtbOuter,
div.RadToolBar .rtbIn,
div.RadToolBar .rtbIcon
{
padding: 0;
line-height: 14px;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="Scriptmanager1" runat="server" />
<telerik:RadToolBar ID="rtlbCustomers" runat="server"
Width="100%" Height="18px">
<Items>
<telerik:RadToolBarButton runat="server" ImageUrl="~/Images/icon_16x16.png" Text="Add" Value="btnAdd" />
<telerik:RadToolBarButton runat="server" ImageUrl="~/Images/icon_16x16.png" Text="Change" Value="btnUpdate" />
<telerik:RadToolBarButton runat="server" ImageUrl="~/Images/icon_16x16.png" Text="Delete" Value="btnDelete" />
</Items>
</telerik:RadToolBar>
</form>
</body>
</html>

RadSplitter Remove Borders not working

I am working on an Asp .net project and i Am using RadSplitter to split me website. I want to remove the borders from the splitter. Here is my asp code below, i remove the borders but they are still appear. Can anyone help me please?
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="webbetv1.WebForm1" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<%# Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
<html runat="server">
<head >
<style type="text/css">
.RadSplitter .pane,
.RadSplitter .paneHorizontal
{
border: 0px !important;
padding: 0px !important;
}
.style1
{
width: 100%;
margin-bottom: 33px;
}
</style>
<script type="text/javascript">
//Put your JavaScript code here.
</script>
</head>
<form id="Form1" runat="server">
<body>
<telerik:RadScriptManager ID="RadScriptManager1" Runat="server">
</telerik:RadScriptManager>
<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
</telerik:RadAjaxManager>
<div style="height:800px; width: auto;">
<telerik:RadSplitter ID="MainSplitter" runat="server" Width="100%" Height="100%" ExpandMode="FullExpandItem"
Orientation="Horizontal" LiveResize="false" BorderSize="0" BorderWidth="0px" BorderStyle="None" CssClass="pane" >
<telerik:RadPane ID="TopPane" runat="server" Height="120" MinHeight="85" MaxHeight="150" BorderWidth="0px"
Scrolling="none" CssClass="pane" >
<asp:PlaceHolder ID="PlaceHolder3" runat="server"></asp:PlaceHolder>
<table class="style1">
<tr>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td>
sadasd</td>
<td>
</td>
</tr>
</table>
</telerik:RadPane>
<telerik:RadSplitBar ID="RadsplitbarTop" runat="server" CollapseMode="Forward" Height="100%" BorderWidth="0px" BorderStyle="None" />
</telerik:RadSplitter>
</div>
</body>
</form>
</html>
Try adding
border: none;
to your .pane css class.
I had the same problem and I had to add that to the css class as well as setting BorderStyle="None" and BorderSize="0" . I'm working with a master page and I suspected that the property was being overwritten somewhere.
No css should be necessary in order to remove the borders:
On the RadSplitter set:
PanesBorderSize="0" BorderWidth="0"
On the RadPane set:
BorderWidth="0"
Now that the image is visible, maybe you just want to hidden the RadSplitBar. In that case you can both remove it or just set Visible="False".

Invalid argument error with an AsyncFileUpload inside a modalpopupextender

I receive this error when the page loads: Invalid argument.
On this line:
a._innerTB.style.width=a._inputFile.offsetWidth-107+"px"
If I remove this attribute UploaderStyle="Modern", I don’t have the error. Also, if I use the control without the ModalPopupExtender, I don’t have the error as well.
Do you have an idea how can I resolve this problem with the cool Modern style?
<%# Page Language="C#" AutoEventWireup="true" CodeFile="Test.aspx.cs" Inherits="Test" %>
<%# Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajax" %>
<!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></title>
</head>
<body>
<form id="form1" runat="server">
<ajax:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
</ajax:ToolkitScriptManager>
<div>
<asp:Button ID="btnOpen" runat="server" Text="Open" />
<ajax:ModalPopupExtender ID="pnlUpload_mpe" runat="server" DynamicServicePath=""
Enabled="True" TargetControlID="btnOpen" PopupControlID="pnlUpload" BackgroundCssClass="modalBackground">
</ajax:ModalPopupExtender>
<%--ModalPopup file upload--%>
<asp:Panel ID="pnlUpload" runat="server">
<script type="text/javascript" language="javascript">
function uploadComplete(sender, args) {
var filename = args.get_fileName();
var contentType = args.get_contentType();
var text = "Size of " + filename + " is " + args.get_length() + " bytes";
if (contentType.length > 0) {
text += " and content type is '" + contentType + "'.";
}
$get("<%=lblStatus.ClientID %>").innerText = text;
}
function uploadError(sender, args) {
$get("<%=lblStatus.ClientID %>").innerText = args.get_fileName(), "<span style='color:red;'>" + args.get_errorMessage() + "</span>";
}
function startUpload(sender, args) {
$get("<%=lblStatus.ClientID %>").innerText = 'Uploading Started.';
}
</script>
<br />
<br />
<ajax:AsyncFileUpload ID="AsyncFu" runat="server" Width="300" UploaderStyle="Modern"
OnClientUploadError="uploadError" OnClientUploadStarted="startUpload" OnClientUploadComplete="uploadComplete"
ThrobberID="ibWait" OnUploadedComplete="AsyncFu_UploadedComplete" />
<asp:ImageButton ID="ibWait" runat="server" ImageUrl="~/images/Wait.gif" AlternateText="loading" />
<br />
<br />
<asp:Label ID="lblStatus" runat="server" Text="Label"></asp:Label>
<br />
<br />
<asp:Button ID="btnOk" runat="server" Text="Ok" Width="64" />
<br />
<br />
</asp:Panel>
</div>
</form>
</body>
</html>
Code behind:
protected void AsyncFu_UploadedComplete(object sender, AjaxControlToolkit.AsyncFileUploadEventArgs e)
{
}
Thanks.
I'd wrap a div with the image around it to force it to take that background image:
<div style="background:url(/WebResource.axd?d=4aicOdyPTcU1uCDL6TJaMogi8jp7nEFhFdMy-zDDeZJHfZibfnO3WL4-FoFVjZ0IkhjgO6JOuY3LFuoQynhgqy49bl_CUdY4W5bofG0AYNxySS0gZV5Juyg6wn8MYlfPPLaCzhYwPDsFiLP25YErWX8X0GHvUyt9wnznVOgENUo1&t=634092594280000000) no-repeat 100% 1px; height:24px; margin:0px;width:300px;">
<ajax:AsyncFileUpload ID="AsyncFu" runat="server" Width="300" UploaderStyle="Modern"
OnClientUploadError="uploadError" OnClientUploadStarted="startUpload" OnClientUploadComplete="uploadComplete"
ThrobberID="ibWait" OnUploadedComplete="AsyncFu_UploadedComplete"/>
</div>
I have solved this by setting the UploaderStyle="Traditional". Don't know how but it works.

How can I make a validation icon appear beside a asp:textbox?

Using this code, I can get a very cheesy red lettered message.
<form id="frmValidator" action="required.aspx" method="post" runat="server">
Enter Your Name:
<asp:TextBox id="txtName" runat="server" />
<asp:RequiredFieldValidator id="valTxtName" ControlToValidate="txtName" ErrorMessage="Please enter your name!" runat="server" />
<br />
<asp:button id="btnSubmit" text="Submit" runat="server" />
</form>
Is there some way for me to have a green icon (I have that image so I imagine I just have to reference it) sort of fade into existence beside the control?
Thanks a bunch. :)
You set the ErrorMessage property to a link to an image
e.g. ErrorMessage='<img src="error.gif">'
See this MSDN article.
You can do this
<%# Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!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></title>
<style type="text/css">
</style>
<link href="StyleSheet.css" rel="stylesheet" type="text/css" />
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
<asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server"
BorderStyle="None" ControlToValidate="TextBox1" CssClass="newStyle1"></asp:RequiredFieldValidator>
</div>
<asp:Button ID="Button1" runat="server" Text="Button" />
</form>
</body>
</html>
.newStyle1
{
background-image: url('Pic.png');
width: 500px;
height: 300px;
}
So basically just don't have any text for the error message and set the css property in the validation controls to have a css class.

Resources