Questions on UI for ASP.NET AJAX Forum

5 answers

144 views

Image manager xhtml invalid attribute: complete="complete"

Hi,

When I use the Image Manager to insert an image into the contents of the RadEditor a link like <img alt="" style="width: 120px; height: 150px;" src="/CMS/Upload/Media/7038fa0c-61ec-46ae-a397-b899dc3b21e3.jpeg" complete="complete" complete="complete" /> is inserted (when I switch from the design view to the html view).
This is not xhtml compliant.
It is unclear to me why the attribute complete="complete" is inserted and why it's inserted twice.

Please inform me how to avoid such invalid attributes when inserting images.

Regards,

Mink

Editor

answered on 04 Apr 2011

1 answer

279 views

HowTo: custom resizable "select" button with rounded corners and hover styles

Hi,

Note: it's quick and dirty :)

I needed to customize the "Select" button's view to match UI, it should have had:
1)only button, no 'fake' file input, no file list, nothing, only immediate 1 file upload (to set current picture)
2)round corners
3)different style when hovered
4)resize to match inner text when site's language is changed

Note: when button is hovered in browsers that support Flash/Silverlight cursor doesn't change to 'pointer' type, but does in IE 64-bit.
I didn't investigate much, simple setting cursor: pointer !important; didn't do the trick (admins, any ideas?)

