Questions on UI for ASP.NET AJAX Forum

1 answer

60 views

Hello,

I want to use the tooltip manager on the dasgboard to maintain the consistency withing grids and charts tooltip.

For chart tooltip works fine but want to use the tooltip manager. Can you please suggest me how it will be possible to use it ?

<telerik:RadToolTipManager ID="RadToolTipManager1" runat="server" Skin="Telerik"

EnableShadow="true" Animation="Resize" HideEvent="ManualClose" Height="70" Width="75"

Position="TopCenter" ToolTipZoneID="rc_CSMD_Average_Response_Time">

</telerik:RadToolTipManager>

Chart (Obsolete)

answered on 14 Apr 2011

1 answer

85 views

Many Dynamic RadComboBox Controls

I am creating dynamic interfaces based on product selection in a Web App. Some interfaces may contain up to 40+ ComboBox's. I created a sample with the RadComboBox and it took 3 to 4 seconds to select an item from the combobox.

Currently I am recreating the controls on postback. Originally i wanted to store them in a collection and re-call from there, but i get a pre-render issue.

General Discussions

answered on 14 Apr 2011

3 answers

152 views

MVC grid features vs. AJAX grid features

I prefer ASP.NET MVC, particularly with Razor, to WebForms. However, if I'm going to attempt to leverage the features of Telerik grids for things like exporting, etc, it appears the MVC grid lags far behind the AJAX grid in terms of functionality.

Case in point: the custom code and reliance on an open source third party project for exporting to ONLY Excel for this MVC grid sample: http://www.telerik.com/support/kb/aspnet-mvc/grid/export-to-excel.aspx vs. the many, built-in export options of the AJAX grid: http://demos.telerik.com/aspnet-ajax/grid/examples/generalfeatures/exporting/defaultcs.aspx

There is also the huge disparity of control availability b/n MVC and AJAX.

In this instance, I don't know why exporting features would have such a disparity, or why the Excel support in the AJAX can't be used in the MVC grid but it looks like if we really want to take advantage of Telerik web client controls, we're better served by using the AJAX platform rather than the MVC platform, which lags far behind.

Am I missing something, or am I correct in concluding the features of the MVC toolset lag way behind the AJAX toolset? This seems strange to me, since I've found it far easier to extend MVC with extension components and helpers than extending WebForms.

Thanks for any comments.

Grid

answered on 14 Apr 2011

2 answers

348 views

[Solved] Hiding expand/collapse arrow on specific panel item

Hi,

I'm trying a PanelBar with four panel items, two static (always expanded) and two expandable/collapsable.
Is it possible to hide the expand/collapse arrow on a specific panel item? (I would hide the arrow on the two panel items that are always expanded).

Regards,
John.

PanelBar

answered on 14 Apr 2011

0 answers

85 views

Composite Control and Intellisense support for enum Property

Hello,

I'm facing the following problem. I'm trying to build a Composite Control that uses Telerik control as child control, I try to create a new Property for this control that can only be Val1, Val2 or Val3.

I've created a enum to list all property values:

public enum MyEnum{Val1,Val2,Val3}

Then I've created a Property in my composite control whose type is MyEnum like this:

public MyEnum? MyControlAttribute

{

get { return (MyEnum?)ViewState["MyControlAttribute"]; }

set { ViewState["MyControlAttribute"] = value; }

}

When I build my library and try to use the composite control, Intellisense don't work as needed. I would like to have Intellisense propose Val1, Val2 or Val3 for the attribute. Is that possible?

<ns:MyCompositeControl ID="ccid" runat="server" MyControlAttribute="...." />

I suppose I missed an attribute on the Property MyControlAttribute, but I don't know which one.

Any help would be appreciated.

Thanks.

Pascal

General Discussions

asked on 14 Apr 2011

1 answer

128 views

Grid Sorting with AjaxManager

When I introduce a RadAjaxManager (which I now need for other reasons) it breaks my Sorting and Paging? Any advice?

<%@ Control Language="vb" AutoEventWireup="false" CodeBehind="Grid.ascx.vb" Inherits="WebDBMS.Grid" %>

<%@ Register assembly="Telerik.Web.UI" namespace="Telerik.Web.UI" tagprefix="telerik" %>

<telerik:RadScriptManager ID="ScriptManager" runat="server" />

<telerik:RadCodeBlock runat="server" ID="RadCodeBlock1">

<script type="text/javascript">

var allowMenu = "<%=AllowMenu%>";

