Questions on UI for ASP.NET AJAX Forum

7 answers

172 views

RadScriptManager and JQueryUI Background Image URLs

Hi there,

I'm using:

Visual Studio 2010
AJAX Q2 2011 2011.2.712.35 (Bin35)

I use the RadScriptManager to include all my CSS - I'm successfully including my own stylesheets, as well as a custom skin:

(web.config)

<add key="Telerik.Web.UI.StyleSheetFolders" value="~/_Resources/CSS/" />
<add key="Telerik.Skin" value="IntranetSkin" />
<add key="Telerik.EnableEmbeddedSkins" value="false" />
<add key="Telerik.EnableEmbeddedBaseStylesheet" value="false" />

(Base.Master)

<telerik:RadStyleSheetManager ID="RadStyleSheetManager1" runat="server" EnableStyleSheetCombine="true">

<StyleSheets>

<telerik:StyleSheetReference Path="~/_Resources/CSS/base.css" />

<telerik:StyleSheetReference Path="~/_Resources/CSS/start/jquery-ui-1.8.15.custom.css" />

<telerik:StyleSheetReference Path="~/_Resources/CSS/styles.css" />

<telerik:StyleSheetReference Name="Telerik.Web.UI.Skins.Menu.css" Assembly="Telerik.Web.UI" />

<telerik:StyleSheetReference Name="Telerik.Web.UI.Skins.Grid.css" Assembly="Telerik.Web.UI" />

</StyleSheets>

</telerik:RadStyleSheetManager>

However, when I do something like this (these classes apply background images to the elements):

(index.aspx)

<div class="ui-state-default ui-corner-all">

<span class="ui-icon ui-icon-circle-zoomin"></span>

</div>

