Questions on UI for ASP.NET AJAX Forum

7 answers

296 views

RadToolTipManager issues in some browsers

Hi, I have two issues that are occurring in different browsers (and not in some others). Im Using Q2 2012. I have a RadGrid containing an hyperlink column where I add dynamically in code-behind a RadTooltip (containing an image) on some conditions.

Browser versions: Chrome Version 23.0.1271.95 m , Safari for Windows 5.1.7 (7534.57.2) , Opera 12.02 (Build 1578) , Firefox 16.0.2, IE8.

Issue #1 (occuring in Chrome , Safari and Opera but not in Firefox and IE8):
When clicking quickly (not letting time to tooltip to show) on the hyperlink, it opens the image in a new browser window (no problem so far). When I come back to my original page, the tooltip image is shown (but it shouldnt). In Chrome and Safari, this doesnt occur if we click on the link and quickly move the cursor off the hyperlink (before the new page loads), but it is still annoying for users (note that tooltip should only appear after being hovering the link for 1 sec).

Issue #2 (occuring only in Chrome): when tooltip image is shown and hyperlink in low in browser screen, pop-up is not located where we can fully see it. All other browsers seem to adjust the popping location of the tooltip so we dont have to scroll down to see it (or minimal scroll is required).

maybe those issues are browser limitations, but Im just making sure. Or maybe Q3 2012 has these already resolved?

RadGrid column:

<telerik:GridTemplateColumn HeaderText="" UniqueName="strFieldValue" HeaderStyle-Width="75%" Resizable="true" Reorderable="true">

<ItemTemplate>

<asp:HyperLink ID="hl" Target="_blank" runat="server" Text='<%# Eval("LinkResource")%>' NavigateUrl='<%# Eval("LinkValue")%>'></asp:HyperLink>

</ItemTemplate>

</telerik:GridTemplateColumn>

Conditional Tooltip assignation when data are bound:

protected void RadGrid2_OnItemDataBound(object sender, GridItemEventArgs e)