Ok, you will need to create 3 background png images (2 for button's left part (one with active image another passive) and 1 for the right part, the round corner). Note that I use one of left background images as background for ruUploadProgress span when there is an upload happening with a file name being uploaded.

.createContentPageAdditionalOptions .RadUpload

{

width:100px !important;

}

.RadUpload input

{

font-family: verdana !important;

}

.createContentPageAdditionalOptions .RadUpload input.ruFakeInput

{

display: none;

}

.RadUpload input.ruBrowse

{

background: url(/Images/btnLeftPartInactive.png) top left no-repeat !important;

width: auto !important;

line-height:21px;

height:23px;

text-align:left;

margin:0px 3px 0px 0px !important;

padding:0px 8px 3px 18px !important;

}

.createContentPageAdditionalOptions .RadUpload .ruInputs

{

text-align:center;

}

.RadUpload input.ruBrowse,

.createContentPageAdditionalOptions .RadUpload .ruUploadProgress,

.createContentPageAdditionalOptions .RadUpload .ruCancel,

.createContentPageAdditionalOptions .RadUpload .ruRemove

{

color:#fff !important;

}

.createContentPageAdditionalOptions .RadUpload .ruUploadProgress

{

background: url(/Images/btnLeftPartInactive.png) top left no-repeat !important;

margin:0px 3px 0px 0px !important;

height:23px;

overflow:hidden;

width:80px;

}

.RadUpload input.ruButtonHover

{

background: url(/Images/btnLeftPartActive.png) top left no-repeat !important;

color: #d14b35 !important;

}

.RadUpload .ruFileWrap

{

width: auto !important;

padding: 0px !important;

background: url(/Images/btnRightPart.png) top right no-repeat !important;

}

.RadUpload input.ruBrowse,

.createContentPageAdditionalOptions .RadUpload .ruCancel,

.createContentPageAdditionalOptions .RadUpload .ruRemove,

.RadUpload input.ruFileInput

{

cursor: pointer !important;

}

Note createContentPageAdditionalOptions class, I use it here cause I don't want to change the view of all asyncuploads I have, just particular one, next step, on the page where you have the control add following snippet:

var modules = Telerik.Web.UI.RadAsyncUpload.Modules;

if (modules && (modules.Silverlight.isAvailable() || modules.Flash.isAvailable())) {

$(".ruFileWrap").live("mouseover mouseout", function (event) {

$(this).children("input[class != 'ruFakeInput']").toggleClass("ruButtonHover");

});

}

This will enable native hovering to work when browser is using Flash/Silverlight object.

Finally my control:

<telerik:RadAsyncUpload runat="server" ID="RadAsyncUploadImageForNavNode" AllowedFileExtensions="jpg,jpeg,png,gif"

CssClass="divToBeCentered" MaxFileSize="5242880" MultipleFileSelection="Disabled"

OnFileUploaded="RadAsyncUploadImageForNavNode_FileUploaded" EnableInlineProgress="false" Width="120px"

MaxFileInputsCount="1" OnClientFileUploaded="RadAsyncUploadImageForNavNode_OnClientFileUploaded"

Localization-Select="<%$ Resources:PGC, ProjectContentElement_UploadImage %>"

Localization-Cancel="<%$ Resources:PGC, General_Cancel %>"

Localization-Remove="<%$ Resources:PGC, General_Remove %>"

>

</telerik:RadAsyncUpload>

and JS it calls when upload completes:

function RadAsyncUploadImageForNavNode_OnClientFileUploaded(sender, args) {

$("#btnRefreshUploadedImageToCurrentProjectElementStub").click();

}

so that postback happens immediately and picture is set.

That's it, hopefully someone will find this usefull :)

P.S.: attached file has 4 views: default, hovered, uploading and default again (after upload)

AsyncUpload

answered on 04 Apr 2011

1 answer

192 views

can't access pane by getPaneById

Dear,

I want to access a pane and set it's content url.it works by using

var contentPane = $find("<%= PaneRight.ClientID %>");

and not works by using

var splitter = GetRadSplitter();

var pane = splitter.getPaneById("PaneRight");

the page source below

<%@ Page Title="" Language="C#" MasterPageFile="~/Common/Base.Master" AutoEventWireup="true"

CodeBehind="RptAuth.aspx.cs" Inherits="Rp.UI.ReportManager.RptAuth" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">

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

function GetRadSplitter() {

return $find("<%= RadSplitter1.ClientID %>");

}

function tvClientNodeClicked(sender, eventArgs) {

var node = eventArgs.get_node();

if (node.get_nodes().get_count() > 0) {

return;

}

// var splitter = GetRadSplitter();

// var pane = splitter.getPaneById("<%= PaneRight.ClientID %>");

// debugger;

var contentPane = $find("<%= PaneRight.ClientID %>");

if (!contentPane) return;

}

</script>

</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolderMain" runat="server">

<telerik:RadSplitter ID="RadSplitter1" runat="server" Orientation="Vertical" BorderSize="0"

BorderStyle="None" Height="100%" Width="100%">

<telerik:RadPane ID="PaneLeft" runat="server" Scrolling="None" Height="100%" Width="180px">

<div style="border-top-style: solid; border-top-width: 1px; border-top-color: #3333CC">

<telerik:RadTreeView ID="tvUser" Height="100%" Width="100%" runat="server" OnClientNodeClicked="tvClientNodeClicked">

<Nodes>

</div>

</telerik:RadPane>

<telerik:RadSplitBar runat="server" ID="RadSplitBar1" CollapseMode="Forward" />

<telerik:RadPane ID="PaneRight" runat="server" Scrolling="Both">

</telerik:RadPane>

</telerik:RadSplitter>

</asp:Content>

I noticed that all the demo have used the second way to access the specified pane.how to fix my code?

thanks

Kevin

Splitter

answered on 04 Apr 2011

1 answer

91 views

2011 Q1 SP1 Features?

Is there a list of features that being added to the RibbonBar control in SP1? I checked the PITS system, but don't see anything there for the RibbonBar at all.

I have mentioned a couple of missing features/bugs in a previous issue which I was told were already on the to-do (Thanks! btw).

Is there by chance going to be a server side OnClick/OnCommand event available for a RibbonBarButton with CommandName and CommandArgument properties? How about a NavigateUrl for RibbonBarButton?

Thanks again! I really love this new control. We aren't planning on going live with it for a few months, but I at least want to make sure some of these features will eventually be added to the control.

RibbonBar

answered on 04 Apr 2011

1 answer

146 views

DatePicker wrong Tooltip

Hi,

I’ve got a problem using the RadTooltipManager combined with RadDatePicker. I was able to fix the Problem on Firefox but not on IE and I don’t know what to do to get it work.

The problem is that the RadToolTip shows the wrong date as you can see on Screenshot 1.

After adding the Calendar-ClientEvents-OnCalendarViewChanged event to the DatePicker with the following JS-function

function OnCalendarViewChanged(sender, args) {

element = sender.get_element();

tooltipmanager = $find("<%=RadToolTipManager1.ClientID %>");

tooltipmanager.tooltipify(sender.get_element());

the problem is solved in FireFox as you can see on Screenshot 2. But in the IE the problem still exists…

I hope you are able to help me to fix this.

I'm using the Version 2010.3.1502.35

ToolTip

answered on 04 Apr 2011

3 answers

149 views

How to set a different background color for other month dates?

Hi,

In Scheduler month view,I want to display the dates from other months in a diff color than dates inthe current month, so that it is easy for the user.

For e.g.: Scheduler monthview for September 2009 shows August (30, 31) and October (1, 2, and 3). I wantto set Grey color to August and October dates. How to do this?

p.s. the sameissue in Week view too.

Any clues/hints would help.

Thanks

Sabarish

Scheduler

answered on 04 Apr 2011

5 answers

609 views

[Solved] Show only the days of the current month in MonthView

Hey guys,
After looking thru the forums I can't seem to find anything to help me. I am wondering if it is possible to only show the actual month in the MonthView and NOT show the last/next few days of the previous/next month? I have two RadSchedule control on a page to give a 2 month view but the week of the next month is distracting to see twice ( example of month overlap ) Is there an easy way I can suppress the extra days?
Thanks,
Bryan Smouse

Scheduler

answered on 04 Apr 2011

2 answers

732 views

Problems with using CustomValidator for client-side validation

Hello, I'm trying to implement custom validation for my web page, but having problem. I want my ComboBox to be populated asynchronously from Web Service. So, here's the code of my page:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="CBSamplePage.aspx.cs" Inherits="CBSamplePage" %>

<!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 xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

<title>

RadComboBox Sample Page

</title>

</head>

<body>

<form id="form1" runat="server">

<script type="text/javascript">

function validatePerson(source, args) {

if ($find("<%=cbPersons.ClientID %>").get_value() > 0) {

args.IsValid = true;

} else {

args.IsValid = false;

}

</script>

<div>

<asp:ScriptManager runat="server" ID="scriptManager1"></asp:ScriptManager>

<table>

<tr>

<td>

<asp:Label runat="server" ID="lbl1">Select something</asp:Label>

</td>

<td>

<telerik:RadComboBox EmptyMessage="Select a person..." runat="server" ID="cbPersons" AllowCustomText="true" EnableLoadOnDemand="true">

<WebServiceSettings Method="GetPersons" Path="~/SampleWebService.asmx" />

</telerik:RadComboBox>

<asp:CustomValidator runat="server" ID="customValrPerson" ValidationGroup="Sample" ControlToValidate="cbPersons" ErrorMessage="Required" ClientValidationFunction="validatePerson"></asp:CustomValidator>

</td>

</tr>

<tr>

<td colspan="2">

<asp:LinkButton runat="server" ID="lnkSubmit" ValidationGroup="Sample" CausesValidation="true">Submit</asp:LinkButton>

</td>

</tr>

</table>

</div>

</form>

</body>

</html>

And here's the code of the web service that I use for generating ComboBox items:

<%@ WebService Language="C#" Class="SampleWebService" %>

using System;

using System.Web;

using System.Web.Services;

using System.Web.Services.Protocols;

using System.Web.Script.Services;

using Telerik.Web.UI;

[WebService(Namespace = "http://tempuri.org/")]

[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]

[ScriptService]

public class SampleWebService : System.Web.Services.WebService {

static string[] persons = { "Person Number 1", "Person Number 2", "Person Number 3", "Person Number 4", "Person Number 5" };

[WebMethod]

public RadComboBoxItemData[] GetPersons(RadComboBoxContext context)

{

RadComboBoxItemData[] result = null;

result = new RadComboBoxItemData[persons.Length];

for (int i = 0; i < persons.Length; i++)

{

result[i] = new RadComboBoxItemData { Text = persons[i], Value = i.ToString() };

}

return result;

}

So, I have number of problems.

1) When I load the page and click "Submit" link, validation doesn't happen and page gets post back. Obviously, that's wrong because ComboBox doesn't have any item selected.
2) When I select an item I see "Required" text. That happens because when validation function is called, this code:

$find("<%=cbPersons.ClientID %>").get_value()

returns "undefined". Sure, that's not how I expect things to work. When I click "Submit" link everything works properly.

P.S. It can seem that I would use RequiredFieldValidator in this example, but sometimes I will need to change the way selection is validated, so I would prefer to use CustomValidator for this.

ComboBox

answered on 04 Apr 2011

5 answers

136 views

"'null' is null or not an object" error in IE8 but works in FF & Chrome

I'm getting this error in IE8 only on my RadAjaxManager. Works great in Chrome & FF4.

Webpage error details

User Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.1; WOW64; Trident/4.0; GTB6.6; SLCC2; 

.NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; .NET4.0C; .NET4.0E; 

BRI/2)

Timestamp: Tue, 29 Mar 2011 22:25:34 UTC

Message: 'null' is null or not an object

Line: 162

Char: 13

Code: 0

Here's the RadAjaxManager:

<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" OnAjaxRequest="PageLoaded">

<AjaxSettings>

<telerik:AjaxSetting AjaxControlID="RadAjaxManager1">

<UpdatedControls>

<telerik:AjaxUpdatedControl ControlID="Label1" />

</UpdatedControls>

</telerik:AjaxSetting>

</AjaxSettings>

</telerik:RadAjaxManager>

Here's the OnAjaxRequest & OnLoad methods:

protected override void OnLoad(EventArgs e)

{

base.OnLoad(e);

RadAjaxManager ajaxManager = RadAjaxManager.GetCurrent(this.Page);

if (ajaxManager == null)

{

ajaxManager = new RadAjaxManager();

ajaxManager.ID = "RadAjaxManager1";

Controls.Add(ajaxManager);

this.Page.Items.Add(typeof(RadAjaxManager), ajaxManager);

}

protected void PageLoaded(object sender, Telerik.Web.UI.AjaxRequestEventArgs e)

{

if(e.Argument=="DocumentReady")

DisplayDates(new DateTime(radCal.FocusedDate.Year, radCal.FocusedDate.Month, 1), new

DateTime(radCal.FocusedDate.Year, radCal.FocusedDate.Month, DateTime.DaysInMonth(radCal.FocusedDate.Year, radCal.FocusedDate.Month)));

}

Here's the javascript:

$(document).ready(function () {

var ajaxManager = $find("<%= RadAjaxManager1.ClientID %>");

ajaxManager.ajaxRequest("DocumentReady");//THIS IS WHERE THE ERROR OCCURS

}

I have a feeling that I'm missing something important, but I'm still pretty new to telerik. Any help would be appreciated, thanks.

Ajax

answered on 04 Apr 2011

1 answer

133 views

[Solved] Add some padding to Level 1 Items

I'm just trying to add some top and bottom padding to Level 1 items (the first level below the root level). I've got a custom default.css class which I copied out of the install folder.

I've been at it for about 2 hours, with no luck. For some reason, this is really difficult, probably because I'm not a CSS guy.

Aaron

Menu

answered on 04 Apr 2011