Questions on UI for ASP.NET AJAX Forum

1 answer

68 views

[Solved] RadInput breaks when inside jScrollPane using Chrome and Firefox

Hi there,

I am using jScrollPane (http://jscrollpane.kelvinluck.com/) for one of my project.

Whenever the scroller from jScrollPane is showing, none of the RadInput (RadTextBox, RadDateTimePicker) is selectable. It is like they are being disabled.

But if I am using the regular ASP.NET TextBox, this issue doesn't happen.

This only happens when i am using Chrome and FireFox. On IE 9, it works fine.

Below is the code i use to demonstrate the problem. The first DIV will show the scroller, the second DIV won't show the scroller. In the first DIV, I can't type anything to the RadTextBox, but on the normal TextBox, it is working.

On the second DIV, where the scroller is not showing, both textbox are working.

Thanks.

<!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">

html, body, form

{

margin: 0px;

padding: 0px;

width: 100%;

height: 100%;

overflow: hidden;

color: #555555;

}

.left-scroll, .pane-scroller

{

outline: none !important;

}

.jspContainer

{

overflow: hidden;

position: relative;

}

.jspPane

{

position: absolute;

}

.jspVerticalBar

{

position: absolute;

top: 0;

right: 0;

width: 16px;

height: 100%;

border: 1px solid #999;

border-right: 0px;

}

.jspHorizontalBar

{

position: absolute;

bottom: 0;

left: 0;

width: 100%;

height: 16px;

}

.jspVerticalBar *, .jspHorizontalBar *

{

margin: 0;

padding: 0;

}

.jspCap

{

display: none;

}

.jspHorizontalBar .jspCap

{

float: left;

}

.jspTrack

{

background: #fff;

position: relative;

border-top: 1px solid #999;

border-bottom: 1px solid #999;

}

.jspDrag

{

background: #666;

background: #8DBB40;

position: relative;

top: 0;

left: 0;

cursor: pointer;

border-top: 1px solid #999;

border-bottom: 1px solid #999;

}

.jspHorizontalBar .jspTrack, .jspHorizontalBar .jspDrag

{

float: left;

height: 100%;

}

.jspArrow

{

background: #50506d;

text-indent: -20000px;

display: block;

cursor: pointer;

}

.jspArrow.jspDisabled

{

cursor: default;

background: #80808d;

}

.jspVerticalBar .jspArrow

{

height: 16px;

}

.jspHorizontalBar .jspArrow

{

width: 16px;

float: left;

height: 100%;

}

.jspVerticalBar .jspArrow:focus

{

outline: none;

}

.jspCorner

{

background: #eeeef4;

float: left;

height: 100%;

}

/* Yuk! CSS Hack for IE6 3 pixel bug :( */

* html .jspCorner

{

margin: 0 -3px 0 0;

}

.jspArrowUp, .jspArrowUp.jspDisabled

{

background-color: #c0c0c0;

background-image: url('http://jscrollpane.kelvinluck.com/themes/lozenge/image/ui-icons_222222_256x240.png');

background-position: 1px 0px !important;

}

.jspArrowDown, .jspArrowDown.jspDisabled

{

padding-bottom: 2px;

background-color: #c0c0c0;

background-image: url('http://jscrollpane.kelvinluck.com/themes/lozenge/image/ui-icons_222222_256x240.png');

background-position: -64px 0 !important;

}

.jspArrowLeft, .jspArrowLeft.jspDisabled

{

background-color: #c0c0c0;

background-image: url('http://jscrollpane.kelvinluck.com/themes/lozenge/image/ui-icons_222222_256x240.png');

background-position: -96px 0 !important;

}

.jspArrowRight, .jspArrowRight.jspDisabled

{

background-color: #c0c0c0;

background-image: url('http://jscrollpane.kelvinluck.com/themes/lozenge/image/ui-icons_222222_256x240.png');

background-position: -32px 0 !important;

}

</style>

</head>

<body>

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

<telerik:RadScriptManager ID="TestRadScriptManager" runat="server">

</telerik:RadScriptManager>

<div class="pane-scroller" style="width: 100%; height: 100px;">

<telerik:RadTextBox ID="tbRetypePassword" runat="server" Width="200px">

</telerik:RadTextBox>

<asp:TextBox ID="TextBox1" runat="server" Text="aasaasasd"></asp:TextBox>

<br />

</div>

<div class="pane-scroller" style="width: 100%; height: 500px;">

<telerik:RadTextBox ID="RadTextBox1" runat="server" Width="200px">

</telerik:RadTextBox>

<asp:TextBox ID="TextBox2" runat="server" Text="aasaasasd"></asp:TextBox>

<br />

</div>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

<script type="text/javascript" src="http://jscrollpane.kelvinluck.com/script/jquery.mousewheel.js"></script>

<script type="text/javascript" src="http://jscrollpane.kelvinluck.com/script/jquery.jscrollpane.min.js"></script>

<script type="text/javascript">

jQuery(document).ready(function ($) {

ReloadScroller();

});

function ReloadScroller() {

$(function () {

$('.pane-scroller').jScrollPane(

{

showArrows: true,

horizontalGutter: 10

}

);

});

}

</script>

</form>

</body>

</html

Input

answered on 08 Mar 2012

2 answers

143 views

[Solved] Accessing Controls in Template Columns on DataBound Grid via Client-Side Scripting

I have a data bound grid that also contains two template columns. One column contains a checkbox, the other contains a textbox. Only if the checkbox is checked should the textbox be enabled. I have added code that does this on the server side, but I'd rather execute this on the client side to reduce processing on the server.

Here's the grid definition:

<telerik:RadGrid ID="grdContentManagement" runat="server" SkinID="StaticColumnsNoPagingBuiltInSorting"

OnItemCommand="ContentManagementGridItemCommand" OnNeedDataSource="grdContentManagement_NeedDataSource"

OnItemDataBound="grdContentManagement_OnItemDataBound" CellSpacing="0" GridLines="None"

AllowSorting="True" AllowPaging="True" PageSize="15" Height="478" ShowFooter="false">

<MasterTableView DataKeyNames="Id" ClientDataKeyNames="Id" AllowSorting="true">

<Columns>

<telerik:GridTemplateColumn UniqueName="Selected" HeaderText="Display" HeaderStyle-HorizontalAlign="Center"

HeaderStyle-Width="50px" ItemStyle-HorizontalAlign="Center">

<ItemTemplate>

<asp:CheckBox ID="chkSelected" runat="server" onclick="CheckBoxClicked(this)" />

</ItemTemplate>

</telerik:GridTemplateColumn>

<telerik:GridBoundColumn HeaderText="Property" UniqueName="PropertyName" DataField="PropertyName"

SortExpression="PropertyName" HeaderStyle-Width="200px">

</telerik:GridBoundColumn>

<telerik:GridTemplateColumn UniqueName="DisplayName" HeaderText="Label" HeaderStyle-Width="200px"

SortExpression="DisplayName">

<ItemTemplate>

<telerik:RadTextBox ID="txtDisplayName" runat="server" MaxLength="255" Width="100%" />

</ItemTemplate>

</telerik:GridTemplateColumn>

<telerik:GridBoundColumn HeaderText="Data Type" DataField="DataType" SortExpression="DataType"

HeaderStyle-Width="100px">

</telerik:GridBoundColumn>

<telerik:GridBoundColumn HeaderText="Object Type" DataField="ObjectType" SortExpression="ObjectType" />

<telerik:GridBoundColumn DataField="Id" SortExpression="Id" Visible="false" />

</Columns>

<EditFormSettings>

<EditColumn FilterControlAltText="Filter EditCommandColumn column">

</EditColumn>

</EditFormSettings>

</MasterTableView>

<ClientSettings>

<Selecting AllowRowSelect="True" />

<Scrolling UseStaticHeaders="False" />

<Resizing EnableRealTimeResize="true" />

</ClientSettings>

<FilterMenu EnableImageSprites="False">

<WebServiceSettings>

<ODataSettings InitialContainerName="">

</ODataSettings>

</WebServiceSettings>

</FilterMenu>

</telerik:RadGrid>

I create the checkboxes as follows:

protected void grdContentManagement_OnItemDataBound(object sender, GridItemEventArgs e)

{

GridDataItem item = e.Item as GridDataItem;

if (item != null)

{

TelerikGridHelper.SetGridToolTips(item as GridDataItem);

TelerikGridHelper.SetGridHtmlEncode(item as GridDataItem);

CheckBox chkBox = (CheckBox)item["Selected"].Controls[1];

chkBox.Checked = ((ContentManagementFieldForDisplay)(item.DataItem)).Selected;

chkBox.Attributes.Add("rowIndex", item.ItemIndex.ToString());

RadTextBox txtBox = (RadTextBox)item["DisplayName"].Controls[1];

txtBox.Text = ((ContentManagementFieldForDisplay)(item.DataItem)).DisplayName;

}

The issue I'm experiencing is that I can't figure out how to access the textbox based on the checkbox row index on the client side. If I place an alert in the following code, it will fire whenever the box is checked/unchecked, so I know it's reaching that point in code, but trying to access the "rowIndex" attribute I defined for the checkbox on the server side doesn't work.

function CheckBoxClicked(checkBox) {

if (checkBox.checked) {

//enable the textbox

}

else {

//disable the textbox

}

Any ideas?

Grid

answered on 08 Mar 2012

1 answer

142 views

Drag/Drop overlay won't go away using Metro theme

Hi there,

When I use the Metro theme, any page that has a RadAsyncUpload control, when the page loads the overlay is visible and will not go away.

This is using the latest Chrome and FireFox.

This is the declaration:

<telerik:RadAsyncUpload ID="RadUploadAlertDocuments" runat="server" AutoAddFileInputs="true"

MaxFileSize="2147483647" MultipleFileSelection="Automatic"

InputSize="70">

</telerik:RadAsyncUpload>

Attached is what shows as soon as the page loads.

Can the overlay be disabled completely? I couldn't find a property for it.

Thanks!!!!!

AsyncUpload

answered on 08 Mar 2012

2 answers

177 views

Change the cursor icon when item is dragginng

Hi ,
How can I change the icon of the cursor in item dragging of a RadListBox that display it's items through template ?
Everything work correctly but in an item template there are some parts that it's not beautiful to display in item dragging , for example there is delete button in items template and when dragging is started , this delete button is displayed by mouse cursor in dragging , how can I exclude these extra parts from cursor icon ?

Thank you very much for your feedback

ListBox

answered on 08 Mar 2012

1 answer

54 views

Load only radtreeview from time to time

Hello

I have a radtreeview in my project and would like to know how to recharge it from time to time

can be on a timer and updatepanel?

thank you very much beforehand

TreeView

answered on 08 Mar 2012

1 answer

83 views

reset paging after node loses focus

I'm relatively new to using the RadGrid, but I'm sure there's a way to do what I'm trying to do--I just don't know where to start.
I've got a 3-level hierarchical grid. In any of the levels, if there is paging taking place I need to reset the page anytime that node loses focus. In other words, if a user starts working in one node but switches to another (whether already expanded or not), I need to reset the page to page 1 for the node that lost focus.
I didn't see any obvious examples of this, or at least nothing that deals with the complexity of managing 3 levels. Any advice would be greatly appreciated.

Thanks,

Glen MacAfee

Grid

answered on 08 Mar 2012

1 answer

220 views

Export to Excel and html formatted cell content problem

Hello all,

I have some problem exporting grid content to Excel.
We are using the grid in a SharePoint context, and in SharePoint list columns of type MultiText (enhanced) can be include html formatted content like tables. When I have created a html table in a so defined text field of a list item, and export the grid data to Excel, Excel will show each table row in a new Excel row, and not in the same cell. It looks like the same behavior when <br /> is used in cell content.

What can I do to let Excel render the html table rows in the same Excel cell?

Best regards,
Ralf

Grid

answered on 08 Mar 2012

3 answers

161 views

RadWindow is disabling dropdowns on parent page after popup is closed (IE 8 only)

Hello Telerik, I'm using RadWindow popups on several of my pages. When my browser is IE 8 and without the compatibility mode, it seems that all the dropdowns on the page get disabled after I close a RadWindow that has been opened. When I put the browser into compatibility mode, everything works fine...but not in pure IE 8 mode. This happens on any page that the RadWindow is on.

The runtime version of the RadWindow dll is v2.0.50727
and the Version is 1.9.1.0

Please let me know how to fix this.

Thanks.

Window

answered on 08 Mar 2012

1 answer

111 views

Errors with IE 9

Greetings,

I have a Website running correctly with IE7-Mozilla but i just noticed there is a problem when i turn Internet Explorer compatibility on ( little icon on the IE adress bar ).

The errors occur only when i open a RadWindow

Basically i do it that way :

function openRadWin(idFamille) {

radopen("Creation_Incident_Details.aspx?id=" + idFamille, "RadWindow1");

}

<asp:ImageButton runat="server" ID="IMGBTHextranet" ImageUrl="../Logos/EXTRANET.jpg"

Width="160" Height="80" OnClientClick="openRadWin(); return false;" />

I don't know if it might help but Inside Creation_Incident_Details.aspx i have this:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Creation_Incident_Details.aspx.cs"

Inherits="Extranet_Incident.Creation_Incidents.Creation_Incident_Details" %>

<%@ 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>

<head>

<title></title>

<link href="../Test/styles/Styles.css" rel="stylesheet" type="text/css" />

<script type="text/javascript">

function OnRequestStart(target, arguments) {

if (arguments.get_eventTarget().indexOf("ButtonSend") > -1) {

arguments.set_enableAjax(false);

}

</script>

</head>

<body>

<form runat="server" id="Form1" method="post" enctype="multipart/form-data">

<div id="formulaire">

<table cellpadding="1">

<tr>

<td>

<asp:label id="lblTitre" runat="server" text="Titre"></asp:label>

</td>

<td>

<telerik:RadTextBox ID="txtTitre" runat="server">

</telerik:RadTextBox>

</td>

</tr>

<tr>

<td>

<asp:label id="lblCategorie" runat="server" text="Categorie"></asp:label>

</td>

<td>

<telerik:RadComboBox ID="cbCategorie" runat="server">

</telerik:RadComboBox>

</td>

</tr>

<tr>

<td>

<asp:label id="lblSousCategorie" runat="server" text="Sous Categorie"></asp:label>

</td>

<td>

<telerik:RadComboBox ID="cbSousCategorie" runat="server">

</telerik:RadComboBox>

</td>

</tr>

<tr>

<td>

<asp:label id="lblProjet" runat="server" text="Projet"></asp:label>

</td>

<td>

<telerik:RadComboBox ID="cbProjet" runat="server" DataTextField="nomProjet" DataValueField="idProjet">

</telerik:RadComboBox>

</td>

</tr>

<tr>

<td>

<asp:label id="lblDescription" runat="server" text="Description"></asp:label>

</td>

<td>

<telerik:RadTextBox ID="txtDescription" runat="server" TextMode="MultiLine" Width="300"

Height="100">

</telerik:RadTextBox>

</td>

</tr>

</table>

<br />

<asp:button id="Button1" runat="server" text="Soumettre ce ticket" />

<br />

<asp:hiddenfield runat="server" id="HiddenFieldIdContact" />

</div>

<%-- <telerik:Header runat="server" ID="Header1" NavigationLanguage="C#"></telerik:Header>--%>

<telerik:RadScriptManager ID="RadScriptManager2" runat="server">

</telerik:RadScriptManager>

<telerik:RadAjaxPanel ID="RadAjaxPanel1" runat="server" Style="float: left;" ClientEvents-OnRequestStart="OnRequestStart"

LoadingPanelID="LoadingPanel1">

<div class="uploadPanel">

<div class="leftPanel">

<%-- <div class="controls first">

<asp:Label ID="Label1" runat="server" Text="Nick: "></asp:Label>

<asp:TextBox ID="NickTextBox" runat="server"></asp:TextBox>

</div>--%>

<div class="controls">

<asp:label id="Label2" runat="server" text="File(s): "></asp:label>

<telerik:RadUpload ID="RadUpload1" runat="server" MaxFileInputsCount="2" OverwriteExistingFiles="false"

ControlObjectsVisibility="RemoveButtons">

</telerik:RadUpload>

<asp:button id="ButtonSend" onclick="ButtonSend_Click" runat="server" text="Save"

cssclass="button"></asp:button>

</div>

<div class="rightPanel">

<div id="UploadedFileLog" runat="server">

No uploaded files yet.</div>

</div>

</telerik:RadAjaxPanel>

<telerik:RadAjaxLoadingPanel ID="LoadingPanel1" runat="server" InitialDelayTime="0" />

<%-- <telerik:Footer runat="server" ID="Footer1" AdditionalCodeViewerFiles="~/Ajax/Examples/Common/FileUpload/ExampleFiles/Styles.css"></telerik:Footer>--%>

</form>

</body>

</html>

The errors i get are the following ones:

Erreur d'exécution Microsoft JScript: DOM Exception: INVALID_CHARACTER_ERR (5)
On this line ( in ScriptResource.axd)

}}else{var m=($telerik.isIE)?document.createElement("<iframe name='"+a+"'>"):document.createElement("iframe");

Unable to set property "name" value : object null or undefined

line

m.name = a

And various other errors on these lines :

m.style.width="100%";
m.style.height="100%";
m.style.border="0px";
m.frameBorder="0";
if($telerik.isIE8){m.style.display="block";
}this._iframe=m;
this._contentCell.appendChild(this._iframe);

Can anyone know how to fix this ?
Thanks in advance

Window

answered on 08 Mar 2012

4 answers

131 views

radAlert issue

Hello,

I have an Intranet web site that I can access either by specifying the web server name, i.e.

http://rsoesndmadba:8089/Default.aspx

or by specifying the web server IP address, i.e.

http://10.3.76.34:8089/Default.aspx

Both addresses are pointing to the same site. But…please see the difference between Rad alerts in both cases (see attached files showing screenshots):

Case 1: using http://10.3.76.34:8089/Default.aspx

The RadAlert displays correctly: ‘Ok’ button and the exclamation sign icon are correctly positioned.

Case 2: using http://rsoesndmadba:8089/Default.aspx

The RadAlert has now a different size and displays incorrectly: ‘Ok’ button and the exclamation sign icon are incorrectly positioned and cut-off!

Please advise.
Regards,
M.R.

Window