{

if (e.Item is GridDataItem)

{

Control HyperLink = e.Item.FindControl("hl");

if (((DTO)e.Item.DataItem).LinkValue != "" && ((DTO)e.Item.DataItem).blnIsImage)

{

this.RadToolTipManager1.TargetControls.Add(HyperLink.ClientID, ((DTO)e.Item.DataItem).LinkValue, true);

}

Tooltip setup:

protected void RadToolTipManager_OnAjaxUpdate(object sender, ToolTipUpdateEventArgs args)

{

UpdateToolTip(args.Value, args.UpdatePanel, Page);

}

public void UpdateToolTip(string strVal, UpdatePanel panel, System.Web.UI.Page pg)

{

Control ctrl = pg.LoadControl("ucTooltipContainer.ascx");

panel.ContentTemplateContainer.Controls.Add(ctrl);

ucTooltipContainer details = (ucTooltipContainer)ctrl;

if (strVal != "")

{

details.SetImage(strVal);

}

public void SetImage(string strPath)

{

TooltipImage.ImageUrl = strPath;

}

TooltipManager definition:

<telerik:RadToolTipManager runat="server" ShowDelay="1000" AutoCloseDelay="0" ID="RadToolTipManager1"

RelativeTo="Element" Position="MiddleRight" OnAjaxUpdate="RadToolTipManager_OnAjaxUpdate" Skin="WebBlue"

HideEvent="LeaveTargetAndToolTip" Width="480px" Height="227px">

</telerik:RadToolTipManager>

ToolTip

answered on 14 Dec 2012

1 answer

100 views

radgrid or reporting tools?

Hi,
i want to show my data like on attached image . i want export to excel this data without losing format and appearance and style.
Radgrid or reporting tools? Which one is the best choice?

General Discussions

answered on 14 Dec 2012

1 answer

75 views

Drop down menus of controls within dock don't move with dock

I modified the dock example found the Telerik course (Telerik\RadControlAJAXTutorial\Courseware_Projects\RealEstate\CS\GettingStarted) by adding a dock within RadDockZone2. I have added and populated a combo box inside the dock. When running, I notice that combo box's drop down menu selection stays in place whenever I move the parent dock. Is there a way to change this behavior so that the drop down menu moves along with the dock? See attached *.aspx and *.cs files.

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

<%@ 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 runat="server">

<title>Getting Started</title>

</head>

<body>

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

<asp:ScriptManager ID="ScriptManager1" runat="server">

</asp:ScriptManager>

<div>

<telerik:RadDockZone ID="RadDockZone1" Runat="server" Height="150px"

Orientation="Horizontal" Skin="Outlook" Width="100%">

<telerik:RadDock ID="RadDock1" Runat="server"

Width="150px" Skin="Outlook"

Text="If at first you don't succeed… make sure nobody finds out you tried! - Anonymous"

Title="Quote">

</telerik:RadDock>

<telerik:RadDock ID="RadDock2" Runat="server"

Skin="Outlook" Width="235px" Title="Calendar" DockMode="Docked">

<ContentTemplate>

<telerik:RadCalendar ID="RadCalendar1" Runat="server"

font-names="Arial, Verdana, Tahoma" forecolor="Black"

Skin="Outlook" style="border-color:#ececec">

</telerik:RadCalendar>

</ContentTemplate>

</telerik:RadDock>

</telerik:RadDockZone>

</div>

<table style="width:100%">

<tr>

<td width="40%">

<telerik:RadDockZone ID="RadDockZone2" Runat="server" FitDocks="False"

Height="400px" Skin="Outlook" Width="95%">

<telerik:RadDock ID="RadDock3" Runat="server" Height="184px" Text="This is the dock that you should look at!"

Title="TestDock" Skin="Sunset" DockMode="Docked" Width="100%">

<ContentTemplate>

<telerik:RadComboBox ID="RadComboBox1" Runat="server">

</telerik:RadComboBox>

</ContentTemplate>

</telerik:RadDock>

</telerik:RadDockZone>

</td>

<td>

<telerik:RadSplitter ID="RadSplitter1" Runat="server" Orientation="Horizontal"

Skin="Outlook" Width="100%">

<telerik:RadPane ID="RadPane1" Runat="server" Height="75px">

<asp:LinkButton ID="LinkButton1" runat="server">Telerik</asp:LinkButton>

<br />

<asp:LinkButton ID="LinkButton2" runat="server">Version1</asp:LinkButton>

<br />

<asp:LinkButton ID="LinkButton3" runat="server">Deltek</asp:LinkButton>

</telerik:RadPane>

<telerik:RadSplitBar ID="RadSplitBar1" Runat="server" />

<telerik:RadPane ID="RadPane2" Runat="server"

ContentUrl="http://www.telerik.com">

</telerik:RadPane>

</telerik:RadSplitter>

</td>

</tr>

</table>

<telerik:RadWindowManager ID="RadWindowManager1" runat="server" Skin="Outlook">

<Windows>

<telerik:RadWindow runat="server" Animation="Fade"

Behavior="Resize, Minimize, Close, Maximize, Move, Reload"

Behaviors="Resize, Minimize, Close, Maximize, Move, Reload"

InitialBehavior="None" Left="" NavigateUrl="http://www.Telerik.com"

OpenerElementID="LinkButton1" style="display:none;" Title="Telerik" Top=""

VisibleStatusbar="False">

</telerik:RadWindow>

<telerik:RadWindow runat="server" Animation="FlyIn"

Behavior="Resize, Minimize, Close, Maximize, Move, Reload"

Behaviors="Resize, Minimize, Close, Maximize, Move, Reload"

InitialBehavior="None" Left="" NavigateUrl="http://v1/NCCT/Default.aspx?menu=MyHomeEnterpriseGettingStartedPage"

OpenerElementID="LinkButton2" style="display:none;" Title="NCCT Version1" Top=""

VisibleStatusbar="False">

</telerik:RadWindow>

<telerik:RadWindow runat="server" Animation="Resize"

Behavior="Resize, Minimize, Close, Maximize, Move, Reload"

Behaviors="Resize, Minimize, Close, Maximize, Move, Reload"

InitialBehavior="None" Left="" NavigateUrl="http://deltek:7009/DeltekTC/welcome.msv"

OpenerElementID="LinkButton3" style="display:none;" Title="Deltek" Top=""

VisibleStatusbar="False">

</telerik:RadWindow>

</Windows>

</telerik:RadWindowManager>

</form>

</body>

</html>

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Web.UI;

using System.Web.UI.MobileControls;

using System.Web.UI.WebControls;

namespace GettingStarted

{

public partial class _Default : System.Web.UI.Page

{

protected void Page_Load(object sender, EventArgs e)

{

if (!IsPostBack)

{

var dataSourceList = new List<ComboBoxDataSource>();

dataSourceList.Add(new ComboBoxDataSource("Red", Guid.NewGuid()));

dataSourceList.Add(new ComboBoxDataSource("Orange", Guid.NewGuid()));

dataSourceList.Add(new ComboBoxDataSource("Yellow", Guid.NewGuid()));

dataSourceList.Add(new ComboBoxDataSource("Green", Guid.NewGuid()));

dataSourceList.Add(new ComboBoxDataSource("Blue", Guid.NewGuid()));

dataSourceList.Add(new ComboBoxDataSource("Indigo", Guid.NewGuid()));

dataSourceList.Add(new ComboBoxDataSource("Violet", Guid.NewGuid()));

RadComboBox1.DataTextField = "Name";

RadComboBox1.DataSource = dataSourceList;

RadComboBox1.DataBind();

}

public class ComboBoxDataSource

{

private string _name;

private Guid _id;

public ComboBoxDataSource(string name, Guid id)

{

_name = name;

_id = id;

}

public string Name

{

get { return _name; }

set { _name = value; }

}

public Guid Id

{

get { return _id; }

set { _id = value; }

}

Dock

answered on 14 Dec 2012

9 answers

121 views

Filter DropDown with LoadOnDemand enabled

Hi,

I'm trying to establish a filter-drop-down as described in this demo.
It basically works out BUT as the combo contains > 10k of possible entries, LoadONDemadn became mandatory.

It basicall does work out with the following configuration:

<telerik:GridDropDownColumn DataSourceID="DataSource" ListTextField="name" ListValueField="kID"

DataField="cdf" FilterControlAltText="Filter cdf column" HeaderText="cdf"

SortExpression="cdf" UniqueName="cdf">

<FilterTemplate>

<telerik:RadComboBox ID="RadComboBoxCustomer" DataSourceID="Customers" DataTextField="name"

DataValueField="kID" EnableAutomaticLoadOnDemand="true" AppendDataBoundItems="true"

SelectedValue='<%# ((GridItem)Container).OwnerTableView.GetColumn("cdf").CurrentFilterValue %>'

runat="server" ItemsPerRequest="10" EnableVirtualScrolling="true" OnClientSelectedIndexChanged="TitleIndexChanged" Skin="Metro">

<Items>

<telerik:RadComboBoxItem Text="All" />

</Items>

</telerik:RadComboBox>

<telerik:RadScriptBlock ID="RadScriptBlock1" runat="server">

<script type="text/javascript">

function TitleIndexChanged(sender, args) {

var tableView = $find("<%# ((GridItem)Container).OwnerTableView.ClientID %>");

tableView.filter("cdf", args.get_item().get_value(), "EqualTo");

}

</script>

</telerik:RadScriptBlock>

</FilterTemplate>

</telerik:GridDropDownColumn>

However, when i remove the text in the filter-dropdown (i.e.try to filter for another record). i get a "Parameter cannot be null exception" which is due to the intermediate filter entry having no value, but the filter tries to sort i think?

Is there a way to overcome this issue? Any hint is highly appreciated.

Grid

answered on 14 Dec 2012

1 answer

49 views

RadChart

Hi,

I would like to show radchart like this..

https://docs.google.com/document/d/1ctJSiySo2aXVNoUJKSwZJY_TWgndGUCYxxcowCNNy6U/edit
Please give to me any sample code that radchart will show same like as above.

Thanks in advance.

Chart (Obsolete)

answered on 14 Dec 2012

7 answers

479 views

How to set: RadAjaxPanel Update mode to always

Hello,

Is it possible in AjaxPanel same functionality as Update Panel having update mode=always

    
            <telerik:RadAjaxPanel id="RadAjaxPanel1" runat="server" 
        
                   EnableAJAX= "True"> 
        
                </telerik:RadAjaxPanel>

Thanks,
Amol

General Discussions

answered on 14 Dec 2012

2 answers

146 views

Export To Excel

I want to write custom export to excel function . Is it possible without losing format, appearence and style?

PivotGrid

answered on 14 Dec 2012

2 answers

77 views

Calendar has extra column of dates?

I literally have a page with a script manager a calendar tag and nothing else. There is an extra column in there with weird numbers. Any idea what this is and how to get rid of it? I'm running version 2012.1.411.35

Calendar

answered on 14 Dec 2012

5 answers

755 views

RadCombo and Bootstrap CSS

I am trying to implement Twitters Bootstrap into my web application.
When I add the Bootstrap CSS it screws up the radcombo.

Can you tell me what CSS is doing this?

ComboBox

answered on 14 Dec 2012

1 answer

42 views

appointment disapears after drag and drop on the AllDay row

In javascript, is there a way to keep appointment away from the AllDay row?
eg:
appointment reach AllDay row {
eventArgs.set_cancel(true);
}

Please refer to the PNG files

Scheduler

answered on 14 Dec 2012