I get the following 404 errors (via Chrome's error console):

GET http://localhost:411/images/ui-bg_glass_45_0078ae_1x400.png 404 (Not Found)
GET http://localhost:411/images/ui-icons_e0fdff_256x240.png 404 (Not Found)

The files in question exist in http://localhost:411/_Resources/CSS/start/images/, and they're referenced correctly by the JQuery UI CSS file:

(_Resources/CSS/start/jquery-ui-1.8.15.custom.css)

.ui-state-default .ui-icon { background-image: url(images/ui-icons_e0fdff_256x240.png); }

If I include the CSS outside of the StyleSheetManager:

(Base.Master)

<link type="text/css" href="~/_Resources/CSS/start/jquery-ui-1.8.15.custom.css" rel="Stylesheet" />

then things work as expected. I don't seem to have problems with background-image URLs in my other included CSS files.

Any ideas?

Thanks,
Rob

ScriptManager and StyleSheetManager

answered on 08 Mar 2012

5 answers

205 views

Adding line graph with months and a point for each day

I have data that I need to add a point for each day. I have my code working well enough to label my x axis as mar feb apr etc. Where I'm stuck is on how I add all of the data points.
I have the stored in a datatable with three fields, label (the month), position (an int of its position i.e. 0 is jan, 1 is feb etc), and value (the daily value)

Here's the code I have so far on trying to add the points but it doesn't seem to be working. I'm fairly new with these charts, so please bear with me.

'a holder for the current month

Dim currentMonth = ""

'a holder for the count

Dim count = -1

Dim rangeTable As New DataTable

rangeTable.Columns.Add("Label")

rangeTable.Columns.Add("Position")

rangeTable.Columns.Add("Value")

Using myconn As New SqlConnection(System.Configuration.ConfigurationManager.ConnectionStrings("connection").ToString)

myconn.Open()

Dim cmd = New SqlCommand(sql, myconn)

Dim reader = cmd.ExecuteReader()

While reader.Read()

'if the currentMonth is new, then we add it to the data table for a range

If Not (currentMonth = (Format(reader("DateHour"), "MMMM"))) Then

currentMonth = Format(reader("DateHour"), "MMMM")

count = count + 1

End If

rangeTable.Rows.Add(currentMonth, count, reader("PointAverage"))

'Dim tempSeries As New ChartSeries

'tempSeries.SetValues(1, 2)

'chart.Series.Add(tempSeries)

End While

myconn.Close()

End Using 'using myconn

'add the range

chart.PlotArea.XAxis.AddRange(0, count, 1)

For Each i As DataRow In rangeTable.Rows

chart.PlotArea.XAxis(i("Position")).TextBlock.Text = i("Label")

Dim tempSeries As New ChartSeries

tempSeries.SetValues(i("Position"), i("Value"))

chart.Series.Add(tempSeries)

Next

A sample of what my data table would look like is something like this
Label Position Value
january 0 10
january 0 20
january 0 30
february 1 10
february 1 20
etc.

Essentially, I need to add all of the points in each month, but they are in succession by day. So I pull all of the days for jan, feb, and so on. Any ideas on how to go about this?

Chart (Obsolete)

answered on 08 Mar 2012

1 answer

165 views

Onclick does not fire when i close a Radwindow with OnClientClick

With this code, i try to Close a Window (the way i'm doing it works) but i have also an Onclick event which is ignored!

<script type="text/javascript">

function GetRadWindow() {

var oWindow = null;

if (window.radWindow) oWindow = window.radWindow;

else if (window.frameElement.radWindow) oWindow = window.frameElement.radWindow;

return oWindow;

}

function CloseDialog() {

GetRadWindow().close();

}

</script>

ASPX page:

<asp:Button ID="Button1" runat="server" Text="Soumettre ce ticket"

onclick="Button1_Click" OnClientClick="CloseDialog()"/>

My application never enters Button1_click event, can anyone help me to find out why ?
thanks in advance

EDIT: HTML GENERATED FOR THE BUTTON

<input type="submit" id="Button1" onclick="CloseDialog();" value="Soumettre ce ticket" name="Button1"/>

Window

answered on 08 Mar 2012

1 answer

361 views

Moving from RadGrid to Kendo UI Grid

Hi

I currently use RadGrids for displaying data on mobile devices and am having trouble with the Client Side Select column. It will only allow a single select to be made even though multi row select is true - it works fine on a PC browser.

Will switching to the Kendo UI Grid be more compatible with mobile browsers and if so what is the transition from RadGrid to KendoGrid like, for example can I still bind to a list of items server side during page load?

Cheers
Cliff

Grid

answered on 08 Mar 2012

1 answer

102 views

Bullet List and IE

I'm having trouble with IE not handling and producing the same results with bulleted lists than other browsers.

I've pasted the same HTML in the online demo on Telerik and I still get the same issues across browsers.

The following is HTML created by my client, you can see a mix of P tabs and BR tags, but yet when highlighting two paragraphs, the browsers handle creating the bullets positions differently.

<p><strong>Lorem ipsum dolor sit amet, consectetur <br />

Lorem ipsum dolor sit amet, consectetur <br />

Lorem ipsum dolor sit amet, consectetur </strong></p>

<p

>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ultricies dignissim diam, sed vestibulum metus semper sed. Nullam cursusLorem ipsum dolor sit amet, consectetur. </

p>

<p

>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ultricies dignissim diam, sed vestibulum metus semper sed. Nullam . <

br />

<br />

<strong>Lorem ipsum</strong> <br />

<br />

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ultricies dignissim diam, sed vestibulum metus semper sed. Nullam cursusLorem ipsum dolor sit amet, consectetur </

p>

<p

>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ultricies dignissim diam, sed vestibulum metus semper sed. Nullam cursus. </

p>

<p><strong>Lorem ipsum :</strong> </p>

<ul>

<li>Lorem ipsum dolor sit amet, consectetur </li>

<li>Lorem ipsum dolor sit amet, consectetur (optional) </li>

<li>Lorem ipsum dolor sit amet, consectetur </li>

<li>A Lorem ipsum dolor sit amet, consectetur </li>

<li>Lorem ipsum dolor sit amet, consectetur </li>

<li>Lorem ipsum dolor sit amet, consectetur Lorem ipsum dolor sit amet, consectetur </li>

</ul>

<p> </p>

Editor

answered on 08 Mar 2012

1 answer

57 views

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

124 views

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

129 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

148 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

45 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