function RowContextMenu(sender, eventArgs) {

if (allowMenu == "True" && __ual == "99") {

var menu = $find("<%=RadMenu1.ClientID %>");

var evt = eventArgs.get_domEvent();

if (evt.target.tagName == "INPUT" || evt.target.tagName == "A") {

return;

}

var index = eventArgs.get_itemIndexHierarchical();

document.getElementById("radGridClickedRowIndex").value = index;

sender.get_masterTableView().selectItem(sender.get_masterTableView().get_dataItems()[index].get_element(), true);

menu.show(evt);

evt.cancelBubble = true;

evt.returnValue = false;

if (evt.stopPropagation) {

evt.stopPropagation();

evt.preventDefault();

}

function RowDblClick(sender, args) {

var grid = sender;

var MasterTable = grid.get_masterTableView();

var row = MasterTable.get_dataItems()[args.get_itemIndexHierarchical()];

var cell = MasterTable.getCellByColumnUniqueName(row, "ID");

if (cell != null) {

var value = cell.innerHTML;

if (__name != null) {

var url = "../Forms/getEditForm.aspx?key=" + __name + "&id=" + value;

winopen(url, null, "toolbar=0,scrollbars=1,location=0,statusbar=1,menubar=0,resizable=1");

}

function OpenClick() {

var grid = $find("<%=QueryRadGrid.ClientID %>");

var MasterTable = grid.get_masterTableView();

var row = MasterTable.get_selectedItems()[0];

if (row != null) {

var cell = MasterTable.getCellByColumnUniqueName(row, "ID");

var value = cell.innerHTML;

var url = "./Forms/getEditForm.aspx?key=" + __name + "&id=" + value;

winopen(url, null, "toolbar=0,scrollbars=1,location=0,statusbar=1,menubar=0,resizable=1");

}

function RepaintGrid() {

var grid = $find("<%= QueryRadGrid.ClientID %>")

grid.repaint();

}

function MassChange(sender, args) { // Customer Corrections Only

var grid = $find("<%=QueryRadGrid.ClientID %>");

var MasterTable = grid.get_masterTableView();

var items = MasterTable.get_selectedItems();

var itemIds = '';

for (var i = 0; i < items.length; i++) {

var row = items[i];

var cell = MasterTable.getCellByColumnUniqueName(row, "ID");

var value = cell.innerHTML;

if (itemIds != '') itemIds += ',';

itemIds += value;

}

if (itemIds != '') {

if (confirm("Perform Mass Change?") == true) {

winopen('../Forms/MassChange.aspx?xx_tranid=' + itemIds, 'MassChange', 'width=800, height=500');

}

return false;

}

</script>

</telerik:RadCodeBlock>

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

<AjaxSettings>

<telerik:AjaxSetting AjaxControlID="QueryRadGrid">

<UpdatedControls>

<telerik:AjaxUpdatedControl ControlID="QueryRadGrid" LoadingPanelID="RadAjaxLoadingPanel1" />

<telerik:AjaxUpdatedControl ControlID="RadMenu1" />

</UpdatedControls>

</telerik:AjaxSetting>

<telerik:AjaxSetting AjaxControlID="RadMenu1">

<UpdatedControls>

<telerik:AjaxUpdatedControl ControlID="QueryRadGrid" LoadingPanelID="RadAjaxLoadingPanel1" />

<telerik:AjaxUpdatedControl ControlID="RadMenu1" />

</UpdatedControls>

</telerik:AjaxSetting>

</AjaxSettings>

</telerik:RadAjaxManager>

<telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" />

<telerik:RadContextMenu ID="RadMenu1" runat="server" OnClientItemClicking="MassChange"

EnableRoundedCorners="true" EnableShadows="true">

<Items>

<telerik:RadMenuItem Text="Mass Change" />

</Items>

</telerik:RadContextMenu>

<input type="hidden" id="radGridClickedRowIndex" name="radGridClickedRowIndex" />

<telerik:RadGrid ID="QueryRadGrid" runat="server" style="width:100%; height:99%; position: absolute;"

Font-Names="Verdana" GridLines="Horizontal" AllowSorting="True" ShowGroupPanel="True"

Skin="Office2007" AllowPaging="True" PageSize="50" AutoPostBack="True">

<MasterTableView>

<HeaderStyle Wrap="false" />

</MasterTableView>

<ClientSettings AllowDragToGroup="True">

<Scrolling UseStaticHeaders="true" AllowScroll="True" SaveScrollPosition="True"/>

<Selecting AllowRowSelect="True" />

<ClientEvents OnRowDblClick="RowDblClick" />

</ClientSettings>

<PagerStyle AlwaysVisible="true" />

<ExportSettings ExportOnlyData="true" IgnorePaging="true"/>

</telerik:RadGrid>

Grid

answered on 14 Apr 2011

1 answer

394 views

OnMouseOver Backgroung color in listview items

I am using a RadListView. now I would like to single item background color on MouseOver and on Mouse Out.now i use a a CSS on mouseover,
<style type="text/css">
.normal { background-color: #000000 }
.normalActive { background-color: #999999 }
</style>

it change colored all item. but i need single item. any solution???

ListView

answered on 14 Apr 2011

2 answers

116 views

[Solved] RadTooltipManager doesn't work

Hi there, I'm rehearsing with AJAX controls, following your CourseWare.
It seems that RadTooltipManager doesn't work...
The tooltips linked to the tblOptions table are displsyed with standard format, while to one created with RadTooltip works correctly

<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="05-UI_1.aspx.vb" Inherits="AjaxProva1._05_UI_1" %>

<%@ 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>AJAX / UI Getting started</title>

</head>

<body>

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

<div>

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

</asp:ScriptManager>

<telerik:RadFormDecorator ID="RadFormDecorator1" runat="server" Skin="Hay" />

<table id="tblOptions" style="width: 100%;">

<tr>

<td style="color: #808000; border-right-style: solid; border-width: thin; border-color: #808000">

Music Styles

</td>

<td style="color: #808000">

Media

</td>

</tr>

<tr>

<td colspan="2">

<hr />

</td>

</tr>

<tr>

<td style="border-right-style: solid; border-width: thin; border-color: #808000"

title="Check all the styles you want to see included in the listing." valign="top">

<asp:CheckBox ID="CheckBox1" runat="server" Text="Classical" />

<br />

<asp:CheckBox ID="CheckBox2" runat="server" Text="Classic Rock" />

<br />

<asp:CheckBox ID="CheckBox3" runat="server" Text="Jazz and Fusion" />

<br />

<asp:CheckBox ID="CheckBox4" runat="server" Text="Rhythm and Blues" />

</td>

<td title="Choose the media you want." valign="top">

<asp:RadioButtonList ID="RadioButtonList1" runat="server">

<asp:ListItem Selected="True">CD</asp:ListItem>

<asp:ListItem>Tape</asp:ListItem>

</asp:RadioButtonList>

</td>

</tr>

</table>

<asp:Button ID="Button1" runat="server" Text="See Listing" />

<telerik:RadToolTipManager ID="RadToolTipManager1" runat="server" Animation="FlyIn"

Skin="Hay" ToolTipZoneID="tblOptions">

</telerik:RadToolTipManager>

<telerik:RadToolTip ID="RadToolTip1" runat="server" ManualClose="True" Position="BottomRight"

RelativeTo="Element" Skin="Hay" TargetControlID="Button1" Title="See Listings">

<asp:Image ID="Image1" runat="server" ImageUrl="~/Images/music.png" />

Click this button to view the listings in our catalog for all the types of music

you have selected.

</telerik:RadToolTip>

</div>

</form>

</body>

</html>

ToolTip

answered on 14 Apr 2011

6 answers

406 views

[Solved] Cell Value within selected row

Hi,

GridView control that is released by Microsoft with VS2005, I can easily get the value of any cell with in the selected row (Server side)

Protected Sub GridView1_SelectedIndexChanged(ByVal sender As Object, ByVal e As System.EventArgs) Handles GridView1.SelectedIndexChanged

Dim ItemValue As String

ItemValue = GridView1.SelectedRow.Cells(1).Text

End Sub

Can I do it using the rad grid control in simlier way.

Please Help me on this...

Thanks

Grid

answered on 13 Apr 2011

2 answers

123 views

[Solved] Position by element issue with client-side tooltipmanager

Hello,

I have a radgrid with a column of thumbnail images (unique per row), and I would like to add a tooltip with the full-size image that shows and hides when the mouse is above the thumbnail.

this can all be done on the client since the thumbnail images are named similarly to the full-size images. So far I have the following code:

my tooltip manager markup:

<telerik:RadToolTipManager ID="slideToolTipMan" runat="server" OffsetY="-1"

ShowEvent="FromCode" OnClientBeforeShow="OnClientBeforeShow"

EnableShadow="true"

Sticky="false"

RelativeTo="Mouse"

Position="MiddleRight">

</telerik:RadToolTipManager>

the itemtemplate of the gridtemplatecolumn in the radgrid

<ItemTemplate>

<img onmouseout='HideSlideToolTip(this);' onmouseover='ShowSlideToolTip(this);' id="thumbnailImg" alt="X" src='...' />

</ItemTemplate>

the relevant javascript code:

function ShowSlideToolTip(element) {

var tooltipManager = $find("<%= slideToolTipMan.ClientID %>");

if (!tooltipManager) return;

var tooltip = tooltipManager.getToolTipByElement(element);

if (!tooltip) {

tooltip = tooltipManager.createToolTip(element);

tooltip.set_position(Telerik.Web.UI.ToolTipPosition.MiddleRight);

// <here I insert content into the tooltip>

tooltip.show();

tooltip.set_autoCloseDelay(0);

tooltip.set_contentElement(imgElement);

}

tooltip.set_position(Telerik.Web.UI.ToolTipPosition.MiddleRight);

}

function OnClientBeforeShow(sender, args) {

sender.set_position(Telerik.Web.UI.ToolTipPosition.MiddleRight);

}

function HideSlideToolTip(element) {

var controller = Telerik.Web.UI.RadToolTipController.getInstance();

var tooltip = controller.get_activeToolTip();

if (tooltip) tooltip.hide();

}

The result doesn't work the way it should... it is very peculiar.

the tooltips tend to show up at like one of three or so places (ie to the "middleRight" of say Row 1, row 4, and row 5)

all of the tooltips show up and display the correct content when hovered over the corresponding target, however where the tooltip is positioned seems almost random.

this is becoming a problem for the usability of the interface, because the tooltip is rendered on top of it's own target, and thus it closes and reopens with every mouse movement (since the mouseout event is fired when the tooltip element is on top of the target element).

I have tried everything i can think of, but it does not seem to cooperate. any help would be much appreciated!

ToolTip

answered on 13 Apr